/* ═══════════════════════════════════════════════
   DEMISSIONS.CSS — Panel Démissions Légitimes
   ═══════════════════════════════════════════════ */

#panel-demissions {
  --navy:#0a1628; --navy2:#1a3a6b; --blue:#0d6efd; --blue-lt:#cce5ff; --blue-bg:#e8f4fd;
  --green:#198754; --green-lt:#c3e6cb; --green-bg:#e8f5e9; --orange:#fd7e14;
  --orange-lt:#ffd699; --orange-bg:#fff3e0; --purple:#6f42c1; --purple-lt:#e2c4f5;
  --purple-bg:#f3e5f5; --red:#dc3545; --red-lt:#f5c6cb; --red-bg:#fce4e4;
  --text:#1e293b; --text2:#475569; --text3:#94a3b8; --border:#e2e8f0;
  --surface:#f0f4f9; --white:#ffffff; --radius:14px;
  --shadow:0 2px 8px rgba(0,0,0,.05); --shadow-lg:0 16px 48px rgba(0,0,0,.14);
}

/* ── Header ───────────────────────────────── */
#panel-demissions .header { background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,var(--blue) 100%); position:relative; overflow:hidden; }
#panel-demissions .header::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 18% 55%,rgba(13,110,253,.32) 0%,transparent 50%),radial-gradient(circle at 82% 18%,rgba(255,255,255,.05) 0%,transparent 42%); pointer-events:none; }
#panel-demissions .header-inner    { max-width:1200px; margin:0 auto; padding:36px 24px 32px; position:relative; }
#panel-demissions .header-top      { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
#panel-demissions .header-icon     { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:10px 14px; backdrop-filter:blur(10px); font-size:28px; line-height:1; }
#panel-demissions .header-eyebrow  { color:rgba(255,255,255,.6); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin-bottom:3px; }
#panel-demissions .header-title    { color:#fff; font-size:26px; font-weight:800; letter-spacing:-.5px; }
#panel-demissions .header-subtitle { color:rgba(255,255,255,.72); font-size:14px; line-height:1.65; margin:0 0 22px 72px; max-width:580px; }
#panel-demissions .header-stats    { display:flex; gap:10px; flex-wrap:wrap; margin-left:72px; }
#panel-demissions .stat-pill       { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:7px 16px; display:flex; align-items:center; gap:8px; backdrop-filter:blur(8px); }
#panel-demissions .stat-num        { font-size:19px; font-weight:800; }
#panel-demissions .stat-lbl        { color:rgba(255,255,255,.7); font-size:12px; font-weight:500; }

/* ── Toolbar recherche ────────────────────── */
#panel-demissions .toolbar       { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:200; box-shadow:0 2px 14px rgba(0,0,0,.06); }
#panel-demissions .toolbar-inner { max-width:1200px; margin:0 auto; padding:12px 24px 10px; }
#panel-demissions .search-wrap   { position:relative; max-width:420px; margin-bottom:10px; }
#panel-demissions .search-icon   { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--text3); pointer-events:none; }
#panel-demissions #panel_demissions_searchInput { width:100%; padding:9px 14px 9px 38px; border:1.5px solid var(--border); border-radius:10px; font-size:13.5px; font-family:inherit; outline:none; background:#f8fafc; color:var(--text); transition:border-color .2s; }
#panel-demissions #panel_demissions_searchInput:focus { border-color:var(--blue); background:#fff; }
#panel-demissions .filters       { display:flex; gap:7px; flex-wrap:wrap; }
#panel-demissions .filter-btn    { display:flex; align-items:center; gap:5px; padding:6px 13px; border-radius:20px; border:1.5px solid var(--border); background:var(--white); color:var(--text2); font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .18s; }
#panel-demissions .filter-btn:hover { border-color:#94a3b8; background:#f8fafc; }
#panel-demissions .filter-btn.active { color:#fff; border-color:transparent; }
#panel-demissions .filter-count  { border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700; background:rgba(0,0,0,.12); color:inherit; }
#panel-demissions .filter-btn:not(.active) .filter-count { background:#f1f5f9; color:#64748b; }

