/* ===== COLYSEE — styles de l'application ===== */
/* Les jetons de couleur vivent dans tokens.css, chargé avant celui-ci. */


/* --- Base --- */
* { box-sizing: border-box; }

body {
    font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Fond blanc franc : les deux halos en dégradé de l'ancienne charte
       n'ont plus lieu d'être. Un dégradé sur un fond blanc ne se voit pas,
       et il coûte un repaint à chaque défilement. */
    background-color: var(--fond-page);
    color: var(--slate-700);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* Les titres portent la voix de la charte : Spectral, la serif que la
   DILA emploie sur les publications de l'État. Le texte courant reste en
   Public Sans — un empattement à 14 px fatigue sur un écran de saisie. */
h1, h2, h3 {
    font-family: Spectral, Georgia, 'Times New Roman', serif;
    color: var(--slate-900); letter-spacing: -0.005em; font-weight: 700;
}

/* Les liens de l'État sont soulignés : c'est ce qui les rend
   reconnaissables sans dépendre de la seule couleur. */
a { color: var(--indigo-600); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--indigo-700); }
/* Sauf ceux qui sont déjà des zones cliquables entières */
.n-bar a, .n-nav a, .n-ligne, .n-ligne a, .btn, .n-b, .n-go, .tab,
.n-pied a:hover, nav a { text-decoration: none; }
.n-pied a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Container principal --- */
.container {
    max-width: 1300px;
    margin: auto;
    background: #ffffff;
    padding: 32px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    /* Pas d'ombre : ce conteneur est le fond de la page, il ne flotte
       au-dessus de rien. Son filet suffit à le délimiter. */
    margin-bottom: 50px;
}

/* --- Logo --- */
.logo-site {
    height: auto;
    max-height: 80px;
    width: auto;
    max-width: 150px;
    margin-right: 20px;
}

/*
 * Logo de l'application, posé à côté de celui de l'établissement.
 * Aucune hauteur n'est fixée ici volontairement : chaque page définit
 * déjà une règle contextuelle (.doc-header img, .brand img…) plus
 * spécifique, qui aligne donc automatiquement les deux logos.
 */
.logo-colysee {
    border-radius: 0;
    vertical-align: middle;
}

/* --- Tableaux --- */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    overflow: hidden;
}
th {
    background: var(--indigo-600);
    color: #fff;
    padding: 12px 12px;
    font-size: 0.72em;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--slate-100);
    font-size: 0.9em;
    color: var(--slate-700);
}
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--slate-50); }
tbody tr:last-child td { border-bottom: none; }

/* --- Inputs & Selects --- */
input, select {
    padding: 9px 10px;
    border: 1px solid var(--trait-commande);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-size: 0.9em;
    color: var(--slate-800);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--texte-faible); }
input:focus, select:focus {
    outline: none;
    border-color: var(--indigo-500);
    box-shadow: var(--ring);
}

