/* =====================================================
   OSEP — Outils de Suivi & Évaluation des Projets
   Surcouche thématique : Ministère du Numérique du Sénégal
   Importé après app.scss et adminto.scss → écrase l'existant.

   NOTE : la police "Plus Jakarta Sans" est chargée via un <link> dans
   templates/base.html.twig (et non via @import url() ici). En effet,
   un @import url(...) en milieu de bundle est invalide CSS et provoque
   la suppression silencieuse de TOUTES les règles qui suivent par
   cssnano en mode production.
   ===================================================== */

:root {
  /* Bleu institutionnel */
  --osep-navy-900: #061A33;
  --osep-navy-800: #0A2A52;
  --osep-navy-700: #13386A;
  --osep-navy-600: #1E4A85;
  --osep-navy-100: #E5ECF7;
  --osep-navy-50:  #F0F4FB;

  /* Or institutionnel */
  --osep-gold-500: #C9A659;
  --osep-gold-400: #D9BC7A;
  --osep-gold-300: #E5CE99;
  --osep-gold-50:  #FBF6E8;

  /* Tricolore Sénégal */
  --osep-sn-green:  #00853F;
  --osep-sn-yellow: #FDEF42;
  --osep-sn-red:    #E31B23;

  /* Encre & lignes */
  --osep-ink-900: #0E1A33;
  --osep-ink-700: #34425E;
  --osep-ink-500: #6B7A99;
  --osep-ink-300: #A9B3C7;
  --osep-line:    #E2E7F1;
  --osep-line-soft:#EEF1F7;
  --osep-bg:      #F4F6FB;

  /* Statuts */
  --osep-success-soft:#E5F4EC;
  --osep-warn:        #E08A00;
  --osep-warn-soft:   #FBEFD9;
  --osep-danger-soft: #FCE8EA;

  /* Ombres */
  --osep-shadow-sm: 0 1px 2px rgba(10, 42, 82, .04);
  --osep-shadow-md: 0 4px 16px -8px rgba(10, 42, 82, .12);
  --osep-shadow-lg: 0 24px 64px -24px rgba(10, 42, 82, .25);

  /* Police */
  --osep-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Override des tokens kplan existants pour ne pas casser le legacy */
  --kplan-font-sans: var(--osep-font);

  /* Override Bootstrap → primary devient navy OSEP */
  --bs-primary: var(--osep-navy-800);
  --bs-primary-rgb: 10, 42, 82;
  --bs-link-color: var(--osep-navy-700);
  --bs-link-hover-color: var(--osep-navy-800);
}

/* Police globale */
body, .navbar, .topnav, .kplan-link, .btn, .form-control, .table, .card, .dropdown-menu {
  font-family: var(--osep-font);
  -webkit-font-smoothing: antialiased;
}

/* =========================
   Bandeau tricolore (toujours en haut)
   ========================= */
.osep-tricolore {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  display: flex;
  z-index: 1080;
  pointer-events: none;
}
.osep-tricolore > span { flex: 1; }
.osep-tricolore .g { background: var(--osep-sn-green); }
.osep-tricolore .y { background: var(--osep-sn-yellow); }
.osep-tricolore .r { background: var(--osep-sn-red); }

/* =========================
   Bandeau gouvernemental
   ========================= */
.osep-gov-bar {
  position: fixed;
  top: 3px; left: 0; right: 0;
  background: var(--osep-navy-900);
  color: #fff;
  padding: 6px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  z-index: 1070;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.osep-gov-bar .gov-left { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); }
.osep-gov-bar .gov-left i { color: var(--osep-gold-400); }
.osep-gov-bar .gov-right { display: flex; gap: 18px; color: rgba(255,255,255,.65); }
.osep-gov-bar a { color: inherit; text-decoration: none; }
.osep-gov-bar a:hover { color: var(--osep-gold-400); }

/* Décale le contenu sous les bandeaux */
body { padding-top: 33px !important; }

/* =========================
   Marque OSEP (logo)
   ========================= */
.osep-mark {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--osep-navy-800), var(--osep-navy-700));
  color: var(--osep-gold-400);
  font-weight: 800; font-size: 15px; letter-spacing: .5px;
  box-shadow: 0 6px 14px -6px rgba(10, 42, 82, .5),
              inset 0 0 0 1px rgba(201, 166, 89, .35);
  font-family: var(--osep-font);
}
.osep-brand { display: flex; align-items: center; gap: 12px; }
.osep-brand-name {
  font-weight: 800; font-size: 18px; letter-spacing: -.2px; line-height: 1.1;
  color: var(--osep-ink-900);
}
.osep-brand-name small {
  display: block; font-weight: 500; font-size: 11px;
  color: var(--osep-ink-500); margin-top: 2px; letter-spacing: 0;
}

/* =========================
   Navbar (haut de page authentifiée)
   ========================= */
.navbar-custom {
  background: #fff !important;
  border-bottom: 1px solid var(--osep-line);
  box-shadow: var(--osep-shadow-sm);
  min-height: 70px;
}
.navbar-custom .topnav-menu .nav-link.waves-effect:hover {
  color: var(--osep-navy-800) !important;
}
.navbar-custom .logo-box {
  background: transparent !important;
}
.navbar-custom .app-search .form-control {
  background: var(--osep-navy-50) !important;
  border: 1px solid var(--osep-line) !important;
  border-radius: 12px !important;
  font-family: var(--osep-font);
  font-size: 13.5px;
}
.navbar-custom .noti-icon {
  color: var(--osep-ink-700) !important;
  font-size: 18px;
}
.navbar-custom .noti-icon-badge {
  background: var(--osep-sn-red) !important;
}

/* =========================
   Topnav horizontale (menu principal)
   ========================= */
.topnav.kplan-topnav {
  background: #fff;
  border-bottom: 1px solid var(--osep-line);
  box-shadow: none;
}
.kplan-link {
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--osep-ink-700) !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s ease, border-color .15s ease !important;
  background: transparent !important;
  box-shadow: none !important;
}
.kplan-link i { color: var(--osep-ink-500); opacity: .85; }
.kplan-link:hover {
  color: var(--osep-navy-800) !important;
  background: transparent !important;
}
.kplan-link.active,
.kplan-link[aria-current="page"] {
  background: transparent !important;
  color: var(--osep-navy-800) !important;
  border-bottom-color: var(--osep-gold-500) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.kplan-link.active i,
.kplan-link[aria-current="page"] i { color: var(--osep-gold-500); opacity: 1; }

/* Dropdowns du topnav */
.kplan-dropdown {
  border-radius: 14px !important;
  border: 1px solid var(--osep-line) !important;
  box-shadow: var(--osep-shadow-md) !important;
}
.kplan-dropdown .dropdown-item {
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--osep-ink-700);
}
.kplan-dropdown .dropdown-item:hover {
  background: var(--osep-navy-50) !important;
  color: var(--osep-navy-800) !important;
}
.kplan-dropdown-title { color: var(--osep-navy-800) !important; font-weight: 700; }
.kplan-cta {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700;
  box-shadow: 0 8px 18px -10px rgba(10, 42, 82, .5);
}
.kplan-cta i { color: var(--osep-gold-400); }

/* =========================
   Boutons (Bootstrap btn-primary)
   ========================= */
.btn-primary {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  border-color: var(--osep-navy-800) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(10, 42, 82, .35);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--osep-navy-800) !important;
  border-color: var(--osep-navy-800) !important;
  transform: translateY(-1px);
}
.btn-outline-primary {
  color: var(--osep-navy-800) !important;
  border-color: var(--osep-navy-700) !important;
}
.btn-outline-primary:hover {
  background: var(--osep-navy-800) !important;
  color: #fff !important;
}
.btn-gold {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900) !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 8px 18px -10px rgba(201, 166, 89, .55);
}
.btn-gold:hover { transform: translateY(-1px); }

/* =========================
   Badges & Pills colorés OSEP
   ========================= */
.badge.bg-primary { background: var(--osep-navy-800) !important; }
.badge.bg-primary-subtle { background: var(--osep-navy-100) !important; color: var(--osep-navy-800) !important; }
.badge.bg-gold { background: var(--osep-gold-500); color: var(--osep-navy-900); }
.badge.bg-gold-subtle { background: var(--osep-gold-50); color: #8a6b29; }

/* =========================
   Cartes
   ========================= */
.card {
  border: 1px solid var(--osep-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--osep-shadow-sm);
}
.kpi-card { border-radius: 14px !important; }

/* =========================
   Inputs
   ========================= */
.form-control:focus, .form-select:focus {
  border-color: var(--osep-navy-700) !important;
  box-shadow: 0 0 0 4px rgba(19, 56, 106, .08) !important;
}

/* =========================
   Login page
   ========================= */
.osep-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  font-family: var(--osep-font);
  color: var(--osep-ink-900);
  background: var(--osep-bg);
}
.osep-login .osep-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(201,166,89,.18), transparent 60%),
    radial-gradient(700px 400px at -10% 100%, rgba(30,74,133,.45), transparent 60%),
    linear-gradient(160deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 60%, var(--osep-navy-700) 100%);
}
.osep-login .osep-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-login .hero-content { position: relative; z-index: 1; max-width: 520px; margin-top: 6vh; }
.osep-login .hero-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.osep-login .gov-seal {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--osep-gold-300), var(--osep-gold-500) 60%, #8a6b29 100%);
  display: grid; place-items: center; color: var(--osep-navy-900);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.35);
}
.osep-login .gov-seal i { font-size: 22px; }
.osep-login .gov-text .rep { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--osep-gold-300); font-weight: 700; }
.osep-login .gov-text .min { font-size: 14px; font-weight: 600; color: #fff; }

.osep-login .badge-pill-gold {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(201,166,89,.12); color: var(--osep-gold-300);
  border: 1px solid rgba(201,166,89,.35);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.osep-login .badge-pill-gold .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--osep-gold-400); box-shadow: 0 0 0 3px rgba(201,166,89,.18);
}
.osep-login h1 {
  font-size: 56px; line-height: 1.05; font-weight: 800;
  margin: 18px 0 14px; letter-spacing: -1.5px;
}
.osep-login h1 .accent {
  background: linear-gradient(90deg, var(--osep-gold-300), var(--osep-gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.osep-login p.lead {
  font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 480px;
}
.osep-login .hero-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px;
}
.osep-login .feat {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.osep-login .feat .ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(201,166,89,.2), rgba(201,166,89,.05));
  color: var(--osep-gold-300); flex-shrink: 0;
}
.osep-login .feat .t { font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.osep-login .feat .d { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.45; }
.osep-login .hero-foot {
  position: relative; z-index: 1; font-size: 12px;
  color: rgba(255,255,255,.5);
  display: flex; justify-content: space-between; align-items: center;
}

.osep-login .form-panel {
  display: flex; align-items: center; justify-content: center; padding: 48px 24px;
  position: relative;
}
.osep-login .login-card {
  width: 100%; max-width: 440px;
  background: #fff; border: 1px solid var(--osep-line); border-radius: 18px;
  padding: 40px 38px; box-shadow: var(--osep-shadow-md);
  position: relative;
}
.osep-login .v-bar {
  position: absolute; left: 0; top: 32px; bottom: 32px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--osep-gold-500), var(--osep-gold-300), transparent);
}
.osep-login .brand-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.osep-login .welcome { font-size: 26px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.3px; }
.osep-login .welcome-sub { color: var(--osep-ink-500); font-size: 14px; margin: 0 0 26px; }

.osep-login .field { margin-bottom: 16px; }
.osep-login .field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--osep-ink-700); margin-bottom: 6px;
}
.osep-login .input {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--osep-line); border-radius: 11px; background: #fff;
  padding: 12px 14px; transition: all .2s ease;
}
.osep-login .input:focus-within {
  border-color: var(--osep-navy-700);
  box-shadow: 0 0 0 4px rgba(19,56,106,.08);
}
.osep-login .input i { color: var(--osep-ink-300); font-size: 14px; }
.osep-login .input input {
  flex: 1; border: none; outline: none;
  font-size: 14.5px; color: var(--osep-ink-900);
  background: transparent; font-family: inherit;
}
.osep-login .input .toggle { color: var(--osep-ink-300); cursor: pointer; font-size: 13px; }

.osep-login .row-between {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 0 22px;
}
.osep-login .check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--osep-ink-700); user-select: none; cursor: pointer;
}
.osep-login .check input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--osep-ink-300); border-radius: 4px;
  display: grid; place-items: center; cursor: pointer; transition: all .15s;
}
.osep-login .check input:checked { background: var(--osep-navy-800); border-color: var(--osep-navy-800); }
.osep-login .check input:checked::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free", "Material Design Icons";
  font-weight: 900; color: #fff; font-size: 9px;
}
.osep-login .link {
  font-size: 13px; color: var(--osep-navy-700); font-weight: 600; text-decoration: none;
}
.osep-login .link:hover { color: var(--osep-navy-800); text-decoration: underline; }
.osep-login .btn-primary-osep {
  width: 100%; padding: 13px 16px; border-radius: 11px;
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: .2px;
  border: none;
  box-shadow: 0 10px 22px -10px rgba(10,42,82,.5);
  transition: transform .15s ease, box-shadow .2s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; font-family: inherit;
}
.osep-login .btn-primary-osep:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(10,42,82,.55);
}
.osep-login .btn-primary-osep .gold { color: var(--osep-gold-400); }
.osep-login .footer-mini {
  text-align: center; font-size: 12px; color: var(--osep-ink-500);
  margin-top: 26px; line-height: 1.6;
}
.osep-login .footer-mini a { color: var(--osep-navy-700); font-weight: 600; }

@media (max-width: 960px) {
  .osep-login { grid-template-columns: 1fr; }
  .osep-login .osep-hero { display: none; }
}

/* =========================
   Footer
   ========================= */
footer.footer-fluid, footer.osep-footer {
  background: #fff !important;
  border-top: 1px solid var(--osep-line) !important;
}
.osep-footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px; font-size: 12.5px; color: var(--osep-ink-500);
}
.osep-footer-inner a { color: var(--osep-navy-700); text-decoration: none; }
.osep-footer-inner a:hover { color: var(--osep-navy-800); }

/* =========================
   Pré-loader (couleur)
   ========================= */
#preloader .spinner { color: var(--osep-navy-800); }

/* =========================
   En-tête de page OSEP
   (à utiliser dans dashboard, projects, programs…)
   ========================= */
.osep-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0 22px;
  font-family: var(--osep-font);
}
.osep-page-head .crumbs {
  font-size: 12.5px;
  color: var(--osep-ink-500);
  margin-bottom: 6px;
}
.osep-page-head .crumbs a {
  color: var(--osep-ink-500);
  text-decoration: none;
}
.osep-page-head .crumbs a:hover { color: var(--osep-navy-800); }
.osep-page-head .crumbs i {
  font-size: 9px;
  margin: 0 8px;
  color: var(--osep-ink-300);
}
.osep-page-head .crumbs .here {
  color: var(--osep-ink-900);
  font-weight: 600;
}
.osep-page-head h1, .osep-page-head .h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0;
  color: var(--osep-ink-900);
  line-height: 1.2;
}
.osep-page-head h1 i, .osep-page-head .h1 i {
  color: var(--osep-gold-500);
  margin-right: 8px;
}
.osep-page-head .sub {
  color: var(--osep-ink-500);
  font-size: 13.5px;
  margin-top: 4px;
}
.osep-page-head .head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.osep-page-head .head-actions .form-select,
.osep-page-head .head-actions .form-control {
  border-radius: 10px;
  border: 1px solid var(--osep-line);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--osep-font);
  background-color: #fff;
  min-width: 130px;
}
.osep-page-head .meta-pills {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.osep-page-head .meta-pills .badge {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .02em;
}

/* Sections KPI : titres "Projets / Structures / Finances" plus institutionnels */
.osep-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--osep-font);
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--osep-ink-700) !important;
  background: transparent !important;
  padding: 16px 4px 10px !important;
  border-bottom: 1px solid var(--osep-line);
  border-radius: 0 !important;
  margin-bottom: 14px !important;
}
.osep-section-title i {
  color: var(--osep-gold-500);
  font-size: 16px;
}
.osep-section-title .count {
  margin-left: auto;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}

/* =========================
   Hero d'un projet (carte d'en-tête)
   ========================= */
.osep-project-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px 14px 0 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 22px 24px !important;
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
}
.osep-project-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-project-hero > * { position: relative; z-index: 1; }

.osep-project-hero .hero-toprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.osep-project-hero .hero-id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.osep-project-hero .hero-acronym {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(201,166,89,.5);
}
.osep-project-hero .hero-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.osep-project-hero .hero-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.osep-project-hero .hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.osep-project-hero .hero-actions .btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 9px !important;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.osep-project-hero .hero-actions .btn:hover {
  background: rgba(255,255,255,.16);
}
.osep-project-hero .hero-actions .dropdown-menu {
  background: #fff;
  color: var(--osep-ink-900);
}
.osep-project-hero .hero-actions .dropdown-menu .dropdown-item { color: var(--osep-ink-700); }

