<style>
  :root {
    --bg:        #1a223;
    --bg2:       #1e2840;
    --bg3:       #243050;
    --bordure:   #2e3d58;
    --texte:     #ffffff;
    --texte2:    #8a9bb5;
    --texte3:    #c0cce0;
    --accent:    #e8820c;
    --accent2:   #f59d3a;
    --rouge:     #e05040;
    --rouge-p:   rgba(224,80,64,.15);
    --vert:      #3ab870;
    --vert-p:    rgba(58,184,112,.12);
    --bleu-tag:  rgba(255,255,255,.06);
    --bleu-tag-h:rgba(255,255,255,.12);
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    background: var(--bg);
    color: var(--texte);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
  }

  .hero { padding: 40px 40px 32px; border-left: 4px solid var(--accent); margin: 32px 40px 0; }
  .hero h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 42px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; color: var(--texte); margin-bottom: 12px; }
  .hero-sub { color: var(--texte2); font-size: 15px; font-weight: 400; max-width: 600px; }
  .hero-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bordure); }
  .hero-stats { display: flex; gap: 32px; }
  .hstat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 700; color: var(--texte); line-height: 1; }
  .hstat-label { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texte2); margin-top: 3px; }
  .btn-alertes { background: var(--accent); color: #1a223; border: none; padding: 11px 24px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
  .btn-alertes:hover { background: var(--accent2); }

  .approche-band { display: flex; overflow-x: auto; gap: 0; padding: 0 40px; margin-top: 28px; border-bottom: 1px solid var(--bordure); }
  .atab { padding: 12px 20px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--texte2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: all .2s; display: flex; align-items: center; gap: 8px; }
  .atab:hover { color: var(--texte); }
  .atab.on { color: var(--texte); border-bottom-color: var(--accent); }
  .atab-n { background: var(--bleu-tag); color: var(--texte2); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
  .atab.on .atab-n { background: var(--accent); color: #1a223; }

  .layout { display: grid; grid-template-columns: 260px 1fr; min-height: 600px; }

  .sidebar { background: var(--bg2); border-right: 1px solid var(--bordure); padding: 28px 20px; position: sticky; top: 0; height: fit-content; max-height: 100vh; overflow-y: auto; }
  .sb-s { margin-bottom: 28px; }
  .sb-t { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte2); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bordure); }
  .search-box { width: 100%; padding: 10px 13px; background: var(--bg3); border: 1px solid var(--bordure); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; color: var(--texte); outline: none; transition: border-color .2s; }
  .search-box:focus { border-color: var(--accent); }
  .search-box::placeholder { color: var(--texte2); }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--bordure); background: transparent; color: var(--texte2); cursor: pointer; transition: all .15s; }
  .chip.on { background: var(--accent); color: #1a223; border-color: var(--accent); }
  .chip:hover:not(.on) { border-color: var(--texte2); color: var(--texte); }

  .flist { display: flex; flex-direction: column; gap: 2px; }
  .fi { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
  .fi:hover { background: var(--bg3); }
  .fi.on { background: var(--accent); color: #1a223; }
  .fi.on .fi-n { color: #1a223; font-weight: 700; }
  .fi-l { font-size: 13px; font-weight: 500; }
  .fi-n { font-size: 12px; color: var(--texte2); font-weight: 600; }

  .src-list { display: flex; flex-direction: column; gap: 2px; }
  .src { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
  .src:hover { background: var(--bg3); }
  .src.on { border-color: var(--bordure); background: var(--bg3); }
  .src:not(.on) { opacity: .45; }

  .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .d-cca   { background: #e8820c; }
  .d-wim   { background: #3a9be8; }
  .d-scr   { background: #3ae870; }
  .d-wbi   { background: #c83ae8; }
  .d-med   { background: #3a70e8; }
  .d-ecc   { background: #e8c83a; }
  .d-frb   { background: #e83a3a; }
  .d-spf   { background: #3ae8e8; }
  .d-sacd  { background: #9a9a9a; }
  .d-cba   { background: #3ae870; }
  .d-cocof { background: #e87a3a; }
  .d-vbxl  { background: #7a3ae8; }
  .d-gsara { background: #3ae8c8; }
  .d-cvb   { background: #e8e83a; }
  .d-voc   { background: #e83a9a; }
  .d-lotn  { background: #3a9a3a; }
  .d-bifff { background: #e83a3a; }
  .d-bsff  { background: #3a6ae8; }
  .d-baff  { background: #9a6a3a; }
  .d-sabam { background: #e83a6a; }
  .d-bela  { background: #6ae83a; }

  .src-name { font-size: 13px; font-weight: 500; color: var(--texte); }
  .src-type { font-size: 11px; color: var(--texte2); }

  .src-group-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte2); padding: 10px 10px 4px; opacity: .6; }

  .main { padding: 28px 32px; }
  .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .res-info { font-size: 13px; font-weight: 500; color: var(--texte2); letter-spacing: .04em; }
  .res-info strong { color: var(--texte); }

  .loading-state { text-align: center; padding: 80px 20px; color: var(--texte2); }
  .loading-spinner { width: 36px; height: 36px; border: 2px solid var(--bordure); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .empty-state { text-align: center; padding: 80px 20px; color: var(--texte2); font-size: 14px; }

  .urgency-banner { background: var(--rouge-p); border: 1px solid rgba(224,80,64,.3); border-left: 4px solid var(--rouge); padding: 12px 18px; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .ub-tag { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); white-space: nowrap; }
  .ub-text { font-size: 14px; flex: 1; color: var(--texte); }
  .ub-date { font-size: 13px; color: var(--rouge); font-weight: 600; white-space: nowrap; }

  .sec-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; }
  .sec-lbl { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texte2); white-space: nowrap; }
  .sec-rule { flex: 1; height: 1px; background: var(--bordure); }

  .cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
  .card { background: var(--bg2); border: 1px solid var(--bordure); overflow: hidden; transition: all .2s; cursor: pointer; }
  .card:hover { border-color: var(--accent); background: var(--bg3); }
  .card-body { padding: 18px 22px 14px; }
  .card-r1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .card-src { display: flex; align-items: center; gap: 8px; }
  .card-src-dot { width: 8px; height: 8px; border-radius: 50%; }
  .card-src-name { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte2); }
  .badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
  .badge { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border: 1px solid; white-space: nowrap; }
  .b-u { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-p); }
  .b-n { color: var(--vert); border-color: var(--vert); background: var(--vert-p); }
  .b-p { color: #7ab0f0; border-color: #7ab0f0; background: rgba(122,176,240,.1); }
  .b-t { color: #c87af0; border-color: #c87af0; background: rgba(200,122,240,.1); }
  .b-e { color: #e8c83a; border-color: #e8c83a; background: rgba(232,200,58,.1); }
  .b-g { color: var(--texte2); border-color: var(--bordure); background: transparent; }
  .card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--texte); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .02em; }
  .card-desc { font-size: 14px; font-weight: 400; color: var(--texte3); line-height: 1.6; }
  .card-foot { background: rgba(0,0,0,.15); border-top: 1px solid var(--bordure); padding: 10px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .card-meta { display: flex; gap: 20px; flex-wrap: wrap; }
  .cm { font-size: 12px; color: var(--texte2); }
  .cm strong { display: block; color: var(--texte); font-size: 12px; font-weight: 600; margin-bottom: 1px; letter-spacing: .04em; text-transform: uppercase; }
  .card-actions { display: flex; gap: 8px; }
  .btn-fiche { background: var(--accent); color: #1a223; border: none; padding: 8px 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .15s; text-decoration: none; display: inline-block; }
  .btn-fiche:hover { background: var(--accent2); }

  .d-overlay { display: none; position: fixed; inset: 0; background: rgba(10,14,22,.92); z-index: 9999; align-items: flex-start; justify-content: center; padding: 32px; overflow-y: auto; }
  .d-overlay.open { display: flex; }
  .d-modal { background: var(--bg2) !important; color: var(--texte) !important; width: 100%; max-width: 660px; padding: 44px; position: relative; margin: auto; border-top: 4px solid var(--accent); border: 1px solid var(--bordure); border-top: 4px solid var(--accent); }
  .d-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--texte2); transition: color .15s; }
  .d-close:hover { color: var(--texte); }
  .d-src { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .d-src-dot { width: 10px; height: 10px; border-radius: 50%; }
  .d-src-name { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--texte2) !important; }
  .d-title { font-family: 'Barlow Condensed', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .02em !important; color: var(--texte) !important; line-height: 1.1 !important; margin-bottom: 10px !important; }
  .d-badges { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
  .d-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bordure); }
  .d-st { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--texte2) !important; margin-bottom: 10px !important; }
  .d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .d-il { font-size: 11px !important; color: var(--texte2) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 3px !important; font-weight: 500 !important; }
  .d-iv { font-size: 14px !important; font-weight: 500 !important; color: var(--texte) !important; }
  .d-body { font-size: 14px !important; color: var(--texte3) !important; line-height: 1.7 !important; }
  .d-note { background: rgba(232,130,12,.1) !important; border: 1px solid rgba(232,130,12,.3) !important; border-left: 4px solid var(--accent) !important; padding: 13px 16px !important; font-size: 13px !important; color: var(--accent2) !important; line-height: 1.6 !important; margin-top: 16px !important; }
  .d-actions { display: flex; gap: 12px; margin-top: 26px; }
  .btn-site { background: var(--accent); color: #1a223; border: none; padding: 11px 24px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; transition: background .15s; }
  .btn-site:hover { background: var(--accent2); }
  .btn-o2 { background: transparent; border: 1px solid var(--bordure); color: var(--texte2); padding: 10px 18px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
  .btn-o2:hover { border-color: var(--texte2); color: var(--texte); }

  .a-overlay { display: none; position: fixed; inset: 0; background: rgba(10,14,22,.92); z-index: 9999; align-items: center; justify-content: center; }
  .a-overlay.open { display: flex; }
  .a-modal { background: var(--bg2); width: 460px; padding: 40px; position: relative; border: 1px solid var(--bordure); border-top: 4px solid var(--accent); }
  .a-close { position: absolute; top: 13px; right: 17px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--texte2); }
  .a-title { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; color: var(--texte); }
  .a-sub { color: var(--texte2); font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
  .fg { margin-bottom: 16px; }
  .fl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte2); margin-bottom: 7px; }
  .fi2 { width: 100%; padding: 10px 13px; background: var(--bg3); border: 1px solid var(--bordure); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; color: var(--texte); outline: none; transition: border-color .2s; appearance: none; }
  .fi2:focus { border-color: var(--accent); }
  .btn-sub { width: 100%; background: var(--accent); color: #1a223; border: none; padding: 13px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: background .2s; }
  .btn-sub:hover { background: var(--accent2); }

  .notif { position: fixed; bottom: 24px; right: 24px; background: var(--bg3); color: var(--texte); border: 1px solid var(--bordure); border-left: 4px solid var(--accent); padding: 12px 20px; font-size: 14px; z-index: 10000; transform: translateY(80px); opacity: 0; transition: all .3s; max-width: 300px; line-height: 1.5; }
  .notif.show { transform: translateY(0); opacity: 1; }
  .notif-tag { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }

  .sidebar-toggle { display: none; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 0; margin-bottom: 6px; }
  .sidebar-toggle-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte2); }
  .sidebar-toggle-icon { font-size: 18px; color: var(--accent); transition: transform .2s; }
  .sidebar.collapsed .sidebar-toggle-icon { transform: rotate(-90deg); }

  .btn-email-pdf { background: transparent; border: 1px solid var(--bordure); color: var(--texte2); padding: 7px 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 7px; }
  .btn-email-pdf:hover { border-color: var(--accent); color: var(--accent); }

  @media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--bordure); padding: 16px 20px; }
    .sidebar-toggle { display: flex; }
    .sidebar.collapsed .sb-s:not(:first-child) { display: none; }
    .hero { margin: 20px 20px 0; padding: 24px 20px; }
    .hero h1 { font-size: 30px; }
    .approche-band { padding: 0 20px; }
    .main { padding: 20px; }
  }
</style>

<!-- HERO -->
<div class="hero">
  <h1>Financements &amp; Appels à projets</h1>
  <div class="hero-sub">Belgique francophone · Europe · Fondations — sources surveillées en continu</div>
  <div class="hero-bottom">
    <div class="hero-stats">
      <div><div id="stat-total" class="hstat-num">—</div><div class="hstat-label">Appels actifs</div></div>
      <div><div id="stat-urgent" class="hstat-num" style="color:var(--rouge);">—</div><div class="hstat-label">Urgents -30j</div></div>
      <div><div id="stat-sources" class="hstat-num">—</div><div class="hstat-label">Sources</div></div>
    </div>
    <button class="btn-alertes" onclick="openA()">Configurer mes alertes</button>
  </div>
</div>

<!-- ONGLETS -->
<div class="approche-band">
  <div class="atab on" onclick="setApproche(this,'tous')">Tous <span id="cnt-tous" class="atab-n">—</span></div>
  <div class="atab" onclick="setApproche(this,'sectoriel')">Sectoriel audiovisuel <span id="cnt-sectoriel" class="atab-n">—</span></div>
  <div class="atab" onclick="setApproche(this,'europeen')">Européen / MEDIA <span id="cnt-europeen" class="atab-n">—</span></div>
  <div class="atab" onclick="setApproche(this,'thematique')">Thématique / Société <span id="cnt-thematique" class="atab-n">—</span></div>
</div>

<div class="layout">
<aside id="sidebar" class="sidebar">
  <div class="sidebar-toggle" onclick="toggleSidebar()">
    <span class="sidebar-toggle-label">Filtres &amp; sources</span>
    <span class="sidebar-toggle-icon">▾</span>
  </div>

  <div class="sb-s">
    <div class="sb-t">Recherche</div>
    <input id="searchInput" class="search-box" type="text" placeholder="Mot-clé, source, format..." oninput="applyFilters()">
  </div>

  <div class="sb-s">
    <div class="sb-t">Mon profil</div>
    <div id="profil-chips" class="chips">
      <div class="chip" data-tag="fiction">Fiction</div>
      <div class="chip" data-tag="documentaire">Documentaire</div>
      <div class="chip" data-tag="animation">Animation</div>
      <div class="chip" data-tag="serie">Série</div>
      <div class="chip" data-tag="court-métrage">Court métrage</div>
      <div class="chip" data-tag="écriture">Écriture</div>
      <div class="chip" data-tag="développement">Développement</div>
      <div class="chip" data-tag="production">Production</div>
      <div class="chip" data-tag="coproduction">Coproduction</div>
      <div class="chip" data-tag="société">Projet de société</div>
      <div class="chip" data-tag="formation">Formation</div>
    </div>
  </div>

  <div class="sb-s">
    <div class="sb-t">Deadline</div>
    <div class="flist">
      <div class="fi on" onclick="setDeadline(this,'tous')"><span class="fi-l">Tous</span><span id="dl-tous" class="fi-n">—</span></div>
      <div class="fi" onclick="setDeadline(this,'urgent')"><span class="fi-l" style="color:var(--rouge);">Moins de 30 jours</span><span id="dl-urgent" class="fi-n">—</span></div>
      <div class="fi" onclick="setDeadline(this,'medium')"><span class="fi-l">30 à 90 jours</span><span id="dl-medium" class="fi-n">—</span></div>
      <div class="fi" onclick="setDeadline(this,'ok')"><span class="fi-l">Plus de 90 jours</span><span id="dl-ok" class="fi-n">—</span></div>
      <div class="fi" onclick="setDeadline(this,'recurrent')"><span class="fi-l">Sessions récurrentes</span><span id="dl-recurrent" class="fi-n">—</span></div>
      <div class="fi" onclick="setDeadline(this,'passe')"><span class="fi-l" style="color:var(--texte2);">Passés — à préparer</span><span id="dl-passe" class="fi-n">—</span></div>
    </div>
  </div>

  <div class="sb-s">
    <div class="sb-t">Sources</div>
    <div id="src-filters" class="src-list">
      <div class="src-group-label">Sectoriels BE</div>
      <div class="src on" data-src="cca"><div class="dot d-cca"></div><div><div class="src-name">CCA / FWB</div><div class="src-type">Sectoriel BE</div></div></div>
      <div class="src on" data-src="wim"><div class="dot d-wim"></div><div><div class="src-name">Wallimage</div><div class="src-type">Sectoriel Wallonie</div></div></div>
      <div class="src on" data-src="scr"><div class="dot d-scr"></div><div><div class="src-name">screen.brussels</div><div class="src-type">Sectoriel Bruxelles</div></div></div>
      <div class="src on" data-src="wbi"><div class="dot d-wbi"></div><div><div class="src-name">WBI</div><div class="src-type">International BE</div></div></div>
      <div class="src on" data-src="sacd"><div class="dot d-sacd"></div><div><div class="src-name">SACD / SCAM</div><div class="src-type">Droits d'auteur</div></div></div>
      <div class="src on" data-src="cba"><div class="dot d-cba"></div><div><div class="src-name">CBA</div><div class="src-type">Documentaire FWB</div></div></div>
      <div class="src on" data-src="gsara"><div class="dot d-gsara"></div><div><div class="src-name">GSARA</div><div class="src-type">Documentaire création</div></div></div>
      <div class="src on" data-src="cvb"><div class="dot d-cvb"></div><div><div class="src-name">CVB</div><div class="src-type">Centre Vidéo Bruxelles</div></div></div>
      <div class="src-group-label">Europe</div>
      <div class="src on" data-src="med"><div class="dot d-med"></div><div><div class="src-name">MEDIA / Europe Créative</div><div class="src-type">Européen audiovisuel</div></div></div>
      <div class="src on" data-src="ecc"><div class="dot d-ecc"></div><div><div class="src-name">Europe Créative Culture</div><div class="src-type">Européen culture</div></div></div>
      <div class="src-group-label">Régional / Communal</div>
      <div class="src on" data-src="cocof"><div class="dot d-cocof"></div><div><div class="src-name">COCOF</div><div class="src-type">Commission comm. fr.</div></div></div>
      <div class="src on" data-src="vbxl"><div class="dot d-vbxl"></div><div><div class="src-name">Ville de Bruxelles</div><div class="src-type">Subside communal</div></div></div>
      <div class="src on" data-src="spf"><div class="dot d-spf"></div><div><div class="src-name">SPF Affaires étrangères</div><div class="src-type">Coopération / Sud</div></div></div>
      <div class="src-group-label">Fondations / Bourses</div>
      <div class="src on" data-src="frb"><div class="dot d-frb"></div><div><div class="src-name">Fondation Roi Baudouin</div><div class="src-type">Thématique / Société</div></div></div>
      <div class="src on" data-src="voc"><div class="dot d-voc"></div><div><div class="src-name">Vocatio</div><div class="src-type">Bourse 18–30 ans</div></div></div>
      <div class="src on" data-src="lotn"><div class="dot d-lotn"></div><div><div class="src-name">Loterie Nationale</div><div class="src-type">Subside culture</div></div></div>
      <div class="src-group-label">Autres</div>
      <div class="src on" data-src="sabam"><div class="dot d-sabam"></div><div><div class="src-name">Sabam for Culture</div><div class="src-type">Bourses créateurs BE</div></div></div>
      <div class="src on" data-src="bela"><div class="dot d-bela"></div><div><div class="src-name">Bela.be</div><div class="src-type">Opportunités pro</div></div></div>
      <div class="src-group-label">Festivals / Pitch</div>
      <div class="src on" data-src="bifff"><div class="dot d-bifff"></div><div><div class="src-name">BIFFF / BIF Market</div><div class="src-type">Pitch fantastique</div></div></div>
      <div class="src on" data-src="bsff"><div class="dot d-bsff"></div><div><div class="src-name">BSFF</div><div class="src-type">Court métrage</div></div></div>
      <div class="src on" data-src="baff"><div class="dot d-baff"></div><div><div class="src-name">BAFF</div><div class="src-type">Film sur l'art</div></div></div>
    </div>
  </div>
</aside>

<main class="main">
  <div class="toolbar">
    <div class="res-info"><strong id="count-display">—</strong> appels affichés</div>
    <button class="btn-email-pdf" onclick="openPdfModal()">Recevoir par e-mail</button>
  </div>
  <div id="urgent-zone"></div>
  <div id="cards-container">
    <div class="loading-state">
      <div class="loading-spinner"></div>
      Chargement des appels...
    </div>
  </div>
</main>
</div>

<!-- DETAIL OVERLAY -->
<div id="dov" class="d-overlay">
  <div class="d-modal">
    <button class="d-close" onclick="closeD()">×</button>
    <div class="d-src">
      <div id="d-dot" class="d-src-dot dot"></div>
      <span id="d-sn" class="d-src-name"></span>
    </div>
    <div id="d-title" class="d-title"></div>
    <div id="d-badges" class="d-badges"></div>
    <div id="d-body"></div>
    <div class="d-actions">
      <a id="d-link" class="btn-site" href="#" target="_blank" rel="noopener">Accéder au site officiel</a>
      <button class="btn-o2" onclick="closeD()">Fermer</button>
    </div>
  </div>
</div>

<!-- ALERTE OVERLAY -->
<div id="aov" class="a-overlay">
  <div class="a-modal">
    <button class="a-close" onclick="closeA()">×</button>
    <div class="a-title">Mes alertes</div>
    <div class="a-sub">Recevez un e-mail dès qu'un nouvel appel correspond à votre profil ou 30 jours avant une deadline surveillée.</div>
    <div class="fg"><label class="fl">Adresse e-mail</label><input class="fi2" type="email" placeholder="votre@email.com"></div>
    <div class="fg"><label class="fl">Fréquence</label>
      <select class="fi2">
        <option>Immédiatement (nouvel appel ou deadline -30j)</option>
        <option>Récapitulatif hebdomadaire</option>
        <option>Récapitulatif mensuel</option>
      </select>
    </div>
    <button class="btn-sub" onclick="saveA()">Enregistrer mes alertes</button>
  </div>
</div>

<!-- PDF EMAIL OVERLAY -->
<div id="pdfov" class="pdf-overlay" style="display:none;position:fixed;inset:0;background:rgba(10,14,22,.92);z-index:9999;align-items:center;justify-content:center;padding:20px;">
  <div style="background:var(--bg2);width:100%;max-width:480px;padding:36px;position:relative;border:1px solid var(--bordure);border-top:4px solid var(--accent);">
    <button onclick="closePdfModal()" style="position:absolute;top:13px;right:17px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--texte2);">×</button>
    <div style="font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;color:var(--texte);">Recevoir par e-mail</div>
    <div style="color:var(--texte2);font-size:13px;margin-bottom:20px;">Un récapitulatif des appels sélectionnés vous sera envoyé.</div>
    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texte2);margin-bottom:7px;">Votre adresse e-mail</label>
      <input id="pdf-email" type="email" placeholder="votre@email.com" style="width:100%;padding:11px 13px;background:var(--bg3);border:1px solid var(--bordure);font-family:'Barlow Condensed',sans-serif;font-size:14px;color:var(--texte);outline:none;">
    </div>
    <button id="btn-send-pdf" onclick="sendPdfEmail()" style="width:100%;background:var(--accent);color:#1a223;border:none;padding:13px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;">Envoyer</button>
  </div>
</div>

<div id="notif" class="notif">
  <div class="notif-tag">ARPi Financements</div>
  <span id="ntxt">Alerte enregistrée.</span>
</div>

<!-- FIREBASE -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

const firebaseConfig = {
  apiKey: "AIzaSyDuKUwqeeOICstHEJkBVw7he1RUkB8uZZw",
  authDomain: "arpi2026-7cf61.firebaseapp.com",
  projectId: "arpi2026-7cf61",
  storageBucket: "arpi2026-7cf61.firebasestorage.app",
  messagingSenderId: "374262445029",
  appId: "1:374262445029:web:ad314112a4dfec7ad9b50c"
};

const app = initializeApp(firebaseConfig);
const db  = getFirestore(app);

let allAppels = [];
let currentApproche = 'tous';
let currentDeadline = 'tous';
let activeSources = new Set(['cca','wim','scr','wbi','med','ecc','frb','spf','sacd','cba','cocof','vbxl','gsara','cvb','voc','lotn','bifff','bsff','baff','sabam','bela']);
let activeTags = new Set();

const BADGE_MAP = {
  urgent:    '<span class="badge b-u">Urgent</span>',
  medium:    '<span class="badge b-p">Deadline proche</span>',
  ok:        '<span class="badge b-n">Ouvert</span>',
  recurrent: '<span class="badge b-p">Sessions récurrentes</span>',
  passe:     '<span class="badge b-g">Passé - à préparer</span>',
};
const APPROCHE_MAP = {
  sectoriel:  '<span class="badge b-p">Sectoriel</span>',
  europeen:   '<span class="badge b-e">Européen</span>',
  thematique: '<span class="badge b-t">Thématique</span>',
};

async function loadAppels() {
  try {
    const snap = await getDocs(collection(db, 'appels'));
    allAppels = [];
    snap.forEach(doc => {
      const d = doc.data();
      if (d.actif !== false) {
        const norm = s => s ? s.toString().toLowerCase().trim()
          .replace(/[éè]/g,'e').replace(/[àâ]/g,'a').replace(/ô/g,'o').replace(/\s+/g,'') : '';
        d.approche      = norm(d.approche);
        d.source_id     = norm(d.source_id);
        d.deadline_type = norm(d.deadline_type);
        allAppels.push({ id: doc.id, ...d });
      }
    });
    updateStats();
    applyFilters();
  } catch(e) {
    document.getElementById('cards-container').innerHTML =
      `<div class="empty-state">Erreur de chargement Firestore.<br><small style="color:var(--texte2)">${e.message}</small></div>`;
  }
}

function updateStats() {
  const actifs  = allAppels.filter(a => a.deadline_type !== 'passe');
  const urgents = allAppels.filter(a => a.deadline_type === 'urgent');
  const sources = new Set(allAppels.map(a => a.source_id)).size;
  document.getElementById('stat-total').textContent   = actifs.length;
  document.getElementById('stat-urgent').textContent  = urgents.length;
  document.getElementById('stat-sources').textContent = sources;

  const aC = {tous:0,sectoriel:0,europeen:0,thematique:0};
  const dC = {tous:0,urgent:0,medium:0,ok:0,recurrent:0,passe:0};
  allAppels.forEach(a => {
    aC.tous++;
    if (a.approche) aC[a.approche] = (aC[a.approche]||0)+1;
    dC.tous++;
    if (a.deadline_type) dC[a.deadline_type] = (dC[a.deadline_type]||0)+1;
  });
  ['tous','sectoriel','europeen','thematique'].forEach(k => { const el = document.getElementById('cnt-'+k); if(el) el.textContent = aC[k]||0; });
  ['tous','urgent','medium','ok','recurrent','passe'].forEach(k => { const el = document.getElementById('dl-'+k); if(el) el.textContent = dC[k]||0; });
}

function applyFilters() {
  const search = document.getElementById('searchInput').value.toLowerCase().trim();
  let filtered = allAppels.filter(a => {
    if (currentApproche !== 'tous' && a.approche !== currentApproche) return false;
    if (currentDeadline !== 'tous' && a.deadline_type !== currentDeadline) return false;
    if (!activeSources.has(a.source_id)) return false;
    if (activeTags.size > 0 && ![...activeTags].some(t => (a.tags||[]).includes(t))) return false;
    if (search) {
      const hay = [a.titre,a.source,a.description,a.deadline,...(a.tags||[])].join(' ').toLowerCase();
      if (!hay.includes(search)) return false;
    }
    return true;
  });
  renderCards(filtered);
  document.getElementById('count-display').textContent = filtered.length;
}

function renderCards(appels) {
  const container   = document.getElementById('cards-container');
  const urgentZone  = document.getElementById('urgent-zone');
  if (!appels.length) {
    container.innerHTML = '<div class="empty-state">Aucun appel ne correspond aux filtres sélectionnés.</div>';
    urgentZone.innerHTML = '';
    return;
  }
  const urgents = appels.filter(a => a.deadline_type === 'urgent');
  urgentZone.innerHTML = urgents.length ? `<div class="urgency-banner"><span class="ub-tag">Deadline imminente</span><span class="ub-text">${urgents[0].titre} — ${urgents[0].source}</span><span class="ub-date">${urgents[0].deadline}</span></div>` : '';

  const groups = {sectoriel:[],europeen:[],thematique:[],autre:[]};
  appels.forEach(a => (groups[a.approche]||groups.autre).push(a));
  const labels = {sectoriel:'Sectoriel audiovisuel — Belgique',europeen:'Européen — MEDIA / Europe Créative',thematique:'Thématique / Société / Fondations / Bourses',autre:'Autres'};
  let html = '';
  ['sectoriel','europeen','thematique','autre'].forEach(g => {
    if (!groups[g].length) return;
    html += `<div class="sec-head"><span class="sec-lbl">${labels[g]}</span><div class="sec-rule"></div></div><div class="cards">`;
    groups[g].forEach(a => { html += renderCard(a); });
    html += '</div>';
  });
  container.innerHTML = html;
}

function renderCard(a) {
  const dc = 'd-'+(a.source_id||'cca');
  return `<div class="card" onclick="openDetail('${a.id}')">
    <div class="card-body">
      <div class="card-r1">
        <div class="card-src"><div class="card-src-dot dot ${dc}"></div><span class="card-src-name">${a.source||''}</span></div>
        <div class="badges">${BADGE_MAP[a.deadline_type]||''}${APPROCHE_MAP[a.approche]||''}</div>
      </div>
      <div class="card-title">${a.titre||''}</div>
      <div class="card-desc">${a.description||''}</div>
    </div>
    <div class="card-foot">
      <div class="card-meta">
        ${a.deadline   ? `<div class="cm"><strong>Deadline</strong>${a.deadline}</div>` : ''}
        ${a.budget     ? `<div class="cm"><strong>Budget</strong>${a.budget}</div>` : ''}
        ${a.stade      ? `<div class="cm"><strong>Stade</strong>${a.stade}</div>` : ''}
        ${a.conditions ? `<div class="cm"><strong>Conditions</strong>${a.conditions}</div>` : ''}
      </div>
      <div class="card-actions">
        ${a.url_officiel ? `<a class="btn-fiche" href="${a.url_officiel}" target="_blank" onclick="event.stopPropagation()">Site officiel</a>` : ''}
      </div>
    </div>
  </div>`;
}

window.openDetail = function(id) {
  const a = allAppels.find(x => x.id === id);
  if (!a) return;
  document.getElementById('d-dot').className = 'dot d-'+(a.source_id||'cca');
  document.getElementById('d-sn').textContent   = a.source||'';
  document.getElementById('d-title').textContent = a.titre||'';
  document.getElementById('d-link').href = a.url_officiel||'#';
  document.getElementById('d-badges').innerHTML = (BADGE_MAP[a.deadline_type]||'')+(APPROCHE_MAP[a.approche]||'');
  const meta = [['Deadline',a.deadline],['Budget',a.budget],['Stade',a.stade],['Conditions',a.conditions]].filter(f=>f[1]);
  let body = a.description ? `<div class="d-section"><div class="d-st">Description</div><div class="d-body">${a.description}</div></div>` : '';
  if (meta.length) {
    body += `<div class="d-section"><div class="d-st">Points clés</div><div class="d-grid">`;
    meta.forEach(([l,v]) => { body += `<div><div class="d-il">${l}</div><div class="d-iv">${v}</div></div>`; });
    body += `</div></div>`;
  }
  if (a.note) body += `<div class="d-note">${a.note}</div>`;
  document.getElementById('d-body').innerHTML = body;
  document.getElementById('dov').classList.add('open');
};

window.setApproche = (el, val) => { currentApproche = val; document.querySelectorAll('.atab').forEach(t=>t.classList.remove('on')); el.classList.add('on'); applyFilters(); };
window.setDeadline = (el, val) => { currentDeadline = val; el.closest('.flist').querySelectorAll('.fi').forEach(f=>f.classList.remove('on')); el.classList.add('on'); applyFilters(); };
window.applyFilters = applyFilters;

document.querySelectorAll('#src-filters .src').forEach(s => {
  s.addEventListener('click', () => {
    s.classList.toggle('on');
    const src = s.dataset.src;
    s.classList.contains('on') ? activeSources.add(src) : activeSources.delete(src);
    applyFilters();
  });
});
document.querySelectorAll('#profil-chips .chip').forEach(c => {
  c.addEventListener('click', () => {
    c.classList.toggle('on');
    const tag = c.dataset.tag;
    c.classList.contains('on') ? activeTags.add(tag) : activeTags.delete(tag);
    applyFilters();
  });
});

window.closeD = () => document.getElementById('dov').classList.remove('open');
window.openA  = () => document.getElementById('aov').classList.add('open');
window.closeA = () => document.getElementById('aov').classList.remove('open');
window.saveA  = () => { closeA(); showNotif('Alertes configurées.'); };
window.toggleSidebar = () => document.getElementById('sidebar').classList.toggle('collapsed');

if (window.innerWidth <= 900) document.getElementById('sidebar').classList.add('collapsed');
window.addEventListener('resize', () => { if (window.innerWidth > 900) document.getElementById('sidebar').classList.remove('collapsed'); });

function showNotif(msg) {
  const n = document.getElementById('notif');
  document.getElementById('ntxt').textContent = msg;
  n.classList.add('show');
  setTimeout(() => n.classList.remove('show'), 3200);
}

// PDF / Email
window.openPdfModal  = () => { document.getElementById('pdfov').style.display = 'flex'; };
window.closePdfModal = () => { document.getElementById('pdfov').style.display = 'none'; };

window.sendPdfEmail = async function() {
  const emailInput = document.getElementById('pdf-email');
  const email = emailInput.value.trim();
  const btn = document.getElementById('btn-send-pdf');
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showNotif('Adresse e-mail invalide.'); return; }
  btn.disabled = true; btn.textContent = 'Envoi...';
  const filtered = allAppels.filter(a => {
    if (currentApproche !== 'tous' && a.approche !== currentApproche) return false;
    if (currentDeadline !== 'tous' && a.deadline_type !== currentDeadline) return false;
    if (!activeSources.has(a.source_id)) return false;
    return true;
  });
  const lignes = filtered.map((a,i) => `${i+1}. ${a.titre}\n   Source : ${a.source}\n   Deadline : ${a.deadline||'-'}\n   URL : ${a.url_officiel||'-'}`).join('\n\n');
  try {
    await emailjs.send('service_2mlxrne','template_4zzydw6',{
      to_email: email,
      date: new Date().toLocaleDateString('fr-BE',{day:'numeric',month:'long',year:'numeric'}),
      filtres: 'Tous',
      appels_count: String(filtered.length),
      contenu: lignes,
      format: 'Résumé'
    },'6H-o-LPA-zmg-Nkin');
    btn.disabled = false; btn.textContent = 'Envoyer';
    closePdfModal(); showNotif('Email envoyé à ' + email);
  } catch(e) {
    btn.disabled = false; btn.textContent = 'Envoyer';
    showNotif('Erreur envoi EmailJS');
  }
};

loadAppels();
</script>

<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script>emailjs.init('6H-o-LPA-zmg-Nkin');</script>