/*
 * Back-office — habillage AdminLTE.
 *
 * Reprend les codes visuels d'AdminLTE, familiers aux équipes qui gèrent des
 * applications administratives : barre latérale sombre, fond de travail gris
 * clair, cartes blanches à ombre légère, et tuiles de statistiques pleines
 * couleur avec icône en filigrane.
 *
 * L'identité du Ministère est conservée là où elle ne s'oppose pas à ces
 * codes : armoiries dans la marque, vert institutionnel comme couleur
 * d'accent, et le serif du portail sur les titres de page.
 *
 * Écrite à la main et servie telle quelle : le thème Filament officiel
 * exigerait une compilation Vite, impossible en hébergement mutualisé.
 */

@import url("polices.css");

:root {
    --font-family: "Source Sans 3", "Archivo", "Segoe UI", Roboto, system-ui, sans-serif;

    --coop-serif: "EB Garamond", Georgia, serif;
    --coop-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* Gamme AdminLTE */
    --lte-fond: #f4f6f9;
    --lte-barre: #343a40;
    --lte-barre-texte: #c2c7d0;
    --lte-bord: #dee2e6;
    --lte-texte: #212529;
    --lte-tenu: #6c757d;

    /* Accents du Ministère */
    --coop-vert: #0b5d3b;
    --coop-vert-clair: #128455;
    --coop-or: #b98a21;
    --coop-rouge: #8e2318;
    --coop-ardoise: #4f5d56;
}

/* ==================================================================== */
/* Fond de travail                                                      */
/* ==================================================================== */

.fi-body { background: var(--lte-fond); }
.fi-main-ctn { background: transparent; }

/* ==================================================================== */
/* Marque                                                               */
/* ==================================================================== */