/* Mini stats (KPI compactes dans le hero) */
.osep-stat-mini {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  padding: 10px 12px;
  height: 100%;
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
}
.osep-stat-mini .lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.osep-stat-mini .lbl i { color: var(--osep-gold-400); }
.osep-stat-mini .val {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.1px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.osep-stat-mini .val a { color: #fff; }
.osep-stat-mini .val a:hover { color: var(--osep-gold-300); }
.osep-stat-mini .val .badge {
  background: rgba(201,166,89,.18) !important;
  color: var(--osep-gold-300) !important;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
}
.osep-stat-mini .sub {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}
.osep-stat-mini .gold-text { color: var(--osep-gold-300) !important; }

/* =========================
   Tabs OSEP (override nav-pills tout en gardant le data-bs-toggle="tab")
   ========================= */
.nav-pills.osep-tabs {
  border-bottom: 1px solid var(--osep-line);
  border-radius: 0;
  background: transparent !important;
  padding: 0 4px;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-pills.osep-tabs .nav-item { flex: 0 1 auto; }
.nav-pills.osep-tabs .nav-link {
  background: transparent !important;
  color: var(--osep-ink-700) !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: all .15s ease;
  font-family: var(--osep-font);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-pills.osep-tabs .nav-link i { color: var(--osep-ink-500); opacity: .9; }
.nav-pills.osep-tabs .nav-link:hover {
  color: var(--osep-navy-800) !important;
  background: var(--osep-navy-50) !important;
}
.nav-pills.osep-tabs .nav-link.active {
  color: var(--osep-navy-800) !important;
  background: transparent !important;
  border-bottom-color: var(--osep-gold-500) !important;
  font-weight: 700;
}
.nav-pills.osep-tabs .nav-link.active i { color: var(--osep-gold-500); opacity: 1; }

/* =========================
   Offcanvas OSEP — anti-collision avec le topbar
   ========================= */
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-top,
.offcanvas.offcanvas-bottom {
  z-index: 1055;
}
.offcanvas.offcanvas-end {
  top: 70px;
  height: calc(100vh - 70px);
}
.offcanvas .offcanvas-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--osep-line, #E2E8F0);
  padding: 14px 16px;
}
.offcanvas .offcanvas-header .btn-close {
  margin-left: auto;
  flex-shrink: 0;
}

/* =========================
   Modal de formulaire OSEP — composantes, activités, etc.
   ========================= */
.osep-form-modal .modal-dialog-scrollable {
  height: calc(100% - 1rem);
}
.osep-form-modal .modal-dialog-scrollable .modal-content {
  max-height: 100%;
}
.osep-form-modal .modal-content {
  /* Bootstrap gère overflow:hidden via .modal-dialog-scrollable.
     On ne le surcharge pas ici pour ne pas bloquer le scroll. */
  border-radius: 0.75rem;
}
.osep-form-modal .modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 240px);
}
.osep-form-modal .osep-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--osep-bg, #F8FAFC) 100%);
  border-bottom: 1px solid var(--osep-line, #E2E8F0);
  position: relative;
}
.osep-form-modal .osep-modal-head::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--osep-sn-green, #00853F) 0 33.33%,
    var(--osep-sn-yellow, #FDEF42) 33.33% 66.66%,
    var(--osep-sn-red, #E31B23) 66.66% 100%);
}
.osep-form-modal .osep-modal-head .ic {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--osep-navy-900, #0A2A52);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 12px -4px rgba(10, 42, 82, 0.4);
  position: relative;
}
.osep-form-modal .osep-modal-head .ic::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 2px;
  background: var(--osep-gold-500, #C9A659);
  border-radius: 1px;
}
.osep-form-modal .osep-modal-head .body { flex: 1; min-width: 0; }
.osep-form-modal .osep-modal-head h4 {
  margin: 0;
  font-size: 16px; font-weight: 800;
  color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -0.01em;
}
.osep-form-modal .osep-modal-head .sub {
  margin: 2px 0 0 0;
  font-size: 12px; color: var(--osep-ink-500, #64748B);
}
.osep-form-modal .osep-modal-head .btn-close {
  margin-left: 8px;
  flex-shrink: 0;
}

.osep-form-modal .osep-modal-hint {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: var(--osep-navy-50, #EEF3FB);
  border-left: 3px solid var(--osep-gold-500, #C9A659);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: var(--osep-ink-700, #334155); line-height: 1.5;
}
.osep-form-modal .osep-modal-hint .ic {
  font-size: 18px; color: var(--osep-navy-900, #0A2A52);
  flex-shrink: 0; margin-top: 1px;
}
.osep-form-modal .osep-modal-hint strong { color: var(--osep-navy-900, #0A2A52); }

.osep-form-modal .osep-modal-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--osep-line-soft, #EEF2F7);
}
.osep-form-modal .osep-modal-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.osep-form-modal .osep-modal-section-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px 0;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--osep-navy-900, #0A2A52);
  position: relative;
}
.osep-form-modal .osep-modal-section-title > i:first-child {
  color: var(--osep-gold-500, #C9A659);
  font-size: 16px;
}
.osep-form-modal .osep-inherit-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  background: linear-gradient(135deg, #FFF7E0 0%, #F7E8B8 100%);
  border: 1px solid #E8C870;
  border-radius: 99px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: none;
  color: #8C6F2A;
}
.osep-form-modal .osep-inherit-pill i {
  color: #B7913D !important;
  font-size: 11px;
}

.osep-form-modal .form-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--osep-ink-700, #334155);
  margin-bottom: 5px;
}
.osep-form-modal .form-control,
.osep-form-modal .form-select {
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 8px;
  font-size: 13px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.osep-form-modal .form-control:focus,
.osep-form-modal .form-select:focus {
  border-color: var(--osep-gold-500, #C9A659);
  box-shadow: 0 0 0 3px rgba(201, 166, 89, .18);
}
.osep-form-modal .form-control:disabled {
  background: var(--osep-bg, #F8FAFC);
  color: var(--osep-ink-500, #64748B);
  border-style: dashed;
}
.osep-form-modal .form-text {
  font-size: 11px;
  color: var(--osep-ink-500, #64748B);
  margin-top: 3px;
}

/* TomSelect override inside OSEP form modal */
.osep-form-modal .ts-control {
  border: 1px solid var(--osep-line, #E2E8F0) !important;
  border-radius: 8px !important;
  font-size: 13px;
  min-height: 38px;
}
.osep-form-modal .ts-wrapper.focus .ts-control {
  border-color: var(--osep-gold-500, #C9A659) !important;
  box-shadow: 0 0 0 3px rgba(201, 166, 89, .18) !important;
}

/* =========================
   Sous-onglets OSEP — variante compacte (pills arrondies dans une carte fond clair)
   Utilisée notamment pour Suivi vs Responsable dans Suivi-Évaluation
   ========================= */
.nav-pills.osep-subtabs {
  background: linear-gradient(180deg, #ffffff 0%, var(--osep-bg) 100%);
  border: 1px solid var(--osep-line-soft);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  box-shadow: 0 1px 2px -1px rgba(15,23,42,.06);
}
.nav-pills.osep-subtabs .nav-item { flex: 0 0 auto; }
.nav-pills.osep-subtabs .nav-link {
  background: transparent !important;
  color: var(--osep-ink-500) !important;
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  border: 0 !important;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--osep-font);
  letter-spacing: .01em;
  cursor: pointer;
}
.nav-pills.osep-subtabs .nav-link:hover:not(.active):not(:disabled) {
  color: var(--osep-navy-800) !important;
  background: var(--osep-navy-50) !important;
}
.nav-pills.osep-subtabs .nav-link.active {
  background: var(--osep-navy-900) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px -2px rgba(10, 42, 82, 0.4), inset 0 0 0 1.5px var(--osep-gold-500);
}
.nav-pills.osep-subtabs .nav-link.active i { color: var(--osep-gold-300) !important; }
.nav-pills.osep-subtabs .nav-link:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.osep-subtab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--osep-line-soft);
  color: var(--osep-ink-500);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}
.osep-subtab-badge.gold {
  background: linear-gradient(135deg, #FFF7E0, #F2DFA0);
  color: #8C6F2A;
}
.nav-pills.osep-subtabs .nav-link.active .osep-subtab-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.nav-pills.osep-subtabs .nav-link.active .osep-subtab-badge.gold {
  background: var(--osep-gold-500);
  color: var(--osep-navy-900);
}

/* =========================
   Bloc d'info éditable (champ + label + icône)
   ========================= */
.osep-info-block {
  background: var(--osep-bg);
  border: 1px solid var(--osep-line-soft);
  border-radius: 12px;
  padding: 14px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all .15s ease;
}
.osep-info-block:hover {
  background: #fff;
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-sm);
}
.osep-info-block .ic {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.osep-info-block .body { flex: 1; min-width: 0; }
.osep-info-block .body .lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  font-weight: 700;
  margin-bottom: 4px;
}
.osep-info-block .body .val,
.osep-info-block .body .editable,
.osep-info-block .body .editable-select2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--osep-ink-900);
  text-decoration: none;
}
.osep-info-block .body .editable:hover,
.osep-info-block .body .editable-select2:hover {
  color: var(--osep-navy-800);
  border-bottom: 1px dashed var(--osep-navy-700);
}

/* Bloc équipe (responsable / chargé de suivi) */
.osep-team-block {
  background: var(--osep-bg);
  border: 1px solid var(--osep-line-soft);
  border-radius: 12px;
  padding: 16px;
  height: 100%;
}
.osep-team-block .team-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.osep-team-block .team-head i {
  color: var(--osep-gold-500);
  font-size: 16px;
}
.osep-team-block .team-head h6 {
  font-size: 11px;
  font-weight: 700;
  color: var(--osep-ink-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}
.osep-team-block .team-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.osep-team-block .team-body img {
  border: 2px solid #fff;
  box-shadow: var(--osep-shadow-sm);
}
.osep-team-block .team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--osep-ink-900);
  flex: 1;
  min-width: 0;
}
.osep-team-block .team-empty {
  color: var(--osep-ink-500);
  font-style: italic;
  font-size: 13px;
}
.osep-team-block .team-edit-btn.btn-primary {
  border-radius: 8px !important;
  padding: 5px 10px;
  font-size: 12px;
}

/* Bloc objectifs */
.osep-objectives-card {
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  background: #fff;
}
.osep-objectives-card .objective-item {
  background: var(--osep-bg) !important;
  border: 1px solid var(--osep-line-soft) !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
  transition: all .15s ease;
}
.osep-objectives-card .objective-item:hover {
  background: #fff !important;
  border-color: var(--osep-navy-100) !important;
}
.osep-objectives-card .editable-objective {
  color: var(--osep-ink-900);
  font-size: 13.5px;
  text-decoration: none;
}
.osep-objectives-card .editable-objective i { color: var(--osep-gold-500) !important; }

/* Description Quill */
.osep-description-card {
  border: 1px solid var(--osep-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.osep-description-card #projectDescription {
  border: 1px solid var(--osep-line-soft) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  background: var(--osep-bg) !important;
  font-size: 13.5px;
  color: var(--osep-ink-900);
}

/* Action bar (en bas du détail projet) */
.action-bar {
  background: #fff;
  border-top: 1px solid var(--osep-line);
  border-radius: 0 0 14px 14px;
  padding: 12px 18px;
  box-shadow: 0 -4px 12px -8px rgba(10,42,82,.08);
}

/* =========================
   Sidebar projet (latérale gauche)
   ========================= */
.osep-side-menu {
  background: #fff !important;
  border: 1px solid var(--osep-line) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}

/* Wrapper du card-body dans la sidebar — neutralise le rounded-4 par défaut */
.osep-side-menu.card-body { padding: 8px !important; }

/* Mode simple (list-group) */
.osep-side-menu nav ul.list-group {
  gap: 2px;
}
.osep-side-menu .list-group-item {
  border: none !important;
  padding: 2px !important;
  background: transparent !important;
}
.osep-side-menu .list-group-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: var(--osep-ink-700) !important;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all .15s ease;
  position: relative;
}
.osep-side-menu .list-group-item > a > i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  color: var(--osep-ink-500);
  opacity: .85;
  margin: 0 !important;
}
.osep-side-menu .list-group-item > a > span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: inherit;
}
.osep-side-menu .list-group-item > a:hover {
  background: var(--osep-navy-50) !important;
  color: var(--osep-navy-800) !important;
}
.osep-side-menu .list-group-item > a:hover > i { color: var(--osep-navy-700); opacity: 1; }

/* État actif : surclasse le `bg-light border rounded` du Twig */
.osep-side-menu .list-group-item > a.bg-light,
.osep-side-menu .list-group-item > a.osep-active {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 14px -8px rgba(10, 42, 82, .45);
}
.osep-side-menu .list-group-item > a.bg-light::before,
.osep-side-menu .list-group-item > a.osep-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--osep-gold-500);
}
.osep-side-menu .list-group-item > a.bg-light > i,
.osep-side-menu .list-group-item > a.osep-active > i {
  color: var(--osep-gold-400) !important;
  opacity: 1;
}

/* Annule les classes utilitaires text-purple/text-warning/text-primary/etc.
   sur les icônes pour leur appliquer un ton neutre cohérent (sauf actif) */
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active) > i.text-purple,
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active) > i.text-warning,
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active) > i.text-primary,
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active) > i.text-success,
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active) > i.text-danger,
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active) > i.text-info {
  color: var(--osep-ink-500) !important;
}
.osep-side-menu .list-group-item > a:not(.bg-light):not(.osep-active):hover > i {
  color: var(--osep-navy-700) !important;
}

/* =========================
   Mode timeline (workflow)
   ========================= */
.osep-side-menu .bsb-timeline-2 {
  --bsb-tl-color: var(--osep-line);
  --bsb-tl-circle-color: var(--osep-navy-100);
  --bsb-tl-circle-size: 34px;
  --bsb-tl-circle-offset: 17px;
  padding: 8px 8px 8px 24px !important;
}
.osep-side-menu .bsb-timeline-2 .timeline:after {
  background-color: var(--osep-line);
  width: 2px;
}
.osep-side-menu .timeline-icon {
  background: #fff !important;
  border: 2px solid var(--osep-line) !important;
  box-shadow: var(--osep-shadow-sm);
  transition: all .2s ease;
}
.osep-side-menu .timeline-icon i { color: var(--osep-ink-500) !important; font-size: 16px; }

/* État actif (statut courant) */
.osep-side-menu .timeline-icon.bg-primary {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500)) !important;
  border-color: var(--osep-gold-500) !important;
  box-shadow: 0 6px 16px -6px rgba(201, 166, 89, .55);
}
.osep-side-menu .timeline-icon.bg-primary i { color: var(--osep-navy-900) !important; }

/* État complété (étape passée) */
.osep-side-menu .timeline-icon.bg-primary-subtle {
  background: var(--osep-navy-50) !important;
  border-color: var(--osep-navy-100) !important;
}
.osep-side-menu .timeline-icon.bg-primary-subtle i { color: var(--osep-navy-700) !important; }

/* Carte d'étape */
.osep-side-menu .timeline-content > .card {
  border: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.osep-side-menu .timeline-content .h5 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--osep-ink-700) !important;
  text-transform: capitalize;
  letter-spacing: -.1px;
  text-decoration: none !important;
}
.osep-side-menu .timeline-content .h5.link-primary {
  color: var(--osep-navy-800) !important;
}
.osep-side-menu .timeline-content .h5:hover {
  color: var(--osep-gold-500) !important;
}
.osep-side-menu .timeline-content .font-11 {
  font-size: 11px !important;
  color: var(--osep-ink-500) !important;
  font-weight: 600;
}

/* Pointeur "Vous êtes ici" */
.osep-side-menu .timeline-content .position-absolute.text-danger {
  color: var(--osep-gold-500) !important;
}

/* Bouton "Détails des évaluations" / "Interfaces de pilotage" */
.osep-side-menu .timeline-content .btn.btn-link,
.osep-side-menu .timeline-content .btn.collapsed,
.osep-side-menu .timeline-content .btn.text-muted {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none !important;
  color: var(--osep-ink-500) !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--osep-line-soft) !important;
  border-radius: 0 !important;
  margin-top: 8px;
}
.osep-side-menu .timeline-content .btn.btn-link {
  color: var(--osep-navy-800) !important;
}
.osep-side-menu .timeline-content .btn .collapse-icon {
  color: var(--osep-ink-500);
  transition: transform .2s ease;
}

/* Liste des metrics évaluation */
.osep-side-menu .timeline-content .list-group-item {
  background: transparent !important;
  padding: 6px 0 !important;
  border: none !important;
  border-bottom: 1px dashed var(--osep-line-soft) !important;
}
.osep-side-menu .timeline-content .list-group-item:last-child { border-bottom: none !important; }
.osep-side-menu .timeline-content .list-group-item .font-11 {
  color: var(--osep-ink-700) !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
}
.osep-side-menu .timeline-content .list-group-item .fa-check-circle.text-success {
  color: var(--osep-sn-green) !important;
}
.osep-side-menu .timeline-content .list-group-item .fa-exclamation-circle.text-warning {
  color: var(--osep-warn) !important;
}

/* Sous-menu "Interfaces de pilotage" — réutilise le style list-group simple */
.osep-side-menu .timeline-content ul.list-group.bg-transparent {
  margin-top: 6px !important;
  gap: 2px;
}

/* =========================
   Dashboard d'un projet (sections + KPIs)
   ========================= */

/* Cartes des KPI (avancement, absorption, décisions, etc.) */
.kpi-card.card.bg-light-subtle,
.kpi-card.bg-light-subtle {
  background: #fff !important;
  border: 1px solid var(--osep-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--osep-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kpi-card.card.bg-light-subtle:hover,
.kpi-card.bg-light-subtle:hover {
  border-color: var(--osep-navy-100) !important;
}

/* Grand chiffre dans les KPI cards */
.kpi-card .display-6 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.6px !important;
  line-height: 1.1 !important;
  font-family: var(--osep-font);
}
.kpi-card .display-6.text-primary { color: var(--osep-navy-800) !important; }
.kpi-card .display-6.text-success { color: var(--osep-sn-green) !important; }
.kpi-card .display-6.text-danger  { color: var(--osep-red, #E31B23) !important; }
.kpi-card .display-6.text-warning { color: var(--osep-warn) !important; }
.kpi-card .text-muted {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--osep-ink-500) !important;
}

/* Barres de progression des KPIs */
.kpi-card .progress {
  background: var(--osep-line-soft) !important;
  border-radius: 4px !important;
}
.kpi-card .progress-bar.bg-primary {
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-navy-600)) !important;
}
.kpi-card .progress-bar.bg-success {
  background: var(--osep-sn-green) !important;
}
.kpi-card .progress-bar.bg-soft-primary {
  background: var(--osep-navy-100) !important;
}

/* Section h5 du dashboard projet — uniformiser sur osep-section-title */
section[id^="rb-"] > .card > .card-body > .d-flex > div > h5,
section[id^="rb-"] > .card > .card-body > h5,
section[id^="rb-"] > .card > .card-body > div > h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--osep-ink-700) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--osep-line);
  font-family: var(--osep-font);
}
section[id^="rb-"] > .card > .card-body > .d-flex > div > h5 i,
section[id^="rb-"] > .card > .card-body > h5 i,
section[id^="rb-"] > .card > .card-body > div > h5 i {
  color: var(--osep-gold-500) !important;
  font-size: 16px;
  margin-right: 8px !important;
}
/* Sous-titres meta des sections */
section[id^="rb-"] .text-muted.small {
  font-size: 12px !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--osep-ink-500) !important;
  font-weight: 500;
}

/* Animations d'entrée des sections (déjà dans le CSS d'origine) — laisser passer */
section.section-enter { scroll-margin-top: 100px; }

/* Boutons "Exporter" dans les sections */
section[id^="rb-"] .btn-outline-primary.rounded-pill {
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12px;
  font-weight: 600;
}

/* =========================
   Action bar : scrollspy nav (bas de page dashboard projet)
   ========================= */
.osep-scrollspy-nav {
  background: #fff;
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: none !important;
}
.osep-scrollspy-nav ul.nav-pills {
  flex-wrap: wrap;
  gap: 2px !important;
  margin: 0;
  padding: 0;
}
.osep-scrollspy-nav .nav-link {
  background: transparent !important;
  color: var(--osep-ink-700) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 1px solid transparent;
  transition: all .15s ease;
  font-family: var(--osep-font);
  letter-spacing: 0;
  text-transform: none;
}
.osep-scrollspy-nav .nav-link:hover {
  background: var(--osep-navy-50) !important;
  color: var(--osep-navy-800) !important;
}
.osep-scrollspy-nav .nav-link.active {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -6px rgba(10, 42, 82, .45);
}

/* =========================
   Dashboard projet : conteneur global
   ========================= */
#scrollRoot {
  scroll-behavior: smooth;
}
#scrollRoot section.section-enter > .card {
  border-radius: 14px !important;
  border: 1px solid var(--osep-line) !important;
  box-shadow: var(--osep-shadow-sm);
}
#scrollRoot section.section-enter > .card > .card-body {
  padding: 18px 20px !important;
}

/* =========================
   Stat tile (réutilisable : rapports, listes, etc.)
   ========================= */
.osep-stat-tile {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  box-shadow: var(--osep-shadow-sm);
  transition: border-color .15s ease;
  font-family: var(--osep-font);
}
.osep-stat-tile:hover { border-color: var(--osep-navy-100); }
.osep-stat-tile .ic {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.osep-stat-tile .ic.navy  { background: var(--osep-navy-50);   color: var(--osep-navy-800); }
.osep-stat-tile .ic.gold  { background: var(--osep-gold-50);   color: #8a6b29; }
.osep-stat-tile .ic.green { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-stat-tile .ic.red   { background: var(--osep-danger-soft); color: var(--osep-red, #E31B23); }
.osep-stat-tile .ic.warn  { background: var(--osep-warn-soft); color: var(--osep-warn); }
.osep-stat-tile .body { flex: 1; min-width: 0; }
.osep-stat-tile .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  font-weight: 700;
}
.osep-stat-tile .val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--osep-ink-900);
  line-height: 1.1;
  margin-top: 2px;
}

/* =========================
   FullCalendar — theming institutionnel OSEP
   ========================= */
#calendar { font-family: var(--osep-font); }
#calendar .fc-toolbar-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px;
  color: var(--osep-ink-900);
  text-transform: capitalize;
}
#calendar .fc-button {
  background: #fff !important;
  border: 1px solid var(--osep-line) !important;
  color: var(--osep-ink-700) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  text-transform: capitalize;
  transition: all .15s ease;
}
#calendar .fc-button:hover {
  background: var(--osep-navy-50) !important;
  color: var(--osep-navy-800) !important;
  border-color: var(--osep-navy-100) !important;
}
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button:focus {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  border-color: var(--osep-navy-800) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -4px rgba(10, 42, 82, .35) !important;
}
#calendar .fc-button-primary:not(:disabled).fc-button-active:hover { color: #fff !important; }
#calendar .fc-toolbar { gap: 8px; flex-wrap: wrap; }
#calendar .fc-col-header-cell {
  background: var(--osep-bg);
  border-color: var(--osep-line);
}
#calendar .fc-col-header-cell-cushion {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500) !important;
  padding: 8px 6px;
}
#calendar .fc-daygrid-day,
#calendar .fc-timegrid-slot,
#calendar .fc-list-day,
#calendar .fc-list-event { border-color: var(--osep-line-soft) !important; }
#calendar .fc-day-today {
  background: rgba(201, 166, 89, .08) !important;
}
#calendar .fc-day-today .fc-daygrid-day-number {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 4px;
}
#calendar .fc-event {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform .15s ease;
}
#calendar .fc-event:hover { transform: translateY(-1px); }
#calendar .fc-event-title { font-weight: 600; }
#calendar .fc-list-event-dot { border-color: var(--osep-navy-800) !important; }
#calendar .fc-list-event:hover td { background: var(--osep-navy-50) !important; }
#calendar .fc-list-day-cushion {
  background: var(--osep-bg) !important;
  font-size: 12px;
  font-weight: 700;
  color: var(--osep-ink-700);
  text-transform: capitalize;
}

/* =========================
   Notifications page (liste complète)
   ========================= */
.osep-notif-page-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--osep-font);
}
.osep-notif-page-list .item {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 11px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
}
.osep-notif-page-list .item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: transparent;
}
.osep-notif-page-list .item.unread { background: rgba(201, 166, 89, .04); }
.osep-notif-page-list .item.unread::before { background: var(--osep-gold-500); }
.osep-notif-page-list .item:hover {
  border-color: var(--osep-navy-100);
  background: var(--osep-navy-50);
  color: inherit;
}
.osep-notif-page-list .item .av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--osep-navy-700);
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.osep-notif-page-list .item.read .av {
  background: var(--osep-ink-300);
}
.osep-notif-page-list .item .body { flex: 1; min-width: 0; }
.osep-notif-page-list .item .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.osep-notif-page-list .item .author {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--osep-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osep-notif-page-list .item .when {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.osep-notif-page-list .item .msg {
  font-size: 13px;
  color: var(--osep-ink-700);
  margin: 0;
  line-height: 1.45;
}
.osep-notif-page-list .item .new-pill {
  display: inline-block;
  background: var(--osep-gold-50);
  color: #8a6b29;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* =========================
   Settings — hub + page préférences
   ========================= */
.osep-settings-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  font-family: var(--osep-font);
}
.osep-settings-tile {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all .2s ease;
  box-shadow: var(--osep-shadow-sm);
  cursor: pointer;
}
.osep-settings-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--osep-navy-700);
}
.osep-settings-tile.gold::before  { background: var(--osep-gold-500); }
.osep-settings-tile.green::before { background: var(--osep-sn-green); }
.osep-settings-tile:hover {
  transform: translateY(-2px);
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-md);
  color: inherit;
}
.osep-settings-tile .ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--osep-navy-50), #fff);
  border: 1px solid var(--osep-line);
  color: var(--osep-navy-700);
  font-size: 22px;
}
.osep-settings-tile.gold .ic { color: #8a6b29; background: linear-gradient(135deg, var(--osep-gold-50), #fff); border-color: var(--osep-gold-50); }
.osep-settings-tile.green .ic { color: var(--osep-sn-green); background: linear-gradient(135deg, var(--osep-success-soft), #fff); border-color: var(--osep-success-soft); }
.osep-settings-tile .ttl {
  font-size: 16px;
  font-weight: 800;
  color: var(--osep-ink-900);
  letter-spacing: -.2px;
}
.osep-settings-tile .desc {
  font-size: 12.5px;
  color: var(--osep-ink-500);
  line-height: 1.5;
  margin: 0;
}
.osep-settings-tile .open {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--osep-navy-700);
}
.osep-settings-tile .open i { color: var(--osep-gold-500); }

/* =========================
   Wizard pills (stepper visuel sur nav-pills Bootstrap)
   Compatible data-bs-toggle="tab" — la nav garde son comportement, le visuel
   reproduit le stepper du wizard projet (cercles connectés + états).
   Supporte un nombre arbitraire d'étapes via flex.
   ========================= */
.nav-pills.osep-wizard-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 18px 14px 16px;
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  box-shadow: var(--osep-shadow-sm);
  margin-bottom: 16px;
  font-family: var(--osep-font);
  position: relative;
  overflow-x: auto;
}
.nav-pills.osep-wizard-pills .nav-item {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Connecteur entre étapes (ligne fine) */
.nav-pills.osep-wizard-pills .nav-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--osep-line);
  z-index: 0;
}
.nav-pills.osep-wizard-pills .nav-item.is-done::before,
.nav-pills.osep-wizard-pills .nav-item.is-active::before {
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-navy-800));
}