/* --- Boutons --- */
.btn {
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    color: #fff;
    /* Supprime le délai de 300 ms au tap sur mobile */
    touch-action: manipulation;
    min-height: 40px;
}
/* Écrans tactiles : cible d'au moins 44px (WCAG / HIG) */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Fonds assez foncés pour un texte blanc ≥ 4.5:1 (WCAG AA) */
.btn-add    { background: var(--success-fg); }
.btn-add:hover    { background: #166534; }
.btn-ok     { background: var(--success-fg); }
.btn-ok:hover     { background: #166534; }
.btn-ko     { background: var(--danger); }
.btn-ko:hover     { background: var(--danger-fg); }
.btn-nav    { background: var(--slate-700); }
.btn-nav:hover    { background: var(--slate-800); }
.btn-global { background: var(--purple); }
.btn-global:hover { background: var(--purple-fg); }
.btn-validate { background: var(--warning-fg); }
.btn-validate:hover { background: var(--warning-fg); }
.btn-login  { background: var(--indigo-600); }
.btn-login:hover { background: var(--indigo-700); }

/* Boutons-icônes discrets (colonnes d'actions) */
.act-btn {
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--slate-200); border-radius: 0;
    color: var(--slate-500); cursor: pointer; box-shadow: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    touch-action: manipulation;
}
.act-btn svg { width: 16px; height: 16px; }
.act-btn + .act-btn { margin-left: 6px; }
.act-btn.act-save:hover { border-color: var(--indigo-500); color: var(--indigo-600); background: var(--indigo-50); }
.act-btn.act-key:hover  { border-color: var(--indigo-500); color: var(--indigo-600); background: var(--indigo-50); }
.act-btn.act-del:hover  { border-color: var(--danger);     color: var(--danger-fg); background: var(--danger-bg); }
.act-btn:focus-visible { outline: none; box-shadow: var(--ring); }
@media (pointer: coarse) { .act-btn { width: 40px; height: 40px; } }

/* --- Badges de statut --- */
.status-badge,
.status {
    padding: 4px 12px;
    border-radius: 0;
    font-size: 0.75em;
    font-weight: 600;
    display: inline-block;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
}
.status-en-attente { background-color: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-bd); }
.status-validé     { background-color: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.status-refusé     { background-color: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-bd); }
.status-traité      { background-color: var(--indigo-50);  color: var(--indigo-700); border-color: var(--indigo-100); }

/* --- Toast notifications --- */
#toast-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    padding: 13px 18px 13px 16px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--slate-800);
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--slate-200);
    border-left: 4px solid var(--slate-400);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.3s, transform 0.3s;
    max-width: 340px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--indigo-600); }
.toast.warning { border-left-color: var(--warning); }