.coop-marque {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.coop-marque img {
    width: 2rem;
    height: auto;
    flex: none;
}

.coop-marque-texte {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.coop-marque-titre {
    font-family: var(--coop-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--lte-texte);
    white-space: nowrap;
}

/* La barre latérale fait 250 px : le sous-titre doit tenir sur une ligne. */
.coop-marque-sous-titre {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lte-tenu);
    margin-top: 0.1rem;
    white-space: nowrap;
}

/* Filament borne la hauteur du bloc de marque en style inline ; avec des
   armoiries surmontant deux lignes, le contenu débordait. */
.fi-logo {
    height: auto !important;
    display: flex;
    align-items: center;
}

.dark .coop-marque-titre { color: #f0f3f1; }
.dark .coop-marque-sous-titre { color: #9db0a7; }

/* ==================================================================== */
/* Gabarit : la barre latérale monte jusqu'en haut                       */
/* ==================================================================== */

/* Par défaut, Filament réserve les 4 premiers rem à une barre supérieure
   pleine largeur et fait commencer la latérale en dessous. On inverse :
   la latérale occupe toute la hauteur, la barre supérieure démarre après
   elle — la disposition classique d'AdminLTE. */
@media (min-width: 1024px) {
    /* La latérale est en `position: sticky` dans `.fi-layout`. Tant que la
       barre supérieure occupe 64 px de flux, le layout — et donc la latérale —
       commence sous elle. On sort la barre du flux : le layout remonte, la
       latérale atteint le haut, et le contenu principal compense par une
       marge intérieure. */
    .fi-topbar-ctn {
        position: fixed;
        top: 0;
        inset-inline-start: var(--sidebar-width, 15.625rem);
        inset-inline-end: 0;
        z-index: 30;
    }

    .fi-main-ctn { padding-top: 4rem; }

    /* Filament décale la latérale par `.fi-body-has-topbar .fi-sidebar` :
       le sélecteur d'élément `body` suffit à l'emporter en spécificité. */
    body.fi-body-has-topbar .fi-sidebar {
        top: 0;
        height: 100dvh;
        z-index: 40;
    }

    /* Sur grand écran, Filament masque l'en-tête de la latérale et déplace la
       marque dans la barre supérieure. La latérale montant désormais jusqu'en
       haut, la marque doit y revenir. */
    .fi-sidebar-header { display: flex; }
    .fi-topbar-start .fi-logo { display: none; }
}

/* ==================================================================== */
/* Barre latérale claire                                                */
/* ==================================================================== */

.fi-sidebar,
.fi-sidebar-nav {
    background: #fff;
}

/* Surélevée : une ombre portée plutôt qu'un simple filet, pour que la latérale
   se détache du fond de travail au lieu d'y être posée à plat. */
.fi-sidebar {
    border-inline-end: 0;
    box-shadow:
        1px 0 0 0 rgba(20, 35, 29, 0.06),
        6px 0 16px -4px rgba(20, 35, 29, 0.14),
        14px 0 34px -12px rgba(20, 35, 29, 0.12);
}

/* Le bloc de marque fait exactement la hauteur de la barre supérieure :
   les deux bordures basses s'alignent et forment une seule ligne. */
.fi-sidebar-header {
    height: 4rem;
    background: #fff;
    border-bottom: 1px solid var(--lte-bord);
    box-shadow: none;
    justify-content: flex-start;
}

/* « Direction de la Coopération » doit tenir dans les 250 px de la latérale. */
.fi-sidebar-header .coop-marque { gap: 0.5rem; }
.fi-sidebar-header .coop-marque img { width: 2.15rem; }
.fi-sidebar-header .coop-marque-titre { font-size: 1rem; }

.fi-sidebar-header .coop-marque-sous-titre {
    font-size: 0.52rem;
    letter-spacing: 0.07em;
}

.fi-sidebar-group-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--lte-tenu);
    padding-inline: 0.25rem;
}

.fi-sidebar-group-collapse-btn { color: var(--lte-tenu); }

.fi-sidebar-item-btn { border-radius: 0.25rem; }

.fi-sidebar-item .fi-sidebar-item-label,
.fi-sidebar-item .fi-icon {
    color: #4a5560;
}

.fi-sidebar-item-label {
    font-size: 0.875rem;
    font-weight: 400;
}

/* Survol : le vert du Ministère en aplat léger. */
.fi-sidebar-item-btn:hover { background: #e8f2ed; }

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-icon {
    color: var(--coop-vert);
}

/* Entrée active : aplat vert plein, comme la variante « sidebar-light » d'AdminLTE. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--coop-vert);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover { background: var(--coop-vert); }

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover .fi-icon {
    color: #fff;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label { font-weight: 500; }

.fi-sidebar-item.fi-active .fi-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ==================================================================== */
/* Barre supérieure sombre                                              */
/* ==================================================================== */

/* .fi-topbar porte directement l'élément <nav> : le viser lui, pas un enfant. */
.fi-topbar {
    background: var(--lte-barre);
    border-bottom: 0;
    box-shadow: none;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-icon-btn .fi-icon,
.fi-topbar .fi-icon {
    color: rgba(255, 255, 255, 0.78);
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-icon-btn:hover .fi-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Champ de recherche : creusé dans la barre plutôt que posé dessus. */
.fi-topbar .fi-input-wrp {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    outline: 1px solid rgba(255, 255, 255, 0.18);
}

.fi-topbar .fi-input-wrp:focus-within {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
}

.fi-topbar .fi-input { color: #fff; }
.fi-topbar .fi-input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* Le déclencheur du menu utilisateur porte l'avatar : on éclaircit son cadre. */
.fi-topbar .fi-dropdown-trigger .fi-avatar { outline: 2px solid rgba(255, 255, 255, 0.2); }

/* ==================================================================== */
/* Titres de page                                                       */
/* ==================================================================== */

.fi-header-heading {
    font-family: var(--coop-serif);
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.01em;
    color: var(--lte-texte);
}

.fi-header-subheading {
    font-size: 0.875rem;
    color: var(--lte-tenu);
}

/* ==================================================================== */
/* Cartes                                                               */
/* ==================================================================== */

/* AdminLTE : blanc, coins peu arrondis, ombre franche mais courte. */
.fi-section,
.fi-ta-ctn,
.fi-wi-chart,
.fi-fo-component-ctn > .fi-section {
    background: #fff;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Les « small box » se posent à même le fond de travail : la carte blanche
   qui les enveloppait ajoutait un cadre dont AdminLTE se passe. */
.fi-wi-stats-overview .fi-section {
    background: transparent;
    box-shadow: none;
}

.fi-wi-stats-overview .fi-section-header {
    border-bottom: 0;
    padding-bottom: 0.35rem;
}

.fi-section-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding-bottom: 0.85rem;
}

.fi-section-header-heading {
    font-family: var(--coop-serif);
    font-size: 1.2rem;
    font-weight: 600;
}

/* ==================================================================== */
/* Tuiles de statistiques — les « small box » d'AdminLTE                */
/* ==================================================================== */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    background: var(--boite, var(--coop-ardoise));
    color: #fff;
}

.fi-wi-stats-overview-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.9rem 1.1rem 0;
}

/* AdminLTE annonce le nombre avant son intitulé : c'est le chiffre qu'on
   vient chercher. */
.fi-wi-stats-overview-stat-value {
    order: 1;
    font-family: var(--coop-serif);
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

.fi-wi-stats-overview-stat-label-ctn {
    order: 2;
    margin-top: 0.35rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.94rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.92);
}

/* L'icône passe en filigrane dans le coin, comme sur une small box. */
.fi-wi-stats-overview-stat-label-ctn > .fi-icon,
.fi-wi-stats-overview-stat-label-ctn > svg {
    position: absolute;
    top: 0.4rem;
    right: 0.55rem;
    width: 4.6rem;
    height: 4.6rem;
    color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* La description devient le bandeau de pied, sur fond légèrement assombri. */
.fi-wi-stats-overview-stat-description {
    order: 3;
    margin: 0.9rem -1.1rem 0;
    padding: 0.3rem 1.1rem;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.88) !important;
}

.fi-wi-stats-overview-stat-description .fi-icon,
.fi-wi-stats-overview-stat-description svg {
    color: rgba(255, 255, 255, 0.88);
    width: 1rem;
    height: 1rem;
}

/* Teintes des tuiles, posées par ->extraAttributes() côté PHP. */
.boite-vert { --boite: var(--coop-vert); }
.boite-vert-clair { --boite: var(--coop-vert-clair); }
.boite-or { --boite: var(--coop-or); }
.boite-rouge { --boite: var(--coop-rouge); }
.boite-ardoise { --boite: var(--coop-ardoise); }
.boite-encre { --boite: #14231d; }

/* ==================================================================== */
/* Tableaux                                                             */
/* ==================================================================== */

.fi-ta-header-cell-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lte-texte);
}

.fi-ta-header-cell { background: #fff; }

.fi-ta-row:hover { background: rgba(0, 0, 0, 0.02); }

.fi-ta-text-item-label { font-variant-numeric: tabular-nums; }

.fi-ta-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.fi-ta-header-heading {
    font-family: var(--coop-serif);
    font-size: 1.2rem;
    font-weight: 600;
}

/* ==================================================================== */
/* Écran de connexion                                                   */
/* ==================================================================== */

.fi-simple-layout { background: var(--lte-fond); }

.fi-simple-main {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 0;
}

.fi-simple-layout .fi-logo {
    justify-content: center;
    margin-bottom: 1.4rem;
}

.fi-simple-layout .coop-marque {
    flex-direction: column;
    text-align: center;
    gap: 0.55rem;
}

.fi-simple-layout .coop-marque img { width: 3.8rem; }
.fi-simple-layout .coop-marque-texte { align-items: center; }
.fi-simple-layout .coop-marque-titre { font-size: 1.3rem; }

/* ==================================================================== */
/* Espaces thématiques : liste des fils et fil de discussion            */
/* ==================================================================== */

.coop-etiquette {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: #e8f2ed;
    color: var(--coop-vert);
    margin-inline-end: 0.4rem;
}

.coop-etiquette-neutre {
    background: transparent;
    color: var(--lte-tenu);
    border: 1px solid var(--lte-bord);
}

.coop-etiquette-alerte { background: #fbe4e0; color: var(--coop-rouge); }

.coop-etiquettes { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.coop-espace-entete { margin-bottom: 1.25rem; }

.coop-espace-objectifs {
    margin: 0.7rem 0 0;
    color: var(--lte-tenu);
    font-size: 0.9rem;
    max-width: 70ch;
}

/* --- Liste des fils -------------------------------------------------- */

.coop-fils {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.coop-fil + .coop-fil { border-top: 1px solid rgba(0, 0, 0, 0.08); }

.coop-fil > a {
    display: block;
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
}

.coop-fil > a:hover { background: #f6f9f7; }

/* Les fils épinglés portent la structure de l'espace : on les distingue. */
.coop-fil-epingle > a { background: #fdfaf1; }
.coop-fil-epingle > a:hover { background: #fbf5e6; }

.coop-fil-titre {
    font-family: var(--coop-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--lte-texte);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.coop-marqueur { color: var(--coop-or); }

.coop-fil-extrait {
    margin: 0.3rem 0 0;
    color: var(--lte-tenu);
    font-size: 0.9rem;
}

.coop-fil-pied {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--lte-tenu);
}

.coop-sep { margin-inline: 0.4rem; opacity: 0.5; }

/* --- Fil de discussion ------------------------------------------------ */

.coop-discussion-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.coop-retour {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--coop-vert);
    text-decoration: none;
}

.coop-retour::before { content: "← "; }
.coop-retour:hover { text-decoration: underline; }

.coop-messages { list-style: none; margin: 0; padding: 0; }

.coop-message {
    display: flex;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.coop-message + .coop-message { margin-top: 0.7rem; }

/* Le message d'origine porte la question : un filet le distingue des réponses. */
.coop-message-origine { border-inline-start: 3px solid var(--coop-vert); }

.coop-message-avatar {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

/* Deux teintes : on voit d'un coup d'œil qui parle au nom du Ministère. */
.coop-avatar-minproff { background: var(--coop-vert); }
.coop-avatar-partenaire { background: #0f6d63; }

.coop-message-corps { min-width: 0; flex: 1; }

.coop-message-entete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.coop-message-date {
    font-size: 0.76rem;
    color: var(--lte-tenu);
    margin-inline-start: auto;
}

.coop-message-texte {
    color: var(--lte-texte);
    font-size: 0.94rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.coop-vide {
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    padding: 1.75rem;
    text-align: center;
    color: var(--lte-tenu);
}

.coop-vide h3 {
    font-family: var(--coop-serif);
    font-size: 1.15rem;
    color: var(--lte-texte);
    margin: 0 0 0.4rem;
}

.coop-vide p { margin: 0; font-size: 0.9rem; }

@media print {
    .fi-sidebar, .fi-topbar { display: none; }
}