/* Lien-étape : cercle + label */
.nav-pills.osep-wizard-pills .nav-link {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  width: 100%;
}

/* Cercle numéroté */
.nav-pills.osep-wizard-pills .nav-link .step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  border: 2px solid var(--osep-line);
  background: #fff;
  color: var(--osep-ink-500);
  transition: all .25s ease;
  position: relative;
}
.nav-pills.osep-wizard-pills .nav-link .step-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  font-weight: 700;
}
.nav-pills.osep-wizard-pills .nav-link .step-ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--osep-ink-700);
  letter-spacing: -.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Étape déjà parcourue (done) */
.nav-pills.osep-wizard-pills .nav-item.is-done .step-num {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff;
  border-color: var(--osep-navy-800);
  box-shadow: 0 4px 12px -4px rgba(10, 42, 82, .3);
}
.nav-pills.osep-wizard-pills .nav-item.is-done .step-lbl { color: var(--osep-navy-700); }
.nav-pills.osep-wizard-pills .nav-item.is-done .step-ttl { color: var(--osep-navy-800); }

/* Étape active (la plus importante) */
.nav-pills.osep-wizard-pills .nav-link.active .step-num,
.nav-pills.osep-wizard-pills .nav-item.is-active .step-num {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  border-color: var(--osep-gold-500);
  box-shadow: 0 6px 16px -6px rgba(201, 166, 89, .55);
}
.nav-pills.osep-wizard-pills .nav-link.active .step-num::after,
.nav-pills.osep-wizard-pills .nav-item.is-active .step-num::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--osep-gold-300);
  opacity: .55;
  animation: osep-pulse 2s ease-out infinite;
}
.nav-pills.osep-wizard-pills .nav-link.active .step-lbl,
.nav-pills.osep-wizard-pills .nav-item.is-active .step-lbl { color: #8a6b29; }
.nav-pills.osep-wizard-pills .nav-link.active .step-ttl,
.nav-pills.osep-wizard-pills .nav-item.is-active .step-ttl {
  color: var(--osep-ink-900);
  font-weight: 800;
}

/* Hover sur étapes */
.nav-pills.osep-wizard-pills .nav-link:hover .step-num {
  border-color: var(--osep-navy-700);
}

@media (max-width: 800px) {
  .nav-pills.osep-wizard-pills { padding: 12px 8px; gap: 0; }
  .nav-pills.osep-wizard-pills .nav-link .step-ttl { display: none; }
  .nav-pills.osep-wizard-pills .nav-link .step-lbl { font-size: 9.5px; }
  .nav-pills.osep-wizard-pills .nav-link .step-num { width: 32px; height: 32px; font-size: 12px; }
  .nav-pills.osep-wizard-pills .nav-item:not(:first-child)::before { top: 16px; }
}

/* =========================
   Page récapitulatif (planned/index) — print-friendly
   ========================= */
.osep-overview-toolbar {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--osep-font);
  box-shadow: var(--osep-shadow-sm);
}
.osep-overview-toolbar .info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--osep-ink-500);
}
.osep-overview-toolbar .info i { color: var(--osep-gold-500); font-size: 16px; }
.osep-overview-toolbar .info strong { color: var(--osep-ink-900); font-weight: 700; }
.osep-overview-toolbar .actions { display: flex; gap: 8px; }

.osep-overview-section {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
  break-inside: avoid;
  page-break-inside: avoid;
}
.osep-overview-section .head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--osep-line-soft);
}
.osep-overview-section .head .ic {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.osep-overview-section .head .ic.gold { background: var(--osep-gold-50); color: #8a6b29; }
.osep-overview-section .head h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-900);
  margin: 0;
  letter-spacing: -.1px;
}
.osep-overview-section .head .sub {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  margin-top: 2px;
}
.osep-overview-section .head .ms-auto { margin-left: auto; }

