/* ===== Polices locales (hors-ligne) ===== */
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/source-serif-4-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #1a2632;
  --ink-soft: #5a6a78;
  --line: #e4e7ec;
  --primary: #0f5c4a;      /* vert institutionnel */
  --primary-dark: #0a3f33;
  --primary-soft: #e6f0ed;
  --accent: #b8860b;       /* ocre / sceau */
  --accent-light: #e8c25a;
  --danger: #b23b3b;
  --warn-bg: #fbf3e3;
  --warn-ink: #8a6a12;
  --ok-bg: #e6f0ed;
  --ok-ink: #0f5c4a;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(26,38,50,.05), 0 4px 14px rgba(26,38,50,.05);
  --shadow-lg: 0 4px 24px rgba(26,38,50,.10), 0 1px 3px rgba(26,38,50,.06);
  /* Dégradés inspirés du nouveau design */
  --side-grad: linear-gradient(168deg, #12352c 0%, #0d2a26 45%, #0a1f24 100%);
  --gold-grad: linear-gradient(145deg, #f4d98b 0%, #d4a838 45%, #b8860b 100%);
  /* ===== Charte "Accueil" (ivoire / navy / émeraude) ===== */
  /* Fond « sauge institutionnelle » : vert très pâle et désaturé, dans la
     continuité du vert du thème — les cartes blanches ressortent nettement. */
  --a-bg: #EDF2EE;
  --a-card: #FFFFFF;
  --a-navy: #1C2B44;
  --a-navy-light: #4C5A82;
  --a-gray: #8A92A3;
  --a-emerald: #1F8A5B;
  --a-emerald-soft: #E3F1E9;
  --a-red: #C0392B;
  --a-amber: #C98A2C;
  --a-line: #E5EBE6;  /* filet accordé au fond sauge (ex-ivoire #EFEBE2) */
  --a-shadow: 0 1px 2px rgba(28,43,68,.05), 0 10px 24px rgba(28,43,68,.05);
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans: 'Public Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Public Sans', system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; }
h1,h2,h3 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--primary); }
button { font-family: inherit; cursor: pointer; }