/* --- Barre utilisateur --- */
.user-bar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 12px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.user-info { margin-right: 20px; font-size: 0.9em; color: var(--texte-faible); }
.user-info strong { color: #fff; }
.btn-logout {
    background-color: var(--danger); color: #fff;
    border: none; padding: 7px 15px;
    border-radius: var(--radius-sm); cursor: pointer;
    font-weight: 600; margin-left: 10px;
    transition: background 0.15s, transform 0.12s;
}
.btn-logout:hover { background-color: var(--danger-fg); transform: translateY(-1px); }

/* --- Signature footer --- */
.footer-signature {
    position: fixed;
    bottom: 15px;
    right: 20px;
    font-size: 0.75em;
    color: var(--texte-faible);
    letter-spacing: 0.5px;
}

/* --- Titres de section --- */
h2.section-title {
    margin-top: 40px;
    color: var(--slate-900);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Icônes --- */
svg { flex-shrink: 0; }

/* Pastille d'icône — style plat moderne : fond teinté pâle + icône en trait
   dans la couleur saturée de la section. Une couleur par section, sans dégradé
   ni ombre colorée. */
.ico-chip {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: var(--indigo-50);
    color: var(--indigo-600);
    display: inline-grid;
    place-items: center;
    flex: none;
}
.ico-chip svg { width: 20px; height: 20px; display: block; }

/* Variantes de couleur (fond pâle + icône saturée) */
/*
 * Pastilles d'icône. La charte de l'État n'use pas de pastilles pastel :
 * les six variantes convergent vers le bleu France, sauf celles qui
 * portent un statut (alerte, succès) — là, la couleur est l'information.
 */
.ico-chip.c-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.ico-chip.c-violet { background: var(--indigo-50); color: var(--indigo-600); }
.ico-chip.c-blue   { background: var(--indigo-50); color: var(--indigo-600); }
.ico-chip.c-pink   { background: var(--indigo-50); color: var(--indigo-600); }
.ico-chip.c-amber  { background: var(--warning-bg); color: var(--warning-fg); }
.ico-chip.c-green  { background: var(--success-bg); color: var(--success-fg); }

/* Petit chip (titres de page compacts) */
.ico-chip.sm { width: 32px; height: 32px; border-radius: 0; }
.ico-chip.sm svg { width: 18px; height: 18px; }

h1 svg, h2 svg { vertical-align: middle; }
.btn svg { width: 16px; height: 16px; }

/* --- Respect du réglage « réduire les animations » --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .btn-logout:hover, .btn-back:hover { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   REFONTE 2026 — socle commun aux pages migrées
   Classes préfixées « n- » : elles n'entrent en collision avec rien
   de l'existant, ce qui permet une bascule page par page.
   ═══════════════════════════════════════════════════════════════════ */

/* — Barre supérieure : identité, actions, navigation — */
.n-bar {
    position: sticky; top: 0; z-index: 900;
    display: grid; gap: 0; padding: 0 34px;
    border-bottom: 1px solid var(--trait);
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

/*
 * Le filet tricolore : la signature de la charte.
 * Trois bandes de 3 px au-dessus de la barre, posées en ::before plutôt
 * qu'ajoutées au balisage — la barre est répétée sur quatorze pages, et
 * un élément décoratif n'a rien à faire dans le HTML de chacune.
 */
.n-bar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    /* Trois aplats, pas un dégradé : les arrêts sont nets (33,33 % et
       66,66 %), aucune transition de couleur n'est calculée. À conserver
       tel quel — c'est la seule façon de peindre trois bandes dans un
       pseudo-élément unique. */
    background: linear-gradient(to right,
        var(--indigo-600) 0, var(--indigo-600) 33.33%,
        #FFFFFF 33.33%, #FFFFFF 66.66%,
        var(--marianne) 66.66%, var(--marianne) 100%);
}
.n-haut {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 14px 0 12px;
    border-bottom: 1px solid var(--trait-clair);
    min-height: 65px;
}
/* Séparateur entre les écrans de direction et les écrans personnels.
   La direction enseigne aussi : ses deux rôles cohabitent dans la barre,
   autant qu'ils se distinguent à l'œil. */
.n-sep { width: 1px; height: 20px; background: var(--trait); margin: 0 4px; flex: none; }
.n-nav .ici { color: var(--indigo-600); font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--indigo-600); }
.n-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.n-compte {
    display: inline-flex; align-items: center; min-height: 34px;
    max-width: 260px; padding: 7px 12px;
    color: var(--slate-800); font-size: 12.5px; font-weight: 700;
    border: 1px solid var(--trait); background: var(--slate-50);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.n-compte:hover { color: var(--indigo-600); border-color: var(--trait-commande); background: #fff; }
.n-compte.ici { border-color: var(--indigo-600); background: var(--indigo-50); color: var(--indigo-700); }

.n-marque { display: flex; align-items: center; gap: 11px; min-width: 0; }
.n-marque img { height: 38px; width: auto; }
.n-ident {
    display: flex; flex-direction: column; gap: 1px;
    padding-left: 13px; border-left: 1px solid var(--slate-300);
    min-width: 0;
}
.n-ident b {
    font-size: 14.5px; font-weight: 600; color: var(--slate-900);
    line-height: 1.2; letter-spacing: -0.005em;
    max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.n-ident span { font-size: 11.5px; color: var(--texte-second); }
.n-nav {
    display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
    min-height: 52px; padding: 10px 0 11px; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin;
}
.n-nav a {
    font-size: 12.5px; color: var(--slate-600); text-decoration: none;
    padding: 8px 11px; border: 1px solid transparent; border-radius: 0;
    line-height: 1.2; white-space: nowrap; flex: 0 0 auto;
}
.n-nav a:hover { background: var(--slate-50); border-color: var(--trait); color: var(--slate-900); }
.n-nav a.ici { background: var(--slate-900); border-color: var(--slate-900); color: #fff; font-weight: 600; box-shadow: none; }
.n-sortie {
    min-height: 34px; background: #fff; border: 1px solid var(--trait-commande); color: var(--slate-600);
    padding: 7px 12px; border-radius: 0; font: inherit; font-size: 12.5px;
    cursor: pointer;
}
.n-sortie:hover { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-fg); }

/* — Corps de page — */
.n-corps { width: 100%; max-width: 1000px; margin: 0 auto; padding: 42px 34px 40px; }
.n-fil { font-size: 12px; color: var(--texte-faible); margin: 0 0 10px; }
.n-fil a { color: var(--slate-500); text-decoration: none; }
.n-eyebrow {
    font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--texte-faible); margin: 0 0 12px; font-weight: 500;
}

/* — Le titre dit l'état, pas le nom de la page — */
.n-etat {
    font-family: Spectral, 'Inter', system-ui, sans-serif;
    font-size: 36px; line-height: 1.13; font-weight: 600;
    letter-spacing: -0.015em; color: var(--slate-900);
    margin: 0 0 8px; max-width: 22em;
}
.n-etat em { font-style: normal; color: var(--indigo-600); }
.n-sous { font-size: 14px; color: var(--slate-500); margin: 0 0 28px; max-width: 52em; }

/* — Tampon : l'état accompli — */
.n-tampon {
    display: inline-block; border: 2px solid var(--indigo-600); color: var(--indigo-600);
    font-family: Spectral, Georgia, serif; font-weight: 600;
    font-size: 15px; letter-spacing: 0.16em; padding: 7px 16px 6px;
    border-radius: 0; transform: rotate(-3.5deg); opacity: 0.78;
    margin: 6px 0 28px 4px;
}

/* — Registre : marge chiffrée, contenu, action — */
.n-registre { border-top: 1px solid var(--trait); }
.n-ligne {
    display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 0 24px; align-items: center; padding: 30px 4px;
    border-bottom: 1px solid var(--trait); text-decoration: none; color: inherit;
}
.n-ligne:hover { background: rgba(255,255,255,0.5); }
.n-chiffre {
    font-family: Spectral, Georgia, serif; font-size: 38px; font-weight: 600;
    font-variant-numeric: tabular-nums; line-height: 1; text-align: right;
    color: var(--warning-fg);
}
.n-chiffre.zero { color: var(--texte-faible); }
.n-clab {
    font-size: 10.5px; color: var(--texte-faible); text-align: right;
    margin-top: 5px; letter-spacing: 0.02em;
}
.n-titre { font-size: 15.5px; font-weight: 600; color: var(--slate-900); margin: 0 0 4px; }
.n-soust { font-size: 13px; color: var(--texte-second); margin: 0; }

/* — Action principale d'une ligne — */
.n-go {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; min-width: 216px; padding: 0 24px; border-radius: 0;
    background: var(--indigo-600); color: #fff; font-size: 14.5px; font-weight: 600;
    white-space: nowrap; box-shadow: var(--shadow-sm); border: none;
    font-family: inherit; cursor: pointer;
}
.n-ligne:hover .n-go, .n-go:hover { background: var(--indigo-700); }
.n-go .fl { font-size: 16px; opacity: 0.75; }

/* — Fonction annoncée mais pas encore ouverte — */
.n-ligne.bientot { cursor: default; }
.n-ligne.bientot:hover { background: transparent; }
.n-ligne.bientot .n-titre, .n-ligne.bientot .n-soust { color: var(--texte-faible); }
.n-attente {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; min-width: 216px; padding: 0 24px; border-radius: 0;
    border: 1px dashed var(--slate-300); background: transparent;
    color: var(--texte-faible); font-size: 14px; font-weight: 500; white-space: nowrap;
}

/* — Tuiles de total — */
.n-repart { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 30px; }
.n-r {
    flex: 0 0 auto; min-width: 186px; padding: 15px 20px; border-radius: 0;
    border: 1px solid var(--slate-200); background: rgba(255,255,255,0.72);
}
.n-r b {
    display: block; font-family: Spectral, Georgia, serif; font-size: 27px;
    font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--slate-900);
}
.n-r span {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; color: var(--texte-second); margin-top: 8px;
}
.n-r i { width: 9px; height: 9px; border-radius: 0; background: #0369a1; font-style: normal; flex: none; }
.n-r.pacte { border-color: #FBDFA6; background: rgba(254,243,199,0.5); }
.n-r.pacte b { color: var(--warning-fg); }
.n-r.pacte i { background: var(--warning-fg); }

/* — Boutons de la refonte — */
.n-b {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--indigo-600); color: #fff; border: 1px solid var(--indigo-600);
    padding: 11px 19px; border-radius: 0; font: inherit; font-size: 13.5px;
    font-weight: 600; cursor: pointer;
}
.n-b:hover { background: var(--indigo-700); border-color: var(--indigo-700); }
.n-b.fant { background: rgba(255,255,255,0.7); color: var(--slate-700); border-color: var(--trait-commande); }
.n-b.fant:hover { background: #fff; border-color: var(--indigo-500); color: var(--indigo-600); }
.n-b svg { width: 15px; height: 15px; }
.n-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }

.n-pied {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-top: 32px; font-size: 12.5px; color: var(--texte-second);
}
.n-pied a { color: var(--slate-600); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.n-pied a:hover { color: var(--indigo-600); }

@media (prefers-reduced-motion: no-preference) {
    .n-etat, .n-registre { animation: n-monte 0.45s cubic-bezier(.2,.7,.3,1) both; }
    .n-registre { animation-delay: 0.06s; }
    @keyframes n-monte { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
    .n-tampon { animation: n-tampon 0.5s cubic-bezier(.2,.8,.3,1) both; }
    @keyframes n-tampon {
        from { opacity: 0; transform: rotate(-14deg) scale(1.5); }
        to   { opacity: 0.78; transform: rotate(-3.5deg) scale(1); }
    }
}

@media (max-width: 720px) {
    .n-bar { padding: 0 16px; }
    .n-haut { align-items: flex-start; flex-direction: column; gap: 12px; min-height: 0; }
    .n-bar-actions { justify-content: flex-start; width: 100%; overflow-x: auto; }
    .n-ident b { max-width: calc(100vw - 138px); }
    .n-compte { max-width: calc(100vw - 126px); }
    .n-nav { min-height: 52px; padding-bottom: 12px; }
    .n-sep { width: 1px; min-width: 1px; }
    .n-corps { padding: 28px 18px 32px; }
    .n-etat { font-size: 27px; }
    .n-ligne { grid-template-columns: 68px minmax(0, 1fr); gap: 12px 16px; padding: 20px 2px; }
    .n-chiffre { font-size: 28px; }
    .n-go, .n-attente { grid-column: 1 / -1; min-width: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SOCLE COMMUN — règles écrites à l'identique dans plusieurs pages
   ═══════════════════════════════════════════════════════════════════════

   Ajouté le 24 août 2026. Ces quarante-deux règles étaient dupliquées
   mot pour mot dans deux pages ou plus. Aucune n'a été modifiée en
   remontant ici : leur corps est celui qu'elles avaient partout.

   La duplication n'était pas un défaut d'écriture. Elle vient de la façon
   dont ces pages sont nées — l'une après l'autre, chacune reprenant par
   copie ce qui marchait dans la précédente. Le coût n'apparaît qu'au
   premier changement de charte : il faut alors retrouver toutes les
   copies, et celle qu'on oublie reste visible.

   Ce qui n'est PAS monté ici : vingt-cinq sélecteurs portant le même nom
   mais un corps différent selon la page — « .vide », « .card », « body »,
   entre autres. Les fusionner aurait demandé de choisir entre des valeurs
   qui divergent, ce qui est une décision de mise en forme, pas une
   réorganisation. Ils restent dans leur page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barre supérieure des écrans d'administration ── */

.admin-topbar { position: sticky; top: 0; z-index: 900; background: #FFFFFF; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--slate-200); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-topbar .brand { display: flex; align-items: center; gap: 14px; }
.admin-topbar .brand h1 { font-size: 1.15rem; margin: 0; color: var(--slate-900); letter-spacing: -0.01em; }
.admin-topbar .brand img { height: 40px; width: auto; }
.admin-topbar .brand img.logo-colysee { height: 52px; }
.admin-topbar .brand small { display: block; font-size: 0.75rem; color: var(--texte-second); font-weight: 500; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.topbar-actions .active { opacity: 0.55; cursor: default; }

/* ── Sections et filtres ── */

.container { max-width: 1100px; margin: 28px auto 70px; background: transparent; border: none; box-shadow: none; padding: 0 24px; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.filter-bar { background: none; border: none; padding: 0; }
.section { background: none; border: none; box-shadow: none; padding: 0; margin-bottom: 34px; }
.section h2 { font-family: Spectral, Georgia, serif; font-size: 1.1rem; border-bottom: 1px solid var(--trait); padding: 0 0 12px; margin: 0 0 18px; }

/* ── Tableaux du portail ── */

.n-corps table { border: none; border-radius: 0; }
.n-corps tbody tr:hover td { background: #FFFFFF; }
.n-corps td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--trait-clair); font-size: 13.5px; background: none; }
.n-corps th { background: none; background-image: none; color: var(--texte-faible); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; font-weight: 600; padding: 0 12px 9px 0; border-bottom: 1px solid var(--trait); }

/* ── Facturation : tuiles, tableau, pastilles ── */

.bt:hover { background: var(--slate-900); color: #FFF; }
.fx-ch b { display: block; font-family: Spectral, Georgia, serif; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--slate-900); }
.fx-ch span { display: block; font-size: .7rem; color: var(--texte-second); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.fx-ch.du b { color: var(--indigo-600); }
.fx-ch.regle b { color: var(--success-fg); }
.fx-ch.retard { border-color: #FCA5A5; background: rgba(254,226,226,.4); }
.fx-ch.retard b { color: var(--danger-fg); }
.fx-chiffres { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.fx-sous { color: var(--slate-500); font-size: .9rem; margin: 0 0 24px; }
.fx-tab .num { font-variant-numeric: tabular-nums; text-align: right; }
.fx-tab .numero { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--slate-900); }
.fx-tab tbody tr:hover { background: var(--slate-50, #F8FAFC); }
.fx-titre { font-family: Spectral, Georgia, serif; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.015em; color: var(--slate-900); margin: 0 0 4px; }
.puce.emise { color: var(--indigo-600); border-color: var(--indigo-600); background: rgba(0,0,145,.06); }
.puce.reglee { color: var(--success-fg); border-color: #86EFAC; background: rgba(220,252,231,.5); }
.puce.retard { color: var(--danger-fg); border-color: #FCA5A5; background: rgba(254,226,226,.5); }

/* ── Messagerie et échanges ── */

.btn-echange { background:var(--indigo-50); color:var(--indigo-600); border:1px solid var(--indigo-500); border-radius: 0; padding:3px 9px; font-size:0.74rem; font-weight:700; cursor:pointer; }
.btn-echange:hover { background:var(--indigo-100); }
.fil-vide { color:var(--slate-500); font-size:0.82rem; margin:4px 0; }
.msg-au { background:#ecfdf5; border:1px solid #d1fae5; align-self:flex-end; }
.msg-sa { background:var(--indigo-50); border:1px solid var(--indigo-100); align-self:flex-start; }
.msg-tete { font-size:0.7rem; color:var(--texte-second); font-weight:700; margin-bottom:2px; }
.msg-txt { color:var(--slate-800); white-space:pre-wrap; }

/* ── Champs et boutons ── */

.btn[disabled] { opacity:.55; cursor:not-allowed; }
.champ label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }