.elementor-1994 .elementor-element.elementor-element-e89b6e0{--display:flex;--min-height:250px;--justify-content:space-evenly;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:2%;--padding-bottom:2%;--padding-left:7%;--padding-right:7%;}.elementor-1994 .elementor-element.elementor-element-e89b6e0:not(.elementor-motion-effects-element-type-background), .elementor-1994 .elementor-element.elementor-element-e89b6e0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#147B4B1F;}.elementor-1994 .elementor-element.elementor-element-9dc12dc{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1994 .elementor-element.elementor-element-9dc12dc.e-con{--align-self:flex-start;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-1994 .elementor-element.elementor-element-a0c85ae{background-color:#0596691F;margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0px 15px 2px 15px;border-radius:30px 30px 30px 30px;}.elementor-1994 .elementor-element.elementor-element-a0c85ae .elementor-icon-box-wrapper{align-items:center;gap:5px;}.elementor-1994 .elementor-element.elementor-element-a0c85ae .elementor-icon-box-title{margin-block-end:6px;}.elementor-1994 .elementor-element.elementor-element-a0c85ae .elementor-icon{font-size:14px;}.elementor-1994 .elementor-element.elementor-element-a0c85ae .elementor-icon-box-title, .elementor-1994 .elementor-element.elementor-element-a0c85ae .elementor-icon-box-title a{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1994 .elementor-element.elementor-element-a3ac259{text-align:center;}.elementor-1994 .elementor-element.elementor-element-a3ac259 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:45px;font-weight:700;color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1994 .elementor-element.elementor-element-9144d0e{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:center;}.elementor-1994 .elementor-element.elementor-element-070b610{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1994 .elementor-element.elementor-element-accac30{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + -3%) 0%;padding:0% 0% 0% 0%;}.elementor-1994 .elementor-element.elementor-element-accac30.elementor-element{--align-self:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1994 .elementor-element.elementor-element-da69350 .elementor-button{background-color:#147B4B00;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-style:none;border-radius:8px 8px 8px 8px;}.elementor-1994 .elementor-element.elementor-element-da69350 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1994 .elementor-element.elementor-element-f4cda21{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:3%;--padding-bottom:3%;--padding-left:7%;--padding-right:7%;}.elementor-1994 .elementor-element.elementor-element-3f13288{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-1994 .elementor-element.elementor-element-3f13288.e-con{--align-self:flex-start;}.elementor-1994 .elementor-element.elementor-element-db78e6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-1994 .elementor-element.elementor-element-a100560{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1994 .elementor-element.elementor-element-101a7ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-1994 .elementor-element.elementor-element-db78e6d{--width:22%;}.elementor-1994 .elementor-element.elementor-element-101a7ef{--width:78%;}}/* Start custom CSS for html, class: .elementor-element-accac30 */<!--
=======================================================
  FICHIER 3B — GRILLE DES CARTES D'OFFRES
  Widget HTML Elementor — page /offres/

  Utilise l'endpoint personnalisé :
  /wp-json/guf/v1/offres?profil=...&secteur=...&besoin=...
=======================================================
-->

<!-- Chargement -->
<div class="epr-loading" id="epr-loading">
  <div class="epr-spinner"></div>
  <p>Recherche des offres correspondantes...</p>
</div>

<!-- Résultats -->
<div id="epr-results" style="display:none">
  <div class="epr-count" id="epr-count"></div>
  <div class="epr-grid" id="epr-grid"></div>
</div>

<!-- Aucun résultat -->
<div class="epr-empty" id="epr-empty" style="display:none">
  <div class="epr-empty-icon">😕</div>
  <h2>Aucune offre trouvée</h2>
  <p>Aucune offre ne correspond exactement à votre profil pour le moment.<br>
     Revenez bientôt ou modifiez vos critères.</p>
</div>