/* Tuiles compactes pour méta-données dans l'overview */
.osep-meta-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.osep-meta-tile {
  background: var(--osep-bg);
  border: 1px solid var(--osep-line-soft);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.osep-meta-tile .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.osep-meta-tile .ic.gold { background: var(--osep-gold-50); color: #8a6b29; }
.osep-meta-tile .ic.green { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-meta-tile .body { min-width: 0; }
.osep-meta-tile .l {
  font-size: 10px;
  color: var(--osep-ink-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.osep-meta-tile .v {
  font-size: 13px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero spécifique au récapitulatif (avec print-watermark) */
.osep-overview-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 28px;
  margin-bottom: 14px;
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
  font-family: var(--osep-font);
  break-inside: avoid;
  page-break-inside: avoid;
}
.osep-overview-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-overview-hero > * { position: relative; z-index: 1; }
.osep-overview-hero .top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.osep-overview-hero .badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.osep-overview-hero .badges .acronym {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  font-weight: 800;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px;
}
.osep-overview-hero .badges .pill {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.osep-overview-hero h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  line-height: 1.2;
  color: #fff;
}
.osep-overview-hero .desc {
  color: rgba(255,255,255,.78);
  font-size: 13px;
  margin: 0;
  max-width: 760px;
  line-height: 1.55;
}
.osep-overview-hero .stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.osep-overview-hero .stamp .progress-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--osep-gold-500) calc(var(--p,0)*1%), rgba(255,255,255,.15) 0);
  display: grid; place-items: center;
}
.osep-overview-hero .stamp .progress-ring::after {
  content: attr(data-pct);
  width: 64px; height: 64px;
  background: var(--osep-navy-800);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  color: var(--osep-gold-300);
}
.osep-overview-hero .stamp .lbl {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

/* Print : optimisations spécifiques */
@media print {
  .osep-tricolore,
  .osep-gov-bar,
  .navbar-custom,
  .topnav,
  .osep-footer,
  footer,
  .action-bar,
  .osep-overview-toolbar,
  #wrapper > .navbar-layout,
  .page-title-box,
  .osep-side-menu,
  .read-more-btn,
  #sidebarCol,
  .navbar,
  .nav-pills.osep-wizard-pills,
  .navbar-toggle {
    display: none !important;
  }

  body, html {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
    padding-top: 0 !important;
  }

  .content-page,
  .container-fluid,
  .row,
  [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .osep-overview-hero {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #0A2A52 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-shadow: none !important;
    page-break-after: avoid;
  }
  .osep-overview-hero::before { display: none !important; }
  .osep-overview-hero h1,
  .osep-overview-hero .badges .acronym { color: #0A2A52 !important; }
  .osep-overview-hero .desc { color: #444 !important; }
  .osep-overview-hero .badges .pill { color: #0A2A52 !important; border-color: #0A2A52 !important; background: #fff !important; }
  .osep-overview-hero .stamp .progress-ring { background: #fff !important; border: 2px solid #0A2A52 !important; }
  .osep-overview-hero .stamp .progress-ring::after { background: #fff !important; color: #0A2A52 !important; border: 1px solid #C9A659 !important; }
  .osep-overview-hero .stamp .lbl { color: #666 !important; }

  .osep-overview-section,
  .osep-meta-tile,
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .osep-overview-section .head h3 { color: #0A2A52 !important; }

  /* Saut de page entre sections principales si nécessaire */
  .page-break { page-break-before: always; }
  a { text-decoration: none !important; color: inherit !important; }
  img, canvas { max-width: 100%; height: auto !important; }

  /* Watermark discret */
  .osep-print-stamp {
    position: fixed;
    bottom: 12mm;
    right: 12mm;
    font-size: 8pt;
    color: #999;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
}

/* =========================
   Suivi-Évaluation — KPI strip, bandeaux période, table activité, indicateurs cards, exec finance
   ========================= */

/* KPI strip Suivi-Évaluation (réutilise osep-projects-stats avec quelques tweaks) */
.osep-followup-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }

/* Bandeau de période dans le tableau d'activités */
.osep-period-band {
  background: linear-gradient(90deg, var(--osep-navy-50), var(--osep-bg) 60%);
  border-left: 3px solid var(--osep-gold-500);
  padding: 10px 14px;
  font-family: var(--osep-font);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--osep-navy-800);
  letter-spacing: -.1px;
  margin: 4px 0;
}
.osep-period-band .meta {
  font-size: 11px;
  color: var(--osep-ink-500);
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.osep-period-band .meta .pill {
  background: var(--osep-navy-100);
  color: var(--osep-navy-800);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
}
.osep-period-band .meta .pill.warn { background: var(--osep-warn-soft); color: var(--osep-warn); }
.osep-period-band .meta .pill.danger { background: var(--osep-danger-soft); color: var(--osep-red, #E31B23); }
.osep-period-band .meta .pill.success { background: var(--osep-success-soft); color: var(--osep-sn-green); }

/* Légende de la barre planifié/réalisé */
.osep-progress-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--osep-font);
  font-size: 11px;
  color: var(--osep-ink-500);
  font-weight: 600;
}
.osep-progress-legend .item { display: inline-flex; align-items: center; gap: 5px; }
.osep-progress-legend .sw { width: 10px; height: 8px; border-radius: 3px; }
.osep-progress-legend .sw.planned { background: var(--osep-ink-300); opacity: .55; }
.osep-progress-legend .sw.actual-up { background: var(--osep-sn-green); }
.osep-progress-legend .sw.actual-down { background: var(--osep-red, #E31B23); }

/* Cellule progression : barre composite + texte */
.osep-progress-cell { min-width: 200px; }
.osep-progress-cell .bar {
  position: relative;
  height: 10px;
  background: var(--osep-line-soft);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 4px;
}
.osep-progress-cell .bar .planned {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px;
  background: var(--osep-ink-300);
  opacity: .45;
}
.osep-progress-cell .bar .actual {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px;
}
.osep-progress-cell .bar .actual.up   { background: linear-gradient(90deg, var(--osep-sn-green), #2BAE6E); }
.osep-progress-cell .bar .actual.down { background: linear-gradient(90deg, var(--osep-red, #E31B23), #E55960); }
.osep-progress-cell .info {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--osep-ink-500); font-weight: 600;
}
.osep-progress-cell .info b { color: var(--osep-ink-900); font-weight: 800; }

/* Status + écart fusionnés — pill colorée */
.osep-status-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--osep-font);
}
.osep-status-cell .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.osep-status-cell .pill.success { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-status-cell .pill.warn    { background: var(--osep-warn-soft);    color: var(--osep-warn); }
.osep-status-cell .pill.danger  { background: var(--osep-danger-soft);  color: var(--osep-red, #E31B23); }
.osep-status-cell .pill.muted   { background: var(--osep-bg);           color: var(--osep-ink-500); border: 1px solid var(--osep-line); }
.osep-status-cell .gap {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.2px;
}
.osep-status-cell .gap.up   { color: var(--osep-sn-green); }
.osep-status-cell .gap.down { color: var(--osep-red, #E31B23); }
.osep-status-cell .gap.flat { color: var(--osep-ink-500); }

/* Surlignage des lignes en retard / non renseignées */
tr.osep-row-overdue { background: rgba(227, 27, 35, .03) !important; }
tr.osep-row-overdue td { border-top-color: rgba(227, 27, 35, .15) !important; }
tr.osep-row-unfilled { background: rgba(224, 138, 0, .03) !important; }

/* =========================
   Feedback visuel après transition workflow (validate / approve / revise / etc.)
   La classe est ajoutée par FollowupManager._applyMilestoneUpdate() puis
   retirée 1.6s plus tard. Conçu pour fonctionner aussi en bulk
   (effet "vague" séquentiel grâce au délai par index).
   ========================= */
@keyframes osep-row-pulse {
  0%   { background-color: rgba(201, 166, 89, 0); box-shadow: inset 3px 0 0 rgba(201, 166, 89, 0); }
  20%  { background-color: rgba(201, 166, 89, 0.22); box-shadow: inset 3px 0 0 var(--osep-gold-500, #C9A659); }
  60%  { background-color: rgba(0, 133, 63, 0.14); box-shadow: inset 3px 0 0 var(--osep-sn-green, #00853F); }
  100% { background-color: rgba(0, 133, 63, 0); box-shadow: inset 3px 0 0 rgba(0, 133, 63, 0); }
}

tr.osep-row-just-updated,
tr.osep-row-just-updated > td {
  animation: osep-row-pulse 1.6s cubic-bezier(.4, 0, .2, 1) both;
}

/* Status pill : ajout d'une variante "validated" et amélioration des micros */
.osep-status-cell .pill {
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.osep-status-cell .pill i {
  font-size: 12px;
  line-height: 1;
}
tr.osep-row-just-updated .osep-status-cell .pill {
  transform: scale(1.05);
}

/* Bouton bulk "Tout valider / Tout confirmer" : variante OSEP avec halo or */
.osep-bulk-btn {
  position: relative;
  font-weight: 700;
  letter-spacing: .015em;
  border-color: var(--osep-sn-green, #00853F);
  color: var(--osep-sn-green, #00853F);
  background: linear-gradient(180deg, #ffffff 0%, rgba(0, 133, 63, 0.05) 100%);
  transition: all .15s ease;
}
.osep-bulk-btn:hover {
  background: var(--osep-sn-green, #00853F);
  border-color: var(--osep-sn-green, #00853F);
  color: #ffffff;
  box-shadow: 0 4px 12px -4px rgba(0, 133, 63, 0.45),
              inset 0 0 0 1.5px var(--osep-gold-500, #C9A659);
}
.osep-bulk-btn:hover i {
  color: var(--osep-gold-300, #E2C887) !important;
}
.osep-bulk-btn:disabled {
  opacity: .65;
  cursor: progress;
  pointer-events: none;
}

/* =========================
   Onglet Indicateurs — grille de cartes cliquables
   ========================= */
.osep-outputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  font-family: var(--osep-font);
}
.osep-output-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: all .18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.osep-output-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--osep-navy-700);
}
.osep-output-card.high::before  { background: var(--osep-sn-green); }
.osep-output-card.mid::before   { background: var(--osep-gold-500); }
.osep-output-card.low::before   { background: var(--osep-warn); }
.osep-output-card.bad::before   { background: var(--osep-red, #E31B23); }
.osep-output-card:hover {
  transform: translateY(-2px);
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-md);
}
.osep-output-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.osep-output-card .head .ttl {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--osep-ink-900);
  line-height: 1.3;
  letter-spacing: -.1px;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.osep-output-card .head .unit {
  font-size: 10px;
  font-weight: 700;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.osep-output-card .vals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--osep-line-soft);
  border-bottom: 1px solid var(--osep-line-soft);
}
.osep-output-card .vals .v {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.osep-output-card .vals .v .l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--osep-ink-500);
  font-weight: 700;
}
.osep-output-card .vals .v .n {
  font-size: 16px;
  font-weight: 800;
  color: var(--osep-ink-900);
  letter-spacing: -.3px;
}
.osep-output-card .vals .v .n small { font-size: 10.5px; color: var(--osep-ink-500); font-weight: 600; }
.osep-output-card .progress-row { display: flex; flex-direction: column; gap: 3px; }
.osep-output-card .progress-row .info {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--osep-ink-500); font-weight: 600;
}
.osep-output-card .progress-row .info b { color: var(--osep-ink-900); font-weight: 800; }
.osep-output-card .progress-row .bar {
  height: 6px; background: var(--osep-line-soft); border-radius: 4px; overflow: hidden;
}
.osep-output-card .progress-row .bar > span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-gold-500));
}
.osep-output-card.high .progress-row .bar > span { background: var(--osep-sn-green); }
.osep-output-card.warn .progress-row .bar > span { background: var(--osep-warn); }
.osep-output-card.bad  .progress-row .bar > span { background: var(--osep-red, #E31B23); }

.osep-output-card .actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}
.osep-output-card .actions .btn-mini {
  flex: 1;
  min-width: 0;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  color: var(--osep-ink-700);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.osep-output-card .actions .btn-mini:hover {
  border-color: var(--osep-navy-700);
  color: var(--osep-navy-800);
}
.osep-output-card .actions .btn-mini.primary {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff;
  border-color: var(--osep-navy-800);
  flex: 1.4;
}
.osep-output-card .actions .btn-mini.primary:hover { color: #fff; transform: translateY(-1px); }
.osep-output-card .actions .btn-mini.primary i { color: var(--osep-gold-400); }

/* =========================
   Onglet Exécution financière
   ========================= */
.osep-finance-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) { .osep-finance-grid { grid-template-columns: 1fr; } }
.osep-finance-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-finance-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--osep-ink-700);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.osep-finance-card h4 i { color: var(--osep-gold-500); font-size: 14px; }
.osep-finance-card .sub {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  margin: 0 0 14px;
  font-weight: 500;
}
.osep-finance-card .canvas-wrap {
  position: relative;
  height: 280px;
}

/* =========================
   Liste des projets — header, KPI strip, filter toolbar, grid & list
   ========================= */

/* En-tête distinctif (sans osep-page-head) — slim avec mini-crumbs et titre inline */
.osep-projects-head {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-left: 4px solid var(--osep-gold-500);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-projects-head .left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.osep-projects-head .icon-tile {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--osep-navy-800), var(--osep-navy-700));
  color: var(--osep-gold-400);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(10, 42, 82, .35), inset 0 0 0 1px rgba(201, 166, 89, .35);
}
.osep-projects-head .info { min-width: 0; }
.osep-projects-head .info h1 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 0 0 2px;
  color: var(--osep-ink-900);
  line-height: 1.2;
}
.osep-projects-head .info .crumbs {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.osep-projects-head .info .crumbs a {
  color: var(--osep-ink-500);
  text-decoration: none;
}
.osep-projects-head .info .crumbs a:hover { color: var(--osep-navy-800); }
.osep-projects-head .info .crumbs i {
  font-size: 8px;
  color: var(--osep-ink-300);
}
.osep-projects-head .info .crumbs .here {
  color: var(--osep-ink-700);
  font-weight: 700;
}
.osep-projects-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* KPI strip projets (5 stats) */
.osep-projects-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--osep-font);
}
@media (max-width: 1100px) { .osep-projects-stats { grid-template-columns: repeat(2, 1fr); } }

.osep-projects-stats .stat {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 11px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--osep-shadow-sm);
  position: relative;
  overflow: hidden;
}
.osep-projects-stats .stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--osep-navy-700);
}
.osep-projects-stats .stat.green::before { background: var(--osep-sn-green); }
.osep-projects-stats .stat.warn::before  { background: var(--osep-warn); }
.osep-projects-stats .stat.red::before   { background: var(--osep-red, #E31B23); }
.osep-projects-stats .stat.gold::before  { background: var(--osep-gold-500); }

.osep-projects-stats .stat .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
}
.osep-projects-stats .stat.green .ic { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-projects-stats .stat.warn .ic  { background: var(--osep-warn-soft);  color: var(--osep-warn); }
.osep-projects-stats .stat.red .ic   { background: var(--osep-danger-soft); color: var(--osep-red, #E31B23); }
.osep-projects-stats .stat.gold .ic  { background: var(--osep-gold-50);   color: #8a6b29; }

.osep-projects-stats .stat .v {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--osep-ink-900);
  line-height: 1;
}
.osep-projects-stats .stat .l {
  font-size: 10.5px;
  color: var(--osep-ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* Filter toolbar horizontale */
.osep-projects-toolbar {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.osep-projects-toolbar .top-row,
.osep-projects-toolbar .bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.osep-projects-toolbar .search-mini {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 8px 12px;
}
.osep-projects-toolbar .search-mini i { color: var(--osep-ink-300); font-size: 14px; }
.osep-projects-toolbar .search-mini input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13.5px;
  color: var(--osep-ink-900);
  font-family: inherit;
}

/* Chips de filtre rapide */
.osep-projects-toolbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.osep-projects-toolbar .chip:hover {
  border-color: var(--osep-navy-700);
  color: var(--osep-navy-800);
}
.osep-projects-toolbar .chip.active {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff;
  border-color: var(--osep-navy-800);
}
.osep-projects-toolbar .chip.active i { color: var(--osep-gold-400); }
.osep-projects-toolbar .chip i { font-size: 12px; color: var(--osep-ink-500); }
.osep-projects-toolbar .chip .count {
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 4px;
  opacity: .8;
}

/* Selects compactes dans la toolbar */
.osep-projects-toolbar select.form-select {
  width: auto;
  min-width: 140px;
  border: 1px solid var(--osep-line) !important;
  border-radius: 9px !important;
  padding: 7px 28px 7px 12px !important;
  font-size: 12.5px !important;
  font-family: var(--osep-font) !important;
  background-color: #fff;
}
.osep-projects-toolbar select.form-select:focus {
  border-color: var(--osep-navy-700) !important;
  box-shadow: 0 0 0 4px rgba(19, 56, 106, .08) !important;
}

/* View toggle Grid/List */
.osep-projects-toolbar .view-toggle {
  display: inline-flex;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 3px;
  margin-left: auto;
}
.osep-projects-toolbar .view-toggle button {
  background: transparent;
  border: none;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.osep-projects-toolbar .view-toggle button:hover { color: var(--osep-navy-800); }
.osep-projects-toolbar .view-toggle button.active {
  background: #fff;
  color: var(--osep-navy-800);
  box-shadow: var(--osep-shadow-sm);
}
.osep-projects-toolbar .view-toggle button.active i { color: var(--osep-gold-500); }

/* Bouton clear filtres */
.osep-projects-toolbar .clear-btn {
  background: transparent;
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.osep-projects-toolbar .clear-btn:hover {
  border-color: var(--osep-red, #E31B23);
  color: var(--osep-red, #E31B23);
}

.osep-projects-toolbar .submit-btn {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
.osep-projects-toolbar .submit-btn:hover { transform: translateY(-1px); }
.osep-projects-toolbar .submit-btn i { color: var(--osep-gold-400); }

/* Label discret pour les groupes */
.osep-projects-toolbar .lbl {
  font-size: 11px;
  color: var(--osep-ink-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}

/* =========================
   Grid view (cards)
   ========================= */
.osep-projects-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

/* =========================
   List view (rows compactes)
   ========================= */
.osep-projects-list-wrap {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-projects-list-wrap .osep-list-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 110px 70px;
  gap: 12px;
  padding: 12px 18px;
  background: var(--osep-bg);
  border-bottom: 1px solid var(--osep-line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  text-transform: uppercase;
}
.osep-projects-list-wrap .lrow:first-of-type { border-top: none !important; }
.osep-projects-list-wrap .lrow:hover {
  background: var(--osep-navy-50);
  color: inherit !important;
}
.osep-projects-list-wrap .lrow:hover .mdi-chevron-right {
  color: var(--osep-gold-500) !important;
}
@media (max-width: 1100px) {
  .osep-projects-list-wrap .osep-list-head { display: none; }
  .osep-projects-list-wrap .lrow {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* =========================
   État vide
   ========================= */
.osep-projects-empty {
  background: #fff;
  border: 1px dashed var(--osep-line);
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  font-family: var(--osep-font);
  color: var(--osep-ink-500);
}
.osep-projects-empty .ic-circle {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--osep-navy-50), #fff);
  border: 1px solid var(--osep-line);
  color: var(--osep-navy-700);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 36px;
}
.osep-projects-empty h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--osep-ink-900);
  margin-bottom: 6px;
}

/* =========================
   Tableau de bord exécutif — vue descendante (Organisation → Département → Projet)
   ========================= */

/* Scope navigator : tabs principaux qui montrent où on est dans la hiérarchie */
.osep-scope-nav {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
  flex-wrap: wrap;
}
.osep-scope-nav .scope-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--osep-ink-700);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .15s ease;
  cursor: pointer;
  background: transparent;
}
.osep-scope-nav .scope-tab:hover { background: var(--osep-navy-50); color: var(--osep-navy-800); }
.osep-scope-nav .scope-tab.active {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(10, 42, 82, .45);
}
.osep-scope-nav .scope-tab.active i { color: var(--osep-gold-400); }
.osep-scope-nav .scope-tab .ic {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.osep-scope-nav .scope-tab.active .ic {
  background: rgba(201, 166, 89, .25);
  color: var(--osep-gold-400);
}
.osep-scope-nav .scope-tab small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  margin-top: -2px;
}
.osep-scope-nav .arrow {
  color: var(--osep-ink-300);
  font-size: 12px;
  margin: 0 2px;
}
.osep-scope-nav .back-btn {
  margin-left: auto;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  background: transparent;
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
}
.osep-scope-nav .back-btn:hover {
  border-color: var(--osep-navy-700);
  color: var(--osep-navy-800);
}

/* Strip de KPIs exécutifs (5-6 cards en haut du dashboard) */
.osep-exec-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.osep-exec-kpi {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--osep-shadow-sm);
  transition: all .15s ease;
  font-family: var(--osep-font);

  /* Alignement vertical et horizontal uniforme :
     toutes les cards ont la même hauteur, le grand chiffre est centré
     verticalement et reste à la même ligne quel que soit son contenu. */
  display: flex;
  flex-direction: column;
  min-height: 130px;
}
.osep-exec-kpi > .head {
  flex: 0 0 auto;
}
.osep-exec-kpi > .v {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osep-exec-kpi > .foot {
  flex: 0 0 auto;
}
.osep-exec-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-md);
}
.osep-exec-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--osep-navy-700);
}
.osep-exec-kpi.gold::before  { background: linear-gradient(90deg, var(--osep-gold-500), var(--osep-gold-400)); }
.osep-exec-kpi.green::before { background: var(--osep-sn-green); }
.osep-exec-kpi.warn::before  { background: var(--osep-warn); }
.osep-exec-kpi.red::before   { background: var(--osep-red, #E31B23); }

.osep-exec-kpi .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.osep-exec-kpi .head .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  font-weight: 700;
}
.osep-exec-kpi .head .ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
}
.osep-exec-kpi.gold .head .ic  { background: var(--osep-gold-50);    color: #8a6b29; }
.osep-exec-kpi.green .head .ic { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-exec-kpi.warn .head .ic  { background: var(--osep-warn-soft);  color: var(--osep-warn); }
.osep-exec-kpi.red .head .ic   { background: var(--osep-danger-soft); color: var(--osep-red, #E31B23); }

.osep-exec-kpi .v {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--osep-ink-900);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.osep-exec-kpi .v small {
  font-size: 13px;
  color: var(--osep-ink-500);
  font-weight: 600;
  letter-spacing: 0;
}
.osep-exec-kpi .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--osep-ink-500);
}
.osep-exec-kpi .delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
}
.osep-exec-kpi .delta.up   { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-exec-kpi .delta.down { background: var(--osep-danger-soft);  color: var(--osep-red, #E31B23); }
.osep-exec-kpi .delta.flat { background: var(--osep-bg);           color: var(--osep-ink-500); }

/* Drill-down grid : cards par département / programme cliquables */
.osep-drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.osep-dept-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all .2s ease;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
  cursor: pointer;
}
.osep-dept-card:hover {
  transform: translateY(-2px);
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-md);
  color: inherit;
}
.osep-dept-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.osep-dept-card .head .av {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--osep-navy-700), var(--osep-navy-600));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.osep-dept-card .head .name {
  flex: 1;
  min-width: 0;
}
.osep-dept-card .head .name .ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osep-dept-card .head .name .sub {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  font-weight: 500;
}
.osep-dept-card .head .arrow {
  color: var(--osep-ink-300);
  font-size: 16px;
  transition: color .15s ease;
}
.osep-dept-card:hover .head .arrow { color: var(--osep-gold-500); }

.osep-dept-card .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--osep-line-soft);
  border-bottom: 1px solid var(--osep-line-soft);
}
.osep-dept-card .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.osep-dept-card .stat .v {
  font-size: 14px;
  font-weight: 800;
  color: var(--osep-ink-900);
  letter-spacing: -.2px;
}
.osep-dept-card .stat .l {
  font-size: 10px;
  color: var(--osep-ink-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.osep-dept-card .perf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.osep-dept-card .perf .row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--osep-ink-500);
  font-weight: 600;
}
.osep-dept-card .perf .row b {
  color: var(--osep-ink-900);
  font-weight: 800;
}
.osep-dept-card .perf .bar {
  height: 6px;
  background: var(--osep-line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.osep-dept-card .perf .bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-gold-500));
}

/* Hero exécutif (au-dessus du scope nav) */
.osep-exec-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 28px;
  margin-bottom: 14px;
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
  font-family: var(--osep-font);
}
.osep-exec-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-exec-hero > * { position: relative; z-index: 1; }
.osep-exec-hero .ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201, 166, 89, .15);
  color: var(--osep-gold-300);
  border: 1px solid rgba(201, 166, 89, .3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.osep-exec-hero h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  line-height: 1.2;
  color: #fff;
}
.osep-exec-hero h1 .badge {
  display: inline-block;
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 7px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: -.1px;
}
.osep-exec-hero .lead {
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  margin: 0;
  max-width: 720px;
  line-height: 1.55;
}

/* Top/Flop projets — liste de liens cliquables vers le dashboard projet */
.osep-topflop-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--osep-font);
}
.osep-topflop-row {
  display: grid;
  grid-template-columns: 1.6fr 2fr 70px 26px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--osep-line-soft);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: all .15s ease;
  cursor: pointer;
}
.osep-topflop-row:hover {
  background: var(--osep-navy-50);
  border-color: var(--osep-navy-100);
  transform: translateX(2px);
  color: inherit;
}
.osep-topflop-row .info {
  min-width: 0;
}
.osep-topflop-row .info .ttl {
  font-size: 13px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.osep-topflop-row .info .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--osep-ink-500);
  font-weight: 500;
}
.osep-topflop-row .info .meta .acro {
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
}

.osep-topflop-row .progress-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.osep-topflop-row .progress-stack .bar {
  position: relative;
  height: 8px;
  background: var(--osep-line-soft);
  border-radius: 5px;
  overflow: hidden;
}
.osep-topflop-row .progress-stack .bar .planned {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--osep-ink-300);
  opacity: .4;
  border-radius: 5px;
}
.osep-topflop-row .progress-stack .bar .actual {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 5px;
}
.osep-topflop-row .progress-stack .bar .actual.up   { background: linear-gradient(90deg, var(--osep-sn-green), #2BAE6E); }
.osep-topflop-row .progress-stack .bar .actual.down { background: linear-gradient(90deg, var(--osep-red, #E31B23), #E55960); }
.osep-topflop-row .progress-stack .legend {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--osep-ink-500);
  font-weight: 600;
}
.osep-topflop-row .progress-stack .legend .a { color: var(--osep-ink-700); }
.osep-topflop-row .gap {
  text-align: right;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.2px;
}
.osep-topflop-row .gap.up   { color: var(--osep-sn-green); }
.osep-topflop-row .gap.down { color: var(--osep-red, #E31B23); }
.osep-topflop-row .gap small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--osep-ink-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}
.osep-topflop-row .arrow {
  color: var(--osep-ink-300);
  font-size: 16px;
  text-align: center;
  transition: color .15s ease;
}
.osep-topflop-row:hover .arrow { color: var(--osep-gold-500); }

/* Empty state */
.osep-topflop-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--osep-ink-500);
  font-size: 13px;
  border: 1px dashed var(--osep-line);
  border-radius: 10px;
  background: var(--osep-bg);
}
.osep-topflop-empty i {
  font-size: 28px;
  color: var(--osep-ink-300);
  display: block;
  margin-bottom: 6px;
}

@media (max-width: 700px) {
  .osep-topflop-row {
    grid-template-columns: 1fr 70px 26px;
  }
  .osep-topflop-row .progress-stack { display: none; }
}

/* Section header pour le dashboard exécutif */
.osep-exec-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--osep-line-soft);
  flex-wrap: wrap;
  font-family: var(--osep-font);
}
.osep-exec-section-head h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--osep-ink-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.osep-exec-section-head h3 i {
  color: var(--osep-gold-500);
  font-size: 16px;
}
.osep-exec-section-head .sub {
  font-size: 12px;
  color: var(--osep-ink-500);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.osep-exec-section-head .actions {
  display: flex;
  gap: 8px;
}

/* =========================
   Kanban OSEP — board, colonnes, cards, drop zone, modal quick task
   ========================= */

/* Toolbar du kanban (filtres + recherche + actions) */
.osep-kanban-toolbar {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-kanban-toolbar .search-mini {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 7px 12px;
}
.osep-kanban-toolbar .search-mini i { color: var(--osep-ink-300); font-size: 13px; }
.osep-kanban-toolbar .search-mini input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--osep-ink-900);
  font-family: inherit;
}
.osep-kanban-toolbar .users {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.osep-kanban-toolbar .users .user-pill {
  position: relative;
  cursor: pointer;
  display: block;
  width: 32px;
  height: 32px;
}
.osep-kanban-toolbar .users .user-pill img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--osep-line);
  filter: grayscale(.55) opacity(.7);
  transition: all .15s ease;
}
.osep-kanban-toolbar .users .user-pill:hover img {
  filter: grayscale(0) opacity(1);
}
.osep-kanban-toolbar .users .btn-check:checked + .user-pill img {
  filter: grayscale(0) opacity(1);
  box-shadow: 0 0 0 2px var(--osep-gold-500);
  border-color: #fff;
  transform: translateY(-1px);
}
.osep-kanban-toolbar .users .user-pill::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--osep-gold-500);
  border: 2px solid #fff;
  opacity: 0;
  transition: opacity .15s ease;
}
.osep-kanban-toolbar .users .btn-check:checked + .user-pill::after { opacity: 1; }

.osep-kanban-toolbar .type-group {
  display: inline-flex;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 3px;
}
.osep-kanban-toolbar .type-group label {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--osep-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s ease;
  margin: 0;
}
.osep-kanban-toolbar .type-group label:hover { color: var(--osep-navy-800); }
.osep-kanban-toolbar .type-group .btn-check:checked + label {
  background: #fff;
  color: var(--osep-navy-800);
  box-shadow: var(--osep-shadow-sm);
}
.osep-kanban-toolbar .type-group .btn-check:checked + label i { color: var(--osep-gold-500); }

.osep-kanban-toolbar .clear-btn {
  background: transparent;
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
.osep-kanban-toolbar .clear-btn:hover {
  border-color: var(--osep-red, #E31B23);
  color: var(--osep-red, #E31B23);
}
.osep-kanban-toolbar .clear-btn i { font-size: 13px; }

.osep-kanban-toolbar .density-toggle {
  display: inline-flex;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 3px;
  margin-left: auto;
}
.osep-kanban-toolbar .density-toggle button {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  cursor: pointer;
}
.osep-kanban-toolbar .density-toggle button.active {
  background: #fff;
  color: var(--osep-navy-800);
  box-shadow: var(--osep-shadow-sm);
}
.osep-kanban-toolbar .density-toggle button.active i { color: var(--osep-gold-500); }

/* KPI strip kanban */
.osep-kanban-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.osep-kanban-kpi {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--osep-font);
  box-shadow: var(--osep-shadow-sm);
}
.osep-kanban-kpi .ic {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.osep-kanban-kpi.navy .ic  { background: var(--osep-navy-50);    color: var(--osep-navy-800); }
.osep-kanban-kpi.gold .ic  { background: var(--osep-gold-50);    color: #8a6b29; }
.osep-kanban-kpi.green .ic { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-kanban-kpi.warn .ic  { background: var(--osep-warn-soft);  color: var(--osep-warn); }
.osep-kanban-kpi.red .ic   { background: var(--osep-danger-soft); color: var(--osep-red, #E31B23); }
.osep-kanban-kpi .v {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--osep-ink-900);
  line-height: 1;
}
.osep-kanban-kpi .l {
  font-size: 11px;
  color: var(--osep-ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* Board horizontal scrollable */
.osep-kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  font-family: var(--osep-font);
  scroll-snap-type: x proximity;
}
.osep-kanban-board::-webkit-scrollbar { height: 8px; }
.osep-kanban-board::-webkit-scrollbar-track { background: transparent; }
.osep-kanban-board::-webkit-scrollbar-thumb {
  background: var(--osep-line);
  border-radius: 4px;
}
.osep-kanban-board::-webkit-scrollbar-thumb:hover { background: var(--osep-ink-300); }

/* Colonne */
.osep-kanban-col {
  flex: 0 0 290px;
  scroll-snap-align: start;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 280px;
  overflow: hidden;
}
.osep-kanban-col .col-head {
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--osep-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.osep-kanban-col .col-head .ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
  min-width: 0;
}
.osep-kanban-col .col-head .ttl::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--osep-navy-700);
  flex-shrink: 0;
}
.osep-kanban-col[data-place="todo"] .col-head .ttl::before        { background: var(--osep-ink-300); }
.osep-kanban-col[data-place="in_progress"] .col-head .ttl::before { background: var(--osep-navy-700); }
.osep-kanban-col[data-place="approved"] .col-head .ttl::before    { background: var(--osep-gold-500); }
.osep-kanban-col[data-place="filled"] .col-head .ttl::before      { background: var(--osep-warn); }
.osep-kanban-col[data-place="validated"] .col-head .ttl::before,
.osep-kanban-col[data-place="completed"] .col-head .ttl::before,
.osep-kanban-col[data-place="done"] .col-head .ttl::before        { background: var(--osep-sn-green); }

.osep-kanban-col .col-head .count {
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0;
}
.osep-kanban-col .col-head .add-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--osep-ink-500);
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .15s ease;
}
.osep-kanban-col .col-head .add-btn:hover {
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  border-color: var(--osep-navy-100);
}

.osep-kanban-col .col-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

/* Mode dense */
.osep-kanban[data-density="dense"] .osep-kanban-col { flex: 0 0 250px; }
.osep-kanban[data-density="dense"] .osep-kanban-col .col-body { padding: 6px; }

/* Card */
.osep-kanban-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 10px;
  padding: 12px 12px 10px;
  margin-bottom: 8px;
  cursor: grab;
  position: relative;
  transition: all .15s ease;
  box-shadow: var(--osep-shadow-sm);
  user-select: none;
  list-style: none;
}
.osep-kanban-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 3px;
  border-radius: 10px 0 0 10px;
  background: var(--osep-navy-700);
}
.osep-kanban-card[data-task-type="project"]::before  { background: var(--osep-sn-green); }
.osep-kanban-card[data-task-type="component"]::before { background: var(--osep-navy-700); }
.osep-kanban-card[data-task-type="activity"]::before { background: var(--osep-gold-500); }

.osep-kanban-card:hover {
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-md);
  transform: translateY(-1px);
}
.osep-kanban-card.is-dragging { cursor: grabbing; }

.osep-kanban[data-density="dense"] .osep-kanban-card {
  padding: 8px 10px 7px;
}

.osep-kanban-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.osep-kanban-card .type-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.osep-kanban-card[data-task-type="project"] .type-pill {
  background: var(--osep-success-soft);
  color: var(--osep-sn-green);
}
.osep-kanban-card[data-task-type="component"] .type-pill {
  background: var(--osep-navy-100);
  color: var(--osep-navy-800);
}
.osep-kanban-card[data-task-type="activity"] .type-pill {
  background: var(--osep-gold-50);
  color: #8a6b29;
}

.osep-kanban-card .menu {
  background: transparent;
  border: none;
  color: var(--osep-ink-300);
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.osep-kanban-card .menu:hover {
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
}

.osep-kanban-card .title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--osep-ink-900);
  line-height: 1.35;
  text-decoration: none;
  margin-bottom: 6px;
}
.osep-kanban-card .title:hover { color: var(--osep-navy-800); }

.osep-kanban-card .acronym {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--osep-ink-500);
  background: var(--osep-bg);
  border: 1px solid var(--osep-line-soft);
  padding: 1px 7px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.osep-kanban-card .dates {
  display: flex;
  gap: 10px;
  font-size: 10.5px;
  color: var(--osep-ink-500);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.osep-kanban-card .dates i { color: var(--osep-ink-300); margin-right: 3px; font-size: 11px; }
.osep-kanban-card .dates .overdue {
  color: var(--osep-red, #E31B23);
  font-weight: 600;
}
.osep-kanban-card .dates .overdue i { color: var(--osep-red, #E31B23); }

.osep-kanban-card .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--osep-line-soft);
}
.osep-kanban-card .users {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.osep-kanban-card .users .role {
  font-size: 10px;
  color: var(--osep-ink-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-right: 2px;
}
.osep-kanban-card .users img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--osep-line);
}
.osep-kanban-card .users .av-empty {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--osep-bg);
  border: 1.5px dashed var(--osep-line);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--osep-ink-300);
}

.osep-kanban-card .stripe-divider {
  width: 1px; height: 14px;
  background: var(--osep-line);
  margin: 0 4px;
}

/* Drop zone (placeholder ui-sortable) */
.osep-kanban-board .portlet-placeholder,
.osep-kanban-board .ui-sortable-placeholder {
  margin: 0 0 8px 0;
  height: 90px;
  border-radius: 10px;
  border: 2px dashed var(--osep-navy-700) !important;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(10, 42, 82, .04) 0px,
      rgba(10, 42, 82, .04) 10px,
      rgba(201, 166, 89, .08) 10px,
      rgba(201, 166, 89, .08) 20px
    );
  box-shadow: inset 0 0 0 1px rgba(201, 166, 89, .12);
  transition: all .2s ease;
  list-style: none;
}
.osep-kanban-board .ui-sortable-helper {
  transform: rotate(1deg) scale(1.02);
  box-shadow: 0 16px 32px -8px rgba(10, 42, 82, .25), 0 6px 12px -4px rgba(0, 0, 0, .12) !important;
  cursor: grabbing !important;
}
.osep-kanban-col.drag-over .col-body {
  background: rgba(201, 166, 89, .04);
}

/* Empty state colonne */
.osep-kanban-col .col-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--osep-ink-300);
  font-family: var(--osep-font);
  border: 1px dashed var(--osep-line);
  border-radius: 10px;
  background: rgba(255,255,255,.5);
}
.osep-kanban-col .col-empty i {
  font-size: 28px;
  color: var(--osep-ink-300);
  display: block;
  margin-bottom: 6px;
}
.osep-kanban-col .col-empty .ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--osep-ink-500);
}
.osep-kanban-col .col-empty .sub {
  font-size: 11px;
  margin-top: 2px;
}

/* Modal "Création rapide" — tweaks spécifiques */
.osep-modal #quickTaskForm .stick-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  margin-top: 12px;
}
.osep-modal #quickTaskForm .stick-top label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  margin: 0;
  cursor: pointer;
  flex: 1;
}
.osep-modal #quickTaskForm .stick-top label i {
  color: var(--osep-gold-500);
  margin-right: 4px;
}
.osep-modal #quickTaskForm .shortcuts-hint {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--osep-font);
}
.osep-modal #quickTaskForm .shortcuts-hint kbd {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--osep-ink-700);
}

/* Loading placeholder cards */
.osep-kanban-col .placeholder-card {
  background: #fff;
  border: 1px solid var(--osep-line-soft);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.osep-kanban-col .placeholder-card .ph {
  display: block;
  height: 8px;
  background: var(--osep-line-soft);
  border-radius: 4px;
  margin-bottom: 6px;
  animation: osep-ph 1.4s ease-in-out infinite;
}
.osep-kanban-col .placeholder-card .ph:last-child { margin-bottom: 0; }
.osep-kanban-col .placeholder-card .ph.short { width: 40%; }
.osep-kanban-col .placeholder-card .ph.mid { width: 70%; }

@keyframes osep-ph {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* =========================
   Page Programmes (refonte intégrale) — index avec cards/list grid
   ========================= */

.osep-portfolio-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 16px;
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
  font-family: var(--osep-font);
}
.osep-portfolio-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-portfolio-hero > * { position: relative; z-index: 1; }

.osep-portfolio-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 1100px) { .osep-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }

.osep-portfolio-grid .intro .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(201,166,89,.15); color: var(--osep-gold-300);
  border: 1px solid rgba(201,166,89,.3);
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.osep-portfolio-grid .intro h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 0 0 6px;
  color: #fff;
  line-height: 1.2;
}
.osep-portfolio-grid .intro p {
  color: rgba(255,255,255,.72);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

.osep-portfolio-grid .pf-stat {
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.osep-portfolio-grid .pf-stat .l {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.osep-portfolio-grid .pf-stat .v {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #fff;
  line-height: 1.1;
  margin-top: 4px;
}
.osep-portfolio-grid .pf-stat .v small {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  margin-left: 2px;
}

/* Filter bar : recherche + chips + view toggle */
.osep-programs-filter {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-programs-filter .search-mini {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 7px 12px;
}
.osep-programs-filter .search-mini i { color: var(--osep-ink-300); font-size: 13px; }
.osep-programs-filter .search-mini input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--osep-ink-900);
  font-family: inherit;
}
.osep-programs-filter .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  cursor: pointer;
  transition: all .15s ease;
}
.osep-programs-filter .chip:hover { border-color: var(--osep-navy-700); color: var(--osep-navy-800); }
.osep-programs-filter .chip.active {
  background: var(--osep-navy-800);
  color: #fff;
  border-color: var(--osep-navy-800);
}
.osep-programs-filter .chip.active i { color: var(--osep-gold-400); }

.osep-view-toggle {
  display: inline-flex;
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 9px;
  padding: 3px;
  margin-left: auto;
}
.osep-view-toggle button {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all .15s ease;
}
.osep-view-toggle button:hover { color: var(--osep-navy-800); }
.osep-view-toggle button.active {
  background: #fff;
  color: var(--osep-navy-800);
  box-shadow: var(--osep-shadow-sm);
}
.osep-view-toggle button.active i { color: var(--osep-gold-500); }

/* === GRID VIEW : cards === */
.osep-programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  font-family: var(--osep-font);
}

.osep-program-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--osep-shadow-sm);
  cursor: pointer;
}
.osep-program-card:hover {
  transform: translateY(-2px);
  border-color: var(--osep-navy-100);
  box-shadow: var(--osep-shadow-md);
  color: inherit;
}
.osep-program-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 4px;
  background: var(--osep-navy-700);
}
.osep-program-card.high::before  { background: var(--osep-sn-green); }
.osep-program-card.mid::before   { background: var(--osep-gold-500); }
.osep-program-card.low::before   { background: var(--osep-warn); }
.osep-program-card.bad::before   { background: var(--osep-red, #E31B23); }

.osep-program-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.osep-program-card .head .id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.osep-program-card .head .acronym {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--osep-navy-800);
  color: #fff;
  width: fit-content;
}
.osep-program-card.high .acronym  { background: var(--osep-sn-green); }
.osep-program-card.mid .acronym   { background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500)); color: var(--osep-navy-900); }
.osep-program-card.low .acronym   { background: var(--osep-warn); }
.osep-program-card.bad .acronym   { background: var(--osep-red, #E31B23); }
.osep-program-card .name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.3;
  color: var(--osep-ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.osep-program-card .currency {
  font-size: 11px;
  font-weight: 600;
  color: var(--osep-ink-500);
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.osep-program-card .progress-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.osep-program-card .progress-row .row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--osep-ink-500);
  font-weight: 600;
}
.osep-program-card .progress-row .row-top b {
  color: var(--osep-ink-900);
  font-size: 14px;
  font-weight: 800;
}
.osep-program-card .progress-row .bar {
  height: 8px;
  background: var(--osep-line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.osep-program-card .progress-row .bar > span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-navy-600));
}
.osep-program-card.high .progress-row .bar > span { background: var(--osep-sn-green); }
.osep-program-card.mid  .progress-row .bar > span { background: linear-gradient(90deg, var(--osep-gold-500), var(--osep-gold-400)); }
.osep-program-card.low  .progress-row .bar > span { background: var(--osep-warn); }
.osep-program-card.bad  .progress-row .bar > span { background: var(--osep-red, #E31B23); }

.osep-program-card .stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--osep-line-soft);
}
.osep-program-card .stat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.osep-program-card .stat i {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.osep-program-card .stat .v {
  font-size: 13px;
  font-weight: 800;
  color: var(--osep-ink-900);
  line-height: 1.1;
}
.osep-program-card .stat .l {
  font-size: 10.5px;
  color: var(--osep-ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}

.osep-program-card .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.osep-program-card .foot .open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--osep-navy-700);
}
.osep-program-card:hover .foot .open { color: var(--osep-navy-800); }
.osep-program-card .foot .open i { color: var(--osep-gold-500); }

/* === LIST VIEW : rows === */
.osep-programs-list {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-programs-list .lhead {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 110px 80px;
  gap: 12px;
  padding: 12px 18px;
  background: var(--osep-bg);
  border-bottom: 1px solid var(--osep-line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  text-transform: uppercase;
}
.osep-programs-list .lrow {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 110px 80px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--osep-line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
  cursor: pointer;
}
.osep-programs-list .lrow:first-of-type { border-top: none; }
.osep-programs-list .lrow:hover { background: var(--osep-navy-50); color: inherit; }

.osep-programs-list .lrow .name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.osep-programs-list .lrow .name-cell .acronym {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--osep-navy-800);
  color: #fff;
  flex-shrink: 0;
}
.osep-programs-list .lrow.high .name-cell .acronym { background: var(--osep-sn-green); }
.osep-programs-list .lrow.mid  .name-cell .acronym { background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500)); color: var(--osep-navy-900); }
.osep-programs-list .lrow.low  .name-cell .acronym { background: var(--osep-warn); }
.osep-programs-list .lrow.bad  .name-cell .acronym { background: var(--osep-red, #E31B23); }

.osep-programs-list .lrow .name-cell .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--osep-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osep-programs-list .lrow .cell {
  font-size: 13px;
  color: var(--osep-ink-700);
}
.osep-programs-list .lrow .cell b { color: var(--osep-ink-900); font-weight: 700; }
.osep-programs-list .lrow .cell .lbl {
  font-size: 10.5px;
  color: var(--osep-ink-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
  font-weight: 600;
}
.osep-programs-list .lrow .pcell {
  display: flex; flex-direction: column; gap: 4px;
}
.osep-programs-list .lrow .pcell .row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--osep-ink-700);
}
.osep-programs-list .lrow .pcell .bar {
  height: 6px;
  background: var(--osep-line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.osep-programs-list .lrow .pcell .bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-navy-600));
}
.osep-programs-list .lrow.high .pcell .bar > span { background: var(--osep-sn-green); }
.osep-programs-list .lrow.mid  .pcell .bar > span { background: linear-gradient(90deg, var(--osep-gold-500), var(--osep-gold-400)); }
.osep-programs-list .lrow.low  .pcell .bar > span { background: var(--osep-warn); }
.osep-programs-list .lrow.bad  .pcell .bar > span { background: var(--osep-red, #E31B23); }

.osep-programs-list .lrow .arrow {
  text-align: right;
  color: var(--osep-ink-300);
  font-size: 16px;
  transition: color .15s ease;
}
.osep-programs-list .lrow:hover .arrow { color: var(--osep-gold-500); }

@media (max-width: 900px) {
  .osep-programs-list .lhead { display: none; }
  .osep-programs-list .lrow { grid-template-columns: 1fr; gap: 8px; }
  .osep-programs-list .lrow .arrow { display: none; }
}

/* === Empty / Loading state === */
.osep-programs-state {
  background: #fff;
  border: 1px dashed var(--osep-line);
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  font-family: var(--osep-font);
  color: var(--osep-ink-500);
}
.osep-programs-state .ic {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--osep-bg);
  color: var(--osep-ink-300);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  font-size: 28px;
}
.osep-programs-state.loading .ic { color: var(--osep-gold-500); }
.osep-programs-state .ttl {
  font-size: 15px;
  font-weight: 700;
  color: var(--osep-ink-900);
  margin-bottom: 4px;
}
.osep-programs-state .sub { font-size: 13px; }

/* =========================
   Page Programmes — détail standalone (browse)
   ========================= */

.osep-program-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 26px 30px;
  margin-bottom: 16px;
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
  font-family: var(--osep-font);
}
.osep-program-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-program-hero > * { position: relative; z-index: 1; }

.osep-program-hero .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.osep-program-hero .id-area {
  flex: 1;
  min-width: 0;
}
.osep-program-hero .badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.osep-program-hero .badges .acronym {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  box-shadow: 0 4px 12px -4px rgba(201,166,89,.5);
}
.osep-program-hero .badges .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.osep-program-hero .badges .pill.active { color: #82E0A6; border-color: rgba(0,133,63,.4); background: rgba(0,133,63,.18); }
.osep-program-hero h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 6px;
  line-height: 1.2;
  color: #fff;
}
.osep-program-hero .desc {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  margin: 0;
  max-width: 760px;
  line-height: 1.55;
}

.osep-program-hero .progress-circle {
  width: 88px;
  text-align: center;
  flex-shrink: 0;
}
.osep-program-hero .progress-circle .ring {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: conic-gradient(var(--osep-gold-500) calc(var(--p,0)*1%), rgba(255,255,255,.15) 0);
  display: grid; place-items: center;
  position: relative;
}
.osep-program-hero .progress-circle .ring::after {
  content: attr(data-pct);
  width: 70px; height: 70px;
  background: var(--osep-navy-800);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800;
  color: var(--osep-gold-300);
  letter-spacing: -.4px;
}
.osep-program-hero .progress-circle .lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  letter-spacing: .06em;
  font-weight: 700;
  margin-top: 8px;
}

/* KPIs alignés dans le hero */
.osep-program-hero .kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .osep-program-hero .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.osep-program-hero .kpi {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  padding: 12px 14px;
}
.osep-program-hero .kpi .l {
  font-size: 10.5px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.osep-program-hero .kpi .l i { color: var(--osep-gold-400); }
.osep-program-hero .kpi .v {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.4px;
  line-height: 1.1;
}
.osep-program-hero .kpi .v small {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  margin-left: 2px;
}

/* Tabs OSEP horizontales pour la page browse */
.osep-program-tabs-wrap {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  box-shadow: var(--osep-shadow-sm);
  overflow: hidden;
}
.osep-program-tabs-wrap .nav-pills.osep-tabs {
  padding: 0 14px;
  background: var(--osep-bg);
}
.osep-program-tabs-wrap > .tab-content { padding: 22px; }

/* =========================
   Anciens styles sidebar liste — conservés mais désactivés (legacy fallback)
   Page Programmes — sidebar liste + détail
   ========================= */

/* Wrapper sidebar (carte qui contient la liste des programmes) */
.osep-programs-side {
  background: #fff !important;
  border: 1px solid var(--osep-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--osep-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  font-family: var(--osep-font);
}
.osep-programs-side .head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--osep-line-soft);
  background: #fff;
  flex-shrink: 0;
}
.osep-programs-side .head-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.osep-programs-side .head-top .ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
}
.osep-programs-side .head-top .ttl i {
  color: var(--osep-gold-500);
  font-size: 16px;
}
.osep-programs-side .head-top .ttl .count {
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}
.osep-programs-side .head-top .add {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.osep-programs-side .head-top .add i { color: var(--osep-gold-400); }

/* Search input dans sidebar programs */
.osep-programs-side .search {
  position: relative;
}
.osep-programs-side .search > i {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--osep-ink-300);
  font-size: 14px;
}
.osep-programs-side .search > input {
  width: 100%;
  border: 1.5px solid var(--osep-line) !important;
  border-radius: 9px !important;
  padding: 8px 12px 8px 34px !important;
  font-size: 12.5px !important;
  font-family: var(--osep-font) !important;
  background: var(--osep-bg);
  color: var(--osep-ink-900);
  transition: all .15s ease;
}
.osep-programs-side .search > input:focus {
  border-color: var(--osep-navy-700) !important;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(19, 56, 106, .08) !important;
  outline: none;
}

/* Bandeau "PROGRAMME / PROJETS" */
.osep-programs-side .colhead {
  padding: 8px 14px;
  background: var(--osep-bg);
  border-bottom: 1px solid var(--osep-line-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--osep-ink-500);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Liste scrollable de cards (rendues par JS) */
.osep-programs-side .list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  min-height: 0;
}

/* === program-card (générée par ProgramManager.js _renderCard) === */
.osep-programs-side .program-card {
  background: #fff;
  border: 1px solid var(--osep-line-soft);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
}
.osep-programs-side .program-card::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background .15s ease;
}
.osep-programs-side .program-card:hover {
  border-color: var(--osep-navy-100);
  background: var(--osep-bg);
}
.osep-programs-side .program-card:hover::before { background: var(--osep-gold-500); }
.osep-programs-side .program-card.active {
  background: linear-gradient(180deg, #fff, var(--osep-navy-50));
  border-color: var(--osep-navy-700);
  box-shadow: 0 6px 16px -8px rgba(10, 42, 82, .25);
}
.osep-programs-side .program-card.active::before {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
}

/* Neutralise les classes utilitaires Bootstrap héritées du _renderCard JS */
.osep-programs-side .program-card.border-bottom { border-bottom: 1px solid var(--osep-line-soft) !important; }
.osep-programs-side .program-card.px-3 { padding-left: 14px !important; padding-right: 14px !important; }
.osep-programs-side .program-card.py-2 { padding-top: 12px !important; padding-bottom: 12px !important; }

/* Surcharges des classes Bootstrap utilisées par le JS dans la card */
.osep-programs-side .program-card .badge.bg-primary {
  background: var(--osep-navy-800) !important;
  color: #fff;
  font-size: 10px !important;
  letter-spacing: .04em;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-weight: 800;
}
.osep-programs-side .program-card.active .badge.bg-primary {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500)) !important;
  color: var(--osep-navy-900) !important;
}
.osep-programs-side .program-card .progress {
  background: var(--osep-line-soft) !important;
  border-radius: 999px !important;
  height: 4px !important;
  margin-top: 8px;
}
.osep-programs-side .program-card .progress-bar {
  border-radius: 999px !important;
}
.osep-programs-side .program-card .text-muted {
  color: var(--osep-ink-500) !important;
}

/* === Empty state (welcome) === */
.osep-programs-empty {
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.12), transparent 60%),
    linear-gradient(135deg, #fff, var(--osep-bg));
  border: 1px solid var(--osep-line);
  border-radius: 16px;
  padding: 40px 32px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--osep-font);
  position: relative;
  overflow: hidden;
}
.osep-programs-empty::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,42,82,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,42,82,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-programs-empty > * { position: relative; z-index: 1; }

.osep-programs-empty .hero-mark {
  width: 96px; height: 96px;
  border-radius: 24px;
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(201,166,89,.4), transparent 70%),
    linear-gradient(135deg, var(--osep-navy-800), var(--osep-navy-700));
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--osep-gold-400);
  font-size: 42px;
  box-shadow: 0 16px 40px -16px rgba(10, 42, 82, .55), inset 0 0 0 1px rgba(201,166,89,.3);
}
.osep-programs-empty h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--osep-ink-900);
  margin: 0 0 8px;
}
.osep-programs-empty .lead {
  color: var(--osep-ink-500);
  font-size: 14px;
  max-width: 540px;
  margin: 0 0 28px;
  line-height: 1.55;
}

/* Trio de tuiles d'information */
.osep-programs-empty .tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .osep-programs-empty .tiles { grid-template-columns: 1fr; }
}
.osep-programs-empty .tile {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all .15s ease;
}
.osep-programs-empty .tile:hover {
  border-color: var(--osep-navy-700);
  transform: translateY(-2px);
  box-shadow: var(--osep-shadow-md);
}
.osep-programs-empty .tile .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
}
.osep-programs-empty .tile.navy  .ic { background: var(--osep-navy-50);  color: var(--osep-navy-800); }
.osep-programs-empty .tile.gold  .ic { background: var(--osep-gold-50);  color: #8a6b29; }
.osep-programs-empty .tile.green .ic { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-programs-empty .tile .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  font-weight: 700;
}
.osep-programs-empty .tile .ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
}

.osep-programs-empty .pill-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  border: 1px solid var(--osep-navy-100);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.osep-programs-empty .pill-hint i { color: var(--osep-gold-500); }

/* État de chargement (spinner) dans le list */
.osep-programs-side .list > .text-center.py-4 {
  padding: 32px 16px !important;
  color: var(--osep-ink-500) !important;
}
.osep-programs-side .list > .text-center.py-4 i {
  font-size: 28px !important;
  color: var(--osep-gold-500) !important;
}

/* =========================
   Commentaires (onglet projet)
   ========================= */
.osep-comments-wrap {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  box-shadow: var(--osep-shadow-sm);
  overflow: hidden;
  font-family: var(--osep-font);
}
.osep-comments-wrap #commentAddContainer:empty { display: none; }
.osep-comments-wrap #commentAddContainer:not(:empty) {
  padding: 14px 16px;
  border-bottom: 1px solid var(--osep-line-soft);
  background: var(--osep-bg);
}
.osep-comments-wrap #commentsList {
  padding: 8px;
}
/* Empty state (rendu par JS) */
.osep-comments-wrap #comment-empty-msg {
  padding: 36px 20px !important;
}
.osep-comments-wrap #comment-empty-msg i.mdi-comment-off-outline {
  font-size: 36px !important;
  background: var(--osep-bg);
  border-radius: 50%;
  padding: 18px;
  color: var(--osep-ink-300) !important;
  display: inline-block;
}
.osep-comments-wrap #comment-empty-msg h6 {
  color: var(--osep-ink-700) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
/* Bouton "Afficher plus" */
.osep-comments-wrap #load-more-comments-btn {
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
/* Items de commentaires (JS-rendered) */
.osep-comments-wrap .comment-item,
.osep-comments-wrap .x-editable-comment .comment-card {
  background: #fff;
  border: 1px solid var(--osep-line-soft);
  border-radius: 11px;
  padding: 12px 14px;
  margin: 6px 0;
  transition: border-color .15s ease;
}
.osep-comments-wrap .comment-item:hover {
  border-color: var(--osep-navy-100);
}

/* =========================
   Tab header (titre + bouton + compteur) — réutilisable dans tous les onglets
   ========================= */
.osep-tab-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--osep-line-soft);
  font-family: var(--osep-font);
  flex-wrap: wrap;
}
.osep-tab-head .left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.osep-tab-head .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.osep-tab-head .ic.gold { background: var(--osep-gold-50); color: #8a6b29; }
.osep-tab-head h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--osep-ink-900);
  margin: 0 0 2px;
  letter-spacing: -.1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.osep-tab-head h4 .count-pill {
  background: var(--osep-navy-100);
  color: var(--osep-navy-800);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.osep-tab-head .sub {
  font-size: 12px;
  color: var(--osep-ink-500);
  margin: 0;
  font-weight: 500;
}
.osep-tab-head .right { display: flex; gap: 8px; align-items: center; }
.osep-tab-head .btn {
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
}

/* =========================
   Tableau OSEP (institutionnel sobre)
   Compatible DataTables (les classes DT sont préservées)
   ========================= */
.osep-table-wrap {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--osep-shadow-sm);
}
.osep-table-wrap table {
  margin: 0 !important;
  font-family: var(--osep-font);
  width: 100% !important;
  border-collapse: collapse;
}
.osep-table-wrap thead th,
.osep-table-wrap thead.table-light th {
  background: var(--osep-bg) !important;
  color: var(--osep-ink-500) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--osep-line) !important;
  border-top: none !important;
}
.osep-table-wrap tbody td {
  padding: 12px 14px !important;
  font-size: 13px;
  color: var(--osep-ink-900);
  vertical-align: middle;
  border-top: 1px solid var(--osep-line-soft) !important;
}
.osep-table-wrap tbody tr:hover td {
  background: var(--osep-navy-50) !important;
}
.osep-table-wrap tbody tr:first-child td { border-top: none !important; }
.osep-table-wrap .badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  padding: 4px 9px !important;
  border-radius: 999px !important;
}

/* DataTable controls — input recherche, sélecteur length, paginate */
.osep-table-wrap .dataTables_wrapper .dataTables_filter input,
.osep-table-wrap .dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--osep-line) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-family: var(--osep-font) !important;
  background: #fff;
}
.osep-table-wrap .dataTables_wrapper .dataTables_filter input:focus,
.osep-table-wrap .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--osep-navy-700) !important;
  box-shadow: 0 0 0 4px rgba(19,56,106,.08) !important;
  outline: none;
}
.osep-table-wrap .dataTables_wrapper .paginate_button {
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  border: 1px solid var(--osep-line) !important;
  background: #fff !important;
  color: var(--osep-ink-700) !important;
}
.osep-table-wrap .dataTables_wrapper .paginate_button.current,
.osep-table-wrap .dataTables_wrapper .paginate_button.current:hover {
  background: var(--osep-navy-800) !important;
  border-color: var(--osep-navy-800) !important;
  color: #fff !important;
}
.osep-table-wrap .dataTables_wrapper .dataTables_info,
.osep-table-wrap .dataTables_wrapper .dataTables_length,
.osep-table-wrap .dataTables_wrapper .dataTables_filter {
  color: var(--osep-ink-500);
  font-size: 12px;
  padding: 12px 16px;
}

/* =========================
   Modale OSEP (formulaires)
   ========================= */
.modal.osep-modal .modal-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--osep-shadow-lg);
  overflow: hidden;
  font-family: var(--osep-font);
}
.modal.osep-modal .modal-header {
  background:
    radial-gradient(500px 220px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
  border-bottom: none;
  padding: 18px 24px;
}
.modal.osep-modal .modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: #fff;
}
.modal.osep-modal .modal-header .modal-title i {
  color: var(--osep-gold-400);
  font-size: 18px;
}
.modal.osep-modal .modal-header .btn-close {
  filter: invert(1) brightness(2);
  opacity: .7;
}
.modal.osep-modal .modal-header .btn-close:hover { opacity: 1; }
.modal.osep-modal .modal-body { padding: 24px; }
.modal.osep-modal .modal-footer {
  background: var(--osep-bg);
  border-top: 1px solid var(--osep-line-soft);
  padding: 14px 24px;
  gap: 8px;
}
.modal.osep-modal .modal-footer .btn {
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
}

/* =========================
   Documents (onglet du projet) — dropzone + tree jstree
   ========================= */
.osep-doc-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  font-family: var(--osep-font);
}
@media (max-width: 1100px) { .osep-doc-layout { grid-template-columns: 1fr; } }

.osep-doc-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  box-shadow: var(--osep-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 420px;
}
.osep-doc-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--osep-line-soft);
  background: var(--osep-bg);
}
.osep-doc-card .head .ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.osep-doc-card .head .ic.navy { background: var(--osep-navy-100); color: var(--osep-navy-800); }
.osep-doc-card .head .ic.gold { background: var(--osep-gold-50); color: #8a6b29; }
.osep-doc-card .head h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-900);
  margin: 0;
  letter-spacing: -.1px;
}
.osep-doc-card .head .sub {
  font-size: 12px;
  color: var(--osep-ink-500);
  margin-top: 1px;
}
.osep-doc-card .body {
  flex: 1;
  padding: 14px 16px;
  overflow: auto;
  max-height: 480px;
}

/* Recherche dans l'arbre */
.osep-doc-search {
  position: relative;
  margin-bottom: 12px;
}
.osep-doc-search > i {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--osep-ink-300);
  font-size: 14px;
}
.osep-doc-search > input {
  width: 100%;
  border: 1.5px solid var(--osep-line) !important;
  border-radius: 10px !important;
  padding: 9px 14px 9px 36px !important;
  font-size: 13px !important;
  font-family: var(--osep-font) !important;
  background: #fff;
  color: var(--osep-ink-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.osep-doc-search > input:focus {
  border-color: var(--osep-navy-700) !important;
  box-shadow: 0 0 0 4px rgba(19, 56, 106, .08) !important;
  outline: none;
}

/* jstree styling */
#document-tree { font-family: var(--osep-font); font-size: 13px; }
#document-tree .jstree-anchor {
  border-radius: 6px;
  padding: 4px 8px;
  height: auto !important;
  line-height: 1.4;
  color: var(--osep-ink-700) !important;
}
#document-tree .jstree-anchor:hover {
  background: var(--osep-navy-50) !important;
  color: var(--osep-navy-800) !important;
}
#document-tree .jstree-clicked {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800)) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -4px rgba(10, 42, 82, .35);
}
#document-tree .jstree-icon { color: var(--osep-gold-500) !important; }
#document-tree mark {
  background: var(--osep-gold-50);
  color: #8a6b29;
  padding: 0 2px;
  border-radius: 3px;
}

/* Dropzone OSEP */
.osep-doc-upload-zone .dropzone,
form.dropzone {
  border: 2px dashed var(--osep-line) !important;
  border-radius: 12px !important;
  background: var(--osep-bg) !important;
  min-height: 280px !important;
  padding: 24px !important;
  transition: all .2s ease;
  font-family: var(--osep-font);
  position: relative;
}
.osep-doc-upload-zone .dropzone:hover,
.osep-doc-upload-zone .dropzone.dz-drag-hover,
form.dropzone:hover,
form.dropzone.dz-drag-hover {
  border-color: var(--osep-navy-700) !important;
  background: #fff !important;
  box-shadow: var(--osep-shadow-md);
}
.osep-doc-upload-zone .dz-message,
form.dropzone .dz-message {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  margin: 0 !important;
}
.osep-doc-upload-zone .dz-icon,
form.dropzone .dz-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--osep-navy-50), #fff);
  color: var(--osep-navy-700);
  font-size: 26px;
  margin-bottom: 6px;
  border: 1px solid var(--osep-line);
  box-shadow: var(--osep-shadow-sm);
}
.osep-doc-upload-zone .dz-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-900) !important;
  margin: 0 !important;
}
.osep-doc-upload-zone .dz-subtitle {
  font-size: 12px;
  color: var(--osep-ink-500) !important;
  font-weight: 500;
  margin: 0 !important;
}
.osep-doc-upload-zone .dz-hint {
  font-size: 11px;
  color: var(--osep-ink-300);
  margin-top: 6px;
  font-weight: 500;
}
.osep-doc-upload-zone .dz-hint .kbd {
  background: var(--osep-bg);
  border: 1px solid var(--osep-line);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
}

/* Aperçus de fichiers générés par Dropzone après upload */
.osep-doc-upload-zone .dz-preview,
form.dropzone .dz-preview {
  border-radius: 10px !important;
  border: 1px solid var(--osep-line) !important;
  background: #fff !important;
  box-shadow: var(--osep-shadow-sm);
}
.osep-doc-upload-zone .dz-preview .dz-progress,
form.dropzone .dz-preview .dz-progress {
  background: var(--osep-line-soft) !important;
}
.osep-doc-upload-zone .dz-preview .dz-progress .dz-upload,
form.dropzone .dz-preview .dz-progress .dz-upload {
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-gold-500)) !important;
}
.osep-doc-upload-zone .dz-error,
form.dropzone .dz-error {
  font-size: 12px;
  color: var(--osep-red, #E31B23) !important;
  font-weight: 600;
  margin-top: 8px;
}

/* =========================
   Wizard de création de projet
   ========================= */

/* En-tête (hero) */
.osep-wizard-hero {
  background:
    radial-gradient(700px 320px at 90% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  font-family: var(--osep-font);
}
.osep-wizard-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-wizard-hero > * { position: relative; z-index: 1; }
.osep-wizard-hero .gov {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(201,166,89,.15);
  color: var(--osep-gold-300);
  border: 1px solid rgba(201,166,89,.3);
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.osep-wizard-hero h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  line-height: 1.2;
  color: #fff;
}
.osep-wizard-hero h1 i {
  color: var(--osep-gold-400);
  margin-right: 10px;
  font-size: 22px;
}
.osep-wizard-hero .lead {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  max-width: 720px;
  margin: 0;
}

/* Stepper */
.osep-wizard-stepper {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 22px 28px;
  margin-bottom: 18px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-wizard-stepper .steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
}
.osep-wizard-stepper .step {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.osep-wizard-stepper .step .num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
  border: 2px solid var(--osep-line);
  background: #fff;
  color: var(--osep-ink-500);
  transition: all .25s ease;
}
.osep-wizard-stepper .step .body { min-width: 0; }
.osep-wizard-stepper .step .lbl {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  margin-bottom: 2px;
}
.osep-wizard-stepper .step .ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-700);
  letter-spacing: -.1px;
}

/* État done : navy avec check */
.osep-wizard-stepper .step.done .num {
  background: linear-gradient(180deg, var(--osep-navy-700), var(--osep-navy-800));
  color: #fff;
  border-color: var(--osep-navy-800);
  box-shadow: 0 4px 12px -4px rgba(10,42,82,.3);
}
.osep-wizard-stepper .step.done .lbl { color: var(--osep-navy-700); }
.osep-wizard-stepper .step.done .ttl { color: var(--osep-navy-800); }

/* État active : gold */
.osep-wizard-stepper .step.active .num {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
  border-color: var(--osep-gold-500);
  box-shadow: 0 6px 16px -6px rgba(201,166,89,.55);
}
.osep-wizard-stepper .step.active .num::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--osep-gold-300);
  opacity: .6;
  animation: osep-pulse 2s ease-out infinite;
}
@keyframes osep-pulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.4); opacity: 0; }
}
.osep-wizard-stepper .step.active .num { position: relative; }
.osep-wizard-stepper .step.active .lbl { color: #8a6b29; }
.osep-wizard-stepper .step.active .ttl { color: var(--osep-ink-900); font-weight: 800; }

/* Connecteur entre étapes */
.osep-wizard-stepper .connector {
  height: 2px;
  background: var(--osep-line);
  position: relative;
  margin: 0 -8px;
  align-self: center;
  min-width: 24px;
}
.osep-wizard-stepper .connector.done {
  background: linear-gradient(90deg, var(--osep-navy-700), var(--osep-navy-800));
}

/* Mode mobile */
@media (max-width: 800px) {
  .osep-wizard-stepper { padding: 18px 16px; }
  .osep-wizard-stepper .steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .osep-wizard-stepper .connector { display: none; }
}

/* =========================
   Sections de formulaire OSEP
   ========================= */
.osep-form-section {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 18px;
  box-shadow: var(--osep-shadow-sm);
  font-family: var(--osep-font);
}
.osep-form-section .section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--osep-line-soft);
}
.osep-form-section .section-head .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.osep-form-section .section-head .ic.gold {
  background: var(--osep-gold-50);
  color: #8a6b29;
}
.osep-form-section .section-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  margin: 0 0 2px;
  color: var(--osep-ink-900);
}
.osep-form-section .section-head .sub {
  font-size: 12.5px;
  color: var(--osep-ink-500);
  margin: 0;
  font-weight: 500;
}

/* Form-row : grid label + champ */
.osep-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 800px) {
  .osep-form-grid { grid-template-columns: 1fr; }
}
.osep-form-grid .full { grid-column: 1 / -1; }
.osep-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.osep-form-row label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-ink-700);
  margin: 0;
}
.osep-form-row label .req { color: var(--osep-red, #E31B23); margin-left: 2px; }
.osep-form-row .help {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  margin-top: 4px;
  line-height: 1.4;
}
.osep-form-row .form-control,
.osep-form-row .form-select,
.osep-form-row .ts-control {
  border: 1.5px solid var(--osep-line) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-family: var(--osep-font) !important;
  color: var(--osep-ink-900);
  background-color: #fff;
}
.osep-form-row .form-control:focus,
.osep-form-row .form-select:focus,
.osep-form-row .ts-wrapper.focus .ts-control {
  border-color: var(--osep-navy-700) !important;
  box-shadow: 0 0 0 4px rgba(19,56,106,.08) !important;
}
.osep-form-row .ql-toolbar.ql-snow,
.osep-form-row .ql-container.ql-snow {
  border-color: var(--osep-line) !important;
}
.osep-form-row .ql-toolbar.ql-snow {
  border-radius: 10px 10px 0 0 !important;
  background: var(--osep-bg);
}
.osep-form-row .ql-container.ql-snow {
  border-radius: 0 0 10px 10px !important;
  font-family: var(--osep-font);
  font-size: 14px;
}

/* Boutons d'action en bas du formulaire */
.osep-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--osep-line-soft);
}
.osep-form-actions .left { display: flex; gap: 10px; }
.osep-form-actions .right { display: flex; gap: 10px; margin-left: auto; }
.osep-form-actions .btn {
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}
.osep-form-actions .btn-outline-secondary {
  border-color: var(--osep-line) !important;
  color: var(--osep-ink-700) !important;
  background: #fff !important;
}
.osep-form-actions .btn-outline-secondary:hover {
  border-color: var(--osep-navy-700) !important;
  color: var(--osep-navy-800) !important;
}

/* =========================
   Radio-cards (choix multiples visuels)
   ========================= */
.osep-radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.osep-radio-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .osep-radio-cards,
  .osep-radio-cards.cols-3 { grid-template-columns: 1fr; }
}
.osep-radio-card {
  position: relative;
  cursor: pointer;
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--osep-line);
  background: #fff;
  transition: all .15s ease;
}
.osep-radio-card:hover {
  border-color: var(--osep-navy-700);
  box-shadow: var(--osep-shadow-md);
}
.osep-radio-card input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--osep-navy-800);
}
.osep-radio-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 32px;
}
.osep-radio-card .head .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  font-size: 15px;
  flex-shrink: 0;
}
.osep-radio-card .ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
}
.osep-radio-card .desc {
  font-size: 12px;
  color: var(--osep-ink-500);
  line-height: 1.45;
  margin: 0;
}
.osep-radio-card:has(input:checked) {
  border-color: var(--osep-navy-800);
  background: linear-gradient(160deg, var(--osep-navy-50), #fff);
  box-shadow: 0 6px 16px -6px rgba(10,42,82,.18);
}
.osep-radio-card:has(input:checked) .head .ic {
  background: linear-gradient(180deg, var(--osep-gold-400), var(--osep-gold-500));
  color: var(--osep-navy-900);
}
.osep-radio-card:has(input:checked) .ttl { color: var(--osep-navy-800); }

/* =========================
   Kanban places (step 3) — cards de placeholder
   ========================= */
.osep-kanban-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.osep-kanban-place {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 11px;
  padding: 12px;
  position: relative;
  transition: all .15s ease;
}
.osep-kanban-place:hover { border-color: var(--osep-navy-700); }
.osep-kanban-place .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--osep-ink-900);
  letter-spacing: -.1px;
}
.osep-kanban-place .head input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--osep-navy-800);
  cursor: pointer;
}
.osep-kanban-place .placeholders span {
  display: block;
  height: 7px;
  background: var(--osep-line-soft);
  border-radius: 4px;
  margin-bottom: 4px;
}
.osep-kanban-place .placeholders span.gold { background: var(--osep-gold-50); }
.osep-kanban-place .placeholders span.navy { background: var(--osep-navy-50); }

/* Info alert */
.osep-info-alert {
  background: var(--osep-navy-50);
  border: 1px solid var(--osep-navy-100);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--osep-ink-700);
}
.osep-info-alert i {
  color: var(--osep-navy-700);
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* =========================
   Page d'accueil utilisateur (Mon espace)
   ========================= */
.osep-home {
  font-family: var(--osep-font);
  padding-bottom: 16px;
}

/* Hero "Bonjour Massamba" */
.osep-home-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 18px;
  background:
    radial-gradient(700px 320px at 95% -50%, rgba(201,166,89,.18), transparent 60%),
    linear-gradient(135deg, var(--osep-navy-900) 0%, var(--osep-navy-800) 100%);
  color: #fff;
}
.osep-home-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 80% 0, black 30%, transparent 75%);
  pointer-events: none;
}
.osep-home-hero > * { position: relative; z-index: 1; }

.osep-greeting-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.osep-greeting .gov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201,166,89,.15);
  color: var(--osep-gold-300);
  border: 1px solid rgba(201,166,89,.3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.osep-greeting h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.6px;
  margin: 0 0 6px;
  line-height: 1.15;
  color: #fff;
}
.osep-greeting h1 .wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: osep-wave 2.2s ease-in-out 1.2s 2;
}
@keyframes osep-wave {
  0%,60%,100% { transform: rotate(0); }
  10%,30%,50% { transform: rotate(14deg); }
  20%,40% { transform: rotate(-8deg); }
}
.osep-greeting .lead {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  margin: 0;
  max-width: 520px;
}

.osep-now {
  text-align: right;
  color: rgba(255,255,255,.85);
}
.osep-now .day {
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .02em;
}
.osep-now .time {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* KPIs alignés dans le hero */
.osep-home-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .osep-home-kpis { grid-template-columns: repeat(2, 1fr); } }
.osep-home-kpi {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(2px);
}
.osep-home-kpi .ic {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  background: rgba(201,166,89,.18);
  color: var(--osep-gold-300);
  border: 1px solid rgba(201,166,89,.28);
}
.osep-home-kpi.alert .ic {
  background: rgba(227, 27, 35, .18);
  color: #FFA8AC;
  border-color: rgba(227, 27, 35, .35);
}
.osep-home-kpi.notify .ic {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.osep-home-kpi.event .ic {
  background: rgba(0,133,63,.20);
  color: #82E0A6;
  border-color: rgba(0,133,63,.35);
}
.osep-home-kpi .body { min-width: 0; }
.osep-home-kpi .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  font-weight: 700;
}
.osep-home-kpi .val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #fff;
  line-height: 1.1;
  margin-top: 2px;
}
.osep-home-kpi .hint {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
}
.osep-home-kpi.alert .hint { color: #FFA8AC; }

/* Bento grille principale */
.osep-home-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) { .osep-home-bento { grid-template-columns: 1fr; } }

.osep-home-card {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  box-shadow: var(--osep-shadow-sm);
  overflow: hidden;
}
.osep-home-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--osep-line-soft);
}
.osep-home-card .head h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.1px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.osep-home-card .head h3 i {
  color: var(--osep-gold-500);
  font-size: 16px;
}
.osep-home-card .head .sub {
  font-size: 12px;
  color: var(--osep-ink-500);
  margin-top: 2px;
  font-weight: 500;
}
.osep-home-card .head .count-pill {
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.osep-home-card .head .count-pill.danger {
  background: var(--osep-danger-soft);
  color: var(--osep-red, #E31B23);
}
.osep-home-card .head a.see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--osep-navy-700);
  text-decoration: none;
}
.osep-home-card .head a.see-all:hover {
  color: var(--osep-navy-800);
  text-decoration: underline;
}

.osep-home-card .body {
  max-height: 460px;
  overflow-y: auto;
}
.osep-home-card .body.compact { max-height: 360px; }

/* Liste d'actions du jour (élément cliquable) */
.osep-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--osep-line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.osep-action-row:first-child { border-top: none; }
.osep-action-row:hover { background: var(--osep-navy-50); }
.osep-action-row .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--osep-navy-50);
  color: var(--osep-navy-800);
  border: 1px solid var(--osep-line-soft);
}
.osep-action-row .ic.validate { background: var(--osep-navy-100); color: var(--osep-navy-800); }
.osep-action-row .ic.approve  { background: var(--osep-warn-soft); color: var(--osep-warn); }
.osep-action-row .ic.fill     { background: var(--osep-gold-50);   color: #8a6b29; }
.osep-action-row .body { flex: 1; min-width: 0; }
.osep-action-row .body .type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.osep-action-row .body .type.validate { color: var(--osep-navy-700); }
.osep-action-row .body .type.approve  { color: var(--osep-warn); }
.osep-action-row .body .type.fill     { color: #8a6b29; }
.osep-action-row .body .type.default  { color: var(--osep-ink-500); }
.osep-action-row .body .lbl {
  font-size: 13px;
  color: var(--osep-ink-700);
  line-height: 1.3;
}
.osep-action-row .due {
  text-align: right;
  flex-shrink: 0;
}
.osep-action-row .due .date {
  font-size: 12px;
  font-weight: 700;
  color: var(--osep-ink-900);
  white-space: nowrap;
}
.osep-action-row .due .late {
  display: inline-block;
  background: var(--osep-danger-soft);
  color: var(--osep-red, #E31B23);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

/* Notifications compactes */
.osep-notif-row {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--osep-line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
  cursor: pointer;
}
.osep-notif-row:first-child { border-top: none; }
.osep-notif-row:hover { background: var(--osep-navy-50); }
.osep-notif-row.unread { background: rgba(201, 166, 89, .04); }
.osep-notif-row .av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--osep-navy-700);
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.osep-notif-row.read .av { background: var(--osep-ink-300); }
.osep-notif-row .body { flex: 1; min-width: 0; }
.osep-notif-row .body .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.osep-notif-row .body .author {
  font-size: 13px;
  font-weight: 700;
  color: var(--osep-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osep-notif-row .body .when {
  font-size: 11px;
  color: var(--osep-ink-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.osep-notif-row .body .msg {
  font-size: 12.5px;
  color: var(--osep-ink-700);
  margin: 0;
  line-height: 1.4;
}
.osep-notif-row .body .new-pill {
  display: inline-block;
  background: var(--osep-gold-50);
  color: #8a6b29;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Événements (calendar item) */
.osep-event-row {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--osep-line-soft);
}
.osep-event-row:first-child { border-top: none; }
.osep-event-row .date-box {
  background: linear-gradient(135deg, var(--osep-navy-800), var(--osep-navy-700));
  color: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 8px 10px;
  width: 56px;
  flex-shrink: 0;
  box-shadow: var(--osep-shadow-sm);
}
.osep-event-row .date-box .d {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
}
.osep-event-row .date-box .m {
  font-size: 10px;
  color: var(--osep-gold-300);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
  font-weight: 700;
}
.osep-event-row .body { flex: 1; min-width: 0; }
.osep-event-row .body .ttl {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--osep-ink-900);
  margin-bottom: 2px;
  line-height: 1.3;
}
.osep-event-row .body .desc {
  font-size: 12px;
  color: var(--osep-ink-500);
  margin: 0 0 6px;
  line-height: 1.4;
}
.osep-event-row .body .time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--osep-ink-700);
  background: var(--osep-bg);
  padding: 3px 9px;
  border-radius: 999px;
}

/* État vide d'une carte */
.osep-empty {
  text-align: center;
  padding: 28px 20px;
  color: var(--osep-ink-500);
}
.osep-empty .ic {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 12px;
  background: var(--osep-bg);
  color: var(--osep-ink-300);
  font-size: 24px;
}
.osep-empty .ic.success { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-empty .ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--osep-ink-700);
  margin-bottom: 4px;
}
.osep-empty .sub {
  font-size: 12.5px;
  color: var(--osep-ink-500);
}

/* Bandeau de raccourcis */
.osep-quick-strip {
  background: #fff;
  border: 1px solid var(--osep-line);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  box-shadow: var(--osep-shadow-sm);
  margin-bottom: 18px;
}
.osep-quick-strip .head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-ink-500);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid var(--osep-line);
}
.osep-quick-strip .head i { color: var(--osep-gold-500); font-size: 14px; }
.osep-quick-strip .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .osep-quick-strip .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .osep-quick-strip { grid-template-columns: 1fr; }
  .osep-quick-strip .head { border-right: none; border-bottom: 1px solid var(--osep-line); padding: 0 0 10px; }
  .osep-quick-strip .grid { grid-template-columns: 1fr; }
}

.osep-quick-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--osep-line-soft);
  background: var(--osep-bg);
  text-decoration: none;
  color: inherit;
  transition: all .15s ease;
}
.osep-quick-tile:hover {
  background: #fff;
  border-color: var(--osep-navy-700);
  transform: translateY(-2px);
  box-shadow: var(--osep-shadow-md);
}
.osep-quick-tile .ic {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.osep-quick-tile .ic.navy  { background: var(--osep-navy-50);    color: var(--osep-navy-800); }
.osep-quick-tile .ic.gold  { background: var(--osep-gold-50);    color: #8a6b29; }
.osep-quick-tile .ic.green { background: var(--osep-success-soft); color: var(--osep-sn-green); }
.osep-quick-tile .ic.warn  { background: var(--osep-warn-soft);  color: var(--osep-warn); }
.osep-quick-tile .body { min-width: 0; }
.osep-quick-tile .ttl {
  font-size: 13px;
  font-weight: 700;
  color: var(--osep-ink-900);
  line-height: 1.2;
}
.osep-quick-tile .sub {
  font-size: 11.5px;
  color: var(--osep-ink-500);
  margin-top: 2px;
}

/* Tabs internes "Mes tâches" — utilise nav-pills + osep-tabs déjà défini.
   Surcharge la nav pour la mettre dans le head de l'osep-home-card */
.osep-home-card .head .nav-pills.osep-tabs {
  border-bottom: none;
  padding: 0;
  margin: 0;
}
.osep-home-card .head .nav-pills.osep-tabs .nav-link {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
}

/* Mini-breadcrumb pour sous-pages projet
   (followup, planning, registers, reports, dashboard)
   ========================= */
.osep-mini-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--osep-ink-500);
  margin: 6px 4px 14px;
  font-family: var(--osep-font);
}
.osep-mini-crumbs a {
  color: var(--osep-ink-500);
  text-decoration: none;
  transition: color .15s ease;
}
.osep-mini-crumbs a:hover { color: var(--osep-navy-800); }
.osep-mini-crumbs .sep {
  color: var(--osep-ink-300);
  font-size: 9px;
}
.osep-mini-crumbs .here {
  color: var(--osep-ink-900);
  font-weight: 600;
}
.osep-mini-crumbs i.fa-home,
.osep-mini-crumbs i.mdi-home {
  font-size: 12px;
}

/* =========================================================================
   OSEP — Page Utilisateurs (liste + édition)
   ========================================================================= */

/* ---- KPI strip --------------------------------------------------------- */
.osep-users-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 16px;
}
.osep-users-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.osep-users-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 42, 82, .08);
}
.osep-users-kpi .ico {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.osep-users-kpi .ico--navy   { background: var(--osep-navy-50, #EEF3FB); color: var(--osep-navy-800, #0A2A52); }
.osep-users-kpi .ico--green  { background: #E7F6EE; color: #0A7C42; }
.osep-users-kpi .ico--gold   { background: var(--osep-gold-50, #FBF6E8); color: var(--osep-gold-500, #C9A659); }
.osep-users-kpi .ico--red    { background: #FCEAEC; color: #C2363D; }
.osep-users-kpi .body { line-height: 1.2; }
.osep-users-kpi .value {
  font-size: 22px; font-weight: 800; color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -.01em;
}
.osep-users-kpi .label {
  font-size: 12px; color: var(--osep-ink-700, #334155);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .osep-users-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .osep-users-kpis { grid-template-columns: 1fr; }
}

/* ---- Toolbar (recherche + filtres) ------------------------------------- */
.osep-users-toolbar {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-users-toolbar__row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.osep-users-toolbar__search {
  flex: 1; min-width: 240px;
  position: relative;
}
.osep-users-toolbar__search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 18px;
}
.osep-users-toolbar__search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 999px;
  padding: 0 16px 0 38px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.osep-users-toolbar__search input:focus {
  border-color: var(--osep-navy-600, #1E4A85);
  box-shadow: 0 0 0 3px rgba(30, 74, 133, .12);
}
.osep-users-toolbar__filters {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.osep-users-toolbar__filters .osep-select {
  height: 40px;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 8px;
  padding: 0 32px 0 12px;
  font-size: 13px;
  background: #fff;
  min-width: 160px;
}

/* ---- Tableau utilisateurs --------------------------------------------- */
.osep-users-table-card {
  padding: 0;
  overflow: hidden;
}
.osep-users-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
}
.osep-users-table-count {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.osep-users-table-hint {
  color: #94a3b8; font-size: 12px;
}
.osep-users-table-wrap {
  overflow-x: auto;
}
.osep-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.osep-users-table thead th {
  background: #F8FAFC;
  color: #64748B;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
  text-align: left;
}
.osep-users-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
  vertical-align: middle;
}
.osep-users-row {
  transition: background-color .12s ease;
}
.osep-users-row:hover {
  background-color: rgba(10, 42, 82, .03);
}
.osep-users-cell-user {
  display: flex; align-items: center; gap: 12px;
}
.osep-user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.osep-user-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.osep-user-identity { min-width: 0; flex: 1; }
.osep-user-name {
  font-weight: 600;
  color: var(--osep-navy-900, #0A2A52);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
.osep-user-email {
  color: #64748B;
  font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
.osep-user-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 11.5px;
}
.osep-user-meta i { margin-right: 4px; }

/* Rôles chips dans la table */
.osep-user-roles {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.osep-role-chip {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  border: 1px solid rgba(30, 74, 133, .15);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Badges de statut */
.osep-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.osep-status i { font-size: 14px; }
.osep-status--active   { background: #E7F6EE; color: #0A7C42; }
.osep-status--invited  { background: var(--osep-gold-50, #FBF6E8); color: #8C6E1E; }
.osep-status--disabled { background: #FCEAEC; color: #C2363D; }

/* Texte secondaire / muet */
.osep-text-soft { color: #475569; }
.osep-text-mute { color: #cbd5e1; }

/* Actions de ligne */
.osep-users-actions {
  display: inline-flex; align-items: center; gap: 4px;
}
.osep-icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--osep-navy-800, #0A2A52);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
  text-decoration: none;
}
.osep-icon-btn:hover {
  background: var(--osep-navy-50, #EEF3FB);
  border-color: var(--osep-navy-100, #E5ECF7);
  color: var(--osep-navy-900, #0A2A52);
}
.osep-icon-btn i { font-size: 18px; }

/* Empty states */
.osep-users-empty {
  padding: 40px 20px;
  text-align: center;
}
.osep-users-empty__inner {
  display: inline-flex; align-items: center; gap: 14px;
  background: #F8FAFC;
  border: 1px dashed var(--osep-line, #E2E8F0);
  padding: 16px 22px;
  border-radius: 12px;
  color: #475569;
}
.osep-users-empty__inner i {
  font-size: 32px;
  color: #94a3b8;
}
.osep-users-empty__hint {
  font-size: 12px; color: #94a3b8;
  margin-top: 2px;
}

/* =========================================================================
   OSEP — Page Édition utilisateur
   ========================================================================= */

/* ---- Hero -------------------------------------------------------------- */
.osep-user-hero {
  background: linear-gradient(135deg, #fff 0%, var(--osep-navy-50, #EEF3FB) 100%);
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-user-hero__back { margin-bottom: 12px; }
.osep-user-hero__inner {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: center;
}
.osep-user-hero__avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--osep-navy-100, #E5ECF7);
  color: var(--osep-navy-800, #0A2A52);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 38px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(10, 42, 82, .15);
}
.osep-user-hero__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.osep-user-hero__name {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -.01em;
}
.osep-user-hero__email {
  color: var(--osep-ink-700, #334155);
  font-size: 13.5px;
}
.osep-user-hero__email i { margin-right: 4px; color: #94a3b8; }
.osep-user-hero__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.osep-chip {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  color: var(--osep-ink-700, #334155);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.osep-chip i { margin-right: 4px; color: var(--osep-navy-600, #1E4A85); }

.osep-user-hero__meta {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  padding: 12px 14px;
  border-radius: 10px;
  min-width: 220px;
}
.osep-user-hero__meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}
.osep-user-hero__meta-row .lbl {
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .osep-user-hero__inner { grid-template-columns: 1fr; gap: 14px; }
  .osep-user-hero__meta { width: 100%; min-width: 0; }
}

/* ---- Form layout 2 colonnes ------------------------------------------- */
.osep-user-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.osep-user-form__col {
  display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 1100px) {
  .osep-user-form__grid { grid-template-columns: 1fr; }
}

/* ---- Sections de formulaire ------------------------------------------- */
.osep-form-section {
  padding: 0;
  overflow: hidden;
}
.osep-form-section__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
  background: linear-gradient(to bottom, #FAFBFD 0%, #fff 100%);
}
.osep-form-section__head > i {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.osep-form-section__head h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -.005em;
}
.osep-form-section__head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #94a3b8;
}
.osep-form-section__body {
  padding: 16px 18px;
}
.osep-form-section--meta .osep-form-section__body {
  padding: 12px 18px;
}

/* ---- Form rows -------------------------------------------------------- */
.osep-form-row { margin-bottom: 14px; }
.osep-form-row:last-child { margin-bottom: 0; }
.osep-form-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.osep-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--osep-navy-900, #0A2A52);
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.osep-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.osep-input:focus {
  border-color: var(--osep-navy-600, #1E4A85);
  box-shadow: 0 0 0 3px rgba(30, 74, 133, .12);
}
.osep-input[type="date"] { line-height: 38px; }

/* ---- Radio inline ------------------------------------------------------ */
.osep-radio-group {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.osep-radio { cursor: pointer; }
.osep-radio input { display: none; }
.osep-radio span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 999px;
  font-size: 13px;
  color: var(--osep-ink-700, #334155);
  background: #fff;
  transition: all .15s;
}
.osep-radio input:checked + span {
  border-color: var(--osep-navy-700, #13386A);
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  font-weight: 600;
}

/* ---- Rôles en cartes -------------------------------------------------- */
.osep-roles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.osep-role-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.osep-role-card:hover {
  border-color: var(--osep-navy-600, #1E4A85);
  background: var(--osep-navy-50, #EEF3FB);
}
.osep-role-card input { display: none; }
.osep-role-card__check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.osep-role-card__check i {
  font-size: 16px; color: #fff;
  opacity: 0; transition: opacity .15s;
}
.osep-role-card.is-checked,
.osep-role-card input:checked ~ * + .osep-role-card__check {
  /* fallback */
}
.osep-role-card.is-checked {
  border-color: var(--osep-navy-700, #13386A);
  background: var(--osep-navy-50, #EEF3FB);
}
.osep-role-card.is-checked .osep-role-card__check {
  background: var(--osep-navy-700, #13386A);
  border-color: var(--osep-navy-700, #13386A);
}
.osep-role-card.is-checked .osep-role-card__check i {
  opacity: 1;
}
.osep-role-card__body { flex: 1; min-width: 0; }
.osep-role-card__name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--osep-navy-900, #0A2A52);
}
.osep-role-card__desc {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ---- Toggle activation ------------------------------------------------- */
.osep-toggle {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.osep-toggle__input { display: none; }
.osep-toggle__slider {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  transition: background-color .15s;
}
.osep-toggle__slider::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px; left: 3px;
  transition: left .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.osep-toggle__input:checked + .osep-toggle__slider {
  background: #0A7C42;
}
.osep-toggle__input:checked + .osep-toggle__slider::after {
  left: 23px;
}
.osep-toggle__text strong {
  display: block;
  color: var(--osep-navy-900, #0A2A52);
  font-size: 13.5px;
}
.osep-toggle__text span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
}

/* ---- Méta info -------------------------------------------------------- */
.osep-meta-list {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px 14px;
  margin: 0; font-size: 13px;
}
.osep-meta-list dt {
  color: #64748B;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.osep-meta-list dd {
  margin: 0;
  color: var(--osep-ink-700, #334155);
}
.osep-meta-list code {
  background: #F8FAFC;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--osep-navy-800, #0A2A52);
}

/* ---- Footer collant --------------------------------------------------- */
.osep-user-form__footer {
  margin-top: 18px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  display: flex; gap: 10px; justify-content: flex-end;
  position: sticky;
  bottom: 12px;
  box-shadow: 0 4px 16px rgba(10, 42, 82, .08);
  z-index: 10;
}

/* =========================================================================
   OSEP — Boutons & breadcrumb (composants partagés)
   ========================================================================= */

/* ---- Bouton générique ------------------------------------------------- */
.osep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s,
              box-shadow .15s, transform .05s;
  white-space: nowrap;
  outline: none;
}
.osep-btn i { font-size: 16px; line-height: 1; }
.osep-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 74, 133, .25);
}
.osep-btn:active { transform: translateY(1px); }
.osep-btn:disabled,
.osep-btn.disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variante primary — bleu institutionnel */
.osep-btn--primary {
  background: var(--osep-navy-700, #13386A);
  color: #fff;
  border-color: var(--osep-navy-700, #13386A);
}
.osep-btn--primary:hover {
  background: var(--osep-navy-800, #0A2A52);
  border-color: var(--osep-navy-800, #0A2A52);
  color: #fff;
}

/* Variante secondary — surface gold */
.osep-btn--gold {
  background: var(--osep-gold-500, #C9A659);
  color: #4a3a14;
  border-color: var(--osep-gold-500, #C9A659);
}
.osep-btn--gold:hover {
  background: var(--osep-gold-400, #D9BC7A);
  border-color: var(--osep-gold-400, #D9BC7A);
  color: #4a3a14;
}

/* Variante ghost — discret, fond blanc bordure ligne */
.osep-btn--ghost {
  background: #fff;
  color: var(--osep-navy-800, #0A2A52);
  border-color: var(--osep-line, #E2E8F0);
}
.osep-btn--ghost:hover {
  background: var(--osep-navy-50, #EEF3FB);
  border-color: var(--osep-navy-100, #E5ECF7);
  color: var(--osep-navy-900, #0A2A52);
}

/* Variante outline navy — uniquement bordure */
.osep-btn--outline {
  background: transparent;
  color: var(--osep-navy-800, #0A2A52);
  border-color: var(--osep-navy-700, #13386A);
}
.osep-btn--outline:hover {
  background: var(--osep-navy-700, #13386A);
  color: #fff;
}

/* Variante danger */
.osep-btn--danger {
  background: #C2363D;
  color: #fff;
  border-color: #C2363D;
}
.osep-btn--danger:hover {
  background: #A52B31;
  border-color: #A52B31;
  color: #fff;
}

/* Tailles */
.osep-btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}
.osep-btn--lg {
  height: 44px;
  padding: 0 22px;
  font-size: 14.5px;
}

/* ---- Breadcrumb OSEP --------------------------------------------------- */
.osep-breadcrumb-wrap {
  margin-bottom: 14px;
}
.osep-breadcrumb {
  list-style: none;
  margin: 0;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-breadcrumb li {
  display: inline-flex;
  align-items: center;
  color: #64748B;
}
.osep-breadcrumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: #cbd5e1;
  font-weight: 600;
}
.osep-breadcrumb a {
  color: var(--osep-navy-700, #13386A);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .12s;
}
.osep-breadcrumb a:hover {
  color: var(--osep-navy-900, #0A2A52);
  text-decoration: underline;
}
.osep-breadcrumb a i {
  font-size: 14px;
  color: var(--osep-navy-600, #1E4A85);
}
.osep-breadcrumb li.active {
  color: var(--osep-navy-900, #0A2A52);
  font-weight: 700;
}

/* =========================================================================
   OSEP — Unification visuelle des breadcrumbs
   Force les patterns hérités (Bootstrap + osep-mini-crumbs) à adopter
   le rendu OSEP officiel.
   ========================================================================= */

/* Pattern Bootstrap "rounded-pill" hérité — alignement sur OSEP */
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white {
  list-style: none;
  margin: 0;
  padding: 8px 14px !important;
  background: #fff !important;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill .breadcrumb-item,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: #64748B;
  padding: 0;
}
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill .breadcrumb-item + .breadcrumb-item::before,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white .breadcrumb-item + .breadcrumb-item::before {
  content: "›" !important;
  margin: 0 8px;
  color: #cbd5e1;
  font-weight: 600;
  padding: 0;
  float: none;
}
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill .breadcrumb-item a,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white .breadcrumb-item a {
  color: var(--osep-navy-700, #13386A) !important;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill .breadcrumb-item a:hover,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white .breadcrumb-item a:hover {
  color: var(--osep-navy-900, #0A2A52) !important;
  text-decoration: underline;
}
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill .breadcrumb-item a i,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white .breadcrumb-item a i {
  font-size: 14px;
  color: var(--osep-navy-600, #1E4A85);
  margin-right: 0;
}
nav[aria-label="breadcrumb"] > .breadcrumb.rounded-pill .breadcrumb-item.active,
nav[aria-label="breadcrumb"] > .breadcrumb.bg-white .breadcrumb-item.active {
  color: var(--osep-navy-900, #0A2A52) !important;
  font-weight: 700;
}

/* Pattern osep-mini-crumbs — passe sur le même rendu pill */
.osep-mini-crumbs {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px 0 !important;
  padding: 8px 14px !important;
  background: #fff !important;
  border: 1px solid var(--osep-line, #E2E8F0) !important;
  border-radius: 999px !important;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-mini-crumbs a {
  color: var(--osep-navy-700, #13386A) !important;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.osep-mini-crumbs a:hover {
  color: var(--osep-navy-900, #0A2A52) !important;
  text-decoration: underline;
}
.osep-mini-crumbs a i,
.osep-mini-crumbs i.fa-home,
.osep-mini-crumbs i.mdi-home {
  font-size: 14px !important;
  color: var(--osep-navy-600, #1E4A85);
}
.osep-mini-crumbs .sep {
  color: #cbd5e1;
  font-weight: 600;
  margin: 0 8px;
}
.osep-mini-crumbs .sep i {
  font-size: 10px;
  color: #cbd5e1 !important;
}
.osep-mini-crumbs .here {
  color: var(--osep-navy-900, #0A2A52);
  font-weight: 700;
}

/* =========================================================================
   OSEP — Page Organisation (compte, départements, rôles, permissions)
   ========================================================================= */

/* ---- Sidebar scrollspy ------------------------------------------------- */
.osep-org-sidebar {
  position: sticky;
  top: 90px;
  z-index: 5;
}
.osep-org-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-org-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--osep-ink-700, #334155);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.osep-org-nav__item:hover {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-900, #0A2A52);
}
.osep-org-nav__item.active {
  background: var(--osep-navy-700, #13386A);
  color: #fff;
  border-color: var(--osep-navy-700, #13386A);
  box-shadow: 0 2px 6px rgba(19, 56, 106, .25);
}
.osep-org-nav__item.active i { color: #fff; }
.osep-org-nav__item i {
  font-size: 18px;
  color: var(--osep-navy-600, #1E4A85);
}
.osep-org-nav__item span:not(.osep-org-nav__count) {
  flex: 1;
}
.osep-org-nav__count {
  background: rgba(255, 255, 255, .15);
  color: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}
.osep-org-nav__item:not(.active) .osep-org-nav__count {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
}

/* ---- Hero -------------------------------------------------------------- */
.osep-org-hero {
  background: linear-gradient(135deg, #fff 0%, var(--osep-navy-50, #EEF3FB) 100%);
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-org-hero__inner {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 22px;
  align-items: center;
}
.osep-org-hero__logo {
  width: 86px; height: 86px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(10, 42, 82, .12);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--osep-navy-700, #13386A);
}
.osep-org-hero__logo img {
  width: 100%; height: 100%; object-fit: contain; padding: 6px;
}
.osep-org-hero__logo i { font-size: 38px; }
.osep-org-hero__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--osep-navy-700, #13386A);
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.osep-org-hero__eyebrow i {
  color: var(--osep-gold-500, #C9A659);
  font-size: 14px;
}
.osep-org-hero__name {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.osep-org-hero__meta {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.osep-org-hero__cta { align-self: center; }

@media (max-width: 900px) {
  .osep-org-hero__inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- KPI strip --------------------------------------------------------- */
.osep-org-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.osep-org-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.osep-org-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 42, 82, .08);
}
.osep-org-kpi .ico {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.osep-org-kpi .ico--navy  { background: var(--osep-navy-50, #EEF3FB); color: var(--osep-navy-800, #0A2A52); }
.osep-org-kpi .ico--gold  { background: var(--osep-gold-50, #FBF6E8); color: var(--osep-gold-500, #C9A659); }
.osep-org-kpi .ico--green { background: #E7F6EE; color: #0A7C42; }
.osep-org-kpi .ico--blue  { background: #E5ECF7; color: #163E78; }
.osep-org-kpi .value {
  font-size: 22px; font-weight: 800;
  color: var(--osep-navy-900, #0A2A52);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.osep-org-kpi .label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--osep-ink-700, #334155);
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .osep-org-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Sections empilées scrollspy --------------------------------------- */
.osep-org-scrollspy {
  position: relative;
}
.osep-org-section {
  margin-bottom: 18px;
  scroll-margin-top: 80px;
}
.osep-org-section:last-child { margin-bottom: 0; }

/* ---- Form de l'organisation : grid logo + champs ---------------------- */
.osep-org-form-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  align-items: start;
}
.osep-org-form-grid__logo {
  display: flex; flex-direction: column; gap: 6px;
}
.osep-form-hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #94a3b8;
}
@media (max-width: 800px) {
  .osep-org-form-grid { grid-template-columns: 1fr; }
}

/* ---- Départements ------------------------------------------------------ */
.osep-org-organigram-wrap {
  background: #F8FAFC;
  border: 1px solid var(--osep-line-soft, #EEF2F7);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.osep-org-organigram-head {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--osep-navy-700, #13386A);
  margin-bottom: 12px;
}
.osep-org-organigram-head i {
  color: var(--osep-gold-500, #C9A659);
  font-size: 14px;
}
.osep-org-organigram {
  min-height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.osep-org-departments-search {
  position: relative;
  margin-bottom: 12px;
  max-width: 360px;
}
.osep-org-departments-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 18px;
}
.osep-org-departments-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 999px;
  padding: 0 16px 0 38px;
  font-size: 13.5px;
  outline: none;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.osep-org-departments-search input:focus {
  border-color: var(--osep-navy-600, #1E4A85);
  box-shadow: 0 0 0 3px rgba(30, 74, 133, .12);
}
.osep-org-departments-list {
  /* Le JS rempli ce conteneur ; on lui donne juste un cadre cohérent */
  border: 1px solid var(--osep-line-soft, #EEF2F7);
  border-radius: 10px;
  background: #fff;
  min-height: 80px;
}
.osep-org-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 18px;
  color: #94a3b8;
  font-size: 13px;
}

/* ---- Rôles ------------------------------------------------------------- */
.osep-org-roles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Permissions ------------------------------------------------------- */
.osep-org-permissions {
  display: flex; flex-direction: column; gap: 8px;
}
.osep-org-permissions-group {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 10px;
  overflow: hidden;
}
.osep-org-permissions-group__head { margin: 0; }
.osep-org-permissions-group__toggle {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  color: var(--osep-navy-900, #0A2A52);
  transition: background-color .15s;
}
.osep-org-permissions-group__toggle:hover {
  background: var(--osep-navy-50, #EEF3FB);
}
.osep-org-permissions-group__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.osep-org-permissions-group__name {
  font-size: 14px;
}
.osep-org-permissions-group__count {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  margin-right: 8px;
}
.osep-org-permissions-group__arrow {
  font-size: 18px;
  color: #94a3b8;
  transition: transform .2s;
}
.osep-org-permissions-group__toggle:not(.collapsed) .osep-org-permissions-group__arrow {
  transform: rotate(180deg);
}
.osep-org-permissions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--osep-line-soft, #EEF2F7);
  background: #FAFBFD;
}
.osep-org-permissions-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
}
.osep-org-permissions-item:last-child { border-bottom: 0; }
.osep-org-permissions-item__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--osep-navy-800, #0A2A52);
  display: flex; align-items: center; gap: 6px;
}
.osep-org-permissions-item__name i {
  color: var(--osep-gold-500, #C9A659);
  font-size: 14px;
}
.osep-org-permissions-item__desc {
  font-size: 12px;
  color: #64748B;
  margin-top: 3px;
  margin-left: 22px;
  line-height: 1.45;
}

/* ---- Utilisateurs (CTA) ------------------------------------------------ */
.osep-org-users-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px;
  background: linear-gradient(135deg, var(--osep-navy-50, #EEF3FB) 0%, #fff 100%);
  border-radius: 12px;
  border: 1px solid var(--osep-line, #E2E8F0);
}
.osep-org-users-cta__visual {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--osep-navy-100, #E5ECF7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.osep-org-users-cta__visual i {
  font-size: 38px;
  color: var(--osep-navy-700, #13386A);
}
.osep-org-users-cta__body { flex: 1; }
.osep-org-users-cta__body h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
}
.osep-org-users-cta__body p {
  margin: 0 0 12px 0;
  color: #64748B;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .osep-org-users-cta { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   OSEP — Détail tâche (browse) — composante / activité
   ========================================================================= */

.osep-task-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Toolbar contextuelle ---------------------------------------------- */
.osep-task-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

/* ---- Hero ------------------------------------------------------------- */
.osep-task-hero {
  background: linear-gradient(135deg, #fff 0%, var(--osep-navy-50, #EEF3FB) 100%);
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-task-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-navy-700, #13386A);
  margin-bottom: 6px;
}
.osep-task-hero__eyebrow code {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  padding: 1px 8px;
  border-radius: 4px;
  font-family: inherit;
  letter-spacing: .02em;
  color: var(--osep-navy-800, #0A2A52);
  font-weight: 700;
}
.osep-task-hero__sep { color: #cbd5e1; }
.osep-task-hero__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.osep-task-hero__title .editable,
.osep-task-hero__title a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
}
.osep-task-hero__title .editable:hover,
.osep-task-hero__title a:hover {
  border-bottom-color: var(--osep-navy-600, #1E4A85);
}
.osep-task-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.osep-task-hero__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.osep-task-hero__progress-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--osep-navy-700, #13386A);
}

@media (max-width: 760px) {
  .osep-task-hero { grid-template-columns: 1fr; }
}

/* ---- Cartes d'information --------------------------------------------- */
.osep-task-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.osep-task-info-card {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .15s, box-shadow .15s;
}
.osep-task-info-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 42, 82, .08);
}
.osep-task-info-card .ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.osep-task-info-card .ico--blue  { background: #E5ECF7; color: #163E78; }
.osep-task-info-card .ico--green { background: #E7F6EE; color: #0A7C42; }
.osep-task-info-card .ico--gold  { background: var(--osep-gold-50, #FBF6E8); color: #8C6E1E; }
.osep-task-info-card .ico--navy  { background: var(--osep-navy-50, #EEF3FB); color: var(--osep-navy-800, #0A2A52); }
.osep-task-info-card .lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748B;
}
.osep-task-info-card .val {
  font-size: 16px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
  margin-top: 2px;
}
.osep-task-info-card .val .editable,
.osep-task-info-card .val a {
  color: inherit !important;
  text-decoration: none !important;
}

@media (max-width: 1100px) { .osep-task-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .osep-task-info-grid { grid-template-columns: 1fr; } }

/* ---- Cartes responsables ----------------------------------------------- */
.osep-task-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 800px) { .osep-task-people { grid-template-columns: 1fr; } }

.osep-task-person-card {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  overflow: hidden;
}
.osep-task-person-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
  background: linear-gradient(to bottom, #FAFBFD 0%, #fff 100%);
}
.osep-task-person-card__head .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
}
.osep-task-person-card__head .title i {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-700, #13386A);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.osep-task-person-card__body {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
}
.osep-task-person-avatar {
  flex-shrink: 0;
  display: block;
}
.osep-task-person-avatar img {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(10, 42, 82, .10);
  object-fit: cover;
}
.osep-task-person-info { min-width: 0; }
.osep-task-person-info .name {
  font-weight: 600;
  font-size: 14px;
  color: var(--osep-navy-900, #0A2A52);
}
.osep-task-person-info .email {
  font-size: 12px;
  color: #64748B;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.osep-task-person-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: #94a3b8;
}
.osep-task-person-empty i {
  font-size: 32px;
  color: #cbd5e1;
  flex-shrink: 0;
}
.osep-task-person-empty strong {
  display: block;
  color: #64748B;
  font-size: 13.5px;
}
.osep-task-person-empty small {
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
}

/* ---- Description Quill ------------------------------------------------- */
.osep-task-description {
  background: #FAFBFD;
  border: 1px solid var(--osep-line-soft, #EEF2F7);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--osep-ink-700, #334155);
  min-height: 80px;
}
.osep-task-description p:last-child { margin-bottom: 0; }
.osep-task-description.ql-container { /* utilisé en mode édition Quill */ }

/* ---- Section header badge --------------------------------------------- */
.osep-form-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 22px;
  margin-left: 6px;
}

/* ---- Header projet : chips dans osep-projects-head -------------------- */
.osep-projects-head__chips {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.osep-chip--label {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  border-color: rgba(30, 74, 133, .15);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10.5px;
}
.osep-chip--acronym {
  background: var(--osep-gold-50, #FBF6E8);
  color: #8C6E1E;
  border-color: rgba(201, 166, 89, .35);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .02em;
}

/* =========================================================================
   OSEP — Tâches reliées (carte cliquable parent / sous-tâche / siblings)
   ========================================================================= */

.osep-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.osep-related-card {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.osep-related-card:hover {
  border-color: var(--osep-gold-500, #C9A659);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
  transform: translateY(-1px);
}
.osep-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.osep-related-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--osep-navy-900, #0A2A52);
  background: var(--osep-navy-50, #EEF3FB);
  padding: 3px 9px;
  border-radius: 999px;
}
.osep-related-kind i {
  color: var(--osep-gold-500, #C9A659);
  font-size: 14px;
}
.osep-related-type {
  color: #94a3b8;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.osep-related-type i { font-size: 12px; }

.osep-related-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.osep-related-body .osep-role-chip {
  align-self: flex-start;
}
.osep-related-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
  line-height: 1.35;
}
.osep-related-name a {
  color: inherit;
  text-decoration: none;
  transition: color .12s;
}
.osep-related-name a:hover {
  color: var(--osep-navy-700, #13386A);
  text-decoration: underline;
}
.osep-related-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  color: #64748B;
}
.osep-related-meta i {
  color: #cbd5e1;
  font-size: 13px;
  margin-right: 4px;
}
.osep-related-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.osep-related-progress .bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: #EEF2F7;
}
.osep-related-progress .bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}
.osep-related-progress .pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
  min-width: 36px;
  text-align: right;
}

/* Couleurs des barres de progression (compat Bootstrap) */
.osep-related-progress .bg-success { background: #0A7C42; }
.osep-related-progress .bg-warning { background: #C9A659; }
.osep-related-progress .bg-secondary { background: #94a3b8; }
.osep-related-progress .bg-success-subtle { background: #E7F6EE; }
.osep-related-progress .bg-warning-subtle { background: var(--osep-gold-50, #FBF6E8); }
.osep-related-progress .bg-secondary-subtle { background: #F1F5F9; }

/* =========================================================================
   OSEP — Fix modals : passer au-dessus de la gov-bar / navbar fixes
   La gov-bar est en z-index 1070 et la navbar peut être sticky.
   On force tous les modals au-dessus + on pousse le dialog vers le bas
   pour ne pas être tronqué par la barre.
   ========================================================================= */

/* z-index — au-dessus de la gov-bar (1070) et de la navbar-custom */
.modal-backdrop {
  --bs-backdrop-zindex: 1085;
  z-index: 1085 !important;
}
.modal {
  --bs-modal-zindex: 1090;
  z-index: 1090 !important;
}

/* Pousser le dialog vers le bas pour éviter le crop par la gov-bar */
.modal-dialog {
  margin-top: 90px;
}

/* Modals centrés : ne pas pousser, juste rétrécir la hauteur disponible
   pour que le centrage tienne compte de la barre du haut */
.modal-dialog.modal-dialog-centered {
  margin-top: 0;
  min-height: calc(100% - 100px);
  margin-bottom: 0;
}

/* Modals fullscreen — réserver l'espace de la barre */
.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-dialog,
[class*="modal-fullscreen-"] .modal-dialog {
  margin: 0;
  padding-top: 76px;
}

/* Sur très petit écran (mobile) la gov-bar passe en non-fixed → on n'a plus besoin
   de pousser autant le modal */
@media (max-width: 600px) {
  .modal-dialog { margin-top: 60px; }
  .modal-dialog.modal-dialog-centered { min-height: calc(100% - 70px); }
}

/* =========================================================================
   OSEP — Section "Next steps & décisions" du dashboard projet
   Alimentée par les événements du calendrier (et non plus par des mocks).
   ========================================================================= */

.osep-next-card {
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.osep-next-card > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--osep-line-soft, #EEF2F7);
  background: linear-gradient(to bottom, #FAFBFD 0%, #fff 100%);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
}
.osep-next-card > header > i {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-700, #13386A);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.osep-next-card__badge {
  margin-left: auto;
  background: #F1F5F9;
  color: #64748B;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 9px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}
.osep-next-card__badge.is-active {
  background: #C2363D;
  color: #fff;
}

.osep-next-card__body {
  padding: 12px;
  flex: 1;
}

/* Variante "décisions" — ton plus prononcé */
.osep-next-card--decisions {
  border-color: rgba(194, 54, 61, .25);
}
.osep-next-card--decisions > header {
  background: linear-gradient(to bottom, #FCEAEC 0%, #fff 100%);
}
.osep-next-card--decisions > header > i {
  background: #FCEAEC;
  color: #C2363D;
}

/* Liste des items */
.osep-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.osep-next-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: #FAFBFD;
  border: 1px solid var(--osep-line-soft, #EEF2F7);
  border-radius: 10px;
  transition: border-color .15s, background-color .15s;
}
.osep-next-item:hover {
  border-color: var(--osep-navy-100, #E5ECF7);
  background: #fff;
}
.osep-next-item .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-700, #13386A);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.osep-next-item--decision .ic {
  background: #FCEAEC;
  color: #C2363D;
}
.osep-next-item .body { min-width: 0; flex: 1; }
.osep-next-item .title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
  line-height: 1.35;
}
.osep-next-item .desc {
  font-size: 12px;
  color: #64748B;
  margin-top: 3px;
  line-height: 1.45;
}
.osep-next-item .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: #64748B;
}
.osep-next-item .meta i { font-size: 13px; color: #94a3b8; }
.osep-next-item .meta .dot { color: #cbd5e1; }
.osep-next-item .meta .kind {
  background: var(--osep-navy-50, #EEF3FB);
  color: var(--osep-navy-800, #0A2A52);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.osep-next-item .public {
  color: #0A7C42;
}
.osep-next-item .due {
  font-weight: 600;
  color: var(--osep-navy-800, #0A2A52);
}
.osep-next-item--decision .due {
  color: #C2363D;
}

/* Empty state */
.osep-next-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  color: #94a3b8;
}
.osep-next-empty i {
  font-size: 32px;
  color: #cbd5e1;
  flex-shrink: 0;
}
.osep-next-empty strong {
  display: block;
  color: #64748B;
  font-size: 13.5px;
}
.osep-next-empty small {
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
}
.osep-next-empty a {
  color: var(--osep-navy-700, #13386A);
  font-weight: 600;
  text-decoration: none;
}
.osep-next-empty a:hover { text-decoration: underline; }

/* =========================================================================
   OSEP — Calendrier (global + projet) + modal CRUD événement
   ========================================================================= */

/* ---- Légende des types -------------------------------------------------- */
.osep-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--osep-line, #E2E8F0);
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(10, 42, 82, .04);
}
.osep-calendar-legend__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  margin-right: 6px;
}
.osep-calendar-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(0, 0, 0, .03);
  color: var(--c, var(--osep-navy-800, #0A2A52));
  border: 1px solid color-mix(in srgb, var(--c, #1E4A85) 25%, transparent);
}
.osep-calendar-legend__chip i {
  color: var(--c, var(--osep-navy-700, #13386A));
  font-size: 14px;
}

/* ---- Wrapper FullCalendar ---------------------------------------------- */
.osep-calendar-wrap {
  padding: 14px;
}
.osep-calendar-wrap .fc {
  font-family: inherit;
}
.osep-calendar-wrap .fc-toolbar.fc-header-toolbar {
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.osep-calendar-wrap .fc-toolbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--osep-navy-900, #0A2A52);
  letter-spacing: -.005em;
}
.osep-calendar-wrap .fc-button {
  background: #fff !important;
  border: 1px solid var(--osep-line, #E2E8F0) !important;
  color: var(--osep-ink-700, #334155) !important;
  font-weight: 600;
  text-transform: capitalize;
  font-size: 13px;
  padding: 6px 12px;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
.osep-calendar-wrap .fc-button:hover {
  background: var(--osep-navy-50, #EEF3FB) !important;
  border-color: var(--osep-navy-100, #E5ECF7) !important;
  color: var(--osep-navy-800, #0A2A52) !important;
}
.osep-calendar-wrap .fc-button.fc-button-active {
  background: var(--osep-navy-700, #13386A) !important;
  color: #fff !important;
  border-color: var(--osep-navy-700, #13386A) !important;
}

.osep-calendar-wrap .fc-col-header-cell {
  background: #FAFBFD;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748B;
  font-weight: 700;
  padding: 8px 0;
}
.osep-calendar-wrap .fc-day-today {
  background: #FFF8E0 !important;
}
.osep-calendar-wrap .fc-daygrid-day-number {
  color: var(--osep-navy-800, #0A2A52);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 8px;
}

.osep-calendar-wrap .fc-event {
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.osep-calendar-wrap .fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(10, 42, 82, .15);
}

/* Couleurs des événements depuis les classes injectées par le serveur */
.osep-calendar-wrap .fc-event.text-warning {
  background: var(--osep-gold-50, #FBF6E8);
  border-color: var(--osep-gold-500, #C9A659);
  color: #8C6E1E !important;
}
.osep-calendar-wrap .fc-event.text-danger {
  background: #FCEAEC;
  border-color: #C2363D;
  color: #C2363D !important;
}
.osep-calendar-wrap .fc-event.text-success {
  background: #E7F6EE;
  border-color: #0A7C42;
  color: #0A7C42 !important;
}
.osep-calendar-wrap .fc-event.text-primary {
  background: var(--osep-navy-50, #EEF3FB);
  border-color: var(--osep-navy-700, #13386A);
  color: var(--osep-navy-800, #0A2A52) !important;
}
.osep-calendar-wrap .fc-event.text-info {
  background: #E5ECF7;
  border-color: #163E78;
  color: #163E78 !important;
}
.osep-calendar-wrap .fc-event.text-purple {
  background: #F1ECF9;
  border-color: #6C3FAA;
  color: #6C3FAA !important;
}

/* Style spécifique "Décision requise" — pulse léger */
.osep-calendar-wrap .fc-event.osep-event--decision-required {
  background: #FCEAEC;
  border-color: #C2363D;
  color: #C2363D !important;
  animation: osep-event-pulse 2.4s ease-in-out infinite;
}
@keyframes osep-event-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 54, 61, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(194, 54, 61, .15); }
}

/* ---- Modal CRUD événement --------------------------------------------- */
.osep-event-form-body {
  padding: 18px 22px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

/* Bandeau "Décision requise" en haut du form */
.osep-event-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 22px 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FCEAEC;
  border: 1px solid rgba(194, 54, 61, .25);
  border-left: 3px solid #C2363D;
}
.osep-event-banner i {
  font-size: 22px;
  color: #C2363D;
  flex-shrink: 0;
  margin-top: 1px;
}
.osep-event-banner strong {
  display: block;
  font-size: 13.5px;
  color: #C2363D;
  margin-bottom: 2px;
}
.osep-event-banner small {
  display: block;
  color: #864046;
  font-size: 11.5px;
  line-height: 1.45;
}

/* Variante info readonly (input affichant un projet verrouillé) */
.osep-input--readonly {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border-style: dashed !important;
  cursor: default;
  color: var(--osep-navy-900, #0A2A52);
}
.osep-input--readonly i {
  color: var(--osep-navy-700, #13386A);
}

/* Hint inline (à côté du label) */
.osep-form-hint--inline {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 6px;
}

/* Select multi-utilisateurs : améliore le rendu natif */
#eventUsers {
  min-height: 110px;
  font-size: 13px;
}
#eventUsers option {
  padding: 4px 8px;
}
#eventUsers option:checked {
  background: var(--osep-navy-50, #EEF3FB) linear-gradient(0deg, var(--osep-navy-50, #EEF3FB) 0%, var(--osep-navy-50, #EEF3FB) 100%);
  color: var(--osep-navy-800, #0A2A52);
  font-weight: 600;
}

/* =========================================================================
   OSEP — Garde-fous FullCalendar : empêcher un event de s'étaler
   visuellement par-delà sa cellule (bug observé en mode dayGridMonth).
   ========================================================================= */

/* Force la zone d'event à rester dans sa cellule */
.osep-calendar-wrap .fc-daygrid-event-harness {
  overflow: hidden;
}
.osep-calendar-wrap .fc-event {
  max-width: 100%;
}

/* Annule le rendu "multi-week bar" qui pourrait s'étaler quand un event
   à heure précise est rendu en mode liste compacte sur dayGrid. */
.osep-calendar-wrap .fc-daygrid-dot-event,
.osep-calendar-wrap .fc-daygrid-event-harness--abs {
  position: relative !important;
}

/* =========================================================================
   OSEP — Couleurs FullCalendar par TYPE — version qui marche partout
   FullCalendar dessine les events à heure précise en mode "dot" en
   dayGridMonth : on doit colorer le DOT, pas seulement le wrapper.
   ========================================================================= */

/* ---- Variables de couleur par classe métier --------------------------- */
.osep-calendar-wrap .fc-event.text-warning,
.osep-calendar-wrap .fc-event.text-warning .fc-event-main {
  --osep-fc-color: #C9A659;
  --osep-fc-bg:    #FBF6E8;
  --osep-fc-text:  #8C6E1E;
}
.osep-calendar-wrap .fc-event.text-danger,
.osep-calendar-wrap .fc-event.text-danger .fc-event-main {
  --osep-fc-color: #C2363D;
  --osep-fc-bg:    #FCEAEC;
  --osep-fc-text:  #C2363D;
}
.osep-calendar-wrap .fc-event.text-success,
.osep-calendar-wrap .fc-event.text-success .fc-event-main {
  --osep-fc-color: #0A7C42;
  --osep-fc-bg:    #E7F6EE;
  --osep-fc-text:  #0A7C42;
}
.osep-calendar-wrap .fc-event.text-primary,
.osep-calendar-wrap .fc-event.text-primary .fc-event-main {
  --osep-fc-color: #13386A;
  --osep-fc-bg:    #EEF3FB;
  --osep-fc-text:  #0A2A52;
}
.osep-calendar-wrap .fc-event.text-info,
.osep-calendar-wrap .fc-event.text-info .fc-event-main {
  --osep-fc-color: #163E78;
  --osep-fc-bg:    #E5ECF7;
  --osep-fc-text:  #163E78;
}
.osep-calendar-wrap .fc-event.text-purple,
.osep-calendar-wrap .fc-event.text-purple .fc-event-main {
  --osep-fc-color: #6C3FAA;
  --osep-fc-bg:    #F1ECF9;
  --osep-fc-text:  #6C3FAA;
}

/* ---- Application sur les rendus dayGrid (mode "dot" en heure) --------- */
/* Le point coloré devant l'heure et le titre */
.osep-calendar-wrap .fc-daygrid-event-dot {
  border-color: var(--osep-fc-color, #1E4A85) !important;
}
/* Le texte de l'heure et du titre */
.osep-calendar-wrap .fc-daygrid-dot-event,
.osep-calendar-wrap .fc-daygrid-dot-event:hover {
  color: var(--osep-fc-text, #0A2A52) !important;
  background: transparent !important;
}
.osep-calendar-wrap .fc-daygrid-dot-event .fc-event-time {
  color: var(--osep-fc-color, #1E4A85);
  font-weight: 700;
}

/* ---- Application sur les rendus dayGrid (mode "block" all-day) -------- */
.osep-calendar-wrap .fc-daygrid-block-event,
.osep-calendar-wrap .fc-h-event {
  background: var(--osep-fc-bg, #EEF3FB) !important;
  border-color: var(--osep-fc-color, #13386A) !important;
  color: var(--osep-fc-text, #0A2A52) !important;
}
.osep-calendar-wrap .fc-h-event .fc-event-main,
.osep-calendar-wrap .fc-h-event .fc-event-title,
.osep-calendar-wrap .fc-h-event .fc-event-time {
  color: var(--osep-fc-text, #0A2A52) !important;
}

/* ---- Application sur le rendu timeGrid (semaine / jour) --------------- */
.osep-calendar-wrap .fc-timegrid-event {
  background: var(--osep-fc-bg, #EEF3FB) !important;
  border-color: var(--osep-fc-color, #13386A) !important;
  border-left-width: 4px !important;
  color: var(--osep-fc-text, #0A2A52) !important;
}

/* ---- Application sur le rendu liste (listYear, listMonth, etc.) ------- */
.osep-calendar-wrap .fc-list-event-dot {
  border-color: var(--osep-fc-color, #1E4A85) !important;
}
.osep-calendar-wrap .fc-list-event-title a {
  color: var(--osep-fc-text, #0A2A52) !important;
  font-weight: 600;
}

/* ---- Re-pulse sur "Décision requise" ---------------------------------- */
.osep-calendar-wrap .fc-event.osep-event--decision-required .fc-daygrid-event-dot,
.osep-calendar-wrap .fc-event.osep-event--decision-required .fc-list-event-dot {
  border-width: 6px !important;
}

/* =========================================================================
   OSEP — Légende : remplacer color-mix par une couleur fixe + opacity
   ========================================================================= */
.osep-calendar-legend__chip {
  background: rgba(0, 0, 0, .03);
  color: var(--c, #0A2A52);
  /* Bordure faible avec la couleur du chip — fallback statique sans color-mix */
  border: 1px solid rgba(0, 0, 0, .08);
  border-left: 3px solid var(--c, #1E4A85);
  border-right: 3px solid var(--c, #1E4A85);
  padding: 4px 12px;
}
.osep-calendar-legend__chip i {
  color: var(--c, #13386A);
}