/* ---------- LOGIN (reproduction fidèle) ---------- */
html, body { height: 100%; }
/* Carte de connexion : occupe tout l'écran, sans débordement */
body.page-login { background: #0a2c24; margin: 0; overflow: hidden; }
.login-split { display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; height: 100vh; overflow: hidden; }
/* Les deux volets remplissent entièrement leur moitié : une seule surface, pas deux blocs */
.login-split > * { min-width: 0; min-height: 0; height: 100%; width: 100%; border-radius: 0; }

/* ===== Volet gauche ===== */
.login-hero { position: relative; overflow: hidden; display: flex; align-items: center;
  background: linear-gradient(150deg, #0e3a2f 0%, #0a2c24 55%, #071f1a 100%); color: #fff; }
.login-hero-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-circuit { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }

/* ---- Impulsions lumineuses qui parcourent les pistes ---- */
.circuit-pulse {
  stroke-dashoffset: 26;
  opacity: 0;
  animation-name: circuitCourse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Halo diffus (large, translucide) */
.circuit-pulse-halo  { stroke: #4fd6ab; stroke-width: 7; opacity: 0; }
/* Cœur vif (fin, lumineux) */
.circuit-pulse-coeur { stroke: #d8fff0; stroke-width: 2; opacity: 0; }
@keyframes circuitCourse {
  0%   { stroke-dashoffset: 26;         opacity: 0; }
  7%   {                                opacity: 1; }
  86%  {                                opacity: 1; }
  97%  { stroke-dashoffset: var(--long); opacity: 0; }
  100% { stroke-dashoffset: var(--long); opacity: 0; }
}
/* Le halo reste plus discret que le cœur */
.circuit-pulse-halo { animation-name: circuitCourseHalo; }
@keyframes circuitCourseHalo {
  0%   { stroke-dashoffset: 26;         opacity: 0; }
  7%   {                                opacity: .30; }
  86%  {                                opacity: .30; }
  97%  { stroke-dashoffset: var(--long); opacity: 0; }
  100% { stroke-dashoffset: var(--long); opacity: 0; }
}
/* ---- Nœuds dorés qui respirent ---- */
.circuit-node { animation: circuitNoeud 3.4s ease-in-out infinite; }
@keyframes circuitNoeud {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .circuit-pulse { animation: none; opacity: 0; }
  .circuit-node { animation: none; }
}
.login-hero-content { position: relative; z-index: 1; padding: 0 8% 0 9%; width: 100%; }

/* Plaque métallique argentée */
.login-plaque { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 40px;
  background: linear-gradient(145deg, #f4f5f2 0%, #d9dcd6 40%, #eceee9 60%, #c9ccc4 100%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.6); }
.login-plaque-rs { height: 40px; width: auto; display: block; }
.login-plaque-sep { width: 2px; align-self: stretch; margin: 4px 0;
  background: linear-gradient(to bottom, transparent, rgba(90,100,90,.5), transparent); }
.login-plaque-dgtss { height: 40px; width: auto; display: block; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* Titre institutionnel — typographie soignée */
.login-hero-title { font-family: var(--font-serif), 'Playfair Display', Georgia, serif; font-weight: 700;
  letter-spacing: -.015em; color: #f5ecd8; }
.login-hero-title .lht-line { display: block; line-height: 1.06; letter-spacing: -.015em;
  font-size: clamp(30px, 3.05vw, 46px); white-space: nowrap; }
.login-hero-title::after { content: ''; display: block; width: 72px; height: 4px; margin-top: 26px;
  border-radius: 2px; background: linear-gradient(90deg, #e8c25a, #b8860b); }

/* ===== Volet droit ===== */
.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 24px 40px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 15%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 15% 85%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, #F7F5F0 0%, #EFEDE7 45%, #E9E7E0 100%); }
/* Voile lumineux diagonal */
.login-form-wrap::before { content: ''; position: absolute; inset: -30% -10%;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.18) 54%, transparent 62%);
  pointer-events: none; }
.login-form-wrap > * { position: relative; z-index: 1; }
/* Étoile scintillante en bas à droite */
.login-etoile { position: absolute; right: 26px; bottom: 22px; width: 30px; height: 30px; opacity: .75;
  color: #fff; filter: drop-shadow(0 2px 6px rgba(180,190,175,.55)); z-index: 1; }
.login-form { width: 100%; max-width: 400px; text-align: center; }

.login-form-logo-cadre { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px;
  border-radius: 12px; margin-bottom: 16px;
  background-image: linear-gradient(145deg, #16324e, #101f30), linear-gradient(145deg, #e8c25a, #b8860b);
  background-origin: border-box; background-clip: content-box, border-box;
  border: 3px solid transparent; box-shadow: 0 6px 18px rgba(20,41,63,.3); }
.login-form-logo-cadre img { height: 42px; width: auto; display: block; }

.login-form-title { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: #1f3a2e;
  letter-spacing: .02em; line-height: 1; }
.login-form-title .accent { color: #2e7d5b; }
.login-form-kicker { color: #6a7a70; font-size: 14px; letter-spacing: .22em; margin-top: 6px; }
.login-form-sep { width: 54px; height: 3px; margin: 12px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #c9a94e, transparent); }
.login-welcome { font-size: 15px; color: #46524b; margin: 14px 0 16px; }

/* Champs avec coins d'accent */
.login-champ { position: relative; text-align: left; margin-bottom: 14px; background: #eef1f3; border-radius: 10px; }
.login-champ::before, .login-champ::after { content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 1; }
.login-champ::before { top: -2px; left: -2px; border-top: 2px solid #2e7d5b; border-left: 2px solid #2e7d5b; border-top-left-radius: 8px; }
.login-champ::after { bottom: -2px; right: -2px; border-bottom: 2px solid #c9a94e; border-right: 2px solid #c9a94e; border-bottom-right-radius: 8px; }
.login-champ label { display: block; font-size: 12px; color: #8a958d; padding: 8px 16px 0; }
.login-champ input { width: 100%; border: none; background: transparent; border-radius: 10px; padding: 2px 16px 10px;
  font-size: 15.5px; color: #1f2d26; font-family: inherit; }
.login-champ input:focus { outline: none; }
.login-champ:focus-within { box-shadow: 0 0 0 3px rgba(46,125,91,.12); }

.login-oubli { text-align: right; margin: -2px 0 16px; }
.login-oubli span { font-size: 13px; color: #7a8a80; cursor: pointer; }
.login-oubli span:hover { color: #2e7d5b; text-decoration: underline; }

.login-btn { width: 100%; border: none; border-radius: 40px; padding: 15px; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; color: #fff; cursor: pointer;
  background: linear-gradient(160deg, #2b8a68 0%, #1f7a5c 45%, #0f5c4a 100%);
  box-shadow: 0 2px 4px rgba(15,92,74,.25), 0 8px 18px rgba(15,92,74,.32),
              0 16px 32px rgba(15,92,74,.22),
              inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
  transition: filter .15s, transform .08s, box-shadow .15s; }
.login-btn:hover { filter: brightness(1.07);
  box-shadow: 0 3px 6px rgba(15,92,74,.28), 0 12px 24px rgba(15,92,74,.36),
              0 22px 40px rgba(15,92,74,.24),
              inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.15); }
.login-btn:active { transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(15,92,74,.30), 0 4px 10px rgba(15,92,74,.28), inset 0 1px 3px rgba(0,0,0,.18); }
.login-btn:disabled { opacity: .7; cursor: not-allowed; }

.login-footnote { margin-top: 18px; font-size: 12.5px; color: #7a8580; }

@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .login-hero { min-height: 240px; padding: 26px 0; }
  .login-hero-title .lht-line { font-size: 30px; }
  .login-form-wrap { padding: 30px 22px; overflow: visible; }
  .login-form-title { font-size: 30px; }
  body.page-login { overflow: auto; }
}

/* ---------- FORM ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 14.5px; background: #fff; color: var(--ink); transition: border-color .15s; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field textarea { resize: vertical; min-height: 80px; }
.field input[type=file] { padding: 8px; background: #fafafa; }

.btn { border: none; border-radius: var(--radius); padding: 10px 18px; font-size: 14.5px; font-weight: 600;
  background: var(--primary); color: #fff; transition: background .15s, transform .05s, box-shadow .15s; box-shadow: 0 1px 2px rgba(15,92,74,.2), 0 2px 8px rgba(15,92,74,.12); }
.btn:hover { background: var(--primary-dark); box-shadow: 0 2px 4px rgba(15,92,74,.25), 0 4px 12px rgba(15,92,74,.18); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--primary-soft); box-shadow: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-danger { background: var(--danger); box-shadow: 0 1px 2px rgba(178,59,59,.2), 0 2px 8px rgba(178,59,59,.12); }
.btn-danger:hover { background: #8f2d2d; }

/* ---------- LAYOUT ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh;
  transition: grid-template-columns .22s ease; }

/* ---------- Barre latérale réduite : icônes seules ---------- */
/* Bouton Réduire / Déplier : icône compacte logée dans la ligne de marque */
.side-toggle { display: grid; place-items: center; margin-left: auto; flex: none;
  width: 26px; height: 26px; padding: 0; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  color: #a9c4bc; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
.side-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.side-toggle .st-ico { font-size: 12px; line-height: 1; }

.shell.side-reduite { grid-template-columns: 76px 1fr; }
.shell.side-reduite .sidebar { width: 76px; padding: 18px 9px 14px; }
.shell.side-reduite .brand { flex-direction: column; justify-content: center; gap: 8px; padding: 0 0 12px; }
.shell.side-reduite .brand .name { display: none; }
.shell.side-reduite .side-toggle { margin: 0; }
/* En mode réduit, les intitulés de groupe deviennent de simples filets */
.shell.side-reduite .nav-groupe { font-size: 0; padding: 0; height: 1px;
  background: rgba(255,255,255,.12); margin: 6px 8px; }
.shell.side-reduite .nav button { justify-content: center; padding: 8px 6px; gap: 0; }
.shell.side-reduite .nav button > :not(.ico) { display: none; }
.shell.side-reduite .nav button { font-size: 0; }
.shell.side-reduite .nav button .ico { font-size: 16px; }
.shell.side-reduite .user-box .u-txt { display: none; }
.shell.side-reduite .user-box .user-profile { justify-content: center; }
.shell.side-reduite .user-box .btn-mdp { display: none; }
.shell.side-reduite .user-box .btn-logout { padding: 8px 0; }
.shell.side-reduite .user-box .btn-logout .lg-txt { display: none; }
.shell.side-reduite .user-box .btn-logout .lg-ico { font-size: 15px; }
.sidebar { background: var(--side-grad); color: #dce8e4; padding: 14px 14px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; width: 250px; flex-shrink: 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.sidebar::-webkit-scrollbar-button { display: none; height: 0; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0 4px 12px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 6px; }
.brand .seal { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-grad); color: #4a3410; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 18px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(184,134,11,.35), inset 0 1px 2px rgba(255,255,255,.5); }
.brand .brand-logo { background: #fff; border-radius: 8px; padding: 5px 7px; display: flex; align-items: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.brand .brand-logo img { height: 22px; width: auto; display: block; }
.brand .name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: #fff; line-height: 1.12; letter-spacing: .01em; }
.brand .name small { display: block; font-family: var(--font-sans); font-size: 10px; color: #8fb3aa; font-weight: 400; letter-spacing: .01em; }

/* Densité compacte : les 17 entrées tiennent à l'écran sans défilement */
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: #c4d6d0; padding: 5px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 500; transition: background .15s, color .15s, border-color .15s; }
.nav button .ico { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; transition: background .15s; }
/* Intitulés de groupe : repérage par famille (Pilotage, Dossiers, Registres…) */
.nav-groupe { color: #7D958C; font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; padding: 7px 9px 3px; user-select: none; }
.nav .nav-groupe:first-child { padding-top: 2px; }
.nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav button:hover .ico { background: rgba(255,255,255,.13); }
.nav button.active { background: rgba(255,255,255,.11); color: #fff; font-weight: 600; border-color: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.nav button.active .ico { background: var(--gold-grad); }

.sidebar .user-box { border-top: 1px solid rgba(255,255,255,.09); padding-top: 14px; margin-top: auto; }
.sidebar .user-profile { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); margin-bottom: 10px; }
.sidebar .user-profile .u-seal { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-grad); color: #4a3410; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 15px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(184,134,11,.3); }
.sidebar .user-box .u-name { color: #fff; font-weight: 600; font-size: 13.5px; }
.sidebar .user-box .u-role { color: #8fb3aa; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.sidebar .user-box button { margin-top: 8px; width: 100%; font-size: 12.5px; padding: 8px; background: rgba(255,255,255,.07); border: none; color: #c4d6d0; border-radius: 9px; transition: background .15s; }
.sidebar .user-box button:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar .user-box .btn-logout { margin-top: 7px; background: rgba(192,57,43,.9); color: #fff; font-weight: 600; }
.sidebar .user-box .btn-logout:hover { background: #c0392b; color: #fff; }
.nav { flex: 1; }
.sidebar .user-box { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; margin-top: auto; }
.sidebar .user-box .u-name { color: #fff; font-weight: 600; font-size: 13.5px; }
.sidebar .user-box .u-role { color: #9fc0b7; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.sidebar .user-box button { margin-top: 10px; width: 100%; font-size: 12.5px; padding: 7px; background: rgba(255,255,255,.08); border: none; color: #cfe0da; border-radius: 7px; }
.sidebar .user-box button:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar .user-box .btn-logout { margin-top: 8px; margin-bottom: 6px; background: #c0392b; color: #fff; font-weight: 600; }
.sidebar .user-box .btn-logout:hover { background: #a93226; color: #fff; }

/* Le défilement est porté par la page (grille .shell en min-height) : .main ne doit
   pas déclarer d'overflow, sinon il devient le référent — jamais défilant — des
   éléments sticky (en-têtes de tableau figés) qui cesseraient alors de coller. */
.main { padding: 28px 34px; }
/* Barres de défilement fines et discrètes (zones claires) */
.main, .modal, .dash-card-b, .table-scroll, .ac-bloc-corps {
  scrollbar-width: thin; scrollbar-color: #d2cdbe transparent; }
.main::-webkit-scrollbar, .modal::-webkit-scrollbar, .dash-card-b::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar, .ac-bloc-corps::-webkit-scrollbar { width: 8px; height: 8px; }
.main::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .dash-card-b::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track, .ac-bloc-corps::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .dash-card-b::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb, .ac-bloc-corps::-webkit-scrollbar-thumb { background: #d8d3c4; border-radius: 4px; }
.main::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover, .dash-card-b::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover, .ac-bloc-corps::-webkit-scrollbar-thumb:hover { background: #c3bda9; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-serif), Georgia, serif; font-weight: 700; font-size: 27px;
  color: var(--a-navy); letter-spacing: -.015em; position: relative; padding-bottom: 11px;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 3px rgba(28,43,68,.10); }
.page-head h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px;
  border-radius: 3px; background: var(--gold-grad);
  box-shadow: 0 1px 3px rgba(184,134,11,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.page-head .desc { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }

/* ---------- CARDS / STATS ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); transition: box-shadow .15s, transform .12s; }
.stat .n { font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--ink); }
.stat .l { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Compteurs cliquables (touches de filtre) */
.stat-touche { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; user-select: none; position: relative; }
.stat-touche:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.09); border-color: var(--primary); }
.stat-touche:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stat-touche .stat-n { font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--ink); }
.stat-touche .stat-l { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.stat-touche.actif { background: var(--primary); border-color: var(--primary); }
.stat-touche.actif .stat-n, .stat-touche.actif .stat-l { color: #fff; }
.stat-touche.actif::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--primary); }

/* ---------- TABLE ---------- */
/* overflow: clip (et non hidden) : même rognage visuel des coins arrondis, mais
   sans créer de conteneur de défilement — indispensable pour que l'en-tête de
   tableau figé (position: sticky) se réfère bien au défilement de la page. */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: clip; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.panel-head h2 { font-family: var(--font-serif), Georgia, serif; font-weight: 700; font-size: 18px;
  color: var(--a-navy); letter-spacing: -.01em; position: relative; padding-left: 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.panel-head h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 2px;
  background: linear-gradient(180deg, #1F8A5B, #0f5c4a);
  box-shadow: 0 1px 3px rgba(15,92,74,.35); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fbfaf8; }
td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fbfaf8; }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary); }
.entreprise { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 1px; }

/* Cellule d'actions : boutons compacts, alignés, secondaires discrets */
.actions { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; max-width: 260px; }
.actions .btn-sm { padding: 5px 11px; font-size: 12.5px; white-space: nowrap; }
.act-file { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: #fbfaf8; white-space: nowrap; transition: all .12s; flex-basis: 100%; width: fit-content; }
.act-file:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* Colonne Dossiers : pièces jointes empilées */
.dossiers-files { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dossiers-files .act-file { flex-basis: auto; }
/* Colonne Traitement : badges (imputation + traitement) empilés */
.trait-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* Actions en icônes alignées */
.actions-icons { display: flex; gap: 6px; align-items: center; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 32px; height: 32px; padding: 0; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, border-color .12s; }
.icon-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
/* ===== Tableau de bord style Power BI ===== */
.dash-title { background: linear-gradient(160deg, #1a8d7d 0%, #14776a 48%, #0f6055 100%);
  color: #fff; font-family: var(--font-serif), serif; font-weight: 700; font-size: 20px;
  letter-spacing: .005em; text-align: center; padding: 15px 22px; border-radius: 12px; margin-bottom: 16px;
  position: relative; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  box-shadow: 0 1px 2px rgba(15,92,82,.20), 0 4px 10px rgba(15,92,82,.22),
              0 12px 26px rgba(15,92,82,.24), inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -1px 0 rgba(0,0,0,.12); }
/* Reflet lumineux sur la partie haute du cartouche */
.dash-title::before { content: ''; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events: none; }
.dash-title-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.dash-title-row .dash-title { flex: 1; margin-bottom: 0; display: flex; align-items: center; justify-content: center; min-width: 280px; }
.dash-filtre { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; box-shadow: var(--shadow); }
.dash-filtre-l { font-size: 13px; font-weight: 600; color: #1b2a6b; white-space: nowrap; }
.dash-filtre-sel { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink); cursor: pointer; }
.dash-filtre-sel:focus { outline: none; border-color: #1b2a6b; box-shadow: 0 0 0 3px rgba(27,42,107,.12); }
.dash-note-btn { background: #1b2a6b; white-space: nowrap; align-self: center; }
.dash-note-btn:hover { background: #12205a; }
@media (max-width: 700px) { .dash-filtre { width: 100%; justify-content: center; flex-wrap: wrap; } }
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
/* Cartes KPI enrichies (style Power BI) */
.kpi-row2 { display: grid; grid-template-columns: 1.5fr 1.7fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi2 { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 118px; }
.kpi2-l { font-size: 13px; font-weight: 600; color: #1f2d3d; line-height: 1.25; }
.kpi2-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi2-trend svg { display: block; }
.kpi2-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex: 1; }
.kpi2-spark { flex: 1; min-width: 0; align-self: flex-end; }
.kpi2-big { font-family: var(--font-serif), serif; font-size: 40px; font-weight: 700; color: #1b2a6b; line-height: 1; }
.kpi2-num { font-family: var(--font-serif), serif; font-size: 30px; font-weight: 700; color: #1b2a6b; line-height: 1; }
/* carte H/F */
.kpi2-hf { display: flex; gap: 14px; }
.kpi2-hf-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.kpi2-hf-sep { width: 1px; background: var(--line); }
.kpi2-hf-mid { display: flex; align-items: center; gap: 8px; flex: 1; }
.kpi2-ico svg { display: block; }
.kpi2-minibars { flex-shrink: 0; }
/* carte employeurs */
.kpi2-seg { margin: 4px 0; }
.kpi2-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
/* carte secteurs */
.kpi2-sect { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
.kpi2-sect-list { display: flex; flex-direction: column; gap: 4px; }
.kpi2-sect-item { font-size: 12px; color: #33406e; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi2-sect-dot { width: 6px; height: 6px; border-radius: 50%; background: #2f6fdb; flex-shrink: 0; }
@media (max-width: 1000px) { .kpi-row2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kpi-row2 { grid-template-columns: 1fr; } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #1b2a6b; border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow); }
.kpi-l { font-size: 12px; color: var(--ink-soft); line-height: 1.3; min-height: 30px; }
.kpi-n { font-family: var(--font-serif), serif; font-size: 30px; font-weight: 600; color: #1b2a6b; margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
/* Fond chaleureux du tableau de bord */
.dash { margin: -28px -34px; padding: 28px 34px; min-height: calc(100vh - 0px); background: var(--a-bg); }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--a-shadow); overflow: hidden; display: flex; flex-direction: column; height: 260px; position: relative; }
/* barre de couleur en haut de chaque carte, teinte par groupe de lignes */
.dash-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--a-navy-light); z-index: 1; }
.dash-grid-a .dash-card::before { background: #1F8A5B; }   /* émeraude */
.dash-grid-b .dash-card::before { background: #C0684A; }   /* terracotta */
.dash-grid-c .dash-card::before { background: #C98A2C; }   /* ambre */
.dash-grid-d .dash-card::before { background: #14776a; }   /* sarcelle */
.dash-grid-a .dash-card-h { color: #14663f; }
.dash-grid-b .dash-card-h { color: #9e4b30; }
.dash-grid-c .dash-card-h { color: #8a5a12; }
.dash-grid-d .dash-card-h { color: #0e5a50; }
.dash-card-h { font-weight: 700; font-size: 13.5px; color: #1b2a6b; padding: 12px 14px 8px;
  flex-shrink: 0; border-bottom: 1px solid var(--line); font-family: var(--font-sans);
  letter-spacing: .005em; line-height: 1.35;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,249,246,.55));
  text-shadow: 0 1px 0 rgba(255,255,255,.85); }
.dash-card-b { padding: 10px 14px; flex: 1; min-height: 0; overflow-y: auto; }
/* barres horizontales */
.bars-h { display: flex; flex-direction: column; gap: 6px; }
.bh-row { display: grid; grid-template-columns: 88px 1fr 32px; align-items: center; gap: 8px; }
.bh-label { font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.bh-track { background: #F0E9DC; border-radius: 4px; height: 14px; overflow: hidden; }
.bh-fill { background: linear-gradient(90deg, #C0684A, #A8543A); height: 100%; border-radius: 4px; min-width: 3px; }
.bh-val { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* barres verticales (contenues dans la zone, ne débordent pas) */
.bars-v { display: flex; align-items: flex-end; justify-content: space-around; gap: 3px; height: 150px; padding-top: 18px; box-sizing: border-box; }
.bv-col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; height: 100%; justify-content: flex-end; min-width: 0; }
.bv-n { font-size: 10px; font-weight: 600; color: #1b2a6b; }
.bv-bar { width: 60%; max-width: 24px; background: #1b2a6b; border-radius: 3px 3px 0 0; flex-shrink: 0; }
.bv-label { font-size: 8.5px; color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* camembert */
.pie-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 3px; }
/* types de contrats par convention */
.tpc { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tpc-conv { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fafbfd; }
.tpc-conv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tpc-conv-nom { font-size: 12.5px; font-weight: 700; color: #1b2a6b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* header de carte avec filtre sexe */
.tpc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Sélecteur "objet" intégré à l'en-tête d'une carte de tableau de bord */
.card-filtre-sel { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: #4C5A82;
  background: #fbfaf8; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; cursor: pointer;
  max-width: 150px; flex-shrink: 0; }
.card-filtre-sel:hover { border-color: #4C5A82; background: #eef0f7; }
.card-filtre-sel:focus { outline: 2px solid rgba(76,90,130,.25); outline-offset: 1px; }
/* Dans une carte munie d'un filtre objet, le titre peut rétrécir */
.tpc-head:has(.card-filtre-sel) > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.tpc-sexe-sel { font-size: 11.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; font-family: inherit; }
.tpc-sexe-sel:focus { outline: none; border-color: #1b2a6b; box-shadow: 0 0 0 2px rgba(27,42,107,.12); }
/* stats contrats / entreprises */
.tpc-stats { display: flex; gap: 8px; margin-bottom: 6px; }
.tpc-stat { display: flex; flex-direction: column; align-items: center; flex: 1; border-radius: 6px; padding: 4px 6px; }
.tpc-stat-c { background: #e8eefb; }
.tpc-stat-e { background: #eaf6ee; }
.tpc-stat-l { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; color: #5a6a78; }
.tpc-stat-v { font-size: 16px; font-weight: 700; }
.tpc-stat-c .tpc-stat-v { color: #1b2a6b; }
.tpc-stat-e .tpc-stat-v { color: #1e7d43; }
.tpc-types { display: flex; flex-wrap: wrap; gap: 4px; }
.tpc-chip { font-size: 10.5px; background: #fff; border: 1px solid #dfe4ee; color: #33406e; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* ---------- BADGES ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-neutral { background: #eef0f2; color: #63707c; }
.badge-danger { background: #fbeaea; color: #b23b3b; }

/* ---------- MODAL ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20,30,40,.45); display: grid; place-items: center; padding: 24px; z-index: 50; animation: fade .12s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,.22); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; }
.modal-wide { max-width: 820px; }
/* z-index indispensable : sans lui, les champs positionnés du formulaire
   (autocomplétion employeur…) se peignent PAR-DESSUS l'en-tête au défilement. */
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 8; }
.modal-head h2 { font-family: var(--font-serif), Georgia, serif; font-weight: 700; font-size: 19px;
  color: var(--a-navy); letter-spacing: -.01em; }
.modal-head .x { background: none; border: none; font-size: 24px; color: var(--ink-soft); line-height: 1;
  cursor: pointer; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  margin: -8px -8px -8px 0; transition: background .12s, color .12s; }
.modal-head .x:hover { background: #f0ede3; color: var(--ink); }
.modal-body { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- MISC ---------- */
.empty { text-align: center; padding: 48px 24px; color: var(--ink-soft); }
.empty .big { font-size: 40px; margin-bottom: 8px; opacity: .5; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 100; animation: up .2s; }
.toast.err { background: var(--danger); }
@keyframes up { from { opacity: 0; transform: translate(-50%, 10px); } }
.err-msg { background: #fbeaea; color: var(--danger); padding: 10px 12px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.dl { color: var(--primary); text-decoration: none; font-size: 13px; font-weight: 600; }
.dl:hover { text-decoration: underline; }
.muted { color: var(--ink-soft); font-size: 13px; }
.search { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 220px; font-family: inherit; }
.search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; width: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .nav { flex-direction: row; flex-wrap: wrap; display: flex; gap: 4px; }
  .nav button { width: auto; }
  .sidebar .user-box { border: none; margin: 0; padding: 0; }
  .sidebar .user-profile { margin-bottom: 0; }
  .main { padding: 20px 16px; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* Tables compactes (registres denses type contrats) */
.table-scroll { overflow-x: auto; }
.table-compact table { min-width: 100%; }
.table-compact th { padding: 8px 10px; font-size: 10.5px; }
.table-compact td { padding: 8px 10px; font-size: 12.5px; }
.table-compact .muted { font-size: 11px; }
.table-compact .badge { font-size: 10.5px; padding: 2px 8px; }
.table-compact .icon-btn { width: 28px; height: 28px; font-size: 13px; }
.table-compact .actions-icons { gap: 4px; }

/* Sous-titre de carte (mode de filtre) */
.card-subtitle { font-weight: 400; font-size: 11px; color: #7a8794; }

/* Légende du donut "Répartition par sexe" */
.sexe-leg { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 220px; }
.sexe-leg-row { display: flex; align-items: center; gap: 8px; }
.sexe-leg-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.sexe-leg-lbl { font-size: 13px; color: var(--ink); font-weight: 500; }
.sexe-leg-val { font-size: 13px; color: var(--ink-soft); margin-left: auto; font-variant-numeric: tabular-nums; }

/* Champ texte libre "Autres" pour l'objet de la plainte */
.objet-autre { margin-top: 8px; }

/* Numéro de téléphone sous le nom dans le registre des plaintes */
.tel-cell { font-size: 12px; color: var(--ink-soft); margin: 2px 0; }

/* Emploi et type de contrat sous le nom (registre plaintes) */
.emploi-cell { font-size: 12px; color: var(--ink); font-weight: 500; margin: 2px 0; }
.tc-cell { display: inline-block; font-size: 10.5px; color: #33406e; background: #eef0f4; border-radius: 6px; padding: 1px 7px; margin: 2px 0; }

/* Bandeau titre du tableau de bord Climat Social (bordeaux) */
.dash-title-climat { background: linear-gradient(160deg, #147366 0%, #0f5c52 48%, #0a4840 100%);
  box-shadow: 0 1px 2px rgba(10,72,64,.20), 0 4px 10px rgba(10,72,64,.22),
              0 12px 26px rgba(10,72,64,.24), inset 0 1px 0 rgba(255,255,255,.26),
              inset 0 -1px 0 rgba(0,0,0,.12); }
.dash-title-etab { background: linear-gradient(160deg, #5c6b96 0%, #4C5A82 48%, #3B4870 100%);
  box-shadow: 0 1px 2px rgba(59,72,112,.20), 0 4px 10px rgba(59,72,112,.24),
              0 12px 26px rgba(59,72,112,.26), inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -1px 0 rgba(0,0,0,.12); }
/* KPI du tableau de bord Établissement */
.kpi-etab { display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 92px; padding: 16px 18px; }
.kpi-etab-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.kpi-etab-ico svg { width: 23px; height: 23px; }
.kpi-etab-txt { min-width: 0; }
.kpi-etab-n { font-family: var(--font-serif); font-size: 29px; font-weight: 700; line-height: 1; color: #1C2B44; }
.kpi-etab-l { font-size: 12.5px; font-weight: 600; margin-top: 5px; line-height: 1.3; }
/* Une couleur par indicateur : pastille d'icône */
.kpi-ico-building { background: #eef0f7; color: #4C5A82; }   /* navy   */
.kpi-ico-users    { background: #e6f4ec; color: #1F8A5B; }   /* émeraude */
.kpi-ico-sectors  { background: #fbf3e3; color: #B87B1E; }   /* ambre  */
.kpi-ico-open     { background: #e4f3ea; color: #14776a; }   /* sarcelle */
.kpi-ico-close    { background: #f9ece7; color: #C0684A; }   /* terracotta */
/* Libellés colorés assortis, bien lisibles */
.kpi-lab-building { color: #3B4870; }
.kpi-lab-users    { color: #157048; }
.kpi-lab-sectors  { color: #96631A; }
.kpi-lab-open     { color: #0F5C52; }
.kpi-lab-close    { color: #A2533A; }

/* Donut du tableau de bord Établissement : compact, légende toujours entière */
.donut-etab { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; padding: 4px 2px; }
.donut-etab-svg { width: 118px; height: 118px; flex-shrink: 0; }
.donut-etab-svg svg { width: 100%; height: 100%; display: block; }
.donut-etab-leg { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.donut-etab-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.donut-etab-pastille { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-etab-lab { flex: 1; color: #1C2B44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-etab-val { color: #8A92A3; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Cartes un peu plus hautes dans ce tableau de bord (donut + légende, listes longues) */
.dash-etab .dash-card { height: 300px; }

/* Section workflow du Climat Social */
.dash-section-title { font-family: var(--font-serif), serif; font-size: 16px; font-weight: 600; color: #7a1f2b; margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #f0dde0; }
.kpi-climat { border-left-color: #0f5c52; }
.kpi-climat .kpi-n { color: #0f5c52; font-size: 24px; }
.kpi-warn { border-left-color: #d99a00; }
.kpi-warn .kpi-n { color: #b37e00; }
.kpi-ok { border-left-color: #2e9e5b; }
.kpi-ok .kpi-n { color: #218049; }

/* Champ montant avec suffixe FCFA */
.montant-wrap { position: relative; display: flex; align-items: center; }
.montant-wrap input { padding-right: 54px !important; }
.montant-suffix { position: absolute; right: 12px; font-size: 13px; font-weight: 600; color: #7a1f2b; pointer-events: none; }


/* ============ MESSAGERIE FLOTTANTE (style LinkedIn) ============ */
.msg-widget { position: fixed; bottom: 0; right: 24px; z-index: 900; display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.msg-widget > * { pointer-events: auto; }

/* Panneau liste (droite) */
.msg-w-panel { width: 300px; background: #fff; border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 16px rgba(0,0,0,.12); display: flex; flex-direction: column; max-height: 70vh; }
.msg-w-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.msg-w-bar-left { display: flex; align-items: center; gap: 9px; }
.msg-w-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.msg-w-title { font-weight: 700; font-size: 15px; }
.msg-w-bar-actions { display: flex; gap: 2px; }
.msg-w-ico { background: none; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; }
.msg-w-ico:hover { background: #eef1f4; }
.msg-w-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.msg-w-search { padding: 10px 12px; }
.msg-w-search input { width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 8px 14px; font-size: 12.5px; box-sizing: border-box; background: #f3f5f7; }
.msg-w-search input:focus { outline: none; border-color: var(--primary); background: #fff; }
.msg-conv-list { overflow-y: auto; min-height: 0; max-height: 46vh; }

.msg-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; background: #c0392b; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700; text-align: center; }

/* Bulle flottante : forme repliée de la messagerie (l'écran reste dégagé).
   Classe .msg-flotteur : ne surtout PAS réutiliser .msg-bulle, qui est la classe
   des bulles de messages du fil de discussion. */
.msg-flotteur { position: relative; width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff; cursor: pointer; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .12s ease, box-shadow .12s ease; }
.msg-flotteur:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0,0,0,.34); }
.msg-flotteur svg { display: block; }
.msg-flotteur-badge { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px #fff; }

.msg-conv-item { display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer; border-bottom: 1px solid #f2f4f7; }
.msg-conv-item:hover { background: #f7f9fb; }
.msg-conv-item.actif { background: #eef5f2; }
.msg-conv-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.msg-conv-avatar.groupe { background: #7a5cc0; font-size: 17px; }
.msg-conv-avatar.petit { width: 28px; height: 28px; font-size: 12px; }
.msg-conv-info { flex: 1; min-width: 0; }
.msg-conv-titre { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-apercu { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.msg-conv-apercu.gras { font-weight: 700; color: var(--ink); }
.msg-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.msg-conv-heure { font-size: 10px; color: var(--ink-soft); }
.msg-conv-badge { min-width: 17px; height: 17px; line-height: 17px; padding: 0 5px; background: #2f6fed; color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 700; text-align: center; }

/* Fenêtres de discussion (gauche) */
.msg-w-fenetres { display: flex; align-items: flex-end; gap: 14px; }
.msg-fenetre { width: 328px; height: 440px; background: #fff; border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 16px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.msg-fenetre.reduit { height: auto; }
.msg-fenetre.reduit .msg-fil, .msg-fenetre.reduit .msg-barre { display: none; }
.msg-fen-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fafbfc; border-radius: 12px 12px 0 0; }
.msg-fen-head-left { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.msg-fen-titre { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-fen-actions { display: flex; gap: 1px; flex-shrink: 0; }

.msg-fil { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 7px; background: #f5f7f9; min-height: 0; }
.msg-fil-vide { text-align: center; color: var(--ink-soft); font-size: 12.5px; margin: auto; }
.msg-jour { text-align: center; font-size: 10px; color: var(--ink-soft); margin: 6px 0 2px; text-transform: uppercase; letter-spacing: .03em; }
.msg-bulle { max-width: 78%; padding: 7px 11px; border-radius: 13px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
.msg-bulle.autre { align-self: flex-start; background: #fff; border: 1px solid #e6eaef; border-bottom-left-radius: 3px; }
.msg-bulle.mien { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.msg-bulle-auteur { font-size: 11px; font-weight: 700; color: #7a5cc0; margin-bottom: 2px; }
.msg-bulle-txt { white-space: pre-wrap; }
.msg-bulle-heure { font-size: 9.5px; opacity: .7; margin-top: 3px; text-align: right; }
.msg-pj-img { max-width: 200px; max-height: 200px; border-radius: 8px; margin-top: 4px; display: block; }
.msg-pj-file { display: inline-block; margin-top: 4px; padding: 6px 10px; background: rgba(0,0,0,.06); border-radius: 8px; font-size: 12px; text-decoration: none; color: inherit; }
.msg-bulle.mien .msg-pj-file { background: rgba(255,255,255,.2); color: #fff; }

.msg-barre { display: flex; align-items: flex-end; gap: 6px; padding: 9px 10px; border-top: 1px solid var(--line); }
.msg-btn-pj { background: #eef1f4; border: none; width: 34px; height: 34px; border-radius: 9px; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.msg-btn-pj:hover { background: #e2e7ec; }
.msg-input-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msg-input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: none; box-sizing: border-box; max-height: 90px; }
.msg-input:focus { outline: none; border-color: var(--primary); }
.msg-pj-label { font-size: 11px; color: var(--primary); margin-top: 3px; padding-left: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-btn-envoi { background: var(--primary); color: #fff; border: none; padding: 0 14px; height: 34px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.msg-btn-envoi:hover { filter: brightness(1.08); }

/* Modale nouvelle conversation */
.msg-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.msg-tab { flex: 1; padding: 9px; border: 1px solid var(--line); background: #fff; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-soft); }
.msg-tab.actif { background: var(--primary); color: #fff; border-color: var(--primary); }
.msg-coll-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.msg-coll-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f2f4f7; }
.msg-coll-item:last-child { border-bottom: none; }
.msg-coll-item:hover { background: #f7f9fb; }
.msg-coll-item.choisi { background: #eef5f2; }
.msg-coll-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.msg-coll-nom { font-weight: 600; font-size: 13px; }
.msg-coll-role { font-size: 11.5px; color: var(--ink-soft); }
.msg-coll-check { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.msg-coll-item:not(.choisi) .msg-coll-check { background: transparent; border: 1.5px solid #d0d6dd; }

@media (max-width: 720px) {
  .msg-widget { right: 0; left: 0; }
  .msg-w-panel { width: 100%; border-radius: 0; }
  .msg-w-fenetres { display: none; }
}

/* 5e touche : tableau de bord des agents */
.head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-tdb { background: linear-gradient(160deg, #12352c, #0d2a26); box-shadow: 0 1px 2px rgba(10,42,51,.2), 0 2px 8px rgba(10,42,51,.15); }
.btn-tdb:hover { background: linear-gradient(160deg, #16463a, #0f332d); box-shadow: 0 2px 6px rgba(10,42,51,.28); }

/* Tableau de bord des agents (modale) */
.tba-intro { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
/* ===== Tableau de bord agents — style « plaque ivoire » ===== */
.tba-card {
  border: 1px solid #E9E4D6;
  border-radius: 22px;
  padding: 20px 22px 18px;
  margin-bottom: 16px;
  background: linear-gradient(178deg, #FBF9F2 0%, #F4F1E7 100%);
  box-shadow:
    0 14px 28px -12px rgba(28, 43, 68, .22),
    0 3px 8px rgba(28, 43, 68, .07),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
.tba-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.tba-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f8e3a4 0%, #e3bd5e 38%, #c69a2e 68%, #a87b12 100%);
  color: #5a4208; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .7),
    inset 0 -2px 3px rgba(120, 84, 8, .35),
    0 2px 5px rgba(120, 84, 8, .3);
}
.tba-nom { font-weight: 700; font-size: 16px; color: #2A3442; }
.tba-role { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.tba-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.tba-stat {
  border-radius: 16px;
  padding: 16px 14px 14px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 2px 6px rgba(28, 43, 68, .08);
}
.tba-stat.tba-imp   { background: linear-gradient(180deg, #EEF0FA 0%, #E6E9F6 100%); border: 1px solid #C9CEE8; }
.tba-stat.tba-cours { background: linear-gradient(180deg, #F8F1DF 0%, #F3EAD2 100%); border: 1px solid #E2D4AC; }
.tba-stat.tba-fait  { background: linear-gradient(180deg, #E9F0EA 0%, #E0EAE1 100%); border: 1px solid #C2D5C5; }
.tba-stat-n { font-family: var(--font-serif); font-size: 34px; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.tba-imp .tba-stat-n { color: #2f4a9c; }
.tba-cours .tba-stat-n { color: #9a7413; }
.tba-fait .tba-stat-n { color: #14614e; }
.tba-stat-l { font-size: 13px; font-weight: 700; color: #2A3442; margin-top: 7px; text-wrap: balance; }
.tba-stat-p { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }

/* Répartition par résultat de conciliation (carte Traités) : chips à icônes */
.tba-conc { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(20, 97, 78, .18); display: flex; flex-direction: column; gap: 5px; text-align: left; }
.tba-conc-ligne {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 5px 7px 5px 6px;
  border-radius: 9px; border: 1px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.tba-conc-ligne:hover { transform: translateX(2px); box-shadow: 0 2px 6px rgba(28,43,68,.10); }
.tba-conc-ligne.conc-ok   { background: linear-gradient(90deg, rgba(26,122,94,.16) 0%, rgba(26,122,94,.05) 70%); border-color: rgba(26,122,94,.25); }
.tba-conc-ligne.conc-part { background: linear-gradient(90deg, rgba(201,155,42,.18) 0%, rgba(201,155,42,.05) 70%); border-color: rgba(201,155,42,.30); }
.tba-conc-ligne.conc-non  { background: linear-gradient(90deg, rgba(192,57,43,.14) 0%, rgba(192,57,43,.04) 70%); border-color: rgba(192,57,43,.25); }
.tba-conc-ligne.conc-nr   { background: linear-gradient(90deg, rgba(122,130,140,.14) 0%, rgba(122,130,140,.04) 70%); border-color: rgba(122,130,140,.25); }
.tba-conc-ico {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  box-shadow: inset 0 -1.5px 2px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(28,43,68,.25);
}
.conc-ok .tba-conc-ico   { background: linear-gradient(160deg, #2a9974 0%, #14614e 100%); }
.conc-part .tba-conc-ico { background: linear-gradient(160deg, #e0b74a 0%, #b98d1e 100%); }
.conc-non .tba-conc-ico  { background: linear-gradient(160deg, #d95a4b 0%, #a92e21 100%); }
.conc-nr .tba-conc-ico   { background: linear-gradient(160deg, #a8b0ba 0%, #7d8692 100%); }
.tba-conc-lbl { flex: 1; font-weight: 600; }
.conc-ok .tba-conc-lbl   { color: #10513f; }
.conc-part .tba-conc-lbl { color: #7d5f10; }
.conc-non .tba-conc-lbl  { color: #8e2317; }
.conc-nr .tba-conc-lbl   { color: #4d565f; }
.tba-conc-n {
  font-weight: 800; font-size: 11.5px; font-variant-numeric: tabular-nums;
  min-width: 22px; padding: 1px 6px; border-radius: 999px; text-align: center;
  color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 1px 2px rgba(28,43,68,.2);
}
.conc-ok .tba-conc-n   { background: #14614e; }
.conc-part .tba-conc-n { background: #ab821b; }
.conc-non .tba-conc-n  { background: #b03326; }
.conc-nr .tba-conc-n   { background: #7d8692; }

/* Éléments cliquables du tableau de bord (consultation) */
.tba-clic { cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .12s; }
.tba-clic:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(28,43,68,.16), inset 0 1px 0 rgba(255,255,255,.65); }
.tba-clic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tba-conc-clic { cursor: pointer; }
.tba-conc-clic:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Vue consultation des dossiers d'un agent */
.fd-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fd-badge {
  display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .02em;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 1px 3px rgba(28,43,68,.25);
}
.fd-badge.fb-cours { background: linear-gradient(160deg, #c9a032 0%, #a37d15 100%); }
.fd-badge.fb-ok    { background: linear-gradient(160deg, #2a9974 0%, #14614e 100%); }
.fd-badge.fb-part  { background: linear-gradient(160deg, #e0b74a 0%, #b98d1e 100%); }
.fd-badge.fb-non   { background: linear-gradient(160deg, #d95a4b 0%, #a92e21 100%); }
.fd-badge.fb-nr    { background: linear-gradient(160deg, #a8b0ba 0%, #7d8692 100%); }

/* Barre de progression : pilule en creux, vert + or métallisé */
.tba-bar {
  display: flex; height: 13px; border-radius: 999px; overflow: hidden;
  background: #E7E2D3; margin-top: 16px;
  box-shadow: inset 0 2px 3px rgba(28, 43, 68, .18), inset 0 -1px 0 rgba(255, 255, 255, .7);
  border: 1px solid rgba(28, 43, 68, .08);
}
.tba-bar-fait { background: linear-gradient(180deg, #1c7a5c 0%, #10553f 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.tba-bar-cours { background: linear-gradient(180deg, #eccf7d 0%, #cda63e 55%, #b78e24 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.45); }
.tba-wrap { width: 100%; }
/* Écrans étroits : les 3 cartes passent en colonne, lisibles sans défilement horizontal */
@media (max-width: 620px) {
  .tba-stats { grid-template-columns: 1fr; }
  .tba-card { padding: 16px 16px 14px; }
  .tba-stat { padding: 13px 14px 12px; }
}

/* Registre des établissements : défilement horizontal si nécessaire */
.table-scroll { overflow-x: auto; }
/* Tableau Établissement : optimisé pour tenir sur la largeur de l'écran */
.table-etab { min-width: 100%; table-layout: fixed; }
.table-etab th, .table-etab td { padding: 9px 8px; font-size: 12.5px; vertical-align: middle; }
.table-etab th { font-size: 10px; }
/* Répartition des largeurs (total = 100%) */
.table-etab col.c-num   { width: 8%; }
.table-etab col.c-objet { width: 12%; }
.table-etab col.c-rs    { width: 20%; }
.table-etab col.c-act   { width: 12%; }
.table-etab col.c-dep   { width: 9%; }
.table-etab col.c-stat  { width: 9%; }
.table-etab col.c-trav  { width: 6%; }
.table-etab col.c-decl  { width: 11%; }
.table-etab col.c-act2  { width: 13%; }
/* Contenu : retour à la ligne autorisé pour éviter le débordement */
.table-etab td { white-space: normal; word-break: break-word; }
/* N° : jamais coupé au milieu */
.table-etab .mono { font-size: 12px; white-space: nowrap; }
/* Badge objet : passe à la ligne dans sa colonne, ne déborde plus */
.table-etab .badge { font-size: 10.5px; padding: 2px 7px; white-space: normal; line-height: 1.3; display: inline-block; }
/* Colonne travailleurs centrée */
.table-etab td:nth-child(7) { text-align: center; }
/* Boutons d'action en icônes, côte à côte */
.actions-icones { display: flex; gap: 5px; align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.ico-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; padding: 0; flex-shrink: 0; }
.ico-btn.ico-modif { color: var(--primary); }
.ico-btn.ico-modif:hover { background: var(--primary-soft); border-color: var(--primary); }
.ico-btn.ico-suppr { color: var(--danger); }
.ico-btn.ico-suppr:hover { background: #fbecea; border-color: var(--danger); }
.ico-btn.ico-enreg { color: #8a5a12; }
.ico-btn.ico-enreg:hover { background: #fbf3e3; border-color: #c9832e; }
.ico-btn.ico-voir { color: #204f85; }
.ico-btn.ico-voir:hover { background: #eaf1f9; border-color: #204f85; }
.etab-verrou-tag { display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: 14px; opacity: .8; }
/* Colonne Action : un peu d'air à droite */
.table-etab td:last-child, .table-etab th:last-child { padding-right: 12px; }
.badge-verrou { display: inline-block; margin-left: 10px; font-size: 11px; font-weight: 600; color: #8a5a12; background: #fbf3e3; border-radius: 10px; padding: 2px 10px; vertical-align: middle; }
.form-lecture input:disabled, .form-lecture select:disabled, .form-lecture textarea:disabled {
  background: #f7f6f2; color: #3a3a3a; opacity: 1; cursor: default; -webkit-text-fill-color: #3a3a3a; }

/* ============ ACCUEIL : écran de bienvenue solennel ============ */
.vue-accueil-hero { padding: 0 !important; overflow: hidden; }
.bienvenue-ecran { position: relative; width: 100%; height: 100%; min-height: 100%;
  background: radial-gradient(120% 100% at 50% 40%, #16324e 0%, #0e2340 45%, #081627 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bienvenue-motif { position: absolute; inset: 0; z-index: 0; }
.bienvenue-motif svg { width: 100%; height: 100%; display: block; }

/* Institution haut gauche */
.bienvenue-institution { position: absolute; top: 26px; left: 30px; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.bienvenue-blason { width: 78px; height: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.bienvenue-institution-txt { margin-top: 6px; font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #d8c89a; line-height: 1.5; }
.bienvenue-institution-txt span { font-size: 8.5px; font-weight: 600; color: #b9c6d6; letter-spacing: .05em; }

/* Cartouche ovale central */
.bienvenue-ovale { position: relative; z-index: 2; width: min(72%, 760px); aspect-ratio: 16 / 11; max-height: 82vh;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 50% 30%, #3a2f26 0%, #2a221b 45%, #1c1712 100%);
  box-shadow:
    0 0 0 2px rgba(201,169,78,.25),
    0 30px 80px rgba(0,0,0,.55),
    inset 0 2px 20px rgba(255,255,255,.06),
    inset 0 -10px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6% 10%;
  overflow: hidden;
  /* veinures bois */
  background-image:
    radial-gradient(120% 120% at 50% 30%, #3a2f26 0%, #2a221b 45%, #1c1712 100%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.015) 0 2px, transparent 2px 9px); }
.bienvenue-ovale::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(201,169,78,.18); pointer-events: none; }

/* Drapeau */
.bienvenue-drapeau { display: flex; width: 130px; height: 30px; border-radius: 3px; overflow: hidden; margin-bottom: 5%; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.bienvenue-drapeau span { flex: 1; display: grid; place-items: center; }
.dr-vert { background: #00853f; } .dr-jaune { background: #fdef42; } .dr-rouge { background: #e31b23; }
.dr-etoile { color: #00853f; font-size: 18px; line-height: 1; }

.bienvenue-titre { font-family: var(--font-serif); font-weight: 700; color: #e9d9a8;
  font-size: clamp(28px, 4.2vw, 52px); line-height: 1.1; letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 30px rgba(201,169,78,.15); }
.bienvenue-filet { width: 62%; height: 1px; margin: 4% 0; background: linear-gradient(90deg, transparent, rgba(201,169,78,.6), transparent); transform-origin: center; }
.bienvenue-role { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: #cdb87f;
  font-size: clamp(16px, 2.2vw, 28px); letter-spacing: .01em; }

/* Date/heure bas droite */
.bienvenue-datetime { position: absolute; bottom: 20px; right: 30px; z-index: 3; color: #b9c6d6; font-size: 14px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bienvenue-etoile-coin { position: absolute; bottom: 16px; right: 210px; z-index: 3; opacity: .8; }

@media (max-width: 720px) {
  .bienvenue-ovale { width: 90%; aspect-ratio: 4 / 5; padding: 10% 8%; }
  .bienvenue-institution { top: 14px; left: 14px; width: 110px; }
  .bienvenue-blason { width: 56px; }
  .bienvenue-etoile-coin { display: none; }
}

/* ============ ANIMATIONS DE L'ÉCRAN DE BIENVENUE ============ */

/* --- Fond animé : le motif géométrique dérive lentement --- */
.bienvenue-motif { animation: motifDerive 40s ease-in-out infinite alternate; }
@keyframes motifDerive {
  from { transform: scale(1.05) translate(-1%, -1%); }
  to   { transform: scale(1.12) translate(1.5%, 1.5%); }
}

/* --- Halo doré pulsant autour du cartouche --- */
.bienvenue-ovale::after {
  content: ''; position: absolute; inset: -3%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201,169,78,.32), rgba(201,169,78,0) 72%);
  filter: blur(14px);
  animation: haloPulse 4.5s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.045); }
}

/* --- Reflet lumineux qui balaie le bois --- */
.bienvenue-reflet {
  position: absolute; top: -60%; left: -30%; width: 55%; height: 220%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,240,205,.14) 45%, rgba(255,245,220,.22) 50%, rgba(255,240,205,.14) 55%, transparent 100%);
  transform: rotate(8deg);
  animation: refletSweep 7s ease-in-out infinite;
}
@keyframes refletSweep {
  0%   { left: -40%; opacity: 0; }
  25%  { opacity: 1; }
  55%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* --- Léger flottement (respiration) du cartouche --- */
.bienvenue-ovale { animation: ovaleFlotte 6s ease-in-out infinite; }
@keyframes ovaleFlotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- Scintillement de l'étoile du coin --- */
.bienvenue-etoile-coin { animation: scintille 3s ease-in-out infinite; }
@keyframes scintille {
  0%, 100% { opacity: .5; transform: scale(.9) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.15) rotate(15deg); }
}

/* ===== Séquence d'APPARITION à l'ouverture ===== */
/* Chaque élément part invisible puis entre à son tour */
.bienvenue-institution,
.bienvenue-ovale,
.bienvenue-drapeau,
.bienvenue-titre,
.bienvenue-filet,
.bienvenue-role,
.bienvenue-datetime,
.bienvenue-etoile-coin { opacity: 0; }

.bienvenue-institution { animation: apparBlason 1s ease .2s both, none; }
@keyframes apparBlason { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* L'ovale grandit en apparaissant, PUIS enchaîne le flottement en boucle */
.bienvenue-ovale { animation: apparOvale 1.1s cubic-bezier(.2,.7,.25,1) .35s both, ovaleFlotte 6s ease-in-out 1.6s infinite; }
@keyframes apparOvale { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }

.bienvenue-drapeau { animation: apparItem .7s ease 1s both; }
.bienvenue-titre   { animation: apparTitre 1s ease 1.25s both; }
@keyframes apparTitre { from { opacity: 0; transform: translateY(14px); letter-spacing: .18em; } to { opacity: 1; transform: none; letter-spacing: .01em; } }

/* Le filet doré se trace de gauche à droite */
.bienvenue-filet { animation: apparItem .5s ease 1.55s both, filetTrace .9s ease 1.55s both; }
@keyframes filetTrace { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bienvenue-role      { animation: apparItem .8s ease 1.85s both; }
.bienvenue-datetime  { animation: apparItem .8s ease 2.1s both; }
.bienvenue-etoile-coin { animation: apparItem .8s ease 2.3s both, scintille 3s ease-in-out 3.1s infinite; }

@keyframes apparItem { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== Accessibilité : couper toutes les animations si demandé ===== */
@media (prefers-reduced-motion: reduce) {
  .bienvenue-motif, .bienvenue-ovale, .bienvenue-ovale::after, .bienvenue-reflet,
  .bienvenue-institution, .bienvenue-drapeau, .bienvenue-titre, .bienvenue-filet,
  .bienvenue-role, .bienvenue-datetime, .bienvenue-etoile-coin {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .bienvenue-reflet { display: none; }
}

/* ============ EFFET 3D LÉGER — cartes des tableaux de bord ============ */
/* Profondeur : ombres étagées + surface très légèrement bombée + liseré clair en haut */
.dash-card, .kpi2 {
  background-image: linear-gradient(180deg, #ffffff 0%, #fdfcf9 100%);
  box-shadow:
    0 1px 1px rgba(28,43,68,.04),
    0 2px 4px rgba(28,43,68,.06),
    0 8px 16px rgba(28,43,68,.07),
    0 16px 30px rgba(28,43,68,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  border-color: #ece7db;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
  will-change: transform;
}
/* Au survol : la carte se soulève, l'ombre s'approfondit */
.dash-card:hover, .kpi2:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 3px rgba(28,43,68,.05),
    0 6px 10px rgba(28,43,68,.08),
    0 16px 28px rgba(28,43,68,.11),
    0 28px 50px rgba(28,43,68,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* Le petit bandeau coloré en haut reste bien visible au-dessus du dégradé */
.dash-card::before { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .dash-card, .kpi2 { transition: none; }
  .dash-card:hover, .kpi2:hover { transform: none; }
}

/* ============ TRANSITION D'APPARITION DES MODULES ============ */
/* Le contenu de chaque module apparaît en fondu + léger glissement vertical au clic */
.main-anim { animation: moduleAppar .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes moduleAppar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .main-anim { animation: none; }
}

/* ============ INFORMATIONS FLASH (accueil) ============ */
.bienvenue-slide { display: flex; flex-direction: column; align-items: center; width: 100%;
  transition: opacity .45s ease, transform .45s ease; }
.bienvenue-slide .bienvenue-filet { margin: 3% 0; }
.bienvenue-slide.slide-sortie { opacity: 0; transform: translateY(-14px); }
.bienvenue-slide.slide-entree { animation: slideInfoEntree .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes slideInfoEntree {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.flash-etiquette { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid rgba(201,169,78,.45); color: #e9d9a8; font-size: 12px; letter-spacing: .14em; font-weight: 700;
  background: rgba(201,169,78,.08); margin-bottom: 3%; }
.flash-etiquette .pt { width: 7px; height: 7px; border-radius: 50%; background: #e0575b;
  box-shadow: 0 0 8px #e0575b; animation: flashPt 1.4s ease-in-out infinite; }
@keyframes flashPt { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.flash-texte { font-family: var(--font-serif); font-weight: 700; color: #e9d9a8; text-align: center;
  font-size: clamp(19px, 2.5vw, 33px); line-height: 1.35; max-width: 92%;
  text-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 30px rgba(201,169,78,.15); }
.flash-auteur { font-family: var(--font-serif); font-style: italic; color: #cdb87f; text-align: center;
  font-size: clamp(13px, 1.6vw, 19px); }
.flash-auteur small { display: block; font-family: var(--font-sans); font-style: normal; font-size: 11px;
  color: #b9c6d6; letter-spacing: .08em; margin-top: 4px; }
.flash-points { display: flex; gap: 8px; margin-top: 3%; justify-content: center; }
.flash-points span { width: 7px; height: 7px; border-radius: 50%; background: rgba(201,169,78,.25);
  transition: background .3s; }
.flash-points span.actif { background: #c9a94e; box-shadow: 0 0 6px rgba(201,169,78,.6); }

/* Flèches de navigation manuelle du fil d'infos */
.flash-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201,169,78,.35);
  background: rgba(0,0,0,.16); color: #e8d9a8; font-size: 26px; line-height: 1; font-family: inherit;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
  cursor: pointer; opacity: .5; transition: opacity .25s ease, background .25s ease, transform .25s ease; }
.flash-nav:hover { opacity: 1; background: rgba(201,169,78,.2); }
.flash-nav:active { transform: translateY(-50%) scale(.92); }
.flash-nav-g { left: 5%; }
.flash-nav-d { right: 5%; }
@media (max-width: 700px) {
  .flash-nav { width: 32px; height: 32px; font-size: 21px; }
  .flash-nav-g { left: 3%; } .flash-nav-d { right: 3%; }
}

.flash-btn { position: absolute; bottom: 20px; left: 30px; z-index: 4; display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(201,169,78,.4); cursor: pointer;
  background: rgba(10,22,40,.55); color: #e9d9a8; font-size: 13px; font-weight: 600; letter-spacing: .03em;
  backdrop-filter: blur(3px); box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .2s, background .2s; user-select: none; }
.flash-btn:hover { transform: translateY(-2px); background: rgba(20,38,64,.75); box-shadow: 0 7px 18px rgba(0,0,0,.45); }
.flash-btn .ico { font-size: 16px; filter: drop-shadow(0 0 6px rgba(224,87,91,.8)); }
@media (max-width: 720px) { .flash-btn { bottom: 14px; left: 14px; font-size: 12px; padding: 8px 13px; } }

/* Liste des infos en cours dans la modale de diffusion */
.flash-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; margin-bottom: 6px; background: #faf9f4; }
.flash-ligne-txt { flex: 1; font-size: 13px; }
.flash-ligne-txt small { display: block; margin-top: 2px; }

/* Clignotement de l'onglet Accueil quand une nouvelle information arrive */
.sidebar nav button.nav-clignote { animation: navClignote 1.1s ease-in-out infinite; }
@keyframes navClignote {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(201,169,78,.22); box-shadow: inset 0 0 0 1px rgba(201,169,78,.55); }
}

/* ============ ESPACE PERSONNEL ============ */
.ep-wrap { position: relative; padding: 20px 26px; min-height: 100%; background: #F0EEE7; overflow: hidden; }
.ep-wrap::before { content: ''; position: absolute; right: -22%; top: -40%; width: 70%; height: 200%;
  background: linear-gradient(180deg, #EAE5D6, #E5DFCC); transform: rotate(17deg); z-index: 0; pointer-events: none; }
.ep-wrap > * { position: relative; z-index: 1; }
.ep-tete { display: flex; align-items: center; gap: 11px; }
.ep-avatar { width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f8e3a4, #e3bd5e 40%, #c69a2e 70%, #a87b12);
  display: grid; place-items: center; font-weight: 700; color: #5a4208; font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7), inset 0 -2px 3px rgba(120,84,8,.35), 0 2px 5px rgba(120,84,8,.3); }
.ep-h1 { font-family: var(--font-serif); font-size: 24px; margin: 0; color: #16283e; font-weight: 700; }
.ep-sous { color: #4c5a68; font-size: 12.5px; margin: 4px 0 14px; }
.ep-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 14px; }
.ep-kpi { position: relative; overflow: hidden; border-radius: 13px; padding: 11px 13px 10px;
  box-shadow: 0 6px 14px -8px rgba(28,43,68,.25), inset 0 1px 0 rgba(255,255,255,.5); }
.ep-kpi .n { font-family: var(--font-serif); font-size: 24px; font-weight: 700; line-height: 1; }
.ep-kpi .l { font-size: 12px; font-weight: 700; margin-top: 5px; }
.ep-kpi .p { font-size: 10.5px; margin-top: 1px; opacity: .85; }
.ep-kpi .orn { position: absolute; right: 11px; top: 11px; font-size: 22px; opacity: .95; }
.epk1 { background: linear-gradient(160deg, #28425F, #1A2E48); color: #fff; border: 1px solid #16263d; }
.epk1 .p { color: #b9c6d6; }
.epk2 { background: linear-gradient(180deg, #F7F0DD, #F0E5C8); border: 1px solid #E0D2A8; color: #2A3442; }
.epk2 .n { color: #9a7413; }
.epk3 { background: linear-gradient(180deg, #CCE5DD, #B8DACF); border: 1px solid #99C3B5; color: #123f33; }
.epk3 .n { color: #0e5644; }
.epk4 { background: linear-gradient(180deg, #F5E2E2, #EFD3D3); border: 1px solid #DEB6B6; color: #5a2620; }
.epk4 .n { color: #a23a2e; }
.ep-kpi .anneau { width: 26px; height: 26px; border-radius: 50%; border: 4.5px solid rgba(0,0,0,.16);
  border-top-color: rgba(0,0,0,.42); position: absolute; right: 11px; top: 11px; }
.epk3 .anneau { border-color: rgba(14,86,68,.25); border-top-color: #0e5644; }
.ep-kpi .env { position: absolute; right: 11px; top: 9px; font-size: 20px; }
.ep-kpi .env i { position: absolute; top: -4px; right: -5px; width: 13px; height: 13px; background: #c0392b;
  border-radius: 50%; color: #fff; font-style: normal; font-size: 8.5px; display: grid; place-items: center; font-weight: 800; }
.ep-cols { display: grid; grid-template-columns: 1.18fr 1fr; gap: 14px; margin-bottom: 13px; }
.ep-carte { background: #FDFCF8; border-radius: 14px; padding: 13px 15px; border: 1px solid #E5E0D2;
  box-shadow: 0 8px 20px -13px rgba(28,43,68,.25); }
.ep-carte.bordee { border: 2px solid #1A2E48; }
.ep-carte h3 { font-family: var(--font-serif); font-size: 14.5px; margin: 0 0 9px; color: #16283e;
  display: flex; align-items: center; gap: 7px; }
.ep-carte h3 .fin { margin-left: auto; font-family: var(--font-sans); font-size: 11px; color: #5a6a78; font-weight: 600; }
.ep-conv { display: flex; align-items: center; gap: 12px; padding: 8px 11px; border-radius: 11px;
  background: #F5F2E8; border: 1px solid #E6E0CC; margin-bottom: 7px; }
.ep-conv.proche { background: #E8F2ED; border-color: #CDE0D6; }
.ep-cal { position: relative; min-width: 46px; text-align: center; background: #fff; border: 1px solid #D7D0BC;
  border-radius: 9px; padding: 7px 5px 4px; box-shadow: 0 2px 4px rgba(28,43,68,.1); }
.ep-cal::before, .ep-cal::after { content: ''; position: absolute; top: -4px; width: 4px; height: 8px;
  border-radius: 2px; background: #4c8f80; }
.ep-cal::before { left: 10px; } .ep-cal::after { right: 10px; }
.ep-cal b { display: block; font-family: var(--font-serif); font-size: 17px; color: #16283e; line-height: 1; }
.ep-cal span { font-size: 8.5px; letter-spacing: .1em; color: #8a94a0; font-weight: 700; }
.ep-conv .qui { flex: 1; } .ep-conv .qui b { display: block; font-size: 12.5px; color: #16283e; }
.ep-conv .qui small { color: #5a6a78; font-size: 11px; }
.ep-conv .h { font-weight: 800; color: #9a7413; font-size: 12.5px; white-space: nowrap; }
.ep-al { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px;
  font-size: 12px; margin-bottom: 6px; color: #2A3442; }
.ep-al b { margin: 0 2px; }
.ep-al .badge { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-size: 10px; font-weight: 800; flex: 0 0 auto; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2); }
.al-rouge { background: #F1D0C9; border: 1px solid #DEA298; } .al-rouge .badge { background: #c0392b; }
.al-or { background: #F0E5C8; border: 1px solid #DECDA0; } .al-or .badge { background: #b8892f; }
.al-bleu { background: #E2E5EB; border: 1px solid #C4CBD6; } .al-bleu .badge { background: #2f4a9c; font-size: 9px; }
.ep-perf { display: flex; gap: 10px; }
.ep-jauge { position: relative; flex: 1; text-align: center; padding: 9px 5px 7px; border-radius: 11px;
  background: #fff; border: 1px solid #E0DAC8; overflow: hidden; box-shadow: 0 2px 6px rgba(28,43,68,.08); }
.ep-jauge svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 22px; opacity: .5; }
.ep-jauge b { position: relative; display: block; font-family: var(--font-serif); font-size: 19px; color: #0e5644; }
.ep-jauge span { position: relative; font-size: 10px; color: #5a6a78; }
.ep-act { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #16283e;
  padding: 8px 4px; border-bottom: 1px solid #EEEADD; }
.ep-act:last-child { border-bottom: none; }
.ep-act .q { margin-left: auto; color: #8a94a0; font-size: 11px; white-space: nowrap; }

/* ===== Widgets personnels (Rendez-vous, Notes, Contacts, Conflits) ===== */
.epw-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 13px; }
.ep-carte.epw { display: flex; flex-direction: column; padding-bottom: 11px; }
.epw-tete { font-family: var(--font-serif); font-size: 14.5px; margin: 0 0 9px; color: #16283e;
  display: flex; align-items: center; gap: 7px; }
.epw-tete .pic { font-size: 15px; }
.epw-n { font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: #5a6a78;
  background: #EFEBDD; border-radius: 999px; padding: 2px 8px; }
.epw-fin { font-family: var(--font-sans); font-size: 10.5px; color: #8a94a0; font-weight: 600; }
.epw-ligne.epw-auj { border-color: #CDBF97; box-shadow: 0 0 0 1px #E8C25A inset; }
.epw-plus { margin-left: auto; width: 25px; height: 25px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gold-grad); color: #2e2104; font-size: 17px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(184,134,11,.4);
  transition: transform .15s ease, box-shadow .15s ease; }
.epw-plus:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(184,134,11,.55); }
/* Corps à HAUTEUR FIXE : la carte ne grandit jamais, le contenu défile à l'intérieur */
.epw-corps { height: 208px; overflow-y: auto; padding-right: 5px;
  scrollbar-width: thin; scrollbar-color: rgba(184,134,11,.35) transparent; }
.epw-corps::-webkit-scrollbar { width: 7px; }
.epw-corps::-webkit-scrollbar-track { background: transparent; }
.epw-corps::-webkit-scrollbar-thumb { background: rgba(184,134,11,.28); border-radius: 4px; }
.epw-corps::-webkit-scrollbar-thumb:hover { background: rgba(184,134,11,.48); }
.epw-corps::-webkit-scrollbar-button { display: none; height: 0; }
.epw-vide { font-size: 12.5px; padding: 8px 2px; }
.epw-ligne { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid #EBE6D8; background: #fff; margin-bottom: 6px; }
.epw-ligne:last-child { margin-bottom: 0; }
.epw-ligne .txt { min-width: 0; flex: 1; }
.epw-ligne .t1 { font-weight: 700; font-size: 12.5px; color: #16283e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epw-ligne .t2 { font-size: 11px; color: #5a6a78; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epw-ligne.passe { opacity: .55; }
.epw-heure { font-size: 10.5px; font-weight: 800; color: #0f5c4a; background: #E3F1E9;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.epw-sup { width: 21px; height: 21px; border-radius: 50%; border: 1px solid #E0D8C6; background: #FBF7EE;
  color: #B23B3B; font-size: 10px; font-weight: 800; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.epw-sup:hover { background: #F5E4E1; border-color: #DAB7B2; }
.epw-note { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.epw-note:hover { border-color: #CDBF97; box-shadow: 0 2px 8px rgba(184,134,11,.14); }
.epw-note .t1.lien::after { content: ' ↗'; font-size: 10px; color: var(--accent); }
.epw-pastille { width: 30px; height: 30px; border-radius: 50%; background: #1C2B44; color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
  border: 2px solid #E8C25A; }
.epw-qual { font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #1F8A5B; text-transform: uppercase; }
/* Consultation d'une note */
.epw-note-vue .nt { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: #16283e; }
.epw-note-vue .nd { font-size: 11.5px; color: #5a6a78; margin: 3px 0 10px; }
.epw-note-vue .filet { height: 1px; background: linear-gradient(90deg, transparent, #CDBF97, transparent); margin-bottom: 11px; }
.epw-note-vue .nx { font-size: 13px; line-height: 1.65; color: #2c3b4c; white-space: pre-wrap; }
/* Widget Conflits : 3 cartes compteurs-filtres + liste défilante */
.epw-corps-cfl { display: flex; flex-direction: column; overflow-y: hidden; }
.epw-conflits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 8px; flex: none; }
.epw-cc { position: relative; border-radius: 12px; padding: 9px 10px 8px; cursor: pointer; color: #fff;
  overflow: hidden; transition: transform .15s ease, filter .15s ease; }
.epw-cc::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.35); }
.epw-cc:hover { transform: translateY(-1px); filter: brightness(1.06); }
.epw-cc .chiffre { font-family: var(--font-serif); font-size: 23px; font-weight: 800; line-height: 1; }
.epw-cc .lab { font-size: 10px; font-weight: 800; margin-top: 4px; letter-spacing: .2px; line-height: 1.25; }
.epw-cc.rouge { background: linear-gradient(160deg, #C0392B, #8f2a20); }
.epw-cc.ambre { background: linear-gradient(160deg, #C98A2C, #9a681d); }
.epw-cc.vert  { background: linear-gradient(160deg, #1F8A5B, #136743); }
.epw-cc.actif { outline: 2.5px solid #E8C25A; outline-offset: 2px; }
.epw-cfl-liste { flex: 1; min-height: 0; overflow-y: auto; padding-right: 5px;
  scrollbar-width: thin; scrollbar-color: rgba(184,134,11,.35) transparent; }
.epw-cfl-liste::-webkit-scrollbar { width: 7px; }
.epw-cfl-liste::-webkit-scrollbar-track { background: transparent; }
.epw-cfl-liste::-webkit-scrollbar-thumb { background: rgba(184,134,11,.28); border-radius: 4px; }
.epw-cfl-liste::-webkit-scrollbar-thumb:hover { background: rgba(184,134,11,.48); }
.epw-cfl-liste::-webkit-scrollbar-button { display: none; height: 0; }
@media (max-width: 900px) {
  .epw-grille { grid-template-columns: 1fr; }
}

/* ===================================================================
   TABLEAU DE BORD (Espace Personnel) — charte 2D à plat
   Fond bleu clair, cartes blanches, coins 8 px, une couleur d'accent
   par widget : 🔵 rendez-vous · 🟠 notes · 🟣 contacts · 🔴 conflits · 🩵 convocations
   =================================================================== */
.ep-wrap.ep-tdb { background: #E8F0FE; }
.ep-tdb { --tdb-texte: #1E3A5F; --tdb-gris: #6B7C93; --tdb-ligne: #E3EAF4;
  --a-rdv: #2D6CDF; --a-notes: #E8A317; --a-ctc: #8E44AD; --a-cfl: #D64541; --a-cvc: #0E9AA7; }
/* En-tête */
.ep-tdb .ep-tete { gap: 14px; }
.ep-tdb .ep-avatar { width: 50px; height: 50px; background: #F2C14E; color: #5c4308;
  font-size: 17px; border: none; box-shadow: 0 2px 6px rgba(242,193,78,.5); }
.ep-tdb .ep-h1 { font-family: var(--font-sans); font-weight: 400; font-size: 25px; color: var(--tdb-texte); }
.ep-tdb .ep-h1 b { font-weight: 800; }
.ep-tdb .ep-sous { color: var(--tdb-gris); margin: 2px 0 0; }
.ep-tdb .ep-tete { margin-bottom: 18px; }
/* Cartes 2D : à plat, coins 8 px, liséré d'accent en tête */
.ep-tdb .ep-carte { background: #F4F8FE; border: none; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(30,58,95,.06); }
.ep-tdb .ep-carte.epw { border-top: 3px solid var(--tdb-ligne); }
.ep-tdb .ep-carte.epw-a-rdv   { border-top-color: var(--a-rdv); }
.ep-tdb .ep-carte.epw-a-notes { border-top-color: var(--a-notes); }
.ep-tdb .ep-carte.epw-a-ctc   { border-top-color: var(--a-ctc); }
.ep-tdb .ep-carte.epw-a-cfl   { border-top-color: var(--a-cfl); }
.ep-tdb .ep-carte.epw-a-cvc   { border-top-color: var(--a-cvc); }
.ep-tdb .epw-pleine  { grid-column: 1 / -1; }
/* En-têtes de widgets : sans-serif 16 px gras, compteur teinté à l'accent */
.ep-tdb .epw-tete { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--tdb-texte); }
.ep-tdb .epw-n { background: #E4EDFB; color: #3D5A80; }
.ep-tdb .epw-a-rdv   .epw-n { background: #E1EBFC; color: var(--a-rdv); }
.ep-tdb .epw-a-notes .epw-n { background: #FBF0DA; color: #A97410; }
.ep-tdb .epw-a-ctc   .epw-n { background: #F1E5F7; color: var(--a-ctc); }
.ep-tdb .epw-a-cfl   .epw-n { background: #FBE6E5; color: var(--a-cfl); }
.ep-tdb .epw-a-cvc   .epw-n { background: #DFF3F5; color: #0B7680; }
/* Bouton + : à plat, couleur de l'accent */
.ep-tdb .epw-plus { background: #F2C14E; color: #5c4308; box-shadow: 0 2px 5px rgba(30,58,95,.15); }
.ep-tdb .epw-a-rdv   .epw-plus { background: var(--a-rdv); color: #fff; }
.ep-tdb .epw-a-notes .epw-plus { background: var(--a-notes); color: #fff; }
.ep-tdb .epw-a-ctc   .epw-plus { background: var(--a-ctc); color: #fff; }
.ep-tdb .epw-plus:hover { transform: scale(1.08); }
/* Lignes : blanches, coins 8 px, ombre légère au survol (ergonomie) */
.ep-tdb .epw-ligne { border: none; border-radius: 8px; box-shadow: 0 1px 2px rgba(30,58,95,.05);
  transition: box-shadow .18s ease, transform .18s ease; }
.ep-tdb .epw-ligne:hover { box-shadow: 0 5px 14px rgba(30,58,95,.13); transform: translateY(-1px); }
.ep-tdb .epw-ligne .t1 { color: var(--tdb-texte); font-size: 13px; }
.ep-tdb .epw-ligne .t2 { color: var(--tdb-gris); }
.ep-tdb .ep-cal { background: #FCFDFF; border-color: var(--tdb-ligne); }
.ep-tdb .ep-cal b { color: var(--tdb-texte); }
.ep-tdb .ep-cal span { color: var(--a-notes); }
/* Heure : verte (rendez-vous), bleue (convocations) */
.ep-tdb .epw-heure { color: #1F8A5B; background: #E3F1E9; }
.ep-tdb .epw-a-cvc .epw-heure { color: var(--a-rdv); background: #E1EBFC; }
/* Suppression : rouge cerclé */
.ep-tdb .epw-sup { border: 1.5px solid #F3C4C2; background: #FDF4F4; color: #D64541; }
.ep-tdb .epw-sup:hover { background: #FBE6E5; border-color: #EBA5A2; }
/* Notes : crayon d'accent */
.ep-tdb .epw-note .t1.lien::after { color: var(--a-notes); }
/* Contacts : pastilles multicolores */
.ep-tdb .epw-pastille { border: none; }
.ep-tdb .epw-pastille.pc0 { background: var(--a-rdv); }
.ep-tdb .epw-pastille.pc1 { background: #1F8A5B; }
.ep-tdb .epw-pastille.pc2 { background: var(--a-ctc); }
.ep-tdb .epw-pastille.pc3 { background: var(--a-cfl); }
.ep-tdb .epw-qual { color: #1F8A5B; }
/* Conflits : blocs 2D unis, sélection nette */
.ep-tdb .epw-cc { border-radius: 8px; }
.ep-tdb .epw-cc::after { display: none; }
.ep-tdb .epw-cc.rouge { background: var(--a-cfl); }
.ep-tdb .epw-cc.ambre { background: var(--a-notes); }
.ep-tdb .epw-cc.vert  { background: #1F8A5B; }
.ep-tdb .epw-cc.actif { outline: 2.5px solid #fff; outline-offset: -4px; box-shadow: 0 4px 12px rgba(30,58,95,.25); }
.ep-tdb .epw-cc:hover { transform: translateY(-1px); filter: none; box-shadow: 0 6px 16px rgba(30,58,95,.22); }
/* Ascenseurs teintés à l'accent du widget */
.ep-tdb .epw-corps, .ep-tdb .epw-cfl-liste { scrollbar-color: rgba(30,58,95,.25) transparent; }
.ep-tdb .epw-corps::-webkit-scrollbar-thumb, .ep-tdb .epw-cfl-liste::-webkit-scrollbar-thumb { background: rgba(30,58,95,.2); }
.ep-tdb .epw-corps::-webkit-scrollbar-thumb:hover, .ep-tdb .epw-cfl-liste::-webkit-scrollbar-thumb:hover { background: rgba(30,58,95,.4); }
.ep-tdb .epw-a-rdv   .epw-corps::-webkit-scrollbar-thumb { background: rgba(45,108,223,.35); }
.ep-tdb .epw-a-notes .epw-corps::-webkit-scrollbar-thumb { background: rgba(232,163,23,.4); }
.ep-tdb .epw-a-ctc   .epw-corps::-webkit-scrollbar-thumb { background: rgba(142,68,173,.35); }
.ep-tdb .epw-a-cfl   .epw-cfl-liste::-webkit-scrollbar-thumb { background: rgba(214,69,65,.35); }
.ep-tdb .epw-a-cvc   .epw-corps::-webkit-scrollbar-thumb { background: rgba(14,154,167,.35); }
/* Convocation du jour */
.ep-tdb .epw-ligne.epw-auj { box-shadow: 0 0 0 1.5px var(--a-cvc) inset, 0 1px 2px rgba(30,58,95,.05); }
/* Vide + libellé fin */
.ep-tdb .epw-vide { color: var(--tdb-gris); }
.ep-tdb .epw-fin { color: var(--tdb-gris); }
/* Pilotage (encadrement) harmonisé */
.ep-tdb .ep-carte h3 { color: var(--tdb-texte); }
.ep-agent { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 12.5px; }
.ep-agent .nom { min-width: 150px; font-weight: 600; color: #16283e; }
.ep-agent .barre { flex: 1; height: 9px; border-radius: 999px; background: #E7E2D3; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(28,43,68,.15); }
.ep-agent .barre i { display: block; height: 100%; background: linear-gradient(90deg, #1c7a5c, #10553f); border-radius: 999px; }
.ep-agent .det { min-width: 90px; text-align: right; color: #5a6a78; font-size: 11px; }
@media (max-width: 900px) {
  .ep-kpis { grid-template-columns: repeat(2, 1fr); }
  .ep-cols { grid-template-columns: 1fr; }
}

/* Objets multiples de la plainte : chips + ligne d'ajout */
.objets-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 24px; }
.objet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px;
  border-radius: 999px; background: #eef2ec; border: 1px solid #cfdccb; font-size: 12.5px; color: #2A3442; }
.objet-chip-x { border: none; background: #d9e4d5; color: #3d4a56; width: 18px; height: 18px;
  border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; }
.objet-chip-x:hover { background: #c0392b; color: #fff; }
.objet-ajout { display: flex; gap: 8px; align-items: center; }
.objet-ajout select { flex: 1; }
.objet-ajout .btn { white-space: nowrap; }

/* ============ ÉTABLISSEMENT : répertoire des entreprises ============ */
.entr-wrap { padding: 20px 26px; }
.entr-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.entr-tete h1 { margin: 0 0 3px; }
.entr-recherche { min-width: 260px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; background: #fff; }
.entr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.entr-carte { position: relative; overflow: hidden; background: linear-gradient(178deg, #FDFBF4, #F3EFE3);
  border: 1px solid #E7E1D1; border-radius: 17px; padding: 18px 18px 16px; cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(28,43,68,.28), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .15s, box-shadow .2s; }
.entr-carte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #c9a94e, #a87b12); opacity: 0; transition: opacity .2s; }
.entr-carte:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(28,43,68,.38), inset 0 1px 0 rgba(255,255,255,.85); }
.entr-carte:hover::before { opacity: 1; }
.entr-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entr-avatar { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #f3e2ae; letter-spacing: .03em;
  background: linear-gradient(155deg, #2C4A6E 0%, #16283e 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.3), 0 3px 8px rgba(22,40,62,.35);
  border: 1px solid rgba(201,169,78,.5); margin-bottom: 11px; }
.entr-nom { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: #16283e; line-height: 1.25; }
.entr-secteur { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #8a7b4e;
  margin-top: 4px; font-weight: 700; }
.entr-filet { height: 1px; background: linear-gradient(90deg, rgba(201,169,78,.4), transparent 70%); margin-top: 12px; }
.entr-aller { position: absolute; right: 15px; bottom: 13px; font-size: 12px; color: #b7ad93;
  transition: color .2s, transform .2s; }
.entr-carte:hover .entr-aller { color: #a87b12; transform: translateX(3px); }

/* Dossier d'entreprise */
.entr-section { margin-bottom: 18px; }
.entr-section h3 { font-family: var(--font-serif); font-size: 15.5px; color: #16283e; margin: 0 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid #E5E0D2; }
.entr-lib { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .05em; margin: 9px 0 5px; }
.entr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.entr-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; background: #f2efe6;
  border: 1px solid #E0DAC8; color: #2A3442; }
.entr-chip b { color: #14614e; margin-left: 2px; }
.entr-decl { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 10px;
  background: #F5F2E8; border: 1px solid #E6E0CC; margin-bottom: 6px; font-size: 12.5px; }
.entr-decl-objet { font-weight: 700; color: #10513f; min-width: 200px; }
.entr-decl-info { flex: 1; color: var(--ink-soft); font-size: 11.5px; }
.entr-decl-date { font-weight: 700; color: #1e2b3a; white-space: nowrap; }

/* Dossier entreprise : badges de modules + pages */
.dm-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 8px 0 4px; }
.dm-badge { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 16px 18px;
  text-align: center; cursor: pointer; border: 1px solid #E5E0D2;
  background: linear-gradient(178deg, #FDFBF4, #F3EFE3);
  box-shadow: 0 8px 20px -14px rgba(28,43,68,.25), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .15s, box-shadow .2s; }
.dm-badge:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(28,43,68,.35); }
.dm-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-badge::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.dm-badge.vert::after { background: linear-gradient(90deg, #2a9974, #14614e); }
.dm-badge.or::after   { background: linear-gradient(90deg, #e0b74a, #a87b12); }
.dm-badge.bleu::after { background: linear-gradient(90deg, #2C4A6E, #16283e); }
.dm-badge .ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px; color: #fff;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -3px 5px rgba(0,0,0,.25), 0 3px 8px rgba(22,40,62,.3); }
.dm-badge.vert .ico { background: linear-gradient(155deg, #2a9974, #14614e); }
.dm-badge.or .ico   { background: linear-gradient(155deg, #d8ad3c, #a87b12); }
.dm-badge.bleu .ico { background: linear-gradient(155deg, #2C4A6E, #16283e); }
.dm-badge .nomM { font-family: var(--font-serif); font-weight: 700; font-size: 15.5px; color: #16283e; }
.dm-badge .voir { display: inline-block; margin-top: 9px; font-size: 11.5px; color: #b7ad93; transition: color .2s; }
.dm-badge:hover .voir { color: #a87b12; }
@media (max-width: 640px) { .dm-badges { grid-template-columns: 1fr; } }

.dm-fil { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.dm-fil b { color: #14614e; }
.dm-lib { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 10px 0 7px; }
.dm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .dm-2col { grid-template-columns: 1fr; } }
.dm-barres .rang { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.dm-barres .lab { width: 108px; text-align: right; font-size: 12px; color: #3d4a56;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-barres .piste { flex: 1; height: 13px; border-radius: 999px; background: #F1EBDD; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(28,43,68,.08); }
.dm-barres .rempli { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #B65C38, #9C4526); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }
.dm-barres .rempli.r-ok { background: linear-gradient(90deg, #2a9974, #14614e); }
.dm-barres .rempli.r-part { background: linear-gradient(90deg, #e0b74a, #b98d1e); }
.dm-barres .rempli.r-non { background: linear-gradient(90deg, #d95a4b, #a92e21); }
.dm-barres .n { min-width: 26px; font-weight: 800; font-size: 12px; color: #1e2b3a; font-variant-numeric: tabular-nums; }
.dm-decl { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px;
  background: #F5F2E8; border: 1px solid #E6E0CC; margin-bottom: 6px; }
.dm-decl .pastille { min-width: 130px; text-align: center; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; color: #fff; }
.dm-decl .p-ouv { background: #1c7a5c; } .dm-decl .p-chg { background: #2C4A6E; } .dm-decl .p-ferm { background: #a92e21; }
.dm-decl .inf { flex: 1; font-size: 11.5px; color: var(--ink-soft); }
.dm-decl .dt { font-weight: 800; font-size: 12.5px; color: #16283e; font-variant-numeric: tabular-nums; }

/* Typeahead entreprise */
.ta-wrap { position: relative; }
.ta-wrap input { width: 100%; }
.ta-liste { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 3px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(28,43,68,.18); max-height: 218px; overflow-y: auto; }
.ta-item { padding: 8px 13px; font-size: 13px; color: #2A3442; cursor: pointer; }
.ta-item:hover, .ta-item.actif { background: #eef2ec; color: #14614e; }

/* ===================================================================
   MODULE COURRIER — registre Arrivée / Départ
   Charte épurée : bleu clair, blanc, gris (cohérente avec le Tableau de bord)
   =================================================================== */
.crr-wrap { background: #E8F0FE; min-height: 100%; padding: 22px 26px;
  --crr-texte: #1E3A5F; --crr-gris: #6B7C93; --crr-ligne: #E3EAF4; --crr-bleu: #2D6CDF; }
.crr-tete { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.crr-pic { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 23px; box-shadow: 0 1px 3px rgba(30,58,95,.12); }
.crr-h1 { font-family: var(--font-sans); font-size: 24px; font-weight: 800; color: var(--crr-texte); margin: 0; }
.crr-sous { color: var(--crr-gris); font-size: 12.5px; margin-top: 2px; }
.crr-carte { background: #F4F8FE; border-radius: 8px; padding: 15px 17px 14px; margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(30,58,95,.06); }
.crr-titre-carte { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--crr-texte);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.crr-nb { font-size: 11px; font-weight: 700; color: var(--crr-bleu); background: #E1EBFC;
  border-radius: 999px; padding: 2px 9px; }
/* Formulaire */
.crr-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; margin-bottom: 12px; }
.crr-champ label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--crr-gris); margin-bottom: 5px; }
.crr-champ label .req { color: #D64541; font-style: normal; }
.crr-champ input, .crr-champ select, .crr-champ textarea { width: 100%; border: 1px solid #D5DEEC;
  border-radius: 8px; background: #fff; padding: 9px 11px; font-size: 13px; color: var(--crr-texte);
  font-family: var(--font-sans); transition: border-color .15s ease, box-shadow .15s ease; }
.crr-champ input:focus, .crr-champ select:focus, .crr-champ textarea:focus { outline: none;
  border-color: var(--crr-bleu); box-shadow: 0 0 0 3px rgba(45,108,223,.14); }
.crr-champ textarea { resize: vertical; min-height: 64px; }
/* Champ auto-rempli verrouillé : grisé */
.crr-verrou, .crr-champ input.crr-verrou { background: #EDF1F7; color: #7C8CA3; border-color: #DDE4EF;
  cursor: not-allowed; font-weight: 700; }
.crr-actions-form { display: flex; justify-content: flex-end; margin-top: 12px; }
.crr-btn { border: none; border-radius: 8px; background: var(--crr-bleu); color: #fff; font-weight: 700;
  font-size: 13.5px; padding: 10px 22px; cursor: pointer; font-family: var(--font-sans);
  box-shadow: 0 2px 6px rgba(45,108,223,.35); transition: background .15s ease, transform .15s ease; }
.crr-btn:hover { background: #2159BC; transform: translateY(-1px); }
/* Registre */
.crr-defile { overflow-x: auto; }
.crr-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 12.5px; }
.crr-table th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--crr-gris); padding: 2px 10px; }
.crr-table td { background: #fff; padding: 9px 10px; color: var(--crr-texte); vertical-align: middle; }
.crr-table tr td:first-child { border-radius: 8px 0 0 8px; }
.crr-table tr td:last-child { border-radius: 0 8px 8px 0; }
.crr-table tbody tr { box-shadow: 0 1px 2px rgba(30,58,95,.05); transition: box-shadow .15s ease; }
.crr-table tbody tr:hover td { box-shadow: inset 0 0 0 100vh rgba(45,108,223,.03); }
.crr-num { font-weight: 700; white-space: nowrap; }
.crr-obj { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crr-nat { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.crr-nat.arr { color: #1F8A5B; background: #E3F1E9; }
.crr-nat.dep { color: #B26A04; background: #FBF0DA; }
.crr-statut { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.crr-statut.brl { color: var(--crr-gris); background: #EDF1F7; }
.crr-statut.def { color: #0B7680; background: #DFF3F5; }
.crr-ligne-def td { background: #FBFDFF; color: #5D7191; }
/* Icônes d'action */
.crr-col-act { white-space: nowrap; text-align: right; }
.crr-ico { border: 1px solid var(--crr-ligne); background: #fff; border-radius: 8px; width: 30px; height: 30px;
  font-size: 14px; cursor: pointer; margin-left: 5px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.crr-ico:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,58,95,.14); border-color: #C4D2E8; }
.crr-ico-def:hover { border-color: #9BD4C4; }
.crr-cadenas { font-size: 15px; opacity: .75; }
@media (max-width: 900px) {
  .crr-grille { grid-template-columns: 1fr; }
  .crr-wrap { padding: 16px 12px; }
}

/* Courrier — registre seul + formulaire en fenêtre */
.crr-btn-tete { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 7px; }
.crr-col-inf { text-align: center; white-space: nowrap; }
.crr-ico-voir { font-size: 13px; }
.crr-ico-voir:hover { border-color: #A9C4EE; }
.crr-sans-info { color: #B7C3D6; font-weight: 700; }
.crr-info-vue .iv-meta { font-size: 11.5px; color: #6B7C93; margin-bottom: 6px; }
.crr-info-vue .iv-objet { font-weight: 700; font-size: 14px; color: #1E3A5F; }
.crr-info-vue .iv-filet { height: 1px; background: linear-gradient(90deg, transparent, #C9D6EC, transparent); margin: 10px 0; }
.crr-info-vue .iv-texte { font-size: 13px; line-height: 1.65; color: #2c3b4c; white-space: pre-wrap; }
@media (max-width: 700px) {
  .crr-tete { flex-wrap: wrap; }
  .crr-btn-tete { margin-left: 0; width: 100%; justify-content: center; }
}

/* Courrier — registre sur une page, sans défilement horizontal */
.crr-table { table-layout: fixed; font-size: 12px; border-spacing: 0 5px; }
.crr-table th:nth-child(1), .crr-table td:nth-child(1) { width: 82px; }    /* Date JJ/MM/AAAA */
.crr-table th:nth-child(2), .crr-table td:nth-child(2) { width: 104px; }   /* Numéro */
.crr-table th:nth-child(3), .crr-table td:nth-child(3) { width: 98px; }    /* Nature */
.crr-table th:nth-child(4), .crr-table td:nth-child(4) { width: 15%; }     /* Expéditeur */
.crr-table th:nth-child(5), .crr-table td:nth-child(5) { width: 15%; }     /* Destinataire */
                                                                            /* Objet : espace restant */
.crr-table th:nth-child(7), .crr-table td:nth-child(7) { width: 78px; }    /* Infos compl. */
.crr-table th:nth-child(8), .crr-table td:nth-child(8) { width: 112px; }   /* Actions */
.crr-table th { padding: 2px 8px; font-size: 10px; }
.crr-table td { padding: 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crr-date { font-variant-numeric: tabular-nums; color: #44597A; }
.crr-num { font-size: 12px; }
.crr-pers, .crr-obj { max-width: none; }
.crr-irtss { color: #93A3BC; font-weight: 700; letter-spacing: .3px; }
.crr-nat { font-size: 10.5px; padding: 3px 8px; }
.crr-ico { width: 27px; height: 27px; font-size: 12.5px; margin-left: 4px; border-radius: 7px; }
.crr-col-inf { text-align: center; }
.crr-defile { overflow-x: visible; }
@media (max-width: 1050px) {
  /* petit écran : on autorise à nouveau le défilement plutôt que d'écraser les colonnes */
  .crr-defile { overflow-x: auto; }
  .crr-table { table-layout: auto; }
  .crr-table td { white-space: nowrap; }
}

/* Courrier — largeurs robustes quel que soit le rendu de police du poste */
.crr-table th:nth-child(1), .crr-table td:nth-child(1) { width: 102px; }   /* Date */
.crr-table th:nth-child(2), .crr-table td:nth-child(2) { width: 118px; }   /* Numéro */
.crr-table th:nth-child(3), .crr-table td:nth-child(3) { width: 106px; }   /* Nature */
.crr-table th:nth-child(4), .crr-table td:nth-child(4) { width: 15%; }     /* Expéditeur */
.crr-table th:nth-child(5), .crr-table td:nth-child(5) { width: 15%; }     /* Destinataire */
.crr-table th:nth-child(7), .crr-table td:nth-child(7) { width: 64px; }    /* Infos */
.crr-table th:nth-child(8), .crr-table td:nth-child(8) { width: 126px; }   /* Actions */
.crr-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crr-table th.crr-col-act { text-align: right; padding-right: 12px; }
.crr-table td.crr-date { overflow: visible; text-overflow: clip; }         /* la date ne se coupe jamais */
.crr-table td.crr-irtss { color: #93A3BC; }                                /* spécificité corrigée : IRTSS estompé */

/* ===== Courrier — registre riche façon registre des plaintes ===== */
.crr-entete-registre { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: nowrap; }
.crr-recherche { margin-left: auto; width: 230px; max-width: 100%; border: 1px solid #D5DEEC; border-radius: 8px;
  background: #fff; padding: 9px 12px 9px 32px; font-size: 12.5px; color: #1E3A5F; font-family: var(--font-sans);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center; transition: border-color .15s ease, box-shadow .15s ease; }
.crr-recherche:focus { outline: none; border-color: #2D6CDF; box-shadow: 0 0 0 3px rgba(45,108,223,.14); }
/* Tableau riche : cellules hautes, texte qui respire */
.crr-table.crr-riche { table-layout: fixed; }
/* Registre général du courrier : 5 colonnes */
.crr-riche th:nth-child(1), .crr-riche td:nth-child(1) { width: 128px; }   /* N° / Date / Nature */
.crr-riche th:nth-child(2), .crr-riche td:nth-child(2) { width: 21%; }     /* Correspondant */
                                                                            /* Objet : reste */
.crr-riche th:nth-child(4), .crr-riche td:nth-child(4) { width: 27%; }     /* Infos + pièce jointe */
.crr-riche th:nth-child(5), .crr-riche td:nth-child(5) { width: 92px; }    /* Actions 2×2 */

/* Registre des plaintes : 6 colonnes, largeurs proportionnelles au contenu */
.crr-riche.crr-plaintes th:nth-child(1), .crr-riche.crr-plaintes td:nth-child(1) { width: 13%; }  /* N° + date */
.crr-riche.crr-plaintes th:nth-child(2), .crr-riche.crr-plaintes td:nth-child(2) { width: 20%; }  /* Travailleur */
.crr-riche.crr-plaintes th:nth-child(3), .crr-riche.crr-plaintes td:nth-child(3) { width: 24%; }  /* Objet */
.crr-riche.crr-plaintes th:nth-child(4), .crr-riche.crr-plaintes td:nth-child(4) { width: 18%; }  /* Dossiers */
.crr-riche.crr-plaintes th:nth-child(5), .crr-riche.crr-plaintes td:nth-child(5) { width: 16%; }  /* Téléphone */
.crr-riche.crr-plaintes th:nth-child(6), .crr-riche.crr-plaintes td:nth-child(6) { width: 9%; }   /* Actions */
.crr-riche td { white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; padding: 11px 10px; }
.crr-c-num .crr-num { font-size: 13px; color: #2D6CDF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crr-c-num .crr-date { margin-top: 2px; font-size: 11.5px; }
.crr-c-num .crr-nat { margin-top: 7px; display: inline-block; }
.crr-ligne-def .crr-num { color: #7C93B8; }
.crr-c-corr { line-height: 1.55; }
.crr-qui { font-weight: 700; font-size: 12.5px; }
.crr-fleche { color: #A9B7C9; margin: 0 6px; }
.crr-c-obj { line-height: 1.55; font-size: 12.5px; }
.crr-c-inf { font-size: 12px; color: #44597A; line-height: 1.55; }
.crr-inf-txt { margin-bottom: 2px; }
/* Pastille pièce jointe dans la ligne */
.crr-pj { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; max-width: 100%;
  background: #EDF3FD; border: 1px solid #CCDCF6; color: #2D6CDF; font-weight: 700; font-size: 11px;
  border-radius: 999px; padding: 4px 10px; cursor: pointer; font-family: var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease; }
.crr-pj:hover { background: #DFEAFB; }
/* Grille d'icônes 2×2 */
.crr-ico-grille { display: grid; grid-template-columns: repeat(2, 30px); gap: 6px; justify-content: end; }
.crr-ico-grille .crr-ico { width: 30px; height: 30px; margin: 0; font-size: 13.5px; }
.crr-ico-grille .crr-cadenas { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 0; }
/* Bloc pièce jointe dans la fenêtre Voir */
.crr-pj-bloc { margin-top: 13px; background: #fff; border: 1px solid #CCDCF6; border-radius: 8px; padding: 11px 13px;
  display: flex; align-items: center; gap: 11px; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.crr-pj-bloc:hover { box-shadow: 0 4px 12px rgba(45,108,223,.16); border-color: #A9C4EE; }
.crr-pj-bloc .pjb-pic { width: 36px; height: 36px; border-radius: 8px; background: #EDF3FD; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.crr-pj-bloc .pjb-nom { font-weight: 700; font-size: 12.5px; color: #2D6CDF; word-break: break-all; }
.crr-pj-bloc .pjb-det { font-size: 11px; color: #6B7C93; margin-top: 1px; }
.crr-pj-bloc .pjb-ouvre { margin-left: auto; font-size: 11px; font-weight: 800; color: #2D6CDF; white-space: nowrap; }
/* Champ pièce jointe du formulaire */
.crr-fichier { border: 1.5px dashed #A9C4EE; background: #F8FBFF; border-radius: 8px; padding: 11px 13px;
  display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.crr-fichier:hover { background: #EFF5FE; border-color: #7FA8E8; }
.crr-fichier .p { font-size: 16px; }
.crr-fichier .t { font-size: 12px; color: #6B7C93; min-width: 0; }
.crr-fichier .t b { color: #2D6CDF; }
.crr-fichier .x { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #F3C4C2;
  background: #FDF4F4; color: #D64541; font-size: 11px; font-weight: 800; flex: none;
  display: flex; align-items: center; justify-content: center; }
@media (max-width: 1050px) {
  .crr-riche { table-layout: auto; }
  .crr-riche td { white-space: normal; }
}

/* Courrier — correspondant simplifié : préfixe De/À + nom seul */
.crr-prefixe { color: #93A3BC; font-weight: 800; font-size: 10.5px; letter-spacing: .3px;
  text-transform: uppercase; margin-right: 6px; }
.crr-c-corr { white-space: normal; }
.crr-c-corr .crr-qui { display: inline; max-width: none; vertical-align: baseline;
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: keep-all; overflow-wrap: normal; hyphens: none; line-height: 1.45; }
.crr-c-corr .crr-prefixe { float: left; margin-top: 2px; }

/* Courrier — Option C : objet en bleu gras + liseré bleu au bord de la ligne */
.crr-riche .crr-c-obj { font-weight: 800; font-size: 13px; color: #2D6CDF; }
.crr-riche tbody td:first-child { border-left: 3px solid #2D6CDF; }
.crr-riche .crr-ligne-def td:first-child { border-left-color: #B9CCE9; }   /* définitif : liseré adouci */
.crr-riche .crr-ligne-def .crr-c-obj { color: #7C93B8; }                   /* définitif : objet estompé */

/* Attestations — pièces jointes multiples */
.att-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.att-pj { font-size: 11px; color: #0e5644; background: #EDF3EE; border: 1px solid #CFE3D4;
  border-radius: 999px; padding: 2px 9px; text-decoration: none; max-width: 190px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-pj:hover { background: #E0EEE3; }
.att-pj-liste { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.att-pj-item { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E0DBCB;
  border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.att-pj-item .n { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-pj-item .d { color: #8a94a0; font-size: 11px; white-space: nowrap; }
.att-pj-item .x { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #E8C7C3;
  background: #FBF2F1; color: #B23B3B; font-size: 10px; font-weight: 800; cursor: pointer; flex: none; }
.att-pj-item.nouveau { border-style: dashed; }

/* ===== Widgets EP : action Modifier + recherche compacte ===== */
.epw-acts { display: flex; gap: 5px; flex: none; align-items: center; }
.epw-mod { width: 21px; height: 21px; border-radius: 50%; border: 1px solid #C9D8F0; background: #F3F8FF;
  font-size: 10.5px; cursor: pointer; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.epw-mod:hover { background: #E3EEFC; border-color: #A9C4EE; }
.epw-loupe { margin-left: auto; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #D5DEEC;
  background: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease; }
.epw-loupe:hover { background: #EFF5FE; border-color: #A9C4EE; }
.epw-loupe svg { width: 12px; height: 12px; stroke: #6B7C93; stroke-width: 2.6; fill: none; }
.epw-loupe + .epw-plus { margin-left: 6px; }
.epw-rech { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.epw-rech-champ { flex: 1; border: 1px solid #C9D8F0; border-radius: 8px; background: #fff;
  padding: 6px 10px 6px 28px; font-size: 12px; font-family: var(--font-sans); color: #1E3A5F; min-width: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center; }
.epw-rech-champ:focus { outline: none; border-color: #2D6CDF; box-shadow: 0 0 0 3px rgba(45,108,223,.14); }
.epw-rech-fermer { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #E0D8C6; background: #fff;
  color: #8a94a0; font-size: 10px; font-weight: 800; cursor: pointer; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center; }
.epw-rech-fermer:hover { color: #D64541; border-color: #DAB7B2; }
/* Le champ déployé prend sa place sur la zone de liste : la hauteur du widget ne bouge pas */
.epw-corps.epw-corps-reduit { height: 172px; }

/* Widgets EP : lignes entièrement cliquables, actions dans les fenêtres */
.epw-ligne.epw-cliquable { cursor: pointer; }
.btn.btn-danger-ghost { color: #D64541; border-color: #F3C4C2; background: #FDF4F4; margin-right: auto; }
.btn.btn-danger-ghost:hover { background: #FBE6E5; border-color: #EBA5A2; }

/* ===== Dossier entreprise — thème marine (fenêtres des modules) ===== */
.modal.dm-marine { background: #EEF1F7; }
.modal.dm-marine .modal-head { background: #1B2B4D; border-bottom: none; padding: 15px 22px; }
.modal.dm-marine .modal-head h2 { color: #fff; }
.modal.dm-marine .modal-head .x { color: #fff; opacity: .85; }
.modal.dm-marine .modal-head .x:hover { opacity: 1; }
/* Compteur bien visible dans le fil d'Ariane */
.modal.dm-marine .dm-fil { font-size: 13px; }
.dm-nb { display: inline-block; background: #1B2B4D; color: #fff; font-weight: 800; font-size: 13.5px;
  border-radius: 999px; padding: 2px 11px; margin: 0 2px; box-shadow: 0 1px 3px rgba(27,43,77,.35); }
/* Répartitions : toutes les données, zone défilante à barre fine */
.dm-barres-defile { max-height: 182px; overflow-y: auto; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(27,43,77,.3) transparent; }
.dm-barres-defile::-webkit-scrollbar { width: 7px; }
.dm-barres-defile::-webkit-scrollbar-track { background: transparent; }
.dm-barres-defile::-webkit-scrollbar-thumb { background: rgba(27,43,77,.25); border-radius: 4px; }
.dm-barres-defile::-webkit-scrollbar-thumb:hover { background: rgba(27,43,77,.45); }
.dm-barres-defile::-webkit-scrollbar-button { display: none; height: 0; }
/* Tableau : en-tête marine, n° sarcelle, lignes alternées */
.modal.dm-marine .table-scroll { border-radius: 10px; box-shadow: 0 1px 4px rgba(30,58,95,.12); }
.modal.dm-marine .table-scroll thead th { background: #1B2B4D; color: #fff; font-size: 11px;
  letter-spacing: .8px; text-transform: uppercase; border-bottom: none; }
.modal.dm-marine .table-scroll tbody td { background: #FBFCFE; border-bottom: 1px solid #E4E9F2; }
.modal.dm-marine .table-scroll tbody tr:nth-child(even) td { background: #F4F7FC; }
.dm-num { color: #0E6E62; font-weight: 800; }
/* Badges de type de contrat */
.dmt-badge { display: inline-block; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .4px;
  border-radius: 8px; padding: 4px 12px; white-space: nowrap; box-shadow: 0 1px 3px rgba(20,35,58,.25); }
.dmt-badge.orange   { background: linear-gradient(180deg, #D06A38, #B14E22); }
.dmt-badge.vert     { background: linear-gradient(180deg, #1F8A5B, #136743); }
.dmt-badge.bleu     { background: linear-gradient(180deg, #2D6CDF, #2159BC); }
.dmt-badge.violet   { background: linear-gradient(180deg, #8E44AD, #6F3389); }
.dmt-badge.sarcelle { background: linear-gradient(180deg, #0E9AA7, #0B7680); }
.dmt-badge.gris     { background: linear-gradient(180deg, #6B7C93, #51617A); }

/* Dossier entreprise : 4e carte « Situation » (marine) */
.dm-badges { grid-template-columns: repeat(4, 1fr); }
.dm-badge.marine::after { background: linear-gradient(90deg, #35507E, #1B2B4D); }
.dm-badge.marine .ico   { background: linear-gradient(155deg, #35507E, #1B2B4D); }
@media (max-width: 900px) { .dm-badges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dm-badges { grid-template-columns: 1fr; } }

/* ===== Cloche de notifications (Tableau de bord) ===== */
.ep-tdb .ep-tete { position: relative; }
.ep-cloche-zone { margin-left: auto; position: relative; }
.ep-cloche { position: relative; width: 46px; height: 46px; border-radius: 12px; border: none; cursor: pointer;
  background: #FDF6E7; font-size: 21px; box-shadow: 0 1px 4px rgba(30,58,95,.14);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease; }
.ep-cloche:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(30,58,95,.2); }
.ep-cloche-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; border-radius: 999px;
  background: #D64541; color: #fff; font-size: 11px; font-weight: 800; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(214,69,65,.5);
  font-family: var(--font-sans); }
.ep-notifs { position: absolute; top: 54px; right: 0; width: 380px; max-width: 86vw; z-index: 60;
  background: #fff; border-radius: 10px; box-shadow: 0 14px 40px rgba(20,35,58,.25); overflow: hidden; }
.ep-notifs-tete { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #1B2B4D;
  color: #fff; font-weight: 700; font-size: 13.5px; font-family: var(--font-sans); }
.ep-notifs-nb { font-size: 11px; font-weight: 800; background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 9px; }
.ep-notifs-vide { padding: 14px; font-size: 12.5px; margin: 0; }
.ep-notifs-liste { max-height: 320px; overflow-y: scroll;   /* barre toujours présente */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(27,43,77,.35) rgba(27,43,77,.07); }
.ep-notifs-liste::-webkit-scrollbar { width: 8px; }
.ep-notifs-liste::-webkit-scrollbar-track { background: rgba(27,43,77,.07); border-radius: 4px; }
.ep-notifs-liste::-webkit-scrollbar-thumb { background: rgba(27,43,77,.32); border-radius: 4px; }
.ep-notifs-liste::-webkit-scrollbar-thumb:hover { background: rgba(27,43,77,.5); }
.ep-notifs-liste::-webkit-scrollbar-button { display: none; height: 0; }

/* Élément balayable : fond rouge révélé pendant le glissement vers la gauche */
.ep-notif { position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; cursor: pointer; background: #fff; touch-action: pan-y;
  border-bottom: 1px solid #EEF1F7; transition: background .15s ease; }
.ep-notif:last-child { border-bottom: none; }
.ep-notif:hover { background: #F2F7FE; }
.ep-notif .ico { font-size: 16px; flex: none; margin-top: 1px; }
.ep-notif .txt { font-size: 12.5px; color: #1E3A5F; line-height: 1.45; font-family: var(--font-sans); }

/* Correctif : l'en-tête (et donc le panneau de notifications) s'empile au-dessus de la grille */
.ep-wrap.ep-tdb > .ep-tete { z-index: 40; }

/* DMT : pastille de l'objet de déclaration */
.dmt-objet { display: inline-block; font-size: 11px; font-weight: 700; color: #0f3d63;
  background: #E3EEFA; border: 1px solid #C9DEF2; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ===== Tableau de bord : Variation du marché du travail (DMT) ===== */
.dash-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .dash-grid-3 { grid-template-columns: 1fr; } }
.vdm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-top: 16px; }
@media (max-width: 1100px) { .vdm-kpis { grid-template-columns: repeat(2, 1fr); } }
.vdm-kpi { background: #fff; border-radius: 16px; padding: 16px 17px 15px; box-shadow: 0 2px 8px rgba(30,58,95,.08);
  position: relative; overflow: hidden; border-top: 3px solid #ccc; transition: transform .15s ease, box-shadow .15s ease; }
.vdm-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,58,95,.14); }
.vdm-tot { border-top-color: #1B3A5C; } .vdm-imm { border-top-color: #2E8B67; }
.vdm-per { border-top-color: #C0392B; } .vdm-chg { border-top-color: #B4562C; } .vdm-ent { border-top-color: #C98A2C; }
.vdm-ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.vdm-tot .vdm-ic { background: #E7EDF5; } .vdm-imm .vdm-ic { background: #E3F1EA; }
.vdm-per .vdm-ic { background: #FBE7E5; } .vdm-chg .vdm-ic { background: #F6E7DD; } .vdm-ent .vdm-ic { background: #FBF1DD; }
.vdm-lab { font-size: 12px; color: #445; font-weight: 700; margin-bottom: 10px; line-height: 1.3; padding-right: 42px; min-height: 32px; }
.vdm-val { font-size: 34px; font-weight: 800; font-family: var(--font-serif); line-height: 1; color: #1B3A5C; }
.vdm-imm .vdm-val { color: #1F6B4F; } .vdm-per .vdm-val { color: #C0392B; }
.vdm-sub { font-size: 11.5px; margin-top: 7px; font-weight: 700; color: #8090A5; }
.vdm-sub.up { color: #2E8B67; } .vdm-sub.down { color: #C0392B; }
.vdm-sub.up::before { content: '▲ '; } .vdm-sub.down::before { content: '▼ '; }
.vdm-bal { display: flex; flex-direction: column; gap: 11px; margin-bottom: 6px; }
.vdm-bal-row { display: flex; align-items: center; gap: 11px; }
.vdm-bal-t { width: 128px; font-size: 12px; font-weight: 700; color: #3a4a63; }
.vdm-bal-bar { height: 26px; border-radius: 8px; display: flex; align-items: center; padding: 0 11px; color: #fff;
  font-weight: 800; font-size: 13px; min-width: 34px; }
.vdm-bal-bar.e { background: linear-gradient(90deg, #3AA57F, #1F6B4F); }
.vdm-bal-bar.s { background: linear-gradient(90deg, #D9614F, #B4362A); justify-content: flex-end; }
.vdm-solde { text-align: center; margin: 12px 0; font-size: 12.5px; color: #6B7C93; }
.vdm-solde b { font-size: 19px; font-family: var(--font-serif); }
.vdm-solde b.pos { color: #1F6B4F; } .vdm-solde b.neg { color: #C0392B; }
.vdm-solde-sub { font-size: 11.5px; margin-top: 3px; }
.vdm-sous-titre { font-size: 12.5px; font-weight: 700; color: #1F6B4F; margin: 14px 0 9px; }

/* Cartes filtrables du tableau de bord Variation : en-tête titre + sélecteur */
.vdm-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vdm-cardsel { border: 1px solid #D5DEEC; border-radius: 8px; padding: 5px 9px; font-size: 11.5px;
  color: #22304A; font-family: var(--font-sans); background: #fff; max-width: 48%; }
.vdm-cardsel:focus { outline: none; border-color: #1F6B4F; box-shadow: 0 0 0 2px rgba(31,107,79,.15); }

/* ===== Cartes établissement thématisées par secteur ===== */
.entr-carte.entr-sect { background: linear-gradient(160deg, var(--sect-bg) 0%, #FBF9F2 55%); }
.entr-carte.entr-sect::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--sect); border-radius: 17px 17px 0 0; z-index: 2; }
.entr-motif { position: absolute; right: -6px; bottom: -8px; width: 104px; height: 104px; opacity: .12;
  pointer-events: none; z-index: 0; }
.entr-motif svg { width: 100%; height: 100%; }
.entr-carte.entr-sect .entr-avatar { background: var(--sect); }
.entr-carte.entr-sect .entr-secteur { color: var(--sect); font-weight: 800; }
.entr-carte.entr-sect .entr-nom,
.entr-carte.entr-sect .entr-avatar,
.entr-carte.entr-sect .entr-filet,
.entr-carte.entr-sect .entr-aller { position: relative; z-index: 1; }

/* Courrier — filtre par date dans l'en-tête du registre */
.crr-entete-registre { flex-wrap: nowrap; }
.crr-entete-registre .crr-titre-carte { white-space: nowrap; flex: none; }
.crr-filtre-date { flex: none; }
@media (max-width: 900px) {
  .crr-entete-registre { flex-wrap: wrap; }
  .crr-recherche { width: 100%; margin-left: 0; }
}
.crr-filtre-date { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6B7C93; }
.crr-filtre-l { font-weight: 700; white-space: nowrap; }
.crr-datesel { border: 1px solid #D5DEEC; border-radius: 8px; padding: 7px 10px; font-size: 12px;
  color: #1E3A5F; font-family: var(--font-sans); background: #FBFCFD; cursor: pointer; }
.crr-datesel:focus { outline: none; border-color: #2D6CDF; box-shadow: 0 0 0 3px rgba(45,108,223,.14); }

/* ===== Courrier — groupes de courriers ===== */
.crr-groupes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 6px; }
@media (max-width: 1000px) { .crr-groupes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .crr-groupes { grid-template-columns: 1fr; } }
.crr-gc { position: relative; background: #fff; border-radius: 14px; padding: 18px 16px 15px; cursor: pointer;
  overflow: hidden; box-shadow: 0 2px 8px rgba(30,58,95,.08); text-align: center;
  transition: transform .15s ease, box-shadow .15s ease; }
.crr-gc:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,58,95,.16); }
.crr-gc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); }
.crr-gc .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--c); color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 11px;
  box-shadow: 0 5px 12px -4px var(--c); }
.crr-gc .nom { font-weight: 800; font-size: 14px; line-height: 1.3; min-height: 36px;
  display: flex; align-items: center; justify-content: center; color: #1E3A5F; }
.crr-gc .nb { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; color: var(--c);
  background: #F2F6FC; border-radius: 999px; padding: 3px 11px; }
.crr-gc .aller { display: block; margin-top: 9px; font-size: 11px; color: #8896AB;
  border-top: 1px dashed #E3EAF4; padding-top: 8px; }
.crr-retour { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  color: #2D6CDF; background: #fff; border: 1px solid #CCDCF6; border-radius: 999px; padding: 7px 14px;
  cursor: pointer; margin-bottom: 12px; font-family: var(--font-sans); transition: background .15s ease; }
.crr-retour:hover { background: #EFF5FE; }

/* Groupe plaintes : numéro de téléphone dans le registre */
.crr-tel { font-size: 12px; color: #44597A; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== Conflits individuels : cartes-compteurs thématisées ===== */
.stats-touches .stat-touche[class*="stt-"] { position: relative; border-top: 3px solid var(--sc, #94A3B8);
  border-radius: 14px; padding-top: 16px; }
.stats-touches .stat-touche { transition: transform .15s ease, box-shadow .15s ease; }
.stats-touches .stat-touche:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30,58,95,.14); }
.stats-touches .stt-ico { position: absolute; top: 12px; right: 13px; width: 32px; height: 32px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--sc-bg, #EEF1F5); }
.stats-touches .stat-n { font-size: 30px; }
.stats-touches .stat-l { padding-right: 40px; }
/* Cartes compactes : icône, chiffre et libellé sur une seule ligne — la rangée
   s'affine et le registre remonte à l'écran (mise en page « cartes + registre »). */
.stats-compactes { gap: 10px; margin-bottom: 14px; }
.stats-compactes .stat-touche { display: flex; align-items: center; gap: 10px; padding: 9px 13px; }
.stats-compactes .stat-n { font-size: 21px; line-height: 1; }
.stats-compactes .stat-l { margin-top: 0; font-size: 11px; padding-right: 0; line-height: 1.25; }
.stats-compactes .stt-ico { position: static; flex: none; width: 27px; height: 27px; font-size: 13px; border-radius: 8px; }
.stats-compactes .stat-touche.actif::after { bottom: -8px; }
/* Outils dans l'en-tête du registre (boutons d'action + recherche) */
.panel-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Titres de colonnes des registres Contrats / DMT / Établissements : même
   bandeau marine contrasté et figé que les autres registres. */
#cont-wrap thead th, #dmt-wrap thead th, #etab-wrap thead th, #att-wrap thead th,
#hist-wrap thead th, #ag-wrap thead th {
  position: sticky; top: 0; z-index: 6;
  background: #24425B; color: #EAF2ED; font-weight: 700; letter-spacing: .06em;
  border-bottom: 2px solid #1B3348; }
/* Le conteneur ne doit pas être un scroll-container, sinon l'en-tête figé ne
   colle pas au défilement de la page : clip rogne sans capturer le sticky.
   Sur écran étroit, on rend le défilement horizontal (le figé s'y efface). */
#cont-wrap, #dmt-wrap, #etab-wrap .table-scroll, #att-wrap, #hist-wrap, #ag-wrap { overflow-x: clip; }
@media (max-width: 1100px) {
  #cont-wrap, #dmt-wrap, #etab-wrap .table-scroll, #att-wrap, #hist-wrap, #ag-wrap { overflow-x: auto; }
  #cont-wrap thead th, #dmt-wrap thead th, #etab-wrap thead th, #att-wrap thead th,
#hist-wrap thead th, #ag-wrap thead th { position: static; }
}

/* Pastille compteur à côté du titre du registre (modules sans cartes de filtre) */
.reg-compte { display: inline-block; margin-left: 10px; background: #E7EDF5; color: #1B3A5C;
  border: 1px solid #C9D6E6; border-radius: 20px; padding: 1px 10px; font-size: 12.5px;
  font-weight: 800; font-family: var(--font-sans); vertical-align: 2px; }

/* Une couleur par objet de carte */
.stt-total       { --sc: #1B3A5C; --sc-bg: #E7EDF5; }
.stt-non_impute  { --sc: #C98A2C; --sc-bg: #FBF1DD; }
.stt-impute      { --sc: #C0392B; --sc-bg: #FBE7E5; }
.stt-en_cours    { --sc: #2D6CDF; --sc-bg: #E4EDFC; }
.stt-traite      { --sc: #1F8A5B; --sc-bg: #E3F1E9; }
.stt-total .stat-n      { color: #1B3A5C; }
.stt-non_impute .stat-n { color: #B8801F; }
.stt-impute .stat-n     { color: #C0392B; }
.stt-en_cours .stat-n   { color: #2D6CDF; }
.stt-traite .stat-n     { color: #1F8A5B; }
/* Carte active : fond teinté de sa couleur, texte blanc.
   Restreint aux cartes thématisées (celles qui définissent --sc), pour ne pas
   affecter les compteurs des autres modules (Agenda, Historique…). */
.stats-touches .stat-touche[class*="stt-"].actif { background: var(--sc); border-top-color: var(--sc); }
.stats-touches .stat-touche[class*="stt-"].actif .stat-n,
.stats-touches .stat-touche[class*="stt-"].actif .stat-l { color: #fff; }
.stats-touches .stat-touche[class*="stt-"].actif .stt-ico { background: rgba(255,255,255,.22); }

/* ===== Demande de réaffectation ===== */
.badge-reaff { background: #F4E7FB; color: #7E3FA0; border: 1px solid #E2CBEF; }
.btn.btn-reaff { color: #7E3FA0; border-color: #E2CBEF; }
.btn.btn-reaff:hover { background: #F7EDFC; border-color: #C99FDD; }
.btn.btn-refus { color: #C0392B; border-color: #F0C6C1; }
.btn.btn-refus:hover { background: #FCEEEC; border-color: #E2A69E; }
.btn.btn-attente { background: #F4E7FB; color: #7E3FA0; border-color: #E2CBEF; cursor: default; }
/* Libellés longs (« Demander une réaffectation », « ⏳ Demande envoyée ») :
   passage à la ligne autorisé pour s'adapter à la largeur de la colonne Action,
   quelle que soit la taille de l'écran — sinon le texte serait tronqué. */
.actions .btn.btn-reaff, .actions .btn.btn-attente {
  white-space: normal; text-align: left; line-height: 1.3; max-width: 100%; }
/* Message clignotant sous le nom de l'agent (encadrement) */
.reaff-clignote { margin-top: 3px; font-size: 11px; font-weight: 800; color: #C0392B;
  animation: reaffBlink 1.15s ease-in-out infinite; }
@keyframes reaffBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .reaff-clignote { animation: none; } }

/* Demande de réaffectation : message cliquable + état traitement obligatoire */
button.reaff-clignote { background: none; border: none; padding: 0; cursor: pointer;
  display: block; width: 100%; text-align: left; line-height: 1.3;
  word-break: keep-all; overflow-wrap: normal; hyphens: none;
  font-family: var(--font-sans); text-decoration: underline dotted; text-underline-offset: 2px; }
button.reaff-clignote:hover { color: #94261A; }
.badge-oblig { background: #FDEDD8; color: #A85B12; border: 1px solid #F3D4A6; }
.reaff-vue .rv-meta { font-size: 12px; color: #6B7C93; }
.reaff-vue .rv-agent { font-size: 13.5px; font-weight: 700; color: #1E3A5F; margin-top: 4px; }
.reaff-vue .rv-filet { height: 1px; background: linear-gradient(90deg, transparent, #C9D6EC, transparent); margin: 11px 0; }
.reaff-vue .rv-motif { font-size: 13.5px; line-height: 1.65; color: #2c3b4c; white-space: pre-wrap; }

/* ===== Registre des plaintes : tout tient sans défilement horizontal ===== */
/* La colonne N° enreg. a été supprimée ; le numéro figure sous le nom du travailleur */
#tbl-wrap { overflow-x: visible; }
#tbl-wrap table { table-layout: fixed; width: 100%; }
#tbl-wrap th, #tbl-wrap td { padding: 8px 9px; vertical-align: top; }
/* Titres de colonnes en exergue : bandeau marine contrasté, figé en haut au défilement */
#tbl-wrap thead th { position: sticky; top: 0; z-index: 6;
  background: #24425B; color: #EAF2ED; font-weight: 700; letter-spacing: .06em;
  border-bottom: 2px solid #1B3348; }
/* Lignes mieux différenciées : zébrage renforcé, filet plus marqué, survol net */
#tbl-wrap td { border-bottom: 1px solid #EAE6DC; }
#tbl-wrap .actions { max-width: none; width: 100%; }
#tbl-wrap .actions .btn-sm { font-size: 11.5px; padding: 5px 9px; }
/* Répartition des largeurs (Travailleur, Objet, Date, Dossiers, Traitement, [Agent], Action).
   Restreinte aux tableaux du registre des plaintes : le registre des délégués
   partage le conteneur #tbl-wrap mais définit ses propres largeurs (.dg-table). */
#tbl-wrap table:not(.dg-table) th:nth-child(1), #tbl-wrap table:not(.dg-table) td:nth-child(1) { width: 19%; }
#tbl-wrap table:not(.dg-table) th:nth-child(2), #tbl-wrap table:not(.dg-table) td:nth-child(2) { width: 16%; }
#tbl-wrap table:not(.dg-table) th:nth-child(3), #tbl-wrap table:not(.dg-table) td:nth-child(3) { width: 82px; }
#tbl-wrap table:not(.dg-table) th:nth-child(4), #tbl-wrap table:not(.dg-table) td:nth-child(4) { width: 92px; }
#tbl-wrap table:not(.dg-table) th:nth-child(5), #tbl-wrap table:not(.dg-table) td:nth-child(5) { width: 20%; }
#tbl-wrap table:not(.dg-table) th:last-child,  #tbl-wrap table:not(.dg-table) td:last-child  { width: 176px; }
/* Vue encadrement : une colonne Agent en plus → on resserre le reste */
#tbl-wrap table.avec-agent th:nth-child(1), #tbl-wrap table.avec-agent td:nth-child(1) { width: 17%; }
#tbl-wrap table.avec-agent th:nth-child(2), #tbl-wrap table.avec-agent td:nth-child(2) { width: 14%; }
#tbl-wrap table.avec-agent th:nth-child(3), #tbl-wrap table.avec-agent td:nth-child(3) { width: 74px; }
#tbl-wrap table.avec-agent th:nth-child(4), #tbl-wrap table.avec-agent td:nth-child(4) { width: 78px; }
#tbl-wrap table.avec-agent th:nth-child(5), #tbl-wrap table.avec-agent td:nth-child(5) { width: 14%; }
#tbl-wrap table.avec-agent th:nth-child(6), #tbl-wrap table.avec-agent td:nth-child(6) { width: 17%; }
#tbl-wrap table.avec-agent th:last-child,  #tbl-wrap table.avec-agent td:last-child  { width: 132px; }
#tbl-wrap table.avec-agent .actions .btn-sm { font-size: 11px; padding: 4px 8px; }
/* Le numéro d'enregistrement sous le nom du travailleur */
/* Numéro d'enregistrement en pastille insécable : repérable d'un coup d'œil,
   et la ligne ne se casse plus en hauteur. */
.num-cell { display: inline-block; background: #E7EDF5; border: 1px solid #C9D6E6; color: #1B3A5C;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  border-radius: 6px; padding: 1px 7px; margin-top: 3px; white-space: nowrap; }
/* Contenus qui s'adaptent sans déborder : on coupe entre les mots, jamais au milieu */
/* Alternance discrète : distingue les plaintes sans ajouter de trait */
#tbl-wrap tbody tr:nth-child(even) { background: #F6F4EE; }
#tbl-wrap tbody tr:hover { background: #EDF3EF; }
#tbl-wrap td { overflow-wrap: break-word; word-break: normal; hyphens: none; }
/* Colonne Agent : nom et prénom lisibles, coupure uniquement entre les mots */
#tbl-wrap table.avec-agent td:nth-child(6) { word-break: keep-all; overflow-wrap: normal; hyphens: none; line-height: 1.35; font-size: 12.5px; }
#tbl-wrap .trait-cell .badge { white-space: normal; word-break: keep-all; overflow-wrap: normal;
  hyphens: none; line-height: 1.3; max-width: 100%; text-align: left;
  align-items: flex-start; border-radius: 12px; }
#tbl-wrap .trait-cell .badge::before { flex: 0 0 6px; margin-top: 4px; }
/* Badges d'état secondaires : police resserrée, deux lignes autorisées */
#tbl-wrap .trait-cell .badge-oblig,
#tbl-wrap .trait-cell .badge-reaff { font-size: 10.5px; padding: 3px 8px; letter-spacing: -.1px; }
#tbl-wrap .trait-cell { min-width: 0; }
/* Écran étroit : le défilement redevient possible plutôt que d'écraser les colonnes */
@media (max-width: 1150px) {
  #tbl-wrap { overflow-x: auto; }
  #tbl-wrap table { table-layout: auto; min-width: 980px; }
  /* Registre Licenciement délégué : pas de défilement horizontal — le tableau
     reste en largeurs fixes et se compacte, la colonne Action reste visible. */
  #tbl-wrap table.dg-table { table-layout: fixed; min-width: 0; width: 100%; }
  #tbl-wrap .dg-table th, #tbl-wrap .dg-table td { padding-left: 6px; padding-right: 6px; }
  #tbl-wrap .dg-table th:nth-child(4), #tbl-wrap .dg-table td:nth-child(4),
  #tbl-wrap .dg-table th:nth-child(5), #tbl-wrap .dg-table td:nth-child(5),
  #tbl-wrap .dg-table th:nth-child(6), #tbl-wrap .dg-table td:nth-child(6) { padding-left: 6px; }
  .dg-table .dg-etape { font-size: 10.5px; }
  #tbl-wrap .dg-table .dg-doc { padding: 3px 7px; }
  #tbl-wrap .dg-table .actions .btn-sm { font-size: 10px; padding: 3px 5px; letter-spacing: 0; }
  #tbl-wrap .dg-table .dg-num { font-size: 12px; }
  #tbl-wrap .dg-table .dg-date, #tbl-wrap .dg-table .dg-reste { font-size: 10.5px; }
  /* Les dates peuvent passer sur deux lignes (entre les mots) plutôt que déborder */
  #tbl-wrap .dg-table .dg-date, #tbl-wrap .dg-table .dg-limite,
  #tbl-wrap .dg-table .dg-limite-rouge { white-space: normal; }
}

/* ===== Cartes-compteurs thématisées : Agenda des convocations & Historique ===== */
.stats-touches .stat-touche[class*="sta-"],
.stats-touches .stat-touche[class*="sth-"] { position: relative; border-top: 3px solid var(--sc, #94A3B8);
  border-radius: 14px; padding-top: 16px; }
.stats-touches .stat-touche[class*="sta-"].actif,
.stats-touches .stat-touche[class*="sth-"].actif { background: var(--sc); border-top-color: var(--sc); }
.stats-touches .stat-touche[class*="sta-"].actif .stat-n,
.stats-touches .stat-touche[class*="sta-"].actif .stat-l,
.stats-touches .stat-touche[class*="sth-"].actif .stat-n,
.stats-touches .stat-touche[class*="sth-"].actif .stat-l { color: #fff; }
.stats-touches .stat-touche[class*="sta-"].actif .stt-ico,
.stats-touches .stat-touche[class*="sth-"].actif .stt-ico { background: rgba(255,255,255,.22); }
/* Agenda des convocations */
.sta-total   { --sc: #1B3A5C; --sc-bg: #E7EDF5; }
.sta-avenir  { --sc: #2D6CDF; --sc-bg: #E4EDFC; }
.sta-passees { --sc: #6B7C93; --sc-bg: #EDEFF3; }
.sta-total .stat-n   { color: #1B3A5C; }
.sta-avenir .stat-n  { color: #2D6CDF; }
.sta-passees .stat-n { color: #6B7C93; }
/* Historique des conflits */
.sth-total     { --sc: #1B3A5C; --sc-bg: #E7EDF5; }
.sth-totale    { --sc: #1F8A5B; --sc-bg: #E3F1E9; }
.sth-partielle { --sc: #C98A2C; --sc-bg: #FBF1DD; }
.sth-non       { --sc: #C0392B; --sc-bg: #FBE7E5; }
.sth-total .stat-n     { color: #1B3A5C; }
.sth-totale .stat-n    { color: #1F8A5B; }
.sth-partielle .stat-n { color: #B8801F; }
.sth-non .stat-n       { color: #C0392B; }
/* Pastille d'icône commune à ces cartes */
.stats-touches .stat-touche[class*="sta-"] .stt-ico,
.stats-touches .stat-touche[class*="sth-"] .stt-ico { background: var(--sc-bg, #EEF1F5); }

/* ---------- MOBILE : application réduite à l'enregistrement des courriers ---------- */
/* Bandeau compact : identité à gauche, déconnexion à droite. Le module unique
   étant imposé, la navigation et le profil n'apportent rien et sont masqués. */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }

  .sidebar { position: sticky; top: 0; z-index: 30;
    height: auto; min-height: 0; max-height: none; align-self: start;
    width: auto; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 12px; padding: 8px 12px;
    overflow: visible; }

  /* Identité réduite : logo + sigle sur une seule ligne */
  .sidebar .brand { display: flex; flex-direction: row; align-items: center;
    gap: 9px; margin: 0; padding: 0; border: none; flex: 0 1 auto; min-width: 0; }
  .sidebar .brand-logo { padding: 4px 6px; flex-shrink: 0; }
  .sidebar .brand-logo img { height: 22px; width: auto; display: block; }
  .sidebar .brand .name { font-size: 15px; line-height: 1.1; white-space: nowrap; }
  .sidebar .brand .name small { font-size: 9.5px; }

  /* Navigation et profil : sans objet quand un seul module est accessible */
  .sidebar .nav,
  .sidebar .user-profile { display: none; }

  /* Déconnexion : seule commande conservée, dimensionnée à son texte */
  .sidebar .user-box { border: none; margin: 0; padding: 0; width: auto; flex: 0 0 auto; }
  .sidebar .user-box button { width: auto; margin: 0; }
  .sidebar .user-box .btn-logout { display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap; padding: 8px 14px; font-size: 13px; border-radius: 9px; }

  .main { padding: 16px 14px; }

  /* Contenu : en-tête resserré et bouton d'action pleine largeur */
  .crr-tete { flex-direction: column; align-items: flex-start; gap: 10px; }
  .crr-h1 { font-size: 21px; line-height: 1.2; }
  .crr-sous { font-size: 12.5px; }
  .crr-btn-tete { width: 100%; justify-content: center; padding: 13px; font-size: 14.5px; }
  .crr-groupes { grid-template-columns: 1fr; }

  /* Message d'alerte : en haut, sinon il passe sous le clavier virtuel */
  .toast { bottom: auto; top: 12px; left: 12px; right: 12px; transform: none;
    width: auto; text-align: center; z-index: 200; font-size: 13.5px; padding: 12px 16px; }

  /* Modale plein écran : la barre d'actions doit rester atteignable */
  .modal-back { padding: 0; place-items: stretch; }
  .modal { max-height: 100%; height: 100%; width: 100%; border-radius: 0;
    display: flex; flex-direction: column; }
  .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-foot { position: sticky; bottom: 0; background: #fff;
    border-top: 1px solid var(--line); padding: 10px 14px; margin: 0;
    display: flex; gap: 8px; }
  .modal-foot .btn { flex: 1 1 0; justify-content: center; padding: 12px; }
}

/* Champ requis non renseigné : signalé brièvement à la validation */
.field.champ-manquant { animation: champSecousse .4s; }
.field.champ-manquant > label { color: var(--danger); }
.field.champ-manquant input, .field.champ-manquant select, .field.champ-manquant textarea,
.field.champ-manquant .objets-chips {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.12); border-radius: var(--radius); }
@keyframes champSecousse {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .field.champ-manquant { animation: none; } }

/* ---------- Champ pièces jointes cumulatif ---------- */
.pj-champ { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 11px; background: #fff; }
.pj-liste { display: flex; flex-direction: column; gap: 6px; }
.pj-item { display: flex; align-items: center; gap: 8px; background: #F6F8FA;
  border: 1px solid #E6EBF0; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; }
.pj-item-actuel { background: #FBF7EC; border-color: #EDE0C4; }
.pj-item .pj-n { flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--primary);
  color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pj-item .pj-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink); }
.pj-item .pj-x { flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: #98A4B2; font-size: 14px; padding: 2px 4px; line-height: 1; }
.pj-item .pj-x:hover { color: var(--danger); }
.pj-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.pj-note-err { color: var(--danger); font-weight: 600; }
.pj-actions { display: flex; gap: 8px; margin-top: 10px; }
.pj-actions .btn { flex: 1 1 0; justify-content: center; }
@media (max-width: 900px) {
  .pj-actions { flex-direction: column; }
  .pj-actions .btn { padding: 12px; font-size: 14px; }
}

/* Champ renseigné automatiquement d'après l'entreprise saisie */
select.champ-auto, input.champ-auto {
  border-color: var(--primary); background: #F0F8F5;
  box-shadow: 0 0 0 3px rgba(15,110,86,.10); transition: background .3s, box-shadow .3s; }

/* ---------- Notifications : écarter par balayage ---------- */
/* Bandeau rouge sous la ligne, révélé au fur et à mesure du glissement. */
/* Le fond rouge est porté par la ligne elle-même : le contenu glisse par-dessus
   grâce à un dégradé fixe, sans z-index négatif (invisible sur certains moteurs). */
.ep-notif { background-image: linear-gradient(#C0392B, #C0392B); background-repeat: no-repeat;
  background-position: right center; background-size: 0 100%; }
.ep-notif::after { content: '🗑'; position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; padding-right: 18px; color: #fff; font-size: 15px;
  opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.ep-notif.glisse { background-size: 100% 100%; }
.ep-notif.glisse::after { opacity: 1; }
.ep-notif-x { flex: none; border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: #A8B4C6; font-size: 13px; line-height: 1; margin-left: auto; align-self: center;
  opacity: 0; transition: opacity .15s ease, color .15s ease; }
.ep-notif:hover .ep-notif-x, .ep-notif:focus-within .ep-notif-x { opacity: 1; }
.ep-notif-x:hover { color: #C0392B; }
.ep-notif-part { transform: translateX(-110%) !important; opacity: 0 !important;
  transition: transform .2s ease, opacity .2s ease; }
/* Sur écran tactile, le bouton reste visible : il n'y a pas de survol. */
@media (hover: none) { .ep-notif-x { opacity: .55; } }

/* ---------- Registre : demandes de licenciement de délégué ---------- */
.crr-delegue th:nth-child(1), .crr-delegue td:nth-child(1) { width: 12%; }   /* N° */
.crr-delegue th:nth-child(2), .crr-delegue td:nth-child(2) { width: 25%; }   /* Délégué */
.crr-delegue th:nth-child(3), .crr-delegue td:nth-child(3) { width: 23%; }   /* Employeur */
.crr-delegue th:nth-child(4), .crr-delegue td:nth-child(4) { width: 14%; }   /* Date de dépôt */
.crr-delegue th:nth-child(5), .crr-delegue td:nth-child(5) { width: 15%; }   /* Date limite */
.crr-delegue th:nth-child(6), .crr-delegue td:nth-child(6) { width: 11%; }   /* Actions */
/* Colonnes de dates : alignement soigné, chiffres tabulaires, léger retrait commun */
.crr-delegue th:nth-child(4), .crr-delegue td:nth-child(4),
.crr-delegue th:nth-child(5), .crr-delegue td:nth-child(5) { padding-left: 14px; }
.crr-delegue td { padding-top: 13px; padding-bottom: 13px; }
.crr-delegue .dg-nom { font-weight: 600; color: #1E3A5F; }
.crr-delegue .dg-emploi { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.crr-delegue .dg-emp { color: #1E3A5F; }
.crr-delegue .dg-depot { font-weight: 700; color: #1E3A5F; font-variant-numeric: tabular-nums; }
.crr-delegue .dg-limite { font-weight: 700; color: #C43D3D; font-variant-numeric: tabular-nums; }
.crr-delegue .dg-reste { font-size: 11px; margin-top: 2px; color: var(--ink-soft); }
.crr-delegue .dg-reste.dg-urgent { color: #A85B12; font-weight: 700; }
.crr-delegue .dg-reste.dg-depasse { color: #C0392B; font-weight: 700; }
.crr-delegue tr.dg-urgent td:first-child { border-left: 3px solid #E0A44A; }
.crr-delegue tr.dg-depasse td:first-child { border-left: 3px solid #C0392B; }

/* ---------- Module : licenciement de délégué ---------- */
/* Bandeau d'alerte : le délai d'instruction est impératif. */
.dg-alerte { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 16px;
  padding: 12px 15px; background: #FBEAEA; border: 1px solid #EFC9C6;
  border-left: 4px solid var(--danger); border-radius: var(--radius); }
.dg-alerte-ico { font-size: 17px; line-height: 1.2; flex: none; }
.dg-alerte b { color: #96271C; font-size: 14px; }
.dg-alerte-sub { font-size: 12.5px; color: #8A5852; margin-top: 2px; line-height: 1.45; }
.dg-alerte-inline { margin-bottom: 14px; }

.dg-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* Largeurs recalculées après suppression de la colonne Dépôt (fusionnée dans
   Demande). Sans Agent : 7 colonnes. Avec : 8 (bloc .dg-avec-agent). */
.dg-table th:nth-child(1), .dg-table td:nth-child(1) { width: 13%; }   /* Demande + dépôt */
.dg-table th:nth-child(2), .dg-table td:nth-child(2) { width: 15%; }   /* Délégué */
.dg-table th:nth-child(3), .dg-table td:nth-child(3) { width: 16%; }   /* Employeur */
.dg-table th:nth-child(4), .dg-table td:nth-child(4) { width: 13%; }   /* Échéance */
.dg-table th:nth-child(5), .dg-table td:nth-child(5) { width: 9%; }    /* Dossier (icône) */
.dg-table th:nth-child(6), .dg-table td:nth-child(6) { width: 20%; }   /* État dossier */
.dg-table th:nth-child(7), .dg-table td:nth-child(7) { width: 14%; }   /* Action */

.dg-avec-agent th:nth-child(1), .dg-avec-agent td:nth-child(1) { width: 12%; }   /* Demande */
.dg-avec-agent th:nth-child(2), .dg-avec-agent td:nth-child(2) { width: 14%; }   /* Délégué */
.dg-avec-agent th:nth-child(3), .dg-avec-agent td:nth-child(3) { width: 14%; }   /* Employeur */
.dg-avec-agent th:nth-child(4), .dg-avec-agent td:nth-child(4) { width: 12%; }   /* Échéance */
.dg-avec-agent th:nth-child(5), .dg-avec-agent td:nth-child(5) { width: 9%; }    /* Dossier (icône) */
.dg-avec-agent th:nth-child(6), .dg-avec-agent td:nth-child(6) { width: 15%; }   /* État dossier */
.dg-avec-agent th:nth-child(7), .dg-avec-agent td:nth-child(7) { width: 11%; }   /* Agent */
.dg-avec-agent th:nth-child(8), .dg-avec-agent td:nth-child(8) { width: 13%; }   /* Action */

/* Numéro de la demande : texte simple, sans pastille, insécable (une seule ligne) */
.dg-table .dg-num { display: inline-block; color: #1B3A5C;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 12.5px;
  white-space: nowrap; max-width: 100%; }
/* Échéance : date + reste regroupés en badge — rouge si menacée, neutre sinon */
.dg-ech { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #F1F3F0; }
.dg-ech .dg-limite { color: var(--ink); }
.dg-ech.dg-ech-alerte { background: #FBE7E5; }
.dg-ech.dg-ech-alerte .dg-limite { color: #96271C; }
.dg-table .dg-depot { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.dg-table .dg-nom { font-weight: 600; color: var(--ink); }
.dg-table .dg-emploi { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.dg-table .dg-emp { color: var(--accent); font-weight: 600; font-size: 12.5px; }
.dg-table .dg-limite { font-weight: 600; color: var(--ink); }
.dg-table .dg-reste { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.dg-table .dg-reste.dg-urgent { color: #A85B12; font-weight: 700; }
.dg-table .dg-reste.dg-depasse { color: var(--danger); font-weight: 700; }

/* Liseré d'échéance sur la ligne entière */
.dg-table tr.dg-urgent td:first-child { box-shadow: inset 3px 0 0 #E0A44A; }
.dg-table tr.dg-depasse td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* Étapes d'instruction : badges empilés, sans débordement de colonne */
.dg-table .trait-cell .badge { white-space: normal; word-break: keep-all; overflow-wrap: normal;
  max-width: 100%; text-align: left; align-items: flex-start; border-radius: 12px;
  line-height: 1.3; font-size: 11.5px; }
.dg-table .trait-cell .badge::before { flex: 0 0 6px; margin-top: 4px; }
.dg-table .actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Dates : jamais coupées en milieu de libellé */
.dg-table .dg-date, .dg-table .dg-limite {
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.dg-table .dg-date { font-weight: 600; color: var(--ink); }
.dg-table .dg-emp { word-break: keep-all; overflow-wrap: normal; hyphens: none; line-height: 1.35; }
.dg-table .dg-secteur { font-size: 11px; color: var(--ink-soft); margin-top: 2px;
  font-style: italic; word-break: keep-all; overflow-wrap: normal; }
.dg-table .dg-agent { word-break: keep-all; overflow-wrap: normal; line-height: 1.35; font-size: 12.5px; }

/* Colonne « Dossier » : document joint, présenté sous l'intitulé « Demande » */
.dg-doc { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D7E3F7; background: #EEF3FC; color: #2D6CDF; border-radius: 8px;
  padding: 5px 10px; font-size: 15px; font-family: var(--font-sans); cursor: pointer;
  white-space: nowrap; transition: background .15s ease; }
.dg-doc:hover { background: #DCE7F9; }
.dg-doc svg { display: block; }
/* Plusieurs documents dans la colonne Dossier (demande + convocations générées) */
.dg-docs { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
/* Convocations générées : enveloppe verte, distincte du document bleu de la demande */
.dg-doc.dg-doc-conv { border-color: #CBE7D6; background: #EAF7F0; color: #1F8A5B; }
.dg-doc.dg-doc-conv:hover { background: #DCF0E5; }
.dg-doc-ico { font-size: 12px; }
.dg-sans-doc { color: #A6B0C0; }

/* ---------- État dossier : jauge d'avancement + étape courante ---------- */
.dg-etat { display: flex; flex-direction: column; gap: 6px; }
.dg-jauge { display: flex; gap: 3px; }
.dg-jauge .dg-seg { flex: 1; height: 5px; border-radius: 3px; background: #DDE3EA; }
.dg-jauge .dg-seg.plein { background: var(--primary); }
.dg-etape { display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 11px; line-height: 1.3; }
.dg-etape-att { background: #FAEEDA; color: #854F0B; }        /* action attendue */
.dg-etape-accord { background: #FDF0DA; color: #A85B12; }     /* autorisation accordée */
.dg-etape-refus { background: #E1F5EE; color: #0F6E56; }      /* autorisation refusée */

/* ---------- Échéance : jauge colorée du temps restant ---------- */
.dg-ech-jauge { height: 4px; border-radius: 2px; background: #E7EBF0; margin-top: 4px; overflow: hidden; }
.dg-ech-jauge.dg-ech-vide { background: #F3D4CF; }
.dg-ech-remplissage { display: block; height: 100%; border-radius: 2px; }
.dg-ech-ok { background: #1F8A5B; }         /* confortable */
.dg-ech-urgent { background: #E0A44A; }     /* ≤ 3 jours */
.dg-ech-depasse { background: #C0392B; }    /* dépassée */

/* ---------- Registre délégué : espacement et dates (ajustements) ---------- */
/* Plus d'air horizontal entre colonnes. Le préfixe #tbl-wrap est nécessaire :
   le conteneur partagé applique un padding générique (11px 9px) via son ID,
   plus spécifique qu'une simple classe. */
#tbl-wrap .dg-table th, #tbl-wrap .dg-table td,
.dg-table th, .dg-table td { padding-left: 18px; padding-right: 18px; }
#tbl-wrap .dg-table th:first-child, #tbl-wrap .dg-table td:first-child { padding-left: 16px; }
#tbl-wrap .dg-table th:last-child, #tbl-wrap .dg-table td:last-child { padding-right: 16px; }

/* Date de dépôt sous le numéro : conserve la police des dates (taille et graisse
   identiques à l'échéance), seul un léger espacement la sépare du numéro. */
.dg-table .dg-depot-sous { margin-top: 3px; white-space: normal; }

/* Date d'échéance en rouge. */
.dg-table .dg-limite-rouge { color: var(--danger); font-weight: 600; }

/* ---------- Registre délégué : respiration entre trois groupes de colonnes ---------- */
/* Espace ajouté au bord gauche de Échéance, Dossier et État dossier, pour
   détacher visuellement : | Employeur ‖ Échéance ‖ Dossier ‖ État dossier |.
   Les colonnes 4, 5 et 6 occupent les mêmes positions avec ou sans colonne Agent. */
#tbl-wrap .dg-table th:nth-child(4), #tbl-wrap .dg-table td:nth-child(4),
#tbl-wrap .dg-table th:nth-child(5), #tbl-wrap .dg-table td:nth-child(5),
#tbl-wrap .dg-table th:nth-child(6), #tbl-wrap .dg-table td:nth-child(6) { padding-left: 22px; }
/* L'échéance ne doit pas se couper malgré l'espace ajouté à sa gauche. */
.dg-table .dg-limite, .dg-table .dg-limite-rouge { white-space: nowrap; }

/* Issue « Non conciliation » dans la colonne Traitement des conflits */
.dg-etape-nc { background: #FBE9E9; color: #B23B3B; }
.dg-etape-reaff { background: #F4E7FB; color: #7E3FA0; }      /* demande de réaffectation en cours */
.dg-etape-oblig { background: #FDEDD8; color: #A85B12; }      /* conciliation rendue obligatoire */

/* ===================================================================
   NOUVEAU DESIGN DES TABLEAUX DE BORD
   En-tête officiel, filtres segmentés (année / trimestre / mois),
   cartes KPI à liseré et cartes graphiques.
   =================================================================== */

/* ---------- En-tête officiel ---------- */
.tdb-entete { background: #fff; border-radius: 18px; padding: 20px 26px;
  box-shadow: 0 2px 14px rgba(18,40,62,.07); display: flex; align-items: center;
  gap: 26px; margin-bottom: 20px; }
/* Les deux plaques ont la même largeur : sans cela le bloc d'identité, centré
   dans l'espace restant, serait décalé par rapport au milieu réel de la carte. */
.tdb-plaque { border: 1px solid #E3E8EF; border-radius: 10px; padding: 8px 12px;
  background: #fff; flex: none; display: grid; place-items: center; width: 170px; }
.tdb-plaque img { display: block; height: 62px; width: auto; }
.tdb-plaque-dgtss img { height: 52px; }
/* Bloc d'identité centré entre les deux plaques : les titres courts
   (Climat Social, Tissu Économique) ne sont plus décalés à gauche. */
.tdb-ident { flex: 1; min-width: 0; text-align: center; }
.tdb-tutelle { color: #1F8A5B; font-size: 12.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 4px; }
.tdb-titre { font-family: var(--font-serif), 'Source Serif 4', serif; font-size: 33px;
  font-weight: 700; color: #12283E; line-height: 1.12; margin: 0 0 6px; }
/* Mise en exergue du titre, sans changer sa taille : vert profond du drapeau,
   halo crème doré en relief (style du visuel validé). */
.tdb-entete .tdb-titre { color: #24513A;
  text-shadow: 0 1.5px 0 #F3E3B2, 0 3px 8px rgba(180, 150, 60, .28); }
/* Décor du bandeau : vagues vert / or dans les angles, sous le contenu */
.tdb-entete { position: relative; overflow: clip; }
.tdb-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tdb-deco svg { width: 100%; height: 100%; display: block; }
.tdb-entete .tdb-plaque, .tdb-entete .tdb-ident { position: relative; z-index: 1; }
.tdb-sstitre { color: #6B7A88; font-size: 15px; }
/* État replié (par défaut) : bande fine, titre centré seul entre logos miniatures.
   Un clic bascule entre bande fine et en-tête officiel complet. */
.tdb-entete { cursor: pointer; }
.tdb-entete-fine { padding: 8px 16px; gap: 14px; border-radius: 14px; margin-bottom: 14px; }
.tdb-entete-fine .tdb-plaque { width: auto; padding: 4px 9px; }
.tdb-entete-fine .tdb-plaque img { height: 26px; }
.tdb-entete-fine .tdb-plaque-dgtss img { height: 24px; }
.tdb-entete-fine .tdb-titre { font-size: 21px; margin: 0; }

/* ---------- Barre de filtres ---------- */
.tdb-filtres { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.tdb-per-lab { display: flex; align-items: center; flex: none; }
.tdb-pt { width: 11px; height: 11px; border-radius: 50%; background: #1F8A5B;
  box-shadow: 0 0 0 3px rgba(31,138,91,.18); flex: none; }
.tdb-seg { display: flex; gap: 4px; background: #fff; border: 1px solid #E3E8EF;
  border-radius: 13px; padding: 5px; box-shadow: 0 1px 4px rgba(18,40,62,.05); }
.tdb-seg button { border: none; background: transparent; font-family: inherit; font-size: 14px;
  font-weight: 600; color: #6B7A88; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s; }
.tdb-seg button:hover { color: #12283E; }
.tdb-seg button.on { background: linear-gradient(135deg, #2FA36B, #178055); color: #fff;
  box-shadow: 0 2px 7px rgba(23,128,85,.35); }
.tdb-select { background: #fff; border: 1px solid #E3E8EF; border-radius: 11px; padding: 9px 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #2C3E50;
  min-width: 0; max-width: 200px; box-shadow: 0 1px 4px rgba(18,40,62,.05); cursor: pointer; }
.tdb-note { margin-left: auto; border: none; border-radius: 11px; padding: 10px 18px;
  background: linear-gradient(135deg, #2FA36B, #147a50); color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex: none;
  box-shadow: 0 3px 12px rgba(20,122,80,.35); cursor: pointer; }
.tdb-note:hover { filter: brightness(1.06); }

/* ---------- Cartes KPI ---------- */
.tdb-kpis { display: grid; gap: 17px; margin-bottom: 19px;
  grid-template-columns: 1.28fr 1.42fr 1fr 1.15fr; }
.tdb-kpis-5 { grid-template-columns: repeat(5, 1fr); }
/* Tuile KPI au gabarit unique : icône · chiffre · libellé sur une seule ligne.
   Sélecteur à deux classes : il doit l'emporter sur .tdb-k (flex-direction column). */
.tdb-k.tdb-tuile { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.tdb-tuile-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--kbg, #EEF1F5);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.tdb-tuile-corps { min-width: 0; }
.tdb-tuile .tdb-k-num { font-size: 26px; line-height: 1.08; }
.tdb-tuile-lab { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .05em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tdb-tuile-pct { color: var(--kb, #1F8A5B); font-weight: 800; font-size: 11px; }
.tdb-k { background: #fff; border-radius: 15px; padding: 13px 15px 14px; position: relative;
  box-shadow: 0 2px 12px rgba(18,40,62,.07); overflow: hidden;
  display: flex; flex-direction: column; }
.tdb-k::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--kb, #1F8A5B); }
.tdb-k-lab { font-size: 13.5px; font-weight: 600; color: #2C3E50; line-height: 1.3; }
.tdb-k-num { font-family: var(--font-serif), 'Source Serif 4', serif; font-size: 33px;
  font-weight: 700; color: #12283E; line-height: 1;
  /* Les chiffres ne doivent jamais se couper : un nombre reste insécable. */
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.tdb-k-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tdb-k-bas { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 12px; }
.tdb-pill { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  white-space: nowrap; }
.tdb-pill-up { background: #E3F1E9; color: #178055; }
.tdb-pill-down { background: #FBE9E6; color: #C0392B; }
.tdb-pill-flat { background: #EEF1F5; color: #6B7A88; }
.tdb-spark { display: flex; align-items: flex-end; gap: 3px; height: 42px; flex: 1; }
.tdb-spark i { flex: 1; min-width: 4px; max-width: 9px; border-radius: 3px 3px 0 0; display: block; }
.tdb-k-duo { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 11px; align-items: center; }
.tdb-k-duo > div { min-width: 0; }
.tdb-k-sep { background: #EBEFF3; align-self: stretch; }
.tdb-duo-val { display: flex; align-items: center; gap: 8px; margin-top: 9px; min-width: 0; }
.tdb-duo-val > div { min-width: 0; }
.tdb-k-duo .tdb-k-lab { overflow-wrap: break-word; }
.tdb-ico-p { font-size: 21px; line-height: 1; }
/* Carte double « masculins / féminines » : part sous chaque effectif et
   barre bicolore donnant la proportion d'un seul coup d'œil. */
.tdb-duo-part { font-size: 11.5px; font-weight: 600; margin-top: 3px; line-height: 1.25; }
.tdb-duo-prop { display: flex; height: 7px; border-radius: 999px; overflow: hidden;
  margin-top: auto; background: #EDF0F3; }
.tdb-duo-prop i { display: block; height: 100%; }
.tdb-anneau { position: relative; width: 62px; height: 62px; flex: none; }
.tdb-anneau span { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; }
.tdb-k-emp { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 12px; }
.tdb-k-sect { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; }
.tdb-k-sect ul { list-style: none; margin: 0; padding: 0; }
.tdb-k-sect li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #33475B;
  margin-bottom: 3px; line-height: 1.25; }
.tdb-k-sect li i { width: 7px; height: 7px; border-radius: 50%; background: #1F8A5B; flex: none; }

/* ---------- Cartes graphiques ---------- */
.tdb-graphs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-bottom: 17px; }
.tdb-graphs-2 { grid-template-columns: repeat(2, 1fr); }
.tdb-carte { background: #fff; border-radius: 15px; padding: 0 0 14px; position: relative;
  box-shadow: 0 2px 12px rgba(18,40,62,.07); overflow: hidden; }
.tdb-carte::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: #1F8A5B; }
.tdb-carte h3 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700;
  color: #12283E; margin: 0; padding: 13px 17px 10px; border-bottom: 1px solid #F0F2F5; }
.tdb-carte h3 i { width: 4px; height: 16px; border-radius: 2px; background: #1F8A5B; flex: none; }
.tdb-carte-corps { padding: 13px 17px 0; }
.tdb-br { display: grid; grid-template-columns: 106px 1fr 46px; align-items: center;
  gap: 10px; margin-bottom: 9px; }
.tdb-br-lab { font-size: 12.5px; color: #33475B; text-align: right; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-br-tr { background: #EDF0F3; height: 11px; border-radius: 999px; overflow: hidden; }
.tdb-br-fi { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #35B074, #1B8A5C); }
.tdb-br-va { font-size: 13px; font-weight: 700; color: #12283E; text-align: right;
  font-variant-numeric: tabular-nums; }
.tdb-donut { display: grid; place-items: center; padding: 4px 0 0; }
.tdb-leg { display: flex; justify-content: center; gap: 26px; margin-top: 10px; }
.tdb-leg > div { text-align: center; }
.tdb-leg-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #33475B; }
.tdb-leg-t i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tdb-leg-v { font-size: 13px; font-weight: 700; color: #12283E; margin-top: 2px; }

/* ---------- Adaptation aux écrans étroits ---------- */
@media (max-width: 1250px) {
  .tdb-kpis, .tdb-kpis-5 { grid-template-columns: repeat(2, 1fr); }
  .tdb-graphs, .tdb-graphs-2 { grid-template-columns: 1fr; }
}
/* Écrans plus étroits : filtres resserrés pour que « Note d'analyse »
   reste sur la même ligne le plus longtemps possible. */
@media (max-width: 1200px) {
  .tdb-filtres { gap: 8px; }
  .tdb-seg { padding: 4px; gap: 3px; }
  .tdb-seg button { padding: 7px 11px; font-size: 13px; }
  .tdb-select { font-size: 13px; padding: 8px 9px; max-width: 155px; }
  .tdb-note { padding: 9px 13px; font-size: 13px; gap: 6px; }
}
@media (max-width: 900px) {
  .tdb-entete { flex-wrap: wrap; gap: 16px; padding: 16px 18px; }
  .tdb-titre { font-size: 25px; }
  .tdb-plaque { width: auto; }
  .tdb-plaque img { height: 48px; }
  .tdb-kpis, .tdb-kpis-5 { grid-template-columns: 1fr; }
  .tdb-note { margin-left: 0; width: 100%; justify-content: center; }
  .tdb-select { flex: 1; min-width: 140px; }
}

/* ---------- Alignement des cartes/barres existantes sur le nouveau design ----------
   Ces règles s'appliquent après les styles historiques : toutes les cartes de
   graphiques (y compris les cartes filtrables de la Variation du marché et du
   Tissu Économique) adoptent le nouveau design sans réécrire chaque module. */
.dash-card { border: none; border-radius: 15px;
  box-shadow: 0 2px 12px rgba(18,40,62,.07); height: 250px; }
/* Le Tissu Économique a des cartes au contenu plus dense (anneaux, courbes
   d'évolution) : on garde une hauteur un peu supérieure, réduite dans la même
   proportion que les autres. */
.dash-etab .dash-card { height: 265px; }
.dash-card::before, .dash-grid-a .dash-card::before, .dash-grid-b .dash-card::before,
.dash-grid-c .dash-card::before, .dash-grid-d .dash-card::before { height: 5px; background: #1F8A5B; }
.dash-card-h, .dash-grid-a .dash-card-h, .dash-grid-b .dash-card-h,
.dash-grid-c .dash-card-h, .dash-grid-d .dash-card-h {
  font-size: 14.5px; color: #12283E; padding: 13px 17px 10px; background: none; text-shadow: none;
  border-bottom: 1px solid #F0F2F5; display: flex; align-items: center; gap: 9px; }
/* Barre d'accent verte devant chaque titre de carte */
.dash-card-h::before { content: ''; width: 4px; height: 16px; border-radius: 2px;
  background: #1F8A5B; flex: none; }
.dash-card-b { padding: 12px 17px; }

/* Barres horizontales : piste claire arrondie, remplissage vert dégradé */
.bars-h { gap: 8px; }
.bh-row { grid-template-columns: 104px 1fr 46px; gap: 10px; }
.bh-label { font-size: 12.5px; color: #33475B; }
.bh-track { background: #EDF0F3; border-radius: 999px; height: 11px; }
.bh-fill { background: linear-gradient(90deg, #35B074, #1B8A5C); border-radius: 999px; }
.bh-val { font-size: 13px; font-weight: 700; color: #12283E; text-align: right; }
/* Rangée de 5 cartes : chiffres légèrement réduits.
   Les valeurs longues (montants) sont ramenées à une taille lisible plutôt que
   coupées en plusieurs lignes — un nombre ne doit jamais se casser. */
.tdb-kpis-5 .tdb-k-num { font-size: 27px; }
.tdb-k-num-long { font-size: 22px !important; }
.tdb-kpis-5 .tdb-k-num-long { font-size: 19px !important; }

/* En-tête des cartes filtrables (Variation du marché, Tissu Économique) :
   le titre occupe toute la largeur et le sélecteur passe en dessous, pour
   éviter les titres coupés sur trois ou quatre lignes. */
.dash-card-h.vdm-card-h, .dash-card-h.tpc-head {
  flex-wrap: wrap; align-items: flex-start; row-gap: 6px; padding: 11px 15px 9px; }
/* Sélecteur compact : il ne doit pas gonfler l'en-tête */
.dash-card-h.vdm-card-h select, .dash-card-h.tpc-head select {
  font-size: 12.5px; padding: 5px 9px; }
/* Le titre reste sur la même ligne que la barre d'accent ; seul le sélecteur
   passe en dessous (sinon la barre d'accent occupe une ligne à elle seule). */
.dash-card-h.vdm-card-h > span:first-of-type,
.dash-card-h.tpc-head > span:first-of-type { flex: 1 1 calc(100% - 15px); min-width: 0; }
.dash-card-h.vdm-card-h select,
.dash-card-h.tpc-head select { flex: 0 0 auto; margin-left: auto; }
/* La barre d'accent verte reste alignée sur la première ligne du titre */
.dash-card-h.vdm-card-h::before, .dash-card-h.tpc-head::before { margin-top: 2px; }

/* Rafraîchissement d'un tableau de bord (changement de filtre de période) :
   le contenu reste affiché et s'atténue légèrement, au lieu d'être effacé.
   Le délai de 220 ms fait qu'un chargement rapide ne produit aucun effet
   visible — c'est ce qui supprime le clignotement. */
#main .tdb-kpis, #main .tdb-graphs, #main .dash-grid, #main .dash-section-title {
  transition: opacity .15s ease 0s; }
#main.tdb-maj .tdb-kpis, #main.tdb-maj .tdb-graphs,
#main.tdb-maj .dash-grid, #main.tdb-maj .dash-section-title {
  opacity: .55; transition: opacity .15s ease .22s; }
#main.tdb-maj .tdb-filtres { pointer-events: none; }

/* Motif du mouvement (licenciement / démission) */
.dmt-motif { margin-bottom: 2px; }
.dmt-motif-lig { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; }

/* Carte à deux filtres (motifs du Tissu Économique) */
.tpc-filtres { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.tpc-filtres select { font-size: 12.5px; padding: 5px 9px; }

/* ============ ESPACE PERSONNEL — refonte « cartes + journée » ============ */
/* Fond sauge uniforme, sans décor diagonal */
.ep-wrap.ep-tdb { background: var(--a-bg); }
.ep-wrap.ep-tdb::before { display: none; }

/* En-tête sur une ligne : avatar · identité · date · cloche */
.ep-tdb .ep-tete-fine { background: #fff; border-radius: 12px; box-shadow: var(--a-shadow);
  padding: 8px 14px; margin-bottom: 10px; gap: 11px; }
.ep-tdb .ep-tete-fine .ep-avatar { width: 34px; height: 34px; font-size: 13px; }
.ep-tdb .ep-nom { font-weight: 800; color: var(--a-navy); font-size: 14px; line-height: 1.15; }
.ep-tdb .ep-role { font-size: 11px; color: var(--a-gray); }
.ep-tdb .ep-date { margin-left: auto; font-size: 12.5px; color: var(--a-gray); }
.ep-tdb .ep-tete-fine .ep-cloche-zone { margin-left: 12px; }
.ep-tdb .ep-tete-fine .ep-cloche { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }

/* Bandeau « Ma journée » : quatre repères cliquables */
.ep-jour { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.ep-jbloc { display: flex; align-items: center; gap: 9px; background: #fff; border: none;
  border-left: 3px solid var(--jc, #2D6CDF); border-radius: 10px; box-shadow: var(--a-shadow);
  padding: 8px 12px; cursor: pointer; text-align: left; font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease; }
.ep-jbloc:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(28,43,68,.13); }
.ep-ji { width: 28px; height: 28px; border-radius: 8px; background: var(--jb, #EEF1F5);
  display: grid; place-items: center; font-size: 14px; flex: none; }
.ep-jv { display: block; font-weight: 800; font-size: 15px; color: var(--a-navy); line-height: 1.1; }
.ep-jl { display: block; font-size: 9.5px; color: var(--a-gray); text-transform: uppercase; letter-spacing: .05em; }

/* Grille 3 colonnes, corps plus courts : six widgets visibles d'un coup.
   Les convocations reprennent une case normale (plus de pleine largeur). */
.ep-tdb .epw-grille { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ep-tdb .epw-corps { height: 178px; }
.ep-tdb .epw-pleine { grid-column: auto; }
@media (max-width: 1280px) { .ep-tdb .epw-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .ep-tdb .epw-grille { grid-template-columns: 1fr; } }

/* Têtes de widget raffinées : icône en carré teinté, petites majuscules,
   compteur en pastille assortie, filet dégradé sous l'en-tête */
.ep-tdb .epw-a-rdv   { --ac: var(--a-rdv);  --acb: #E1EBFC; }
.ep-tdb .epw-a-notes { --ac: #C98A2C;       --acb: #FBF1DD; }
.ep-tdb .epw-a-ctc   { --ac: var(--a-ctc);  --acb: #F1E5F7; }
.ep-tdb .epw-a-cfl   { --ac: var(--a-cfl);  --acb: #FBE7E5; }
.ep-tdb .epw-a-cvc   { --ac: var(--a-cvc);  --acb: #DFF3F5; }
.ep-tdb .ep-carte.epw-a-act { --ac: #24425B; --acb: #E7EDF5; border-top-color: #24425B; }
.ep-tdb .epw-tete { font-family: var(--font-sans); font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--a-navy);
  margin: 0 0 8px; padding-bottom: 7px; position: relative; }
.ep-tdb .epw-tete::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; opacity: .5;
  background: linear-gradient(90deg, var(--ac, #2D6CDF), transparent 72%); }
.ep-tdb .epw-tete .pic { width: 25px; height: 25px; border-radius: 8px; flex: none;
  background: var(--acb, #EEF1F5); display: grid; place-items: center; font-size: 12.5px; }
.ep-tdb .epw-n { background: var(--acb, #EEF1F5); color: var(--ac, #5a6a78);
  border-radius: 12px; padding: 1px 8px; font-size: 10.5px; }
.ep-tdb .epw-plus { width: 22px; height: 22px; font-size: 13px; background: var(--ac, #b8860b); box-shadow: none; }
.ep-tdb .epw-fin { font-size: 10px; color: var(--a-gray); font-weight: 600; }

/* Conflits : les gros pavés deviennent des puces cliquables */
.ep-tdb .epw-conflits { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.ep-tdb .epw-cc { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 10px;
  border-radius: 14px; color: #fff; }
.ep-tdb .epw-cc::after { display: none; }
.ep-tdb .epw-cc .chiffre { font-family: var(--font-sans); font-size: 12.5px; }
.ep-tdb .epw-cc .lab { font-size: 9.5px; margin-top: 0; }
.ep-tdb .epw-cc.actif { outline-width: 2px; outline-offset: 1px; }

/* Rendez-vous passés repliés */
.epw-passes-lien { background: none; border: none; color: var(--a-gray); font-size: 11.5px;
  font-weight: 600; cursor: pointer; padding: 5px 2px 2px; text-align: left; font-family: inherit; }
.epw-passes-lien:hover { color: var(--a-navy); }

/* Actions rapides */
.epw-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ep-action { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #C9D6E6;
  background: #F3F7FB; color: #1B3A5C; border-radius: 16px; padding: 7px 13px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .12s; }
.ep-action:hover { background: #E7EDF5; transform: translateY(-1px); }
.ep-action-ico { font-size: 13px; }

/* Ajustements « Ma journée » : chevron d'affordance, état « au calme » grisé */
.ep-jch { margin-left: auto; color: #C6CCD4; font-size: 15px; font-weight: 700;
  transition: color .12s, transform .12s; }
.ep-jbloc:hover .ep-jch { color: var(--jc); transform: translateX(2px); }
.ep-jbloc-calme { --jc: #B9C2BD; --jb: #EFF2F0; }
.ep-jbloc-calme .ep-ji { color: #1F8A5B; font-size: 13px; font-weight: 800; }
.ep-jbloc-calme .ep-jv { color: #8A948E; font-weight: 700; }
.ep-jbloc-calme .ep-jl { color: #9AA39D; }

/* Pastille discrète de rafraîchissement : fondu en bas de l'écran, jamais gênante */
.maj-pastille { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 8px);
  background: rgba(18, 40, 62, .88); color: #E8F0EA; font-size: 12px; font-weight: 600;
  border-radius: 20px; padding: 6px 14px; pointer-events: none; opacity: 0;
  transition: opacity .35s ease, transform .35s ease; z-index: 950;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.maj-pastille.visible { opacity: 1; transform: translate(-50%, 0); }

/* ============ CARTES GRAPHIQUES — direction « rubans dégradés » ============ */
/* En-têtes de cartes : petites majuscules + filet dégradé, assortis aux widgets */
.tdb-carte h3, .dash-card-h {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--a-navy);
  line-height: 1.3; position: relative; padding-bottom: 8px; }
.tdb-carte h3::after, .dash-card-h::after { content: ''; position: absolute;
  left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; opacity: .45;
  background: linear-gradient(90deg, #1F8A5B, transparent 70%); }
.tdb-carte h3::after { left: 0; right: 0; }
.tdb-carte h3 i { width: 4px; height: 13px; }

/* Rubans : dégradé vert, 1er rang accentué, libellés complets sur 2 lignes */
.tdb-br { grid-template-columns: 106px 1fr 64px; }
.tdb-br-lab { white-space: normal; overflow: visible; text-overflow: clip; font-size: 11.5px; }
.tdb-br-fi { background: linear-gradient(90deg, #35A968, #187A4B); }
.tdb-br-premier .tdb-br-tr { height: 14px; }
.tdb-br-premier .tdb-br-fi { background: linear-gradient(90deg, #2E9E5B, #0F5C4A);
  box-shadow: 0 1px 4px rgba(15,92,74,.35); }
.tdb-br-va { font-weight: 800; color: var(--ink); }
.tdb-br-premier .tdb-br-va { color: #0F5C4A; font-size: 14px; }
.tdb-br-pct { font-size: 10px; color: #9AA3AD; font-weight: 700; margin-left: 5px; }

.bh-row { grid-template-columns: 88px minmax(0, 1fr) auto; }
/* la colonne de valeur se dimensionne au contenu : les grands nombres
   (1 426 travailleurs) ne débordent plus sur la barre */
.bh-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.bh-track { background: #F0F3EF; border-radius: 5px; height: 10px; }
.bh-fill { background: linear-gradient(90deg, #35A968, #187A4B); border-radius: 5px; }
.bh-premier .bh-track { height: 13px; }
.bh-premier .bh-fill { background: linear-gradient(90deg, #2E9E5B, #0F5C4A);
  box-shadow: 0 1px 4px rgba(15,92,74,.35); }
.bh-val { font-weight: 800; color: var(--ink); }
.bh-premier .bh-val { color: #0F5C4A; }
.bh-pct { font-size: 9.5px; color: #9AA3AD; font-weight: 700; margin-left: 4px; }

/* Donut : légende avec mini-jauges alignées */
.donut-etab-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 4px 8px; align-items: center; }
.donut-etab-val { color: var(--ink); font-weight: 800; font-size: 12px; }
.donut-etab-val small { color: #9AA3AD; font-weight: 700; font-size: 10px; margin-left: 2px; }
.donut-etab-jauge { grid-column: 2 / 4; height: 4px; border-radius: 2px; background: #F0F3EF;
  position: relative; overflow: hidden; margin-bottom: 3px; }
.donut-etab-jauge i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; display: block; height: 100%; }

/* ============ Harmonisation finale des titres de cartes ============ */
/* Une seule taille partout — y compris dans les grilles a/b/c/d dont les
   anciennes règles plus spécifiques imposaient encore 14,5 px. */
.dash-card-h, .dash-grid-a .dash-card-h, .dash-grid-b .dash-card-h,
.dash-grid-c .dash-card-h, .dash-grid-d .dash-card-h, .tdb-carte h3 {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--a-navy); line-height: 1.3; }
.dash-card-h::before { height: 12px; }
/* Cartes filtrables : les titres courts tiennent sur une ligne — le sélecteur
   revient donc AU MÊME NIVEAU que le titre, aligné à droite. */
.dash-card-h.vdm-card-h, .dash-card-h.tpc-head {
  flex-wrap: nowrap; align-items: center; row-gap: 0; }
.dash-card-h.vdm-card-h > span:first-of-type,
.dash-card-h.tpc-head > span:first-of-type {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-h.vdm-card-h select, .dash-card-h.tpc-head select {
  flex: 0 0 auto; margin-left: auto; font-size: 11px; padding: 3px 7px; max-width: 46%; }
.dash-card-h.vdm-card-h::before, .dash-card-h.tpc-head::before { margin-top: 0; }

/* Libellés des barres : taille contenue même pour les raisons sociales longues */
.bh-label { font-size: 11px; }
.tdb-br-lab { font-size: 11px; }

/* Tuiles KPI : chiffres alignés à la même hauteur dans toutes les cartes —
   le contenu est ancré en haut, les libellés longs se replient dessous
   sans faire bouger le chiffre. */
.tdb-k.tdb-tuile { align-items: flex-start; }
.tdb-tuile .tdb-tuile-ico { margin-top: 2px; }

/* Procès-verbal d'enquête dans la colonne Dossier : feuille à coche, ambre */
.dg-doc.dg-doc-pv { border-color: #EDDCBB; background: #FBF3E1; color: #A8741A; }
.dg-doc.dg-doc-pv:hover { background: #F5E9CE; }

/* Décision signée dans la colonne Dossier : feuille au sceau, marine */
.dg-doc.dg-doc-dec { border-color: #C9D6E6; background: #E7EDF5; color: #24425B; }
.dg-doc.dg-doc-dec:hover { background: #D9E3F0; }

/* ============ Cartes à barres — variante B validée ============ */
/* Rubriques au bord GAUCHE de la carte, valeurs calées au bord DROIT :
   lecture « en tableau », deux bords nets. Libellés légèrement mis en
   exergue : encre plus foncée et demi-gras. */
.tdb-br-lab, .bh-label { text-align: left; color: #1C2B44; font-weight: 600; }
.tdb-br-va, .bh-val { text-align: right; }

/* Colonne des valeurs : deux sous-colonnes fixes — les chiffres s'alignent
   entre eux, les pourcentages aussi, quelle que soit leur largeur. */
.tdb-br-va, .bh-val { display: flex; justify-content: flex-end; align-items: baseline; }
.tdb-br-va .val-chiffre, .bh-val .val-chiffre { text-align: right; }
.tdb-br-pct, .bh-pct { flex: none; width: 34px; text-align: right; }

/* ============ CONNEXION — « Les secteurs au travail » ============ */
.login-scenes { position: absolute; inset: 0; z-index: 0; }
.login-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.login-scene.on { opacity: 1; }
.login-scene svg { width: 100%; height: 100%; display: block; }
.login-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,30,24,.12) 38%, rgba(7,22,17,.9) 100%); }
.login-hero-content { position: relative; z-index: 2; }
.login-slide-txt { margin-top: auto; }
.login-chip { display: inline-flex; align-items: center; gap: 8px;
  background: rgba(232,194,90,.14); border: 1px solid rgba(232,194,90,.45); color: #F0D488;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 20px; padding: 5px 14px; margin-bottom: 13px; }
.login-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E8C25A; }
.login-slide-titre { font-family: var(--font-serif), Georgia, serif; font-size: 34px;
  font-weight: 700; color: #F7F3E8; line-height: 1.16; margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.login-slide-msg { color: #B9CDC2; font-size: 13.5px; line-height: 1.6; max-width: 430px; margin: 0 0 16px; }
.login-points { display: flex; gap: 7px; align-items: center; }
.login-points i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28);
  transition: width .3s ease, background .3s ease; }
.login-points i.on { width: 24px; border-radius: 5px; background: #E8C25A; }
/* Mise en page du volet : plaques officielles en haut, texte de secteur en bas */
.login-hero { align-items: stretch; }
.login-hero-content { display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 34px; padding-bottom: 36px; }
.login-hero-content .login-plaque { margin-bottom: 0; align-self: flex-start; }

/* ============ Transmission au tribunal ============ */
.btn.btn-tribunal { color: #24425B; border: 1px solid #C9D6E6; background: #EEF3FC; }
.btn.btn-tribunal:hover { background: #DCE7F9; }
.badge-tribunal { background: #E7EDF5; color: #24425B; border: 1px solid #C9D6E6;
  font-size: 10.5px; white-space: normal; text-align: left; line-height: 1.3; }

/* ===== Tuiles « Suivi du traitement des plaintes » : icône vectorielle en badge
   teinté et courte légende posée à côté du chiffre. Le bas de tuile est ancré
   (margin-top:auto) pour que les chiffres restent alignés d'une tuile à l'autre. ===== */
.kpi-suivi-ico { width: 36px; height: 36px; flex: none; border-radius: 11px;
  background: var(--kbg, #EEF1F5); color: var(--kb, #24425B);
  display: flex; align-items: center; justify-content: center; }
.kpi-suivi-ico svg { width: 20px; height: 20px; display: block; }
.kpi-suivi-bas { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  margin-top: auto; padding-top: 12px; }
/* La légende occupe toujours la même hauteur (2 lignes) pour que les chiffres
   restent alignés d'une tuile à l'autre. */
.kpi-suivi-note { font-size: 10px; line-height: 1.35; color: #7C8DA0; min-height: 27px; }

/* Cartes « motifs » à deux filtres croisés : sélecteurs compacts pour que le
   titre reste entier sur sa ligne (le sens complet est porté par l'infobulle). */
.tpc-filtres select { font-size: 11px; padding: 4px 7px; max-width: 108px; }
.dash-card-h.tpc-head > span:first-of-type { flex: 1 1 auto; }
/* Le titre long « Cessations provisoires par motif » doit tenir entier :
   espacement de lettres resserré et filtres au plus compact sur ces cartes. */
.dash-card-h.tpc-head:has(.tpc-filtres) > span:first-of-type { letter-spacing: .35px; }
.tpc-filtres { gap: 5px; }
.tpc-filtres select { padding: 4px 4px; }
/* Les sélecteurs des cartes « motifs » ne doivent pas hériter du margin-left:auto
   individuel (le bloc .tpc-filtres s'en charge déjà) : on récupère ~30 px pour le titre. */
.dash-card-h.tpc-head .tpc-filtres select { margin-left: 0; }
/* Dimensionnement ferme des deux filtres croisés : la place restante suffit
   alors au titre « Cessations provisoires par motif » en entier. */
.dash-card-h.tpc-head .tpc-filtres { flex: 0 0 auto; flex-wrap: nowrap; gap: 5px; }
.dash-card-h.tpc-head .tpc-filtres select { padding: 4px 5px; font-size: 10.5px; max-width: 76px; }

/* ===== Bloc utilisateur compact en bas du menu : profil sur une ligne
   (nom et rôle en ellipse, le détail complet reste dans l'infobulle) et
   les deux actions regroupées côte à côte sur une seule rangée. ===== */
.sidebar .user-profile { padding: 7px 9px; gap: 9px; margin-bottom: 7px; }
.sidebar .user-profile .u-seal { width: 30px; height: 30px; font-size: 12.5px; }
.sidebar .user-box .u-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .user-box .u-role { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-actions { display: flex; gap: 7px; align-items: stretch; }
.sidebar .user-box .user-actions button { margin-top: 0; }
.sidebar .user-box .user-actions .btn-mdp { flex: 0 0 40px; width: 40px;
  display: flex; align-items: center; justify-content: center; padding: 7px 0; }
.sidebar .user-box .user-actions .btn-mdp svg { width: 17px; height: 17px; display: block; }
.sidebar .user-box .user-actions .btn-logout { flex: 1; min-width: 0; margin-bottom: 6px; }

/* ===== Ligne de marque figée : le logo IRTSS reste visible quand le menu défile.
   Fond opaque assorti au haut du dégradé de la barre + léger voile dégradé
   sous la ligne pour un décrochage doux. ===== */
.sidebar .brand { position: sticky; top: -14px; /* compense le padding haut de la barre */
  z-index: 6; background: #12352c; margin-top: -14px; padding-top: 14px;
  box-shadow: 0 8px 10px -8px rgba(0, 0, 0, .45); }
@media (max-width: 900px) {
  .sidebar .brand { position: static; margin-top: 0; padding-top: 0; box-shadow: none; background: transparent; }
}
/* Menu replié : le padding haut de la barre diffère (18px), on recale la ligne figée */
.shell.side-reduite .sidebar .brand { top: -18px; margin-top: -18px; padding-top: 18px; }

/* ===== Filtres par résultat de conciliation (registre des plaintes) :
   trois petites pastilles discrètes à côté du titre. La pastille active
   est cerclée de sa propre couleur. ===== */
.panel-titre-grp { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.panel-titre-grp h2 { margin: 0; }
.res-filtres { display: flex; gap: 5px; align-items: center; }
.res-chip { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent; line-height: 1.25; white-space: nowrap;
  user-select: none; transition: box-shadow .12s, filter .12s; }
.res-chip:hover { filter: brightness(.96); }
.res-chip.actif { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.res-chip-totale { background: #E3F1E9; color: #0F5C4A; }
.res-chip-partielle { background: #FBF1DD; color: #96690F; }
.res-chip-non { background: #FBE9E6; color: #B03A2A; }

/* ===== Tableau de bord des agents en rubans horizontaux (variante retenue) :
   un agent = une ligne, les résultats de conciliation en barre empilée avec
   le compte écrit au milieu de chaque segment. ===== */
.tba-ruban { display: flex; align-items: center; gap: 14px; border: 1px solid #E4EAEE;
  border-radius: 12px; padding: 8px 14px; margin-bottom: 8px; background: #fff;
  transition: box-shadow .13s; }
.tba-ruban:hover { box-shadow: 0 3px 10px rgba(18,40,62,.09); }
.tba-rb-id { display: flex; align-items: center; gap: 9px; width: 215px; flex: none; min-width: 0; }
.tba-rb-id .tba-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tba-rb-k { display: flex; align-items: baseline; gap: 6px; width: 138px; flex: none;
  border-radius: 8px; padding: 3px 6px; }
.tba-rb-k b { font-family: var(--font-serif), 'Source Serif 4', serif; font-size: 18px;
  color: #12283E; line-height: 1; }
.tba-rb-k small { font-size: 9.5px; color: #7C8DA0; text-transform: uppercase;
  letter-spacing: .4px; line-height: 1.2; }
.tba-rb-det { color: #9AA8B5; }
.tba-rb-k.tba-clic { cursor: pointer; }
.tba-rb-k.tba-clic:hover { background: #EEF3F0; }
.tba-rb-res { flex: 1; min-width: 0; }
.tba-empile { display: flex; height: 21px; border-radius: 11px; overflow: hidden; background: #EBEFF3; }
.tba-seg { display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; min-width: 14px;
  cursor: pointer; transition: filter .12s; }
.tba-seg:hover { filter: brightness(1.08); }
.tba-seg-tot { background: #1F8A5B; }
.tba-seg-par { background: #D4A838; }
.tba-seg-non { background: #C0503C; }
.tba-seg-nr  { background: #9AA8B5; }
.tba-rb-vide { font-size: 11px; color: #8A99A8; }
@media (max-width: 1000px) {
  .tba-ruban { flex-wrap: wrap; }
  .tba-rb-res { flex: 1 1 100%; }
}
/* Le tableau de bord des agents a besoin de largeur pour la barre des résultats */
.modal-wide:has(.tba-ruban) { max-width: 1150px; }

/* ===== Tableau de bord des agents : mieux distinguer les rubans entre eux
   (fond alterné, bord plus marqué, filet marine à gauche). ===== */
.tba-ruban { border-color: #D5DEE5; border-left: 4px solid #24425B; }
div.tba-ruban:nth-of-type(even) { background: #F5F8F9; }

/* ===== En-tête du registre des plaintes sur UNE seule ligne :
   titre + pastilles + bouton + recherche. La recherche cède la place en premier. ===== */
.panel-head:has(.panel-titre-grp) { flex-wrap: nowrap; }
.panel-head:has(.panel-titre-grp) .panel-titre-grp { flex: none; flex-wrap: nowrap; }
.panel-head:has(.panel-titre-grp) .panel-outils { flex: 1 1 auto; flex-wrap: nowrap;
  justify-content: flex-end; min-width: 0; }
.panel-head:has(.panel-titre-grp) .panel-outils .btn-tdb { white-space: nowrap; flex: none; }
.panel-head:has(.panel-titre-grp) .search { min-width: 110px; flex: 0 1 230px; }
@media (max-width: 1150px) {
  .panel-head:has(.panel-titre-grp) { flex-wrap: wrap; }
}

/* La date de dépôt ne se coupe jamais en deux : « 03 juil. 2026 » reste entier
   (au plus deux lignes : « Déposée le » puis la date). */
.dg-depot-sous .dg-date-val { white-space: nowrap; }

/* Le numéro et son éventuel suffixe restent insécables. */
.dg-num-base, .dg-num-sfx { white-space: nowrap; }

/* Numéro réutilisé « N° 051/2026 (2) » : même taille que les autres numéros,
   toujours sur une seule ligne (la pastille a été retirée pour faire simple). */
#tbl-wrap .dg-table .dg-num:has(.dg-num-sfx),
.dg-table .dg-num:has(.dg-num-sfx) { white-space: nowrap; }

/* ===== Groupe « Élection des délégués » : formulaire à collèges dynamiques
   et registre dédié. ===== */
.el-sect-titre { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #7E3FA0; margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #E9DFF1; }
.el-college { border: 1px solid #E4DAED; border-left: 3px solid #7E3FA0; border-radius: 10px;
  padding: 10px 12px 6px; margin-bottom: 9px; background: #FBF9FD; }
.el-col-tete { display: flex; align-items: flex-end; gap: 8px; }
.el-col-tete > .field { flex: 1; margin-bottom: 6px; }
.el-col-sel { width: 100%; }
.el-col-autre { margin-top: 6px; width: 100%; }
.el-col-retire { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E0C9CE;
  background: #FBEFF0; color: #B03A2A; font-weight: 700; cursor: pointer; margin-bottom: 10px; }
.el-col-retire:hover { background: #F6DFE0; }
.el-col-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.el-col-grille input[type=number] { width: 100%; }
.el-btn-ajout { margin: 2px 0 10px; }
.el-total-badge { background: #F1E6F8; color: #5E2E78; border: 1px solid #E0CCEE;
  border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 700; margin-bottom: 12px; }
/* Registre : total mis en valeur, détail dessous */
.crr-election .el-total { font-family: var(--font-serif), Georgia, serif; font-size: 19px;
  font-weight: 700; color: #12283E; line-height: 1.1; }
.crr-election .el-detail { font-size: 10.5px; color: #7C8DA0; margin-top: 1px; }
/* Tableau des collèges dans la fenêtre « Voir » */
.el-table-voir { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.el-table-voir th { background: #24425B; color: #EAF2ED; font-size: 9.5px; letter-spacing: .8px;
  text-transform: uppercase; padding: 6px 8px; text-align: left; }
.el-table-voir td { padding: 6px 8px; border-bottom: 1px solid #EDF1F4; color: #243B52; }
.el-table-voir tr:nth-child(even) td { background: #F8FAF9; }

/* ===== Touches de filtre sur UNE seule ligne (registre des établissements) :
   elles se partagent la largeur à parts égales, libellés sur deux lignes maximum. ===== */
.stats-1ligne { display: flex; flex-wrap: nowrap; gap: 8px; }
.stats-1ligne .stat-touche { flex: 1 1 0; min-width: 0; padding: 8px 11px; gap: 9px; }
.stats-1ligne .stat-n { font-size: 19px; flex: none; }
.stats-1ligne .stat-l { font-size: 9.5px; letter-spacing: .3px; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 980px) { .stats-1ligne { flex-wrap: wrap; } .stats-1ligne .stat-touche { flex: 1 1 150px; } }

/* ===== Tableau de bord Dialogue Social ===== */
.ds-note-carte { font-size: 10px; color: #93A2B1; margin-top: 10px; }
/* Pipeline d'instruction */
.ds-pipe { display: flex; gap: 6px; align-items: stretch; padding: 6px 0 2px; }
.ds-et { flex: 1; min-width: 0; border-radius: 9px; padding: 8px 4px; text-align: center;
  background: #F4F7F5; border: 1px solid #E2EAE5; }
.ds-et b { display: block; font-family: var(--font-serif), Georgia, serif; font-size: 19px; color: #12283E; }
.ds-et small { font-size: 8.5px; letter-spacing: .4px; color: #68798A; text-transform: uppercase;
  line-height: 1.25; display: block; margin-top: 2px; }
.ds-et.chaud { background: #FBF1DD; border-color: #EAD9B0; }
.ds-et.fini { background: #E3F1E9; border-color: #C4E0D1; }
.ds-fleche { align-self: center; color: #B7C4CE; font-size: 12px; flex: none; }
/* Jauge du délai légal */
.ds-jauge { height: 17px; border-radius: 9px; background: #EBEFF3; overflow: hidden; display: flex; margin-top: 8px; }
.ds-jauge i { background: linear-gradient(90deg, #35A968, #0F5C4A); display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 10px; font-weight: 800; font-style: normal; white-space: nowrap; overflow: hidden; }
.ds-jauge em { background: #D97258; flex: 1; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9.5px; font-style: normal; font-weight: 700; white-space: nowrap; overflow: hidden; }
.ds-jauge-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px;
  color: #68798A; margin-top: 9px; }
.ds-jauge-meta b { color: #12283E; }
/* Barres rouges (entreprises demandeuses) */
.ds-rouge .bh-fill { background: linear-gradient(90deg, #D97258, #B03A2A); }
/* Baromètre par secteur */
.ds-grid2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .ds-grid2 { grid-template-columns: 1fr; } }
.ds-baro { width: 100%; border-collapse: collapse; }
.ds-baro td { padding: 7px 8px; font-size: 11.5px; border-bottom: 1px dashed #E8EEEA; color: #33475B; }
.ds-baro tr:last-child td { border-bottom: none; }
.ds-baro-sect { font-weight: 700; color: #1C2B44; }
.ds-baro-n { font-family: var(--font-serif), Georgia, serif; font-weight: 700; color: #12283E; white-space: nowrap; }
.ds-baro-alerte { color: #B03A2A; }
.ds-mini { display: inline-flex; height: 8px; border-radius: 4px; overflow: hidden; width: 66px;
  background: #EBEFF3; vertical-align: middle; }
.ds-mini i { background: #1F8A5B; display: block; height: 100%; }
.ds-mini em { background: #D97258; display: block; height: 100%; }
.ds-chip { font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 3px 8px;
  border-radius: 9px; text-transform: uppercase; white-space: nowrap; }
.ds-chip-ok { background: #E3F1E9; color: #0F5C4A; }
.ds-chip-vig { background: #FBF1DD; color: #96690F; }
.ds-chip-ten { background: #FBE9E6; color: #B03A2A; }
/* Taux de pression */
.ds-pression-tete { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 8px; }
.ds-pression-num { font-family: var(--font-serif), Georgia, serif; font-size: 33px; font-weight: 700; color: #12283E; }
.ds-pression-txt { font-size: 11px; color: #68798A; line-height: 1.4; }
.ds-pr-ligne { display: grid; grid-template-columns: 105px 1fr 46px; align-items: center; gap: 9px; margin: 7px 0; }
.ds-pr-lab { font-size: 11px; font-weight: 600; color: #1C2B44; }
.ds-pr-track { height: 9px; border-radius: 5px; background: #EBEFF3; overflow: hidden; display: block; }
.ds-pr-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #D97258, #B03A2A); }
.ds-pr-val { font-size: 11.5px; font-weight: 700; color: #12283E; text-align: right; white-space: nowrap; }
/* Le grand pourcentage ne se coupe jamais ; l'anneau des sexes garde son souffle */
.ds-pression-num { white-space: nowrap; }
.dash-card-b .tdb-donut { padding-bottom: 6px; }
/* Dialogue social : les cartes gardent leur gabarit ; quand le contenu dépasse,
   une barre de défilement fine apparaît automatiquement (overflow-y:auto du corps). */
/* Pipeline : les libellés d'étape tiennent entiers même sur écran étroit */
.ds-pipe { gap: 4px; }
.ds-fleche { font-size: 10px; }
.ds-et { padding: 8px 3px; }
.ds-et small { font-size: 8px; letter-spacing: .2px; overflow-wrap: break-word; }
/* Jamais de coupure en plein mot : on retire plutôt les flèches quand
   l'écran se resserre, pour redonner la place aux libellés. */
.ds-et small { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 1520px) {
  .ds-fleche { display: none; }
  .ds-pipe { gap: 5px; }
  .ds-et { padding: 8px 2px; }
}
/* Chaque étape prend la place que réclame son libellé (répartition inégale) */
.ds-et { flex: 1 1 auto; }
.ds-et small { font-size: 8.5px; }

/* ===== Historique : onglets « Conflits individuels / Licenciements de délégués » ===== */
.hist-onglets { display: flex; gap: 2px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; padding: 3px; width: max-content; margin-bottom: 12px; }
.hist-onglets button { border: none; background: transparent; border-radius: 8px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: #54687A; cursor: pointer;
  display: flex; align-items: center; gap: 7px; transition: background .13s, color .13s; }
.hist-onglets button:hover { background: #EEF3F0; }
.hist-onglets button.on { background: #1F8A5B; color: #fff; }
.hist-onglet-nb { background: rgba(27,58,92,.10); color: #1B3A5C; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; padding: 1px 8px; }
.hist-onglets button.on .hist-onglet-nb { background: rgba(255,255,255,.25); color: #fff; }
/* Touches de l'onglet délégués */
.sth-refusees  { --sc: #1F8A5B; --sc-bg: #E3F1E9; }
.sth-accordees { --sc: #C0392B; --sc-bg: #FBE7E5; }
.sth-refusees .stat-n  { color: #1F8A5B; }
.sth-accordees .stat-n { color: #C0392B; }

/* ===== Tuile « Décisions sur licenciement » : demi-anneau façon compteur.
   Valeurs absolues bien colorées et en grand ; pourcentages discrets. ===== */
.ds-tuile-dec .ds-dec-titre { text-align: center; }
.ds-dec-corps { display: flex; align-items: flex-end; justify-content: center; gap: 7px;
  flex: 1; margin-top: 4px; padding-bottom: 2px; min-height: 0; }
.ds-dec-centre { position: relative; width: 96px; height: 48px; flex: none; }
.ds-dec-demi { position: absolute; inset: 0; border-radius: 96px 96px 0 0; overflow: hidden; }
.ds-dec-demi:after { content: ''; position: absolute; left: 50%; bottom: -18px;
  transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.ds-dec-demi-vide { background: conic-gradient(from 270deg, #E3E9EE 0 180deg, transparent 180deg); }
.ds-dec-tot { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; text-align: center; }
.ds-dec-tot b { font-family: var(--font-serif), Georgia, serif; font-size: 17px; color: #12283E; line-height: 1; }
.ds-dec-tot small { display: block; font-size: 6.5px; letter-spacing: .5px; color: #7C8DA0; text-transform: uppercase; }
.ds-dec-cote { text-align: center; line-height: 1.15; flex: none; min-width: 48px; }
.ds-dec-corps-vide { flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.ds-dec-cote b { font-family: var(--font-serif), Georgia, serif; font-size: 17px; display: block; }
.ds-dec-cote small { font-size: 8px; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; }
.ds-dec-cote em { font-style: normal; font-size: 8.5px; color: #93A2B1; display: block; }
/* Couleurs relevées : le libellé porte la même teinte que sa part de l'anneau */
.ds-dec-gauche b, .ds-dec-gauche small { color: #157347; }
.ds-dec-droite b, .ds-dec-droite small { color: #B03A2A; }
.ds-dec-vide-txt { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 9.5px; color: #7C8DA0; }
/* Tuile décisions sur écran étroit : le compteur passe au-dessus,
   les deux valeurs se partagent la rangée du dessous — rien n'est coupé. */
@media (max-width: 1500px) {
  /* Grille explicite : compteur sur la rangée du haut, valeurs côte à côte dessous */
  .ds-dec-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px;
    grid-template-areas: 'centre centre' 'gauche droite'; justify-items: center; align-content: end; }
  .ds-dec-centre { grid-area: centre; width: 84px; height: 42px; }
  .ds-dec-gauche { grid-area: gauche; }
  .ds-dec-droite { grid-area: droite; }
  .ds-dec-demi { border-radius: 84px 84px 0 0; }
  .ds-dec-demi:after { width: 50px; height: 50px; bottom: -16px; }
  .ds-dec-tot b { font-size: 14px; }
  .ds-dec-cote { flex: 1 1 0; min-width: 0; }
  .ds-dec-cote b { font-size: 14px; }
  .ds-dec-cote small { font-size: 7.5px; letter-spacing: .2px; }
  .ds-dec-cote em { font-size: 8px; }
}

/* ===== Conflits collectifs ===== */
.cc-motifs { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-motif { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #F1E6F8; color: #5E2E78; white-space: nowrap; }
.cc-choix-motifs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.cc-case { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #243B52; cursor: pointer; }
.cc-table { width: 100%; }
#cc-wrap thead th { position: sticky; top: 0; z-index: 6; background: #24425B; color: #EAF2ED; }
#cc-wrap { overflow-x: clip; }
@media (max-width: 1100px) { #cc-wrap { overflow-x: auto; } #cc-wrap thead th { position: static; } }
/* Conflits collectifs : la jauge d'étapes occupe la largeur de la cellule */
#cc-wrap .trait-cell { align-items: stretch; }
#cc-wrap .dg-jauge { width: 100%; max-width: 150px; }
#cc-wrap .trait-cell .badge { align-self: flex-start; white-space: normal; text-align: left; line-height: 1.3; }

/* Formulaire conflit collectif : lignes de motifs cumulables + requérant */
.cc-motifs-form { display: flex; flex-direction: column; gap: 7px; }
.cc-motif-ligne { display: flex; align-items: center; gap: 7px; }
.cc-motif-sel { flex: 1; min-width: 0; }
.cc-motif-autre { flex: 1; min-width: 0; }
.cc-motif-retire { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid #E0C9CE;
  background: #FBEFF0; color: #B03A2A; font-weight: 700; cursor: pointer; }
.cc-motif-retire:hover { background: #F6DFE0; }
.cc-btn-plus { margin-top: 7px; }

/* ===== Registre courrier « Plainte – conflit collectif » : colonnes maîtrisées,
   aucun débordement ni libellé tronqué. ===== */
.crr-collectifs { table-layout: fixed; width: 100%; }
.crr-collectifs th:nth-child(1) { width: 17%; }
.crr-collectifs th:nth-child(2) { width: 19%; }
.crr-collectifs th:nth-child(3) { width: 24%; }
.crr-collectifs th:nth-child(4) { width: 16%; }
.crr-collectifs th:nth-child(5) { width: 15%; }
.crr-collectifs th:nth-child(6) { width: 9%; }
.crr-collectifs th { white-space: normal; line-height: 1.25; }
.crr-collectifs td { overflow-wrap: break-word; }
.cc-requerant { font-size: 12px; color: #33475B; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Courrier : en-têtes de groupe compactés (tous les groupes) ===== */
.crr-tete { gap: 11px; margin-bottom: 11px; }
.crr-pic { width: 40px; height: 40px; font-size: 19px; }
.crr-h1 { font-size: 19px; }
.crr-sous { font-size: 12px; margin-top: 1px; }
.crr-carte { padding: 11px 15px 11px; }

/* ===== Module Conflits collectifs : jauge et badge au style du module délégué ===== */
#cc-wrap .trait-cell .badge { white-space: normal; word-break: keep-all; overflow-wrap: normal;
  max-width: 100%; text-align: left; align-items: flex-start; border-radius: 12px;
  line-height: 1.3; font-size: 11.5px; display: inline-flex; }
#cc-wrap .trait-cell .badge::before { flex: 0 0 6px; margin-top: 4px; }
/* Colonne Dossier */
.cc-dossier { display: flex; gap: 6px; flex-wrap: wrap; }
/* Largeurs calibrées (8 colonnes avec Agent, 7 sans) : rien ne déborde */
.cc-table { table-layout: fixed; width: 100%; }
.cc-table th.cc-col-req { width: 13%; }
.cc-table th.cc-col-emp { width: 13%; }
.cc-table th.cc-col-rev { width: 15%; }
.cc-table th.cc-col-ech { width: 15%; }
.cc-table th.cc-col-tra { width: 15%; }
.cc-table th.cc-col-dos { width: 8%; }
.cc-table th.cc-col-age { width: 9%; }
.cc-table th.cc-col-act { width: 12%; }
.cc-table th { white-space: normal; line-height: 1.25; }

/* ===== Conflits collectifs : même langage visuel que le module Licenciement
   délégué (numéros marine insécables, employeur doré, dates jamais coupées,
   liseré d'échéance sur la ligne). ===== */
.cc-table td { padding: 12px 10px; vertical-align: top; }
.cc-table .dg-num { display: inline-block; color: #1B3A5C; font-weight: 800;
  font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; max-width: 100%; }
.cc-table .dg-date { font-weight: 600; color: var(--ink); font-size: 11.5px; }
.cc-table .dg-date-val { white-space: nowrap; }
.cc-table .emploi-cell { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.cc-table .dg-emp { color: var(--accent); font-weight: 600; font-size: 12.5px;
  word-break: keep-all; overflow-wrap: normal; hyphens: none; line-height: 1.35; }
.cc-table .dg-secteur { font-size: 11px; color: var(--ink-soft); margin-top: 2px; font-style: italic; }
.cc-table .dg-ech { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #F1F3F0; }
.cc-table .dg-ech.dg-ech-alerte { background: #FBE7E5; }
.cc-table .dg-ech.dg-ech-alerte .dg-limite { color: #96271C; }
.cc-table .dg-limite { font-weight: 600; color: var(--ink); font-size: 12.5px;
  white-space: normal; word-break: keep-all; line-height: 1.3; }
.cc-table .dg-ech { max-width: 100%; box-sizing: border-box; }
.cc-table .dg-reste { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.cc-table .dg-reste.dg-urgent { color: #A85B12; font-weight: 700; }
.cc-table .dg-reste.dg-depasse { color: var(--danger); font-weight: 700; }
.cc-table .cc-motif { font-size: 9px; }
/* Liseré d'échéance sur la ligne entière, comme au module délégué */
.cc-table tr.dg-urgent td:first-child { box-shadow: inset 3px 0 0 #E0A44A; }
.cc-table tr.dg-depasse td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
/* L'agent et les libellés ne se coupent qu'entre les mots */
.cc-table td { word-break: keep-all; overflow-wrap: normal; }
/* Écrans étroits : le numéro reste entier (police légèrement réduite) */
@media (max-width: 1450px) {
  .cc-table .dg-num { font-size: 11px; letter-spacing: -.2px; }
  .cc-table td { padding: 12px 7px; }
}
/* Badges d'échéance du module délégué : toujours contenus dans leur cellule */
.dg-table .dg-ech { max-width: 100%; box-sizing: border-box; }
@media (max-width: 1420px) {
  .dg-table .dg-ech { padding: 4px 6px; }
  .dg-table .dg-limite { font-size: 11.5px; }
  .dg-table .dg-reste { font-size: 10.5px; }
}

/* ===== Badges d'étape (variante A retenue) : le point disparaît, une bande
   de couleur accolée au bord gauche porte le ton — appliqué aux trois modules
   (conflits individuels, conflits collectifs, licenciement délégué). ===== */
.dg-etape { border-radius: 4px 11px 11px 4px; border-left: 4px solid var(--bd, #C9931B); }
.dg-etape-att   { --bd: #C9931B; }
.dg-etape-accord{ --bd: #D4832C; }
.dg-etape-refus { --bd: #1F8A5B; }
.dg-etape-nc    { --bd: #C0392B; }
.dg-etape-reaff { --bd: #7E3FA0; }
.dg-etape-oblig { --bd: #A85B12; }

/* ============ Règlementation : fil de discussion documentaire ============ */
.reg-chat { display: flex; flex-direction: column; height: calc(100vh - 48px); max-height: calc(100vh - 48px); }
.reg-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(18,40,62,.07);
  padding: 14px 18px; margin-bottom: 12px; flex: none; }
.reg-tete-txt h1 { font-size: 19px; margin: 0 0 4px; color: #1C2B44; }
.reg-tete-txt p { margin: 0; font-size: 12.5px; color: #5B6B7B; }
.reg-filtre { display: flex; align-items: center; gap: 8px; flex: none; }
.reg-filtre label { font-size: 12px; font-weight: 600; color: #44586B; white-space: nowrap; }
.reg-filtre select { font-size: 12.5px; padding: 6px 9px; border: 1px solid #C9D6E6;
  border-radius: 8px; background: #F7FAFC; color: #1C2B44; max-width: 220px; }

.reg-fil { flex: 1; overflow-y: auto; padding: 4px 6px 12px; display: flex; flex-direction: column; gap: 12px; }
.reg-msg { max-width: 860px; border-radius: 14px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; }
.reg-user { align-self: flex-end; background: #24425B; color: #fff; border-bottom-right-radius: 4px;
  font-weight: 600; box-shadow: 0 2px 8px rgba(18,40,62,.18); }
.reg-bot { align-self: flex-start; background: #fff; color: #243B52; border-bottom-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(18,40,62,.08); width: min(860px, 96%); }
.reg-attente { color: #6B7B8B; font-style: italic; }
.reg-intro { font-size: 13px; color: #34495E; }
.reg-exemples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.reg-exemple { font-size: 12px; font-weight: 600; color: #24425B; background: #EDF3F9;
  border: 1px solid #C9D6E6; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.reg-exemple:hover { background: #DCE9F5; border-color: #9FB8D2; }

.reg-resultats { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.reg-carte { border: 1px solid #E3EAF2; border-left: 4px solid #C9D6E6; border-radius: 8px;
  padding: 10px 13px; background: #FBFDFE; }
.reg-carte-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.reg-badge { font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #fff;
  padding: 2.5px 9px; border-radius: 999px; white-space: nowrap; flex: none; align-self: center; }
.reg-carte-num { font-weight: 800; color: #1C2B44; font-size: 13.5px; white-space: nowrap; }
.reg-carte-titre { font-weight: 600; color: #44586B; font-size: 12.5px; }
.reg-carte-section { font-size: 11px; color: #7A8A99; margin-top: 3px; font-style: italic; }
.reg-carte-extrait { font-size: 12.5px; color: #34495E; margin-top: 7px; line-height: 1.55; }
.reg-mark { background: #FBE9A9; color: #4A3A05; border-radius: 3px; padding: 0 2px; font-weight: 600; }
.reg-carte-plein { font-size: 12.5px; color: #2C3E50; margin-top: 8px; padding: 10px 12px;
  background: #fff; border: 1px solid #E8EEF4; border-radius: 7px; white-space: pre-line; line-height: 1.6; }
.reg-lire { margin-top: 7px; font-size: 11.5px; font-weight: 700; color: #1F6FB2; background: none;
  border: none; cursor: pointer; padding: 2px 0; }
.reg-lire:hover { text-decoration: underline; }
.reg-encore { align-self: center; font-size: 12px; font-weight: 700; color: #24425B; background: #EDF3F9;
  border: 1px solid #C9D6E6; border-radius: 999px; padding: 6px 16px; cursor: pointer; margin-top: 4px; }
.reg-encore:hover { background: #DCE9F5; }

.reg-composeur { flex: none; display: flex; gap: 9px; padding: 10px 12px; background: #fff;
  border-radius: 14px; box-shadow: 0 -1px 10px rgba(18,40,62,.08); margin-top: 10px;
  margin-right: 78px; /* dégage le widget de messagerie flottant */ }
.reg-champ { flex: 1; font-size: 13.5px; padding: 10px 14px; border: 1px solid #C9D6E6;
  border-radius: 10px; background: #F7FAFC; color: #1C2B44; min-width: 0; }
.reg-champ:focus { outline: none; border-color: #24425B; background: #fff; }
.reg-envoyer { flex: none; }

@media (max-width: 1450px) {
  .reg-tete { flex-direction: column; align-items: stretch; gap: 8px; }
  .reg-filtre { justify-content: flex-end; }
}

/* Historique : les numéros de dossier ne se coupent jamais */
#hist-wrap td.mono { white-space: nowrap; }

/* Règlementation — variante plein écran : barre de filtre seule + état vide central */
.reg-barre { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-bottom: 8px; }
.reg-barre label { font-size: 12px; font-weight: 700; color: #44586B; white-space: nowrap; }
.reg-barre select { font-size: 12.5px; padding: 6px 10px; border: 1px solid #C9D6E6;
  border-radius: 8px; background: #fff; color: #1C2B44; max-width: 220px; }
.reg-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; color: #8A99A8; text-align: center; padding: 20px; }
.reg-vide-pic { font-size: 44px; opacity: .55; }
.reg-vide-l1 { font-size: 14.5px; font-weight: 600; color: #6B7B8B; }
.reg-vide-l2 { font-size: 12px; color: #8A99A8; }
.reg-vide .reg-exemples { justify-content: center; margin-top: 8px; }
.reg-vide .reg-exemple { background: #fff; }

/* Règlementation — autocomplétion (liste ancrée au-dessus du champ) */
.reg-champ-boite { position: relative; flex: 1; min-width: 0; display: flex; }
.reg-champ-boite .reg-champ { width: 100%; }
.reg-sugg { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 280px; max-width: 100%;
  background: #fff; border: 1px solid #C9D6E6; border-radius: 10px;
  box-shadow: 0 -4px 20px rgba(18,40,62,.16); overflow: hidden; z-index: 60; }
.reg-sugg-item { padding: 8px 14px; font-size: 13px; color: #24425B; cursor: pointer;
  border-bottom: 1px solid #F0F4F8; }
.reg-sugg-item:last-child { border-bottom: none; }
.reg-sugg-item.on, .reg-sugg-item:hover { background: #EDF3F9; font-weight: 600; }

/* Règlementation — proposition de correction */
.reg-correction { margin-top: 8px; font-size: 13px; color: #34495E; }
.reg-correction-lien { background: none; border: none; padding: 0; cursor: pointer;
  color: #1F6FB2; font-weight: 700; font-size: 13px; }
.reg-correction-lien:hover { text-decoration: underline; }

/* ============ Installation et Paramètres de l'inspection ============ */
.inst-page { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 18px; overflow-y: auto; background: linear-gradient(150deg, #16311F 0%, #1F4230 55%, #24425B 130%); }
.inst-carte { width: min(760px, 100%); background: #fff; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35); padding: 26px 32px 30px; }
.inst-tete { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #E8EEEA;
  padding-bottom: 14px; margin-bottom: 6px; }
.inst-logo img { width: 52px; height: auto; }
.inst-tete h1 { font-size: 20px; color: #1C2B44; margin: 0 0 3px; font-family: Georgia, serif; }
.inst-tete p { margin: 0; font-size: 12.5px; color: #5B6B7B; }
.inst-section { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: #157347;
  margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #E8EEEA; }
.inst-panel { max-width: 860px; }

/* ============ Paramètres — mise en page en cartes ============ */
.prm-page { max-width: 940px; display: flex; flex-direction: column; gap: 14px; }
.prm-bandeau { background: linear-gradient(120deg, #1C2B44, #24506B); border-radius: 14px; color: #fff;
  padding: 16px 22px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 16px rgba(18,40,62,.18); }
.prm-bandeau-pic { font-size: 30px; }
.prm-bandeau h1 { font-size: 18px; font-family: Georgia, serif; margin: 0 0 3px; }
.prm-bandeau p { font-size: 12px; opacity: .85; margin: 0; }
.prm-cartes { display: flex; flex-direction: column; gap: 14px; }
.prm-carte { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(18,40,62,.07); padding: 16px 20px; }
.prm-carte-titre { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #157347;
  letter-spacing: .8px; text-transform: uppercase; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid #E8EEEA; }
.prm-ico { width: 27px; height: 27px; border-radius: 8px; background: #E1F5EE; display: inline-flex;
  align-items: center; justify-content: center; font-size: 14px; }
.prm-champ { margin-bottom: 10px; min-width: 0; }
.prm-label { font-size: 11.5px; font-weight: 700; color: #44586B; margin-bottom: 4px; }
.prm-champ input { width: 100%; border: 1px solid #D5DFE8; border-radius: 9px; padding: 9px 12px;
  font-size: 13px; color: #1C2B44; background: #FBFDFE; }
.prm-champ input:focus { outline: none; border-color: #157347; background: #fff; }
.prm-aide { font-size: 11px; color: #8A99A8; margin-top: 3px; }
.prm-deps { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.prm-dep { display: inline-flex; align-items: center; gap: 7px; background: #EDF3F9;
  border: 1px solid #C9D6E6; border-radius: 999px; padding: 5px 7px 5px 13px;
  font-size: 12.5px; font-weight: 600; color: #24425B; }
.prm-dep-x { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #C0392B;
  border: 1px solid #E0C9C9; font-size: 10px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.prm-dep-x:hover { background: #FBE7E5; }
.prm-dep-add { display: inline-flex; gap: 6px; align-items: center; }
.prm-dep-saisie { width: 190px; border: 1px solid #D5DFE8; border-radius: 9px; padding: 7px 11px;
  font-size: 12.5px; background: #FBFDFE; }
.prm-dep-saisie:focus { outline: none; border-color: #157347; }
.prm-dep-plus { width: 30px; height: 30px; border-radius: 8px; background: #157347; color: #fff;
  border: none; font-size: 16px; font-weight: 700; cursor: pointer; }
.prm-dep-plus:hover { background: #0F5C39; }
.prm-barre { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(18,40,62,.07); padding: 12px 18px; }
.prm-enregistrer { margin: 0; }
.prm-etat { font-size: 12px; color: #B26B15; font-weight: 700; }
.prm-etat-ok { color: #157347; }
/* L'assistant d'installation réutilise les cartes, en version encadrée */
.inst-carte .prm-carte { box-shadow: none; border: 1px solid #E8EEEA; padding: 14px 16px; }
.inst-carte .prm-cartes { gap: 12px; margin-bottom: 12px; }
.inst-carte .prm-enregistrer { margin-top: 14px; }

.prm-sauv-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ Édition DGTSS — Situation nationale ============ */
.nat-bandeau { display: flex; align-items: center; }
.nat-importer { margin-left: auto; flex: none; }
.nat-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.nat-tuile { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(18,40,62,.07);
  padding: 12px 15px; display: flex; align-items: center; gap: 11px; }
.nat-tuile-ico { width: 38px; height: 38px; border-radius: 10px; background: #EDF3F9;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.nat-tuile-n { font-size: 20px; font-weight: 800; color: #1C2B44; }
.nat-tuile-l { font-size: 11.5px; color: #5B6B7B; font-weight: 600; }
.nat-concil-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 2px; }
.nat-taux { margin-left: auto; font-size: 13px; font-weight: 800; color: #157347; }
.nat-table { width: 100%; }
.nat-table th.nat-n, .nat-table td.nat-n { text-align: right; font-variant-numeric: tabular-nums; }
.nat-table td.nat-n { font-weight: 700; color: #24425B; }
.nat-region { font-weight: 800; color: #1C2B44; }
.nat-type { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2.5px 9px; border-radius: 999px; }
.nat-type-sauvegarde { background: #E1F5EE; color: #0F6E56; }
.nat-type-export { background: #E3F0FA; color: #155B8A; }
@media (max-width: 1500px) { .nat-tuiles { grid-template-columns: repeat(2, 1fr); } }

/* ============ Onboarding animé (premier lancement) ============ */
.ob-page { position: fixed; inset: 0; overflow-y: auto; display: flex; align-items: center;
  justify-content: center; padding: 26px 16px;
  background: linear-gradient(150deg, #16311F 0%, #1F4230 55%, #24425B 130%); }
.ob-carte { width: min(680px, 100%); background: #fff; border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.4); padding: 26px 34px 24px;
  display: flex; flex-direction: column; min-height: 520px;
  animation: ob-apparition .5s cubic-bezier(.2,.8,.3,1); }
@keyframes ob-apparition { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.ob-progression { flex: none; display: flex; flex-direction: column; gap: 7px; min-height: 30px; }
.ob-prog-texte { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: #6B7B8B; text-transform: uppercase; }
.ob-prog-barre { height: 5px; background: #E8EEEA; border-radius: 3px; overflow: hidden; }
.ob-prog-barre i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #157347, #1F8A5B); transition: width .5s cubic-bezier(.2,.8,.3,1); }
.ob-slides { flex: 1; position: relative; overflow: hidden; margin: 8px 0; }
.ob-slide { position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 14px 4px 6px; overflow-y: auto;
  transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .4s ease; }
.ob-slide.ob-active { transform: translateX(0); opacity: 1; }
.ob-slide.ob-avant { transform: translateX(-46px); opacity: 0; pointer-events: none; }
.ob-slide.ob-apres { transform: translateX(46px); opacity: 0; pointer-events: none; }
.ob-question { font-family: Georgia, serif; font-size: 21px; color: #1C2B44; margin: 4px 0 18px; }
.ob-slide-corps { display: flex; flex-direction: column; gap: 4px; }
.ob-centre { align-items: center; justify-content: center; text-align: center; flex: 1; gap: 10px; }
.ob-logo img { width: 96px; height: auto; animation: ob-flotte 3.2s ease-in-out infinite; }
@keyframes ob-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ob-titre-accueil { font-family: Georgia, serif; font-size: 26px; color: #1C2B44; margin: 10px 0 2px; }
.ob-sous-accueil { font-size: 13.5px; color: #5B6B7B; max-width: 420px; line-height: 1.6; }
.ob-commencer { margin-top: 18px; padding: 12px 34px; font-size: 15px; }
.ob-champ { margin-bottom: 12px; min-width: 0; }
.ob-champ label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  color: #44586B; margin-bottom: 6px; }
.ob-champ-ico { font-size: 15px; transition: transform .2s; }
.ob-champ:focus-within .ob-champ-ico { animation: ob-vibre .35s ease; }
@keyframes ob-vibre { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
.ob-champ input { width: 100%; border: 1.5px solid #D5DFE8; border-radius: 11px; padding: 12px 14px;
  font-size: 14px; color: #1C2B44; background: #FBFDFE; transition: border-color .25s, box-shadow .25s, background .25s; }
.ob-champ input:focus { outline: none; border-color: #157347; background: #fff;
  box-shadow: 0 0 0 4px rgba(21,115,71,.12); }
.ob-champ input.ob-invalide { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192,57,43,.1);
  animation: ob-secousse .3s ease; }
@keyframes ob-secousse { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
.ob-aide { font-size: 11.5px; color: #8A99A8; margin-top: 5px; }
.ob-types { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.ob-type { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  background: #FBFDFE; border: 2px solid #E0E7ED; border-radius: 15px; padding: 18px 18px 16px;
  cursor: pointer; transition: transform .22s, border-color .22s, box-shadow .22s, background .22s; }
.ob-type:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(18,40,62,.12); }
.ob-type.on { border-color: #157347; background: #F2FAF6; box-shadow: 0 8px 22px rgba(21,115,71,.16); }
.ob-type-ico { font-size: 27px; }
.ob-type-titre { font-size: 15px; font-weight: 800; color: #1C2B44; }
.ob-type-sous { font-size: 12px; color: #5B6B7B; line-height: 1.5; }
.ob-type.on .ob-type-titre { color: #0F5C39; }
.ob-nav { flex: none; display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid #EEF2F5; }
.ob-nav .btn:disabled { opacity: .45; cursor: not-allowed; }
.ob-deps { margin-top: 2px; }
.ob-resume { background: #FBFDFE; border: 1px solid #E3EAF2; border-radius: 13px; padding: 6px 16px;
  animation: ob-zoom .45s cubic-bezier(.2,.8,.3,1); }
@keyframes ob-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.ob-resume-ligne { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid #EEF2F5; font-size: 13px; }
.ob-resume-ligne:last-child { border-bottom: none; }
.ob-resume-l { flex: none; width: 130px; font-weight: 700; color: #6B7B8B; }
.ob-resume-v { color: #1C2B44; font-weight: 600; word-break: break-word; }
@media (max-width: 640px) { .ob-types { grid-template-columns: 1fr; } .ob-carte { padding: 20px 18px; } }

/* ============ Onboarding — photos du pays ============ */
.ob-carte { width: min(940px, 100%); }
.ob-form-zone { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.ob-deux { display: grid; grid-template-columns: 265px 1fr; gap: 22px; flex: 1; min-height: 0; }
.ob-photo { position: relative; border-radius: 14px; overflow: hidden; background: #10202F; min-height: 340px; }
.ob-photo-fond { position: absolute; inset: -24px; background-size: cover; background-position: center;
  filter: blur(16px) brightness(.72); transform: scale(1.2); }
.ob-photo-img { position: absolute; inset: 0; width: 100%; height: 100%;
  animation: ob-kenburns 18s ease-in-out infinite alternate; }
.ob-contient { object-fit: contain; }
.ob-couvre { object-fit: cover; }
.ob-photo-voile { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,43,68,0) 55%, rgba(22,49,31,.42) 100%); }
@keyframes ob-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.ob-hero { width: 100%; max-height: 258px; object-fit: contain; border-radius: 14px; }
@media (max-width: 760px) { .ob-deux { grid-template-columns: 1fr; } .ob-photo { display: none; } }

/* ============ Onboarding plein écran — carte de verre clair centrée (variante B) ============ */
.ob-page.ob-plein { padding: 0; align-items: stretch; justify-content: stretch; overflow: hidden; }
.ob-plein .ob-slides { position: absolute; inset: 0; margin: 0; }
.ob-plein .ob-slide { position: absolute; inset: 0; padding: 0; overflow: hidden;
  transform: none; opacity: 1; }
.ob-fond { position: absolute; inset: 0; background-size: cover; background-position: center;
  animation: ob-kenburns 20s ease-in-out infinite alternate, ob-fondu .7s ease; }
.ob-fond-flou { position: absolute; inset: -30px; background-size: cover; background-position: center;
  filter: blur(24px) brightness(.62); transform: scale(1.18); animation: ob-fondu .7s ease; }
.ob-entier { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  animation: ob-kenburns 20s ease-in-out infinite alternate, ob-fondu .7s ease; }
.ob-voile { position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(8,20,14,.14) 30%, rgba(8,20,14,.5) 100%); }
.ob-voile-bas { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,14,.05) 40%, rgba(8,20,14,.8) 100%); }
@keyframes ob-fondu { from { opacity: 0; } to { opacity: 1; } }

.ob-prog-flottante { position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: min(520px, 70%); z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.ob-prog-flottante .ob-prog-texte { color: #fff; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.ob-prog-flottante .ob-prog-barre { background: rgba(255,255,255,.3); }
.ob-prog-flottante .ob-prog-barre i { background: linear-gradient(90deg, #2FBF83, #7FD9AE); }

/* Carte de verre clair, centrée */
.ob-verre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(590px, 94%); max-height: 88vh; overflow-y: auto;
  background: rgba(255,255,255,.44); backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.58); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.38); padding: 26px 34px 22px;
  animation: ob-arrivee .5s cubic-bezier(.2,.8,.3,1); }
@keyframes ob-arrivee { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.ob-verre .ob-question { color: #10202F; }
.ob-verre .ob-champ label { color: #1E3247; }
.ob-verre .ob-champ input { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.78);
  color: #10202F; }
.ob-verre .ob-champ input:focus { background: rgba(255,255,255,.8); border-color: #157347; }
.ob-verre .ob-aide { color: #2E4257; opacity: .78; }
.ob-verre .ob-nav { border-top: 1px solid rgba(255,255,255,.55); margin-top: 6px; }
.ob-verre .btn-ghost { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.8); color: #1E3247; }
.ob-verre .ob-type { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.75); }
.ob-verre .ob-type.on { border-color: #157347; background: rgba(242,250,246,.75); }
.ob-verre .ob-resume { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.7); }
.ob-verre .prm-dep { background: rgba(255,255,255,.6); }
.ob-verre .prm-dep-saisie { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.78); }

/* Bienvenue : titre et bouton posés sur l'image */
.ob-centre-plein { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding-bottom: 7vh; text-align: center; z-index: 4; }
.ob-titre-plein { font-family: Georgia, serif; font-size: 40px; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6); margin-bottom: 10px; animation: ob-fondu .9s ease; }
.ob-sous-plein { font-size: 15px; color: rgba(255,255,255,.92); max-width: 560px;
  text-shadow: 0 1px 8px rgba(0,0,0,.65); margin-bottom: 22px; animation: ob-fondu 1.2s ease; }
.ob-centre-plein .ob-commencer { font-size: 16px; padding: 14px 46px; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); margin-top: 0; }

/* ============ Onboarding — sans panneau : seuls les champs flottent sur l'image ============ */
.ob-voile { background: radial-gradient(ellipse at 50% 55%,
  rgba(6,16,11,.44) 0%, rgba(6,16,11,.22) 60%, rgba(6,16,11,.48) 100%); }

.ob-zone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, 92%); max-height: 90vh; overflow-y: auto; z-index: 4; padding: 6px 4px;
  animation: ob-arrivee .5s cubic-bezier(.2,.8,.3,1); }
.ob-zone::-webkit-scrollbar { width: 6px; }
.ob-zone::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; }

/* Titre de la question : posé directement sur la photo */
.ob-zone .ob-question { font-size: 27px; color: #fff; text-align: center; margin: 0 0 24px;
  text-shadow: 0 2px 20px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6); }

/* Libellés et aides : blancs, sur l'image */
.ob-zone .ob-champ label { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.9); font-size: 12.5px; }
.ob-zone .ob-aide { color: rgba(255,255,255,.86); text-shadow: 0 1px 7px rgba(0,0,0,.9);
  opacity: 1; font-size: 11.5px; }

/* Seuls les champs sont matérialisés */
.ob-zone .ob-champ input { background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px; padding: 12px 15px; font-size: 14px; color: #10202F;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); }
.ob-zone .ob-champ input:focus { background: rgba(255,255,255,.97); border: 2px solid #2FBF83;
  box-shadow: 0 0 0 4px rgba(47,191,131,.3), 0 8px 26px rgba(0,0,0,.32); }
.ob-zone .ob-champ input.ob-invalide { border: 2px solid #E05A48;
  box-shadow: 0 0 0 4px rgba(224,90,72,.3), 0 8px 26px rgba(0,0,0,.32); }

/* Cartes de choix : seules sur l'image */
.ob-zone .ob-types { gap: 16px; }
.ob-zone .ob-type { background: rgba(255,255,255,.87); border: 2px solid rgba(255,255,255,.9);
  border-radius: 16px; padding: 20px; box-shadow: 0 12px 34px rgba(0,0,0,.34); }
.ob-zone .ob-type:hover { background: rgba(255,255,255,.94); }
.ob-zone .ob-type.on { border-color: #157347; background: rgba(240,252,246,.94);
  box-shadow: 0 12px 38px rgba(21,115,71,.45); }
.ob-zone .ob-type-ico { font-size: 26px; }

/* Départements : pastilles flottantes */
.ob-zone .prm-dep { background: rgba(255,255,255,.9); border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.26); padding: 7px 9px 7px 15px; font-size: 13px; }
.ob-zone .prm-dep-x { background: #FBE7E5; border: none; }
.ob-zone .prm-dep-saisie { background: rgba(255,255,255,.62); border: 1.5px dashed rgba(255,255,255,.85);
  border-radius: 999px; padding: 8px 16px; color: #10202F; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.ob-zone .prm-dep-saisie::placeholder { color: #3A5163; }
.ob-zone .prm-dep-plus { border-radius: 50%; width: 32px; height: 32px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); }

/* Récapitulatif : lignes translucides, la photo traverse */
.ob-zone .ob-resume { background: none; border: none; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }
.ob-zone .ob-resume-ligne { background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 9px; border: none; padding: 9px 16px; font-size: 13.5px;
  color: #fff; text-shadow: 0 1px 7px rgba(0,0,0,.8); }
.ob-zone .ob-resume-l { color: rgba(255,255,255,.82); font-weight: 600; width: 138px; }
.ob-zone .ob-resume-v { color: #fff; font-weight: 700; }

/* Navigation : bouton principal plein, retour translucide */
.ob-zone .ob-nav { border-top: none; margin-top: 28px; padding-top: 0; }
.ob-zone .ob-nav .btn { font-size: 14px; border-radius: 11px; padding: 13px 30px;
  box-shadow: 0 10px 28px rgba(0,0,0,.42); }
.ob-zone .ob-nav .btn-ghost { background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55);
  color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ob-zone .ob-nav .btn-ghost:hover { background: rgba(255,255,255,.26); }

/* ---- Onboarding : tout tient à l'écran, sans barre de défilement ---- */
.ob-zone { max-height: none; overflow: visible; top: 52%; padding-top: 0; }
.ob-plein .ob-slide { display: flex; align-items: center; justify-content: center; }

/* Récapitulatif : deux colonnes, lignes compactes */
.ob-zone.ob-zone-large { width: min(1080px, 94%); }
.ob-zone .ob-corps-resume .ob-resume { display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 14px; align-content: start; }
.ob-zone .ob-corps-resume .ob-resume-ligne { padding: 7px 14px; font-size: 12.5px; gap: 10px;
  align-items: baseline; }
.ob-zone .ob-corps-resume .ob-resume-l { width: 108px; font-size: 11.5px; }
.ob-zone .ob-corps-resume .ob-resume-v { font-size: 12.5px; line-height: 1.35; }
.ob-zone .ob-corps-resume .ob-resume-ligne:first-child,
.ob-zone .ob-corps-resume .ob-resume-ligne:nth-child(2),
.ob-zone .ob-corps-resume .ob-resume-ligne:last-child { grid-column: 1 / -1; }

/* Titres et espacements resserrés pour les étapes chargées */
.ob-zone .ob-question { margin-bottom: 20px; font-size: 25px; }
.ob-zone .ob-champ { margin-bottom: 8px; }
.ob-zone .ob-nav { margin-top: 22px; }

/* Écrans peu hauts : on comprime encore */
@media (max-height: 780px) {
  .ob-zone .ob-question { font-size: 22px; margin-bottom: 15px; }
  .ob-zone .ob-champ input { padding: 10px 13px; font-size: 13.5px; }
  .ob-zone .ob-corps-resume .ob-resume-ligne { padding: 6px 12px; font-size: 12px; }
  .ob-zone .ob-nav { margin-top: 16px; }
  .ob-zone .ob-nav .btn { padding: 11px 24px; }
  .ob-prog-flottante { top: 14px; }
}

/* Régime d'instruction (licenciement de délégué) : deux cases exclusives */
.dg-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-exp-opt { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  background: #FBFDFE; border: 1.5px solid #D5DFE8; border-radius: 11px; padding: 10px 13px;
  transition: border-color .18s, background .18s, box-shadow .18s; }
.dg-exp-opt:hover { border-color: #9FB8D2; background: #fff; }
.dg-exp-opt b { display: block; font-size: 13px; color: #1C2B44; }
.dg-exp-opt small { display: block; font-size: 11px; color: #6B7B8B; margin-top: 1px; }
.dg-exp-coche { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #C9D6E6;
  background: #fff; color: transparent; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.dg-exp-opt.on { border-color: #157347; background: #F2FAF6; box-shadow: 0 0 0 3px rgba(21,115,71,.12); }
.dg-exp-opt.on .dg-exp-coche { background: #157347; border-color: #157347; color: #fff; }
.dg-exp-opt.on b { color: #0F5C39; }
.dg-regime { font-size: 10.5px; color: #8A99A8; font-style: italic; margin-top: 2px; white-space: nowrap; }

/* Délégué du personnel — cartes pleine largeur et listes défilantes */
.ds-large { width: 100%; }
.ds-large .dash-card-h { display: flex; align-items: center; gap: 12px; }
.ds-baro-filtre { margin-left: auto; font-size: 12px; padding: 5px 9px; border: 1px solid #C9D6E6;
  border-radius: 8px; background: #fff; color: #1C2B44; max-width: 230px; font-weight: 600; }
.ds-defil { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.ds-defil::-webkit-scrollbar { width: 8px; }
.ds-defil::-webkit-scrollbar-track { background: #F0F4F8; border-radius: 4px; }
.ds-defil::-webkit-scrollbar-thumb { background: #C9D6E6; border-radius: 4px; }
.ds-defil::-webkit-scrollbar-thumb:hover { background: #9FB8D2; }
.ds-defil-baro { max-height: 330px; }
.ds-defil-baro .ds-baro { width: 100%; }
.ds-defil-baro .ds-baro-sect { max-width: 320px; }

/* ============ Calcul des droits à payer ============ */
.dr-page { max-width: 1180px; }

/* ---- Bandeau + fil des étapes : une seule carte ---- */
.dr-entete { border: 1px solid #E4EBE6; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 3px 14px rgba(18,40,62,.07); margin-bottom: 10px; }
.dr-tete { position: relative; display: flex; align-items: center; gap: 13px;
  background: linear-gradient(115deg, #0E3A2C 0%, #16543F 55%, #1C6B4A 100%);
  padding: 9px 16px 9px 22px; color: #fff; overflow: hidden; }
.dr-tete::after { content: ''; position: absolute; right: -70px; top: -90px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.05); }
/* Liseré aux couleurs nationales, sur la tranche gauche */
.dr-drapeau { position: absolute; left: 8px; top: 9px; bottom: 9px; width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, #7FD9AE 0 33.3%, #F4C542 33.3% 66.6%, #E8735F 66.6% 100%); }
.dr-tete-pic { width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: rgba(244,197,66,.16); border: 1px solid rgba(244,197,66,.45); color: #F4C542;
  display: flex; align-items: center; justify-content: center; }
.dr-tete-pic svg { width: 20px; height: 20px; }
.dr-tete-txt { min-width: 0; }
.dr-tete-txt h1 { font-size: 17px; font-family: var(--font-serif), Georgia, serif; margin: 0;
  font-weight: 700; letter-spacing: .005em; line-height: 1.2; }
.dr-tete-txt p { font-size: 11.5px; opacity: .8; margin: 1px 0 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dr-histo { margin-left: auto; flex: none; position: relative; z-index: 1;
  background: rgba(255,255,255,.94); border: 0; color: #0E3A2C; font-weight: 700;
  font-size: 11.5px; padding: 8px 15px; border-radius: 8px; cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); white-space: nowrap; }
.dr-histo:hover { background: #fff; }

/* ---- Fil des étapes ---- */
.dr-fil { display: flex; padding: 10px 8px 9px; }
.dr-pas { flex: 1; position: relative; background: none; border: 0; cursor: pointer;
  font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0 4px; }
.dr-pas:not(:first-child)::before { content: ''; position: absolute; top: 14px; height: 2px;
  right: calc(50% + 18px); left: calc(-50% + 18px); background: #E7EDE9; }
.dr-pas.on:not(:first-child)::before, .dr-pas.fait:not(:first-child)::before { background: #9FDCC0; }
.dr-pas-n { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 800; background: #fff;
  border: 2px solid #E4EBE6; color: #A9B4BD; position: relative; z-index: 1;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.dr-pas-t { font-size: 12px; font-weight: 700; color: #A9B4BD; line-height: 1.2; }
.dr-pas small { font-size: 10px; font-weight: 600; color: #C3CCD4; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.dr-pas.fait .dr-pas-n { background: #E3F1E9; border-color: #9FDCC0; color: #0F5C39; }
.dr-pas.fait .dr-pas-t { color: #33506A; }
.dr-pas.fait small { color: #0F6E56; }
.dr-pas.on .dr-pas-n { background: linear-gradient(135deg, #1F8A5B, #0F5C39); border-color: #0F5C39;
  color: #fff; box-shadow: 0 3px 9px rgba(15,92,57,.3); }
.dr-pas.on .dr-pas-t { color: #0F5C39; }
.dr-pas.on small { color: #6B7B8B; }
.dr-pas:disabled { cursor: default; }
.dr-pas.fait:hover .dr-pas-n, .dr-pas.on:hover .dr-pas-n { box-shadow: 0 3px 9px rgba(15,92,57,.28); }

/* ---- Corps deux colonnes ---- */
.dr-corps { display: grid; grid-template-columns: 1fr 310px; gap: 10px; align-items: start; }
/* Étape du décompte : une seule colonne, y compris sous les points de rupture
   ci-dessous (d'où la spécificité renforcée) — sinon une colonne vide de 280 px
   restait réservée au récapitulatif absent. */
.dr-corps.dr-corps-plein { grid-template-columns: 1fr; }
.dr-form { padding: 16px 20px 14px; min-width: 0; background: #fff; border: 1px solid #E4EBE6;
  border-radius: 14px; box-shadow: 0 3px 14px rgba(18,40,62,.06); }
.dr-aside { background: #fff; border: 1px solid #E4EBE6; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 3px 14px rgba(18,40,62,.06); }
.dr-as-t { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #8A99A8;
  font-weight: 700; margin-bottom: 10px; }
.dr-as-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed #E8EEEA; font-size: 12px; }
.dr-as-l span { color: #6B7B8B; flex: none; }
.dr-as-l b { color: #1C2B44; font-size: 12.5px; text-align: right; }
.dr-as-l.vide b { color: #C3CCD4; font-weight: 600; }
.dr-as-box { background: #F2FAF6; border: 1px solid #CFE3D8; border-radius: 12px; padding: 14px 16px;
  margin-top: 16px; text-align: center; }
.dr-as-box small { display: block; font-size: 10px; letter-spacing: 1px; color: #0F6E56;
  font-weight: 700; text-transform: uppercase; }
.dr-as-box b { display: block; font-size: 23px; color: #0F5C39; margin-top: 4px; }
.dr-as-box i { display: block; font-size: 10.5px; color: #5B6B7B; font-style: normal; margin-top: 3px; }
.dr-as-aide { font-size: 11px; color: #8A99A8; line-height: 1.5; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid #EEF2F0; }

/* ---- Formulaire ---- */
.dr-sec { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: #0F6E56; font-weight: 800; margin: 0 0 11px; padding-bottom: 7px;
  border-bottom: 1px solid #EDF1EE; }
.dr-sec:not(:first-child) { margin-top: 13px; }
.dr-sec i { font-style: normal; font-size: 9px; color: #D4A838; flex: none; line-height: 1; }
.dr-ch { margin-bottom: 10px; min-width: 0; }
.dr-ch label { display: block; font-size: 11.5px; font-weight: 700; color: #44586B; margin-bottom: 4px; }
.dr-ch input, .dr-ch select, .dr-ch textarea { width: 100%; background: #fff; border: 1.5px solid #DDE5E8;
  border-radius: 9px; padding: 8px 12px; font-size: 13px; color: #1C2B44; font-family: inherit; }
.dr-ch input:focus, .dr-ch select:focus, .dr-ch textarea:focus { outline: none; border-color: #157347;
  box-shadow: 0 0 0 3px rgba(21,115,71,.1); }
.dr-ch .champ-entreprise, .dr-ch .autoc-wrap { width: 100%; }
.dr-aide { font-size: 10.5px; color: #8A99A8; margin-top: 4px; }
.dr-gros-champ { font-size: 19px !important; font-weight: 800; color: #0F5C39 !important;
  text-align: right; letter-spacing: -.3px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }

/* Contrôle segmenté */
.dr-seg { display: flex; background: #E8EEEA; border-radius: 10px; padding: 3px; gap: 3px; }
.dr-seg-b { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; color: #5B6B7B;
  padding: 8px 6px; border-radius: 8px; border: none; background: none; cursor: pointer;
  font-family: inherit; transition: background .18s, color .18s, box-shadow .18s; }
.dr-seg-b:hover { color: #1C2B44; }
.dr-seg-b.on { background: #fff; color: #0F5C39; box-shadow: 0 1px 4px rgba(18,40,62,.14); }

/* Mesure (ancienneté, moyenne salariale) */
.dr-mesure { background: #F2FAF6; border: 1px solid #CFE3D8; border-radius: 12px;
  padding: 14px 18px; margin-top: 6px; }
.dr-mesure-n { font-size: 24px; font-weight: 800; color: #0F5C39; letter-spacing: -.4px; }
.dr-mesure-t { font-size: 12px; color: #44586B; margin-top: 2px; }
.dr-tranches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.dr-tr span { display: block; font-size: 10.5px; color: #8A99A8; margin-top: 4px; font-weight: 600; }
.dr-tr.on span { color: #0F6E56; }
.dr-tr-barre { height: 6px; background: #DDE9E2; border-radius: 3px; overflow: hidden; }
.dr-tr-barre i { display: block; height: 100%; background: linear-gradient(90deg, #1F8A5B, #7FD9AE); border-radius: 3px; }
.dr-salaires { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 12px; }
.dr-sal-case label { display: block; font-size: 10px; font-weight: 700; color: #8A99A8; margin-bottom: 3px; }
.dr-sal-case input { width: 100%; border: 1.5px solid #DDE5E8; border-radius: 8px; padding: 8px 9px;
  font-size: 12.5px; text-align: right; background: #fff; }
.dr-sal-case input:focus { outline: none; border-color: #157347; }
.dr-regle { font-size: 11.5px; color: #5B6B7B; background: #fff; border-left: 3px solid #C9D6E6;
  border-radius: 0 9px 9px 0; padding: 11px 15px; margin-top: 14px; line-height: 1.6; }
.dr-droits-ouverts { background: #EDF3F9; border-radius: 10px; padding: 11px 15px; font-size: 12.5px;
  color: #34495E; margin: -4px 0 4px; }
.dr-puce { display: inline-block; background: #D8F0E4; color: #0F5C39; padding: 2px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; margin: 2px 4px 2px 0; }
.dr-alerte { color: #A8460F; font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.dr-alerte-bloc { background: #FDF3E7; border: 1px solid #F0D9BC; border-radius: 10px;
  padding: 10px 15px; margin-bottom: 12px; }
.dr-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid #E4EBE6; }

/* ---- Décompte en cartes ---- */
.dr-cartes { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
.dr-carte-l { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(18,40,62,.07);
  overflow: hidden; border-left: 4px solid #157347; display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr auto; align-items: center; gap: 16px;
  padding: 9px 14px; }
.dr-carte-l.libre { border-left-color: #C9931B; }

.dr-cl-t { min-width: 0; }
.dr-cl-t b { font-size: 13px; color: #1C2B44; }
.dr-cl-ref { font-size: 10.5px; color: #8A99A8; font-style: italic; margin-top: 2px; }
.dr-cl-mt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; flex: none; }
.dr-mt-champ { width: 118px; text-align: right; border: 1.5px solid #DDE5E8; border-radius: 9px;
  padding: 6px 10px; font-size: 13.5px; font-weight: 800; color: #0F5C39; background: #F7FCF9; }
.dr-mt-champ:focus { outline: none; border-color: #157347; box-shadow: 0 0 0 3px rgba(21,115,71,.12); }
.dr-cl-mt em { font-size: 10px; color: #8A99A8; font-style: normal; }
.dr-cl-x { width: 26px; height: 26px; border-radius: 7px; background: #FBE7E5; color: #C0392B;
  border: none; cursor: pointer; font-size: 11px; font-weight: 700; }
.dr-cl-x:hover { background: #F7D6D2; }
.dr-ecart { width: 100%; text-align: right; font-size: 10.5px; color: #B26B15; font-style: italic; }
.dr-cl-b { min-width: 0; border-left: 1px dashed #E8EEEA; padding-left: 16px; }
.dr-cl-b:empty { border-left: 0; padding-left: 0; }
.dr-cl-b div { font-size: 11px; color: #5B6B7B; line-height: 1.55;
  font-family: Consolas, 'DejaVu Sans Mono', monospace; }
.dr-ajout { display: flex; gap: 9px; margin: 10px 0 4px; align-items: center; flex-wrap: wrap; }
.dr-ajout input { border: 1.5px solid #DDE5E8; border-radius: 9px; padding: 8px 12px;
  font-size: 12.5px; background: #fff; }
.dr-ajout input:first-child { flex: 1; min-width: 240px; border-style: dashed; border-color: #C9D6E6; }
.dr-ajout input:nth-child(2) { width: 130px; text-align: right; }

/* Total en bandeau */
.dr-hero { background: linear-gradient(120deg, #0F5C39, #157347 60%, #1F8A5B); border-radius: 14px;
  color: #fff; padding: 13px 22px; display: flex; align-items: center; gap: 22px;
  box-shadow: 0 6px 20px rgba(21,115,71,.26); margin-top: 10px; flex-wrap: wrap; }
.dr-hero-g { flex: 1; min-width: 260px; }
.dr-hero-g small { font-size: 10.5px; letter-spacing: 1.4px; opacity: .85; font-weight: 700; }
.dr-hero-g b { display: block; font-size: 27px; margin-top: 1px; letter-spacing: -.6px; }
.dr-hero-g i { display: block; font-size: 11.5px; opacity: .85; font-style: italic; margin-top: 4px; }
.dr-hero-d { text-align: right; font-size: 12px; }
.dr-hero-d > div { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 3px 0; }
.dr-hero-d u { text-decoration: none; opacity: .78; }
.dr-hero-d span { font-weight: 700; }
.dr-hero-d em { font-style: normal; opacity: .7; font-size: 10.5px; }
.dr-ded-champ { width: 120px; text-align: right; border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px; padding: 6px 10px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.dr-ded-champ:focus { outline: none; background: rgba(255,255,255,.24); }
.dr-fin { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid #E4EBE6; }
.dr-obs { min-width: 0; }
.dr-obs .dr-ch { margin-bottom: 0; }
.dr-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.dr-lien-aide { font-size: 11.5px; color: #5B6B7B; margin-top: 7px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-table-histo { width: 100%; border-collapse: collapse; }
.dr-table-histo thead th { background: #24425B; color: #fff; font-size: 10.5px; letter-spacing: .7px;
  text-align: left; padding: 9px 12px; text-transform: uppercase; }
.dr-table-histo td { padding: 9px 12px; border-bottom: 1px solid #EEF2F5; font-size: 12.5px; }
.dr-col-montant { text-align: right; white-space: nowrap; font-weight: 700; }
@media (max-width: 1360px) {
  .dr-corps { grid-template-columns: 1fr 280px; }
  .dr-salaires { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1120px) {
  .dr-corps { grid-template-columns: 1fr; }
  .dr-carte-l { grid-template-columns: 1fr; gap: 7px; }
  .dr-cl-b { border-left: 0; padding-left: 0; border-top: 1px dashed #E8EEEA; padding-top: 7px; }
  .dr-cl-mt { justify-content: flex-start; }
  .dr-fin { grid-template-columns: 1fr; }
  .dr-aside { border-left: none; border-top: 1px solid #E4EBE6; }
  .grid-3 { grid-template-columns: 1fr; }
}

/* Climat social — CC : dossiers exposés au préavis de grève */
.cc-risque { display: flex; flex-direction: column; gap: 6px; }
.cc-risque-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #FBE7E5; border-left: 3px solid #B03A2A; border-radius: 0 8px 8px 0;
  padding: 8px 14px; font-size: 12.5px; }
.cc-risque-num { font-weight: 800; color: #8E2A1D; white-space: nowrap; }
.cc-risque-emp { font-weight: 700; color: #24425B; }
.cc-risque-tr { color: #5B6B7B; font-size: 11.5px; }
.cc-risque-j { margin-left: auto; font-weight: 700; color: #B03A2A; white-space: nowrap; }
.cc-risque-plus { font-size: 11.5px; color: #8A99A8; font-style: italic; padding-left: 14px; }

/* Bandeau d'alerte « préavis de grève » du tableau de bord Climat social — CC :
   hauteur libre (contrairement aux cartes fixes de 260 px) pour éviter le vide. */
.cc-alerte { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--a-shadow); overflow: hidden; position: relative; margin-bottom: 14px; }
.cc-alerte::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: #B03A2A; }
.cc-alerte-h { font-weight: 700; font-size: 13.5px; color: #8E2A1D; padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line); font-family: var(--font-sans); line-height: 1.35;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,249,246,.55)); }
.cc-alerte .cc-risque { padding: 10px 14px; }

/* ================= REGISTRE DU PERSONNEL ================= */
.rp-barre { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; flex-wrap: wrap; }
.rp-rech { flex: 1; min-width: 220px; position: relative; }
.rp-rech input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; font-size: 13px; font-family: inherit; }
.rp-rech span { position: absolute; left: 11px; top: 8px; opacity: .45; }
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-chip { padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 600; color: #5B6B7B; cursor: pointer; font-family: inherit; }
.rp-chip:hover { border-color: #B7C8BE; color: #0F5C4A; }
.rp-chip.on { background: #0F5C4A; border-color: #0F5C4A; color: #fff; }
.rp-btn { padding: 9px 16px; border-radius: 9px; background: #0F5C4A; color: #fff; font-weight: 700;
  font-size: 12.5px; border: 0; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; }
.rp-btn:hover { background: #0c4c3e; }
.rp-btn-sm { padding: 6px 12px; font-size: 11.5px; }
.rp-stats { display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--a-shadow); margin-bottom: 16px; }
.rp-stat { display: flex; flex-direction: column; gap: 2px; padding-right: 16px;
  border-right: 1px solid #EEE9E0; }
.rp-stat:last-child { border-right: 0; }
.rp-stat b { font-family: var(--font-serif), serif; font-size: 22px; color: #12283E; line-height: 1; }
.rp-stat small { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #8A99A8;
  font-weight: 700; line-height: 1.25; }
.rp-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rp-c { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--a-shadow);
  overflow: hidden; position: relative; display: flex; flex-direction: column; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.rp-c:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18,40,62,.12); }
.rp-c::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #1F8A5B; }
.rp-c.appui::before { background: #C98A2C; }
.rp-c-h { display: flex; gap: 12px; padding: 16px 16px 12px; align-items: flex-start; }
.rp-av { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, #2E9E5B, #0F5C4A); box-shadow: 0 2px 6px rgba(15,92,74,.25); }
.rp-c.appui .rp-av { background: linear-gradient(135deg, #D9A93F, #8a5a12);
  box-shadow: 0 2px 6px rgba(138,90,18,.25); }
.rp-nom { font-weight: 800; font-size: 14.5px; color: #12283E; line-height: 1.25; }
.rp-fonc { font-size: 11.5px; color: #5B6B7B; margin-top: 1px; }
.rp-mat { font-size: 10.5px; color: #9AA3AD; margin-top: 3px; font-variant-numeric: tabular-nums; }
.rp-etat { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px;
  border-radius: 20px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.rp-etat.srv { background: #E3F1E9; color: #0F5C4A; }
.rp-etat.cg { background: #FBF1DD; color: #8a5a12; }
.rp-etat.ms { background: #E3F0FA; color: #1F6FB2; }
.rp-meta { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  color: #5B6B7B; }
.rp-meta div { display: flex; gap: 7px; align-items: flex-start; }
.rp-mini { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #F1EFE9; margin-top: auto; }
.rp-mini > div { padding: 9px 6px; text-align: center; border-right: 1px solid #F1EFE9; }
.rp-mini > div:last-child { border-right: 0; }
.rp-mini b { display: block; font-size: 16px; font-weight: 800; color: #12283E;
  font-family: var(--font-serif), serif; }
.rp-mini small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8A99A8;
  font-weight: 700; }
.rp-pied { padding: 9px 16px; background: #FAFBF8; border-top: 1px solid #F1EFE9; font-size: 11.5px;
  font-weight: 700; color: #0F5C4A; display: flex; justify-content: space-between; align-items: center; }
.rp-retour { margin: 12px 0 0; }
.rp-lien { background: none; border: 0; color: #0F5C4A; font-weight: 700; font-size: 12.5px;
  cursor: pointer; padding: 0; font-family: inherit; }
.rp-lien:hover { text-decoration: underline; }
.rp-form h4 { margin: 14px 0 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #0F5C4A; font-weight: 800; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.rp-form h4:first-child { margin-top: 0; }
.rp-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ---- Dossier de l'agent ---- */
.fa-tete { display: flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, #0F5C4A, #14766A 55%, #1F8A5B); border-radius: 14px;
  padding: 18px 22px; color: #fff; box-shadow: 0 6px 18px rgba(15,92,74,.28); margin: 10px 0 14px;
  position: relative; overflow: hidden; }
.fa-tete::after { content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.06); }
.fa-av { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; flex-shrink: 0; }
.fa-id h2 { margin: 0; font-family: var(--font-serif), serif; font-size: 24px; font-weight: 700; }
.fa-id .fa-f { opacity: .92; font-size: 13px; margin-top: 2px; }
.fa-id .fa-m { opacity: .78; font-size: 11.5px; margin-top: 6px; display: flex; gap: 16px; flex-wrap: wrap;
  align-items: center; }
.fa-etat { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); padding: 4px 12px;
  border-radius: 20px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fa-act { margin-left: auto; display: flex; gap: 8px; position: relative; z-index: 1; flex-wrap: wrap;
  justify-content: flex-end; }
.fa-act button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.38); color: #fff;
  padding: 8px 14px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap; }
.fa-act button:hover { background: rgba(255,255,255,.26); }
.fa-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
  flex-wrap: wrap; }
.fa-ong { padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: #6B7A88;
  border-bottom: 2.5px solid transparent; cursor: pointer; white-space: nowrap; }
.fa-ong:hover { color: #0F5C4A; }
.fa-ong.on { color: #0F5C4A; border-bottom-color: #0F5C4A; }
.fa-ong b { background: #EDF1EC; border-radius: 20px; padding: 1px 7px; font-size: 10.5px;
  margin-left: 6px; color: #5B6B7B; }
.fa-filtres { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.fa-fc { padding: 6px 13px; border-radius: 20px; border: 1px solid var(--line); background: #fff;
  font-size: 11.5px; font-weight: 700; color: #5B6B7B; cursor: pointer; font-family: inherit; }
.fa-fc:hover { border-color: #B7C8BE; color: #0F5C4A; }
.fa-fc.on { background: #0F5C4A; border-color: #0F5C4A; color: #fff; }
.fa-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--a-shadow);
  overflow: hidden; position: relative; margin-bottom: 14px; }
.fa-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #1F8A5B; }
.fa-panel-h { font-weight: 700; font-size: 13.5px; color: #14663f; padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,249,246,.55)); }
table.fa-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fa-t th { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: #8A99A8;
  font-weight: 800; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
.fa-t td { padding: 9px 12px; border-bottom: 1px solid #F5F3EE; vertical-align: middle; }
.fa-t tbody tr:hover { background: #FAFBF8; cursor: pointer; }
.fa-t tr:last-child td { border-bottom: 0; }
.fa-num { font-weight: 800; color: #12283E; white-space: nowrap; }
.fa-type { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fa-type.ci { background: #E7EDF5; color: #24425B; }
.fa-type.cc { background: #F7E6E1; color: #8E2A1D; }
.fa-type.dg { background: #FBF1DD; color: #8a5a12; }
.fa-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.fa-badge.ok { background: #E3F1E9; color: #0F5C4A; }
.fa-badge.enc { background: #FBF1DD; color: #8a5a12; }
.fa-badge.non { background: #F1F0EC; color: #6B7A88; }
.fa-issue { font-weight: 700; font-size: 11.5px; }
.fa-issue.t { color: #0F5C4A; } .fa-issue.p { color: #8a5a12; } .fa-issue.n { color: #B03A2A; }
.fa-vide { color: #B9C0C7; }
.fa-pied { padding: 10px 14px; background: #FAFBF8; border-top: 1px solid #F1EFE9; font-size: 11.5px;
  color: #6B7A88; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fa-blocs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fa-bloc { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--a-shadow);
  padding: 14px 16px 16px; position: relative; overflow: hidden; }
.fa-bloc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #1F8A5B; }
.fa-bloc h3 { margin: 2px 0 12px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #14663f; font-weight: 800; }
.fa-infos { display: flex; flex-direction: column; gap: 8px; }
.fa-info { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline;
  font-size: 12.5px; }
.fa-info small { font-size: 11px; color: #8A99A8; font-weight: 600; }
.fa-info b { color: #12283E; font-weight: 700; }
.fa-info b.vide { color: #C4CAD0; font-weight: 500; font-style: italic; }
.fa-resume { display: flex; gap: 10px; padding: 12px 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: #FAFBF8; }
.fa-res-c { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px;
  text-align: center; min-width: 104px; }
.fa-res-c b { display: block; font-family: var(--font-serif), serif; font-size: 19px; color: #0F5C4A; }
.fa-res-c small { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #8A99A8;
  font-weight: 700; }
.fa-journal { display: flex; flex-direction: column; }
.fa-j { display: grid; grid-template-columns: 150px 250px 1fr; gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid #F5F3EE; font-size: 12.5px; align-items: baseline; }
.fa-j:last-child { border-bottom: 0; }
.fa-j-d { color: #8A99A8; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fa-j-l { font-weight: 700; color: #12283E; }
.fa-j-x { color: #5B6B7B; }
@media (max-width: 1200px) {
  .rp-grille { grid-template-columns: repeat(2, 1fr); }
  .fa-blocs { grid-template-columns: 1fr; }
  .rp-stats { grid-template-columns: repeat(4, 1fr); gap: 10px 0; }
}

/* Champ non modifiable du module Calcul des droits (textes appliqués) */
.dr-fixe { background: #F4F7F5; border: 1.5px dashed #D7E2DA; border-radius: 9px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; color: #0F5C39; }

/* Lien vers un texte de référence, sous un champ du calcul des droits : le
   texte lui-même s'ouvre en fenêtre plutôt que d'être résumé en commentaire. */
.dr-lien-texte { margin: 14px 0 0; }
.lien-doc { display: inline-flex; align-items: flex-start; gap: 7px; text-align: left;
  background: #F4F7F5; border: 1px solid #D7E2DA; border-radius: 9px; padding: 9px 13px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #0F5C39;
  cursor: pointer; max-width: 640px; }
.lien-doc:hover { background: #E9F1EC; border-color: #B9CFC2; text-decoration: underline; }
.lien-doc:focus-visible { outline: 2px solid #0F5C39; outline-offset: 2px; }

/* Pages d'un document de référence affichées en fenêtre : hauteur bornée, la
   fenêtre garde ses boutons visibles et le document défile à l'intérieur. */
.doc-pages { max-height: min(56vh, 560px); overflow-y: auto; background: #EEF2F0;
  border: 1px solid #D7E2DA; border-radius: 8px; padding: 10px; display: grid; gap: 10px; }
.doc-pages img { width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid #D7E2DA; border-radius: 4px; }

/* Ligne de l'historique des décomptes : elle ouvre l'état des droits. */
.dr-table-histo .dr-histo-l { cursor: pointer; }
.dr-table-histo .dr-histo-l:hover > td { background: #F1F6F3; }
.dr-table-histo .dr-histo-l:focus-visible { outline: 2px solid #0F5C39; outline-offset: -2px; }

/* ===== Plaintes collectives =====
   Une plainte portée par plusieurs travailleurs s'affiche sous le nom du
   premier plaignant, suivi d'une pastille indiquant le nombre de collègues :
   la colonne reste compacte et l'œil repère aussitôt un dossier collectif. */
.pl-autres { display: inline-block; background: #EDF3EF; border: 1px solid #CFE0D6;
  border-radius: 20px; padding: 0 8px; font-size: 11px; font-weight: 700;
  color: #0F5C4A; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
/* Sélecteur de volet du formulaire de plainte (réutilise l'aspect .dr-seg) */
.pl-volets { margin: -4px 0 16px; }
/* Intertitre séparant les éléments communs des travailleurs concernés */
.pl-sect { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #0F5C4A; }
.pl-sect::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ===== Règlement d'une plainte collective ===== */
/* Sélecteur des deux volets (réutilise l'aspect .dr-seg) */
.pv-volets { margin: -4px 0 14px; }
/* Avancement des procès-verbaux : validés, jauge, restants */
.pv-jauge { display: flex; align-items: center; gap: 10px; background: #EDF3EF;
  border: 1px solid #CFE0D6; border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; }
.pv-jauge .b { flex: 1; height: 7px; border-radius: 6px; background: #D6E3DA; overflow: hidden; }
.pv-jauge .b i { display: block; height: 100%; background: #0F5C4A; border-radius: 6px; }
.pv-jauge .t { font-size: 12.5px; font-weight: 700; color: #1C2B44; white-space: nowrap; }
.pv-jauge .r { font-size: 12.5px; color: #6B7A88; white-space: nowrap; }
/* Liste des parties : une ligne par travailleur */
.pv-liste { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pv-tete, .pv-l { display: grid; grid-template-columns: 34px 1fr 1fr 1.2fr 28px;
  gap: 8px; align-items: center; }
.pv-tete { padding: 7px 8px; background: #1C3D33; color: #fff; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pv-l { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pv-l:last-child { border-bottom: 0; }
.pv-l:nth-child(odd) { background: #FAFBFA; }
.pv-l .n { font-size: 11.5px; font-weight: 800; color: #6B7A88; text-align: center; }
.pv-l input { padding: 5px 8px; font-size: 12.5px; }
.pv-l .ok { text-align: center; font-size: 13px; }
.pv-aide { font-size: 12.5px; color: #6B7A88; margin: 8px 2px 0; }
/* Détail des procès-verbaux individuels dans la fiche d'un dossier collectif */
.pv-detail { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pv-detail th { text-align: left; padding: 5px 8px; background: #F2F5F3;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #4A5A68; border-bottom: 1px solid var(--line); }
.pv-detail td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.pv-detail tr:last-child td { border-bottom: 0; }

/* ===== Socle multi-inspections : annuaire des services et des comptes ===== */
.insp-t td, .insp-t th { padding: 6px 10px; }
.insp-t td:last-child { white-space: nowrap; }
.insp-t td:last-child .btn { padding: 4px 9px; font-size: 12px; }
/* Code d'un service : il porte l'en-tête des actes et les numéros de registre */
.insp-code { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 700; color: #0F5C4A; background: #EDF3EF;
  border: 1px solid #CFE0D6; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.insp-nom { font-weight: 700; }
.insp-chef { font-size: 12px; color: #6B7A88; }
/* Nombre de comptes : cliquable, il conduit à l'annuaire filtré */
.insp-nb { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700;
  font-size: 13px; color: #0F5C4A; background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 2px 6px; }
.insp-nb:hover { color: #B8902F; }
/* Barre de filtre de l'annuaire */
.barre-f { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barre-f select, .barre-f input { padding: 7px 10px; font-size: 13px; }
.barre-f .cpt { margin-left: auto; font-size: 12.5px; color: #6B7A88; }
/* Portée d'un compte : nationale (Direction générale) ou régionale */
.portee-n { background: #FBF0DC; border: 1px solid #E8D5A8; color: #8A6A16;
  border-radius: 20px; padding: 1px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.portee-r { background: #EDF1F6; border: 1px solid #D3DEEA; color: #3D566E;
  border-radius: 20px; padding: 1px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* Filtre d'inspection des tableaux de bord de la Direction générale */
.tdb-select-insp { font-weight: 700; }
/* Un service qui n'a pas encore saisi de dossier reste en retrait */
.nat-dormante { opacity: .55; }
.nat-table th, .nat-table td { padding: 6px 8px; }