<script>
(function() {

  // ── Lire les paramètres URL ───────────────────────────────────────────
  var params  = new URLSearchParams(window.location.search);
  var profil  = params.get('profil');
  var secteur = params.get('secteur');
  var besoin  = params.get('besoin');
  var lb      = params.get('lb') || besoin || '';

  // ── Vérification ─────────────────────────────────────────────────────
  if (!profil || !secteur || !besoin) {
    document.getElementById('epr-loading').style.display = 'none';
    document.getElementById('epr-empty').style.display   = 'block';
    return;
  }

  // ── Appel endpoint personnalisé ───────────────────────────────────────
  // Endpoint : /wp-json/guf/v1/offres?profil=jeune&secteur=services&besoin=financement
  var apiUrl = '/wp-json/guf/v1/offres'
    + '?profil='  + encodeURIComponent(profil)
    + '&secteur=' + encodeURIComponent(secteur)
    + '&besoin='  + encodeURIComponent(besoin);

  fetch(apiUrl)
    .then(function(r) {
      if (!r.ok) throw new Error('Erreur API ' + r.status);
      return r.json();
    })
    .then(function(posts) {

      document.getElementById('epr-loading').style.display = 'none';

      if (!posts.length) {
        document.getElementById('epr-empty').style.display = 'block';
        return;
      }

      // Compteur
      document.getElementById('epr-count').textContent =
        posts.length + ' offre' + (posts.length > 1 ? 's' : '') +
        ' correspondent à votre profil';

      var grid = document.getElementById('epr-grid');

      posts.forEach(function(post, i) {
        var title        = post.title.rendered;
        var excerpt      = stripTags(post.excerpt.rendered || '');
        var link         = post.link;
        var org          = post.organisation || '';
        var montant      = post.montant      || '';
        var localisation = post.localisation || 'Tout le Sénégal';
        var tag          = post.type_offre   || lb || '';
        var thumbnail    = post.thumbnail    || '';

        // Image
        var imgHtml = thumbnail
          ? '<img class="epr-card-img" src="' + thumbnail + '" alt="' + escHtml(title) + '" loading="lazy">'
          : '';

        var card       = document.createElement('a');
        card.className = 'epr-card';
        card.href      = link;
        card.style.animationDelay = (i * 0.06) + 's';

        card.innerHTML =
          imgHtml +
          '<div class="epr-card-body">' +
            (tag
              ? '<span class="epr-tag">' + escHtml(tag) + '</span>'
              : '') +
            '<div class="epr-card-title">' + escHtml(title) + '</div>' +
            (org
              ? '<div class="epr-card-org">' + escHtml(org) + '</div>'
              : '') +
            (excerpt
              ? '<div class="epr-card-desc">'
                  + escHtml(excerpt.slice(0, 140))
                  + (excerpt.length > 140 ? '…' : '')
                + '</div>'
              : '') +
            '<div class="epr-card-footer">' +
              '<div class="epr-card-meta">' +
                (montant
                  ? '<span class="epr-amount">' + escHtml(montant) + '</span>'
                  : '') +
                '<span class="epr-location">' + escHtml(localisation) + '</span>' +
              '</div>' +
              '<a class="epr-cta" href="' + link + '">Voir les détails</a>' +
            '</div>' +
          '</div>';

        grid.appendChild(card);
      });

      document.getElementById('epr-results').style.display = 'block';
    })
    .catch(function(err) {
      console.error('Erreur :', err);
      document.getElementById('epr-loading').style.display = 'none';
      document.getElementById('epr-empty').style.display   = 'block';
    });

  function stripTags(html) {
    var d = document.createElement('div');
    d.innerHTML = html;
    return d.textContent || d.innerText || '';
  }

  function escHtml(str) {
    return String(str).replace(/[&<>"']/g, function(c) {
      return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
    });
  }

})();
</script>/* End custom CSS */
/* Start custom CSS *//* Base : chaque item (lien/bouton) devient une ligne cliquable avec un rond */
.filter-ronds a,
.filter-ronds button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Le rond */
.filter-ronds a::before,
.filter-ronds button::before{
  content:"";
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  flex: 0 0 18px;
}

/* ---------
   ÉTAT ACTIF
   ---------
   ⚠️ Ici on met plusieurs sélecteurs "au cas où" selon ton plugin/filtre.
   Garde ceux qui marchent chez toi.
*/

/* option: classe active fréquente */
.filter-ronds a.is-active::before,
.filter-ronds button.is-active::before,

/* option: classe active Elementor/Widgets divers */
.filter-ronds .active > a::before,
.filter-ronds a.active::before,

/* option: attributs ARIA (souvent utilisé par les filtres) */
.filter-ronds a[aria-current="true"]::before,
.filter-ronds button[aria-pressed="true"]::before,

/* option: JetSmartFilters (si jamais) */
.filter-ronds .jet-filter-item.is-active > a::before,
.filter-ronds .jet-filter-item.is-active > button::before{
  background: currentColor;
  box-shadow: inset 0 0 0 3px #fff;
}

/* Focus clavier (accessibilité) */
.filter-ronds a:focus-visible,
.filter-ronds button:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 8px;
}/* End custom CSS */