{"id":2,"date":"2026-05-18T21:21:22","date_gmt":"2026-05-18T19:21:22","guid":{"rendered":"https:\/\/anabel.be\/web2\/?page_id=2"},"modified":"2026-05-18T23:27:28","modified_gmt":"2026-05-18T21:27:28","slug":"page-d-exemple","status":"publish","type":"page","link":"https:\/\/anabel.be\/web2\/","title":{"rendered":"Plan du site"},"content":{"rendered":"\n<!--\n  PLAN DU SITE \u2014 anabel.be\/web2\n  ============================================================\n  R\u00e9cup\u00e8re automatiquement articles et pages via l'API REST WordPress.\n  Se met \u00e0 jour sans aucune intervention \u00e0 chaque nouvelle publication.\n\n  INT\u00c9GRATION : coller ce code dans un bloc \"HTML personnalis\u00e9\"\n  dans une page WordPress de anabel.be\/web2.\n  ============================================================\n-->\n<style>\n\/* \u2500\u2500 Variables \u2500\u2500 *\/\n:root {\n  --navy:       #1a2e4a;\n  --navy-light: #243d60;\n  --gold:       #c9a84c;\n  --gold-light: #e8d5a3;\n  --bg:         #f5f0e8;\n  --surface:    #ffffff;\n  --border:     #ddd5c0;\n  --text:       #2c2c2c;\n  --muted:      #6b6b6b;\n  --radius:     7px;\n  --shadow:     0 2px 10px rgba(26,46,74,0.10);\n  --font-d:     'Playfair Display', Georgia, serif;\n  --font-b:     'Source Sans 3', sans-serif;\n}\n\n\/* \u2500\u2500 Reset local \u2500\u2500 *\/\n.sm-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\n.sm-wrap { font-family: var(--font-b); color: var(--text); background: var(--bg); padding: 0 0 2.5rem; }\n\n\/* \u2500\u2500 Hero \u2500\u2500 *\/\n.sm-hero {\n  background: var(--navy);\n  color: #fff;\n  padding: 2.2rem 1.8rem 2rem;\n  border-radius: var(--radius);\n  margin-bottom: 1.6rem;\n  position: relative;\n  overflow: hidden;\n}\n.sm-hero::before {\n  content: '';\n  position: absolute;\n  top: -40px; right: -40px;\n  width: 180px; height: 180px;\n  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%);\n  pointer-events: none;\n}\n.sm-hero-eyebrow {\n  font-family: var(--font-b);\n  font-size: 0.78rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--gold-light);\n  margin-bottom: 0.5rem;\n}\n.sm-hero h1 {\n  font-family: var(--font-d);\n  font-size: 1.9rem;\n  font-weight: 700;\n  color: #fff;\n  line-height: 1.2;\n  margin-bottom: 0.5rem;\n}\n.sm-hero h1 em { color: var(--gold); font-style: italic; }\n.sm-hero-desc {\n  font-size: 0.95rem;\n  color: rgba(255,255,255,0.75);\n  margin-bottom: 1rem;\n}\n.sm-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  background: rgba(255,255,255,0.08);\n  border: 1px solid rgba(201,168,76,0.3);\n  border-radius: 20px;\n  padding: 4px 12px;\n  font-size: 0.8rem;\n  color: var(--gold-light);\n}\n.sm-dot {\n  width: 7px; height: 7px;\n  background: #4ade80;\n  border-radius: 50%;\n  animation: pulse 2s infinite;\n}\n@keyframes pulse {\n  0%,100% { opacity: 1; }\n  50%      { opacity: 0.4; }\n}\n\n\/* \u2500\u2500 Stats \u2500\u2500 *\/\n.sm-stats {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 1.4rem;\n  flex-wrap: wrap;\n}\n.sm-stat {\n  flex: 1;\n  min-width: 100px;\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-top: 3px solid var(--gold);\n  border-radius: var(--radius);\n  padding: 0.9rem 1rem;\n  text-align: center;\n  box-shadow: var(--shadow);\n}\n.sm-stat-val {\n  display: block;\n  font-family: var(--font-d);\n  font-size: 1.7rem;\n  font-weight: 700;\n  color: var(--navy);\n}\n.sm-stat-lbl {\n  font-size: 0.78rem;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--muted);\n}\n\n\/* \u2500\u2500 Barre de recherche \u2500\u2500 *\/\n.sm-toolbar {\n  display: flex;\n  gap: 0.8rem;\n  align-items: center;\n  margin-bottom: 1.4rem;\n  flex-wrap: wrap;\n}\n.sm-search {\n  flex: 1;\n  min-width: 180px;\n  padding: 0.5rem 0.9rem;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  font-family: var(--font-b);\n  font-size: 0.92rem;\n  background: var(--surface);\n  color: var(--text);\n  outline: none;\n  transition: border-color 0.2s;\n}\n.sm-search:focus { border-color: var(--gold); }\n\n\/* \u2500\u2500 Sections \u2500\u2500 *\/\n.sm-section {\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  margin-bottom: 1.2rem;\n  overflow: hidden;\n}\n.sm-section-head {\n  display: flex;\n  align-items: center;\n  gap: 0.7rem;\n  padding: 0.85rem 1.2rem;\n  background: var(--navy);\n  color: #fff;\n}\n.sm-section-icon { font-size: 1.1rem; }\n.sm-section-title {\n  font-family: var(--font-d);\n  font-size: 1.05rem;\n  font-weight: 600;\n  flex: 1;\n}\n.sm-section-count {\n  font-size: 0.78rem;\n  background: rgba(201,168,76,0.25);\n  color: var(--gold-light);\n  border-radius: 12px;\n  padding: 2px 9px;\n}\n\n\/* \u2500\u2500 Groupe cat\u00e9gorie \u2500\u2500 *\/\n.sm-cat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.6rem 1.2rem;\n  background: #f0ebe0;\n  border-bottom: 1px solid var(--border);\n  font-size: 0.82rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.07em;\n  color: var(--navy);\n}\n.sm-cat-pill {\n  background: var(--gold);\n  color: var(--navy);\n  border-radius: 10px;\n  padding: 1px 8px;\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n\n\/* \u2500\u2500 Grille de cartes \u2500\u2500 *\/\n.sm-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 0;\n}\n.sm-card {\n  padding: 0.75rem 1.2rem;\n  border-bottom: 1px solid var(--border);\n  border-right: 1px solid var(--border);\n  transition: background 0.15s;\n}\n.sm-card:hover { background: #faf7f0; }\n.sm-card a {\n  color: var(--navy);\n  text-decoration: none;\n  font-size: 0.93rem;\n  font-weight: 600;\n  display: block;\n  margin-bottom: 3px;\n}\n.sm-card a:hover { color: var(--gold); text-decoration: underline; }\n.sm-card-date {\n  font-size: 0.75rem;\n  color: var(--muted);\n}\n\n\/* \u2500\u2500 \u00c9tats \u2500\u2500 *\/\n.sm-loading {\n  text-align: center;\n  padding: 2.5rem;\n  color: var(--muted);\n  font-size: 0.95rem;\n}\n.sm-spinner {\n  width: 32px; height: 32px;\n  border: 3px solid var(--border);\n  border-top-color: var(--gold);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n  margin: 0 auto 1rem;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n.sm-empty {\n  padding: 2rem;\n  text-align: center;\n  color: var(--muted);\n  font-style: italic;\n}\n.sm-error {\n  padding: 1rem 1.2rem;\n  background: #fff3cd;\n  border-left: 4px solid #f0ad4e;\n  font-size: 0.88rem;\n  color: #7a5000;\n  margin: 0.8rem 0;\n  border-radius: 0 var(--radius) var(--radius) 0;\n}\n\n\/* \u2500\u2500 Note de bas \u2500\u2500 *\/\n.sm-footnote {\n  margin-top: 1.5rem;\n  padding: 0.9rem 1.2rem;\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  font-size: 0.82rem;\n  color: var(--muted);\n}\n.sm-footnote code {\n  background: #f0ebe0;\n  padding: 1px 5px;\n  border-radius: 3px;\n  font-size: 0.8rem;\n  color: var(--navy);\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 600px) {\n  .sm-hero h1 { font-size: 1.45rem; }\n  .sm-stats { gap: 0.6rem; }\n  .sm-grid  { grid-template-columns: 1fr; }\n  .sm-card-date { display: none; }\n}\n<\/style>\n\n<div class=\"sm-wrap\">\n\n  <!-- Hero -->\n  <div class=\"sm-hero\">\n    <div class=\"sm-hero-eyebrow\">anabel.be\/web2<\/div>\n    <h1>Plan du <em>site<\/em><\/h1>\n    <p class=\"sm-hero-desc\">Tous les contenus publi\u00e9s, mis \u00e0 jour automatiquement \u00e0 chaque nouvelle publication.<\/p>\n    <div class=\"sm-badge\">\n      <span class=\"sm-dot\"><\/span>\n      <span id=\"sm-last-update\">Chargement\u2026<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- Stats -->\n  <div class=\"sm-stats\">\n    <div class=\"sm-stat\">\n      <span class=\"sm-stat-val\" id=\"sm-s-posts\">\u2014<\/span>\n      <span class=\"sm-stat-lbl\">Articles<\/span>\n    <\/div>\n    <div class=\"sm-stat\">\n      <span class=\"sm-stat-val\" id=\"sm-s-pages\">\u2014<\/span>\n      <span class=\"sm-stat-lbl\">Pages<\/span>\n    <\/div>\n    <div class=\"sm-stat\">\n      <span class=\"sm-stat-val\" id=\"sm-s-total\">\u2014<\/span>\n      <span class=\"sm-stat-lbl\">Total<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- Recherche -->\n  <div class=\"sm-toolbar\">\n    <input class=\"sm-search\" type=\"text\" id=\"sm-search\" placeholder=\"\ud83d\udd0d  Filtrer les contenus\u2026\" oninput=\"smSearch(this.value)\">\n  <\/div>\n\n  <!-- Contenu dynamique -->\n  <div id=\"sm-main\">\n    <div class=\"sm-loading\">\n      <div class=\"sm-spinner\"><\/div>\n      <p>Chargement depuis WordPress\u2026<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- Note -->\n  <div class=\"sm-footnote\">\n    <strong>Votre publicit\u00e9 ici :<\/strong> Pour soutenir le site <a href=\"https:\/\/www.anabel.be\/web\/soutenir-anabel-be\/\">Anabel.be<\/a>.\n    \n  <\/div>\n\n  <div class=\"sm-footnote\">\n    <strong>La premi\u00e8re partie du site ici:<\/strong> <a href=\"https:\/\/www.anabel.be\/web\/\">Anabel.be\/web<\/a>.\n    \n  <\/div>\n\n<\/div>\n\n<script>\n(function() {\n\n  \/* \u2500\u2500 Configuration \u2500\u2500 *\/\n  const SITE_URL = 'https:\/\/anabel.be\/web2';\n\n  \/* \u2500\u2500 \u00c9tat \u2500\u2500 *\/\n  const DATA = { posts: [], pages: [], catMap: {} };\n  let searchQuery = '';\n\n  \/* \u2500\u2500 Utilitaires \u2500\u2500 *\/\n  function decodeHtml(s) {\n    const t = document.createElement('textarea');\n    t.innerHTML = s;\n    return t.value;\n  }\n  function fmtDate(iso) {\n    return new Date(iso).toLocaleDateString('fr-BE', { day: 'numeric', month: 'short', year: 'numeric' });\n  }\n  function el(tag, cls) {\n    const e = document.createElement(tag);\n    if (cls) e.className = cls;\n    return e;\n  }\n\n  \/* \u2500\u2500 Fetch pagin\u00e9 \u2500\u2500 *\/\n  async function fetchAll(endpoint) {\n    let page = 1, results = [];\n    while (true) {\n      const r = await fetch(`${SITE_URL}\/wp-json\/wp\/v2\/${endpoint}?per_page=100&page=${page}&_fields=id,title,link,date,categories,parent,slug`);\n      if (!r.ok) break;\n      const data = await r.json();\n      if (!data.length) break;\n      results = results.concat(data);\n      const total = parseInt(r.headers.get('X-WP-TotalPages') || '1');\n      if (page >= total) break;\n      page++;\n    }\n    return results;\n  }\n\n  \/* \u2500\u2500 Init \u2500\u2500 *\/\n  async function init() {\n    try {\n      const [posts, pages, cats] = await Promise.all([\n        fetchAll('posts'),\n        fetchAll('pages'),\n        fetch(`${SITE_URL}\/wp-json\/wp\/v2\/categories?per_page=100`).then(r => r.ok ? r.json() : [])\n      ]);\n\n      \/\/ Carte des cat\u00e9gories\n      cats.forEach(c => { DATA.catMap[c.id] = c.name; });\n      DATA.catMap[1] = DATA.catMap[1] || 'Non classifi\u00e9';\n\n      \/\/ Filtrer la page sitemap elle-m\u00eame et les pages priv\u00e9es\n      DATA.posts = posts;\n      DATA.pages = pages.filter(p => p.slug !== 'sitemap' && p.slug !== 'plan-du-site');\n\n      \/\/ Stats\n      const total = DATA.posts.length + DATA.pages.length;\n      document.getElementById('sm-s-posts').textContent = DATA.posts.length;\n      document.getElementById('sm-s-pages').textContent = DATA.pages.length;\n      document.getElementById('sm-s-total').textContent = total;\n      document.getElementById('sm-last-update').textContent =\n        'Mis \u00e0 jour le ' + new Date().toLocaleDateString('fr-BE', { day: 'numeric', month: 'long', year: 'numeric' });\n\n      render();\n\n    } catch(e) {\n      document.getElementById('sm-main').innerHTML =\n        '<div class=\"sm-error\">Impossible de contacter l\\'API WordPress. V\u00e9rifiez que cette page est bien int\u00e9gr\u00e9e dans anabel.be\/web2.<\/div>';\n    }\n  }\n\n  \/* \u2500\u2500 Rendu \u2500\u2500 *\/\n  function render() {\n    const main = document.getElementById('sm-main');\n    main.innerHTML = '';\n    const q = searchQuery.toLowerCase().trim();\n\n    function hit(title, extra) {\n      if (!q) return true;\n      return decodeHtml(title).toLowerCase().includes(q) || (extra || '').toLowerCase().includes(q);\n    }\n\n    let any = false;\n\n    \/* Articles group\u00e9s par cat\u00e9gorie *\/\n    const filteredPosts = DATA.posts.filter(p =>\n      hit(p.title.rendered, DATA.catMap[p.categories?.[0] ?? 1])\n    );\n    if (filteredPosts.length) {\n      any = true;\n      main.appendChild(buildPosts(filteredPosts));\n    }\n\n    \/* Pages *\/\n    const filteredPages = DATA.pages.filter(p => hit(p.title.rendered, ''));\n    if (filteredPages.length) {\n      any = true;\n      main.appendChild(buildPages(filteredPages));\n    }\n\n    if (!any) {\n      main.innerHTML = '<div class=\"sm-empty\">Aucun contenu ne correspond \u00e0 votre recherche.<\/div>';\n    }\n  }\n\n  \/* \u2500\u2500 Section Articles \u2500\u2500 *\/\n  function buildPosts(posts) {\n    const sec = el('div', 'sm-section');\n\n    \/\/ En-t\u00eate\n    const head = el('div', 'sm-section-head');\n    head.innerHTML = `\n      <span class=\"sm-section-icon\">\ud83d\udcf0<\/span>\n      <span class=\"sm-section-title\">Articles<\/span>\n      <span class=\"sm-section-count\">${posts.length} article${posts.length > 1 ? 's' : ''}<\/span>`;\n    sec.appendChild(head);\n\n    \/\/ Grouper par cat\u00e9gorie\n    const groups = {}, order = [];\n    posts.forEach(p => {\n      const cid = p.categories?.[0] ?? 1;\n      const cname = DATA.catMap[cid] || 'Non classifi\u00e9';\n      if (!groups[cname]) { groups[cname] = []; order.push(cname); }\n      groups[cname].push(p);\n    });\n\n    order.sort().forEach(cname => {\n      const items = groups[cname];\n\n      \/\/ Titre de cat\u00e9gorie\n      const catHead = el('div', 'sm-cat-head');\n      catHead.innerHTML = `${cname} <span class=\"sm-cat-pill\">${items.length}<\/span>`;\n      sec.appendChild(catHead);\n\n      \/\/ Grille\n      const grid = el('div', 'sm-grid');\n      items.sort((a, b) => decodeHtml(a.title.rendered).localeCompare(decodeHtml(b.title.rendered), 'fr'))\n        .forEach(p => {\n          const card = el('div', 'sm-card');\n          card.innerHTML = `\n            <a href=\"${p.link}\" target=\"_blank\">${decodeHtml(p.title.rendered)}<\/a>\n            <span class=\"sm-card-date\">${fmtDate(p.date)}<\/span>`;\n          grid.appendChild(card);\n        });\n      sec.appendChild(grid);\n    });\n\n    return sec;\n  }\n\n  \/* \u2500\u2500 Section Pages \u2500\u2500 *\/\n  function buildPages(pages) {\n    const sec = el('div', 'sm-section');\n\n    const head = el('div', 'sm-section-head');\n    head.innerHTML = `\n      <span class=\"sm-section-icon\">\ud83d\udcc4<\/span>\n      <span class=\"sm-section-title\">Pages<\/span>\n      <span class=\"sm-section-count\">${pages.length} page${pages.length > 1 ? 's' : ''}<\/span>`;\n    sec.appendChild(head);\n\n    const grid = el('div', 'sm-grid');\n    pages.sort((a, b) => decodeHtml(a.title.rendered).localeCompare(decodeHtml(b.title.rendered), 'fr'))\n      .forEach(p => {\n        const card = el('div', 'sm-card');\n        card.innerHTML = `\n          <a href=\"${p.link}\" target=\"_blank\">${decodeHtml(p.title.rendered)}<\/a>\n          <span class=\"sm-card-date\">${fmtDate(p.date)}<\/span>`;\n        grid.appendChild(card);\n      });\n    sec.appendChild(grid);\n\n    return sec;\n  }\n\n  \/* \u2500\u2500 Recherche \u2500\u2500 *\/\n  window.smSearch = function(val) {\n    searchQuery = val;\n    render();\n  };\n\n  \/* \u2500\u2500 D\u00e9marrage \u2500\u2500 *\/\n  init();\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>anabel.be\/web2 Plan du site Tous les contenus publi\u00e9s, mis \u00e0 jour automatiquement \u00e0 chaque nouvelle publication. Chargement\u2026 \u2014 Articles \u2014 Pages \u2014 Total Chargement depuis WordPress\u2026 Votre publicit\u00e9 ici : Pour soutenir le site Anabel.be. La premi\u00e8re partie du site ici: Anabel.be\/web.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":6,"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/pages\/2\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/anabel.be\/web2\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}