/* ── Grille de cartes ─────────────────────── */
#panel-demissions main          { max-width:1200px; margin:0 auto; padding:26px 24px 40px; }
#panel-demissions .results-info { font-size:13px; color:var(--text3); font-weight:500; margin-bottom:16px; }
#panel-demissions .results-info span { color:var(--blue); }
#panel-demissions #panel_demissions_grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:17px; }
#panel-demissions .card { background:var(--white); border-radius:var(--radius); border:1.5px solid transparent; padding:22px 22px 18px; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,border-color .2s; position:relative; overflow:hidden; box-shadow:var(--shadow); animation:fadeIn-d .3s ease both; }
@keyframes fadeIn-d { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
#panel-demissions .card:hover  { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.1); }
#panel-demissions .card-strip  { position:absolute; top:0; left:0; right:0; height:4px; border-radius:14px 14px 0 0; }
#panel-demissions .card-top    { display:flex; align-items:flex-start; gap:13px; margin-bottom:11px; }
#panel-demissions .card-emoji  { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:23px; flex-shrink:0; border:1px solid transparent; }
#panel-demissions .card-meta   { flex:1; min-width:0; }
#panel-demissions .card-badge  { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; border:1px solid transparent; }
#panel-demissions .card-num    { font-size:10.5px; color:var(--text3); margin-left:6px; }
#panel-demissions .card-title  { font-size:14.5px; font-weight:700; color:var(--text); line-height:1.3; margin-bottom:2px; }
#panel-demissions .card-subtitle { font-size:11.5px; color:var(--text3); }
#panel-demissions .card-resume { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#panel-demissions .card-footer { display:flex; align-items:center; justify-content:space-between; }
#panel-demissions .card-docs   { font-size:12px; color:var(--text3); display:flex; align-items:center; gap:5px; }
#panel-demissions .card-cta    { font-size:12px; font-weight:600; display:flex; align-items:center; gap:3px; }
#panel-demissions .card-alert  { margin-top:10px; padding:7px 10px; background:#fff8e1; border:1px solid #ffeaa0; border-radius:8px; font-size:11.5px; color:#7c5c00; line-height:1.5; }

/* ── État vide ────────────────────────────── */
#panel-demissions .empty       { text-align:center; padding:60px 0; color:var(--text3); }
#panel-demissions .empty-icon  { font-size:40px; margin-bottom:10px; }
#panel-demissions .empty-title { font-size:16px; font-weight:600; }
#panel-demissions .empty-sub   { font-size:13px; margin-top:5px; }

/* ── Overlay & Modale ─────────────────────── */
#panel-demissions #panel_demissions_overlay { position:fixed; inset:0; background:rgba(10,22,40,.65); backdrop-filter:blur(6px); z-index:900; display:none; align-items:center; justify-content:center; padding:20px; }
#panel-demissions #panel_demissions_overlay.open { display:flex; }
#panel-demissions #panel_demissions_modal  { background:var(--white); border-radius:20px; max-width:660px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:slideUp-d .22s ease; }
@keyframes slideUp-d { from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
#panel-demissions .modal-head      { padding:24px 28px 20px; border-bottom:1px solid transparent; border-radius:20px 20px 0 0; position:sticky; top:0; z-index:10; }
#panel-demissions .modal-head-row  { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#panel-demissions .modal-head-left { display:flex; align-items:flex-start; gap:14px; }
#panel-demissions .modal-big-icon  { width:56px; height:56px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid transparent; box-shadow:0 4px 12px rgba(0,0,0,.06); flex-shrink:0; }
#panel-demissions .modal-badge     { display:inline-block; color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
#panel-demissions .modal-title     { font-size:20px; font-weight:800; color:#0f172a; line-height:1.2; margin-bottom:2px; }
#panel-demissions .modal-subtitle  { font-size:13px; color:var(--text3); }
#panel-demissions .modal-close     { background:#f1f5f9; border:none; border-radius:10px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:17px; color:var(--text2); flex-shrink:0; transition:background .15s; font-family:inherit; }
#panel-demissions .modal-close:hover { background:#e2e8f0; }
#panel-demissions .modal-body      { padding:24px 28px; }
#panel-demissions .modal-resume    { border-radius:12px; padding:14px 16px; margin-bottom:20px; border:1px solid transparent; font-size:14px; color:#334155; line-height:1.7; font-style:italic; }
#panel-demissions .section-label   { display:inline-block; color:#fff; font-size:11px; font-weight:700; padding:2px 9px; border-radius:6px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
#panel-demissions .modal-definition { font-size:14px; color:#374151; line-height:1.78; margin-bottom:22px; }
#panel-demissions .modal-alert     { background:#fff8e1; border:1.5px solid #ffcc02; border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:13px; color:#6d4c00; line-height:1.6; }
#panel-demissions .justif-list     { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
#panel-demissions .justif-item     { display:flex; align-items:flex-start; gap:11px; padding:11px 14px; background:#f8fafc; border-radius:10px; border:1px solid #e8eef5; }
#panel-demissions .justif-num      { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; border:1px solid transparent; }
#panel-demissions .justif-text     { font-size:13.5px; color:#374151; line-height:1.55; padding-top:3px; }
#panel-demissions .modal-meta      { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
#panel-demissions .meta-box        { border-radius:10px; padding:12px 14px; }
#panel-demissions .meta-box-green  { background:#f0fdf4; border:1px solid #bbf7d0; }
#panel-demissions .meta-box-blue   { background:#eff6ff; border:1px solid #bfdbfe; }
#panel-demissions .meta-box-label  { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
#panel-demissions .meta-box-green .meta-box-label { color:#166534; }
#panel-demissions .meta-box-blue  .meta-box-label { color:#1d4ed8; }
#panel-demissions .meta-box-value  { font-size:12.5px; line-height:1.5; }
#panel-demissions .meta-box-green .meta-box-value { color:#14532d; }
#panel-demissions .meta-box-blue  .meta-box-value { color:#1e3a8a; font-family:'Courier New',monospace; font-size:11.5px; }
#panel-demissions .modal-btn-close { width:100%; padding:13px; color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:opacity .15s,transform .1s; }
#panel-demissions .modal-btn-close:hover  { opacity:.88; transform:translateY(-1px); }
#panel-demissions .modal-btn-close:active { transform:translateY(0); }

/* ── Footer ───────────────────────────────── */
#panel-demissions footer        { background:#1e293b; padding:22px 24px; }
#panel-demissions .footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
#panel-demissions .footer-source { font-size:12px; color:rgba(255,255,255,.5); }
#panel-demissions .footer-source a { color:#4fc3f7; text-decoration:none; }
#panel-demissions .footer-note   { font-size:11px; color:rgba(255,255,255,.35); }

/* ── Responsive ───────────────────────────── */
@media (max-width:600px) {
  #panel-demissions .header-subtitle,
  #panel-demissions .header-stats { margin-left:0; }
  #panel-demissions .modal-meta   { grid-template-columns:1fr; }
  #panel-demissions .modal-body   { padding:18px; }
  #panel-demissions .modal-head   { padding:18px 18px 16px; }
  #panel-demissions #panel_demissions_grid { grid-template-columns:1fr; }
  #panel-demissions .header-stats { display:none; }
}