{"id":43,"date":"2026-05-26T17:31:41","date_gmt":"2026-05-26T17:31:41","guid":{"rendered":"https:\/\/jeux-maths.ch\/?page_id=43"},"modified":"2026-05-26T17:31:41","modified_gmt":"2026-05-26T17:31:41","slug":"test","status":"publish","type":"page","link":"https:\/\/jeux-maths.ch\/index.php\/test\/","title":{"rendered":"test"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Cantonale 26 \u2014 Annuaire organisateurs<\/title>\n  <style>\n    :root {\n      --bg-dark: #181007;\n      --bg-light: #f4efe6;\n      --card: #ffffff;\n      --text: #17130f;\n      --muted: #8f877d;\n      --border: #e6dfd5;\n      --gold: #d9a514;\n      --gold-dark: #8a6500;\n      --red: #c9382f;\n      --orange: #d97919;\n      --blue: #2b72b8;\n      --green: #2f8a51;\n      --purple: #7250a8;\n      --shadow: 0 10px 30px rgba(0, 0, 0, .08);\n    }\n\n    * { box-sizing: border-box; }\n\n    body {\n      margin: 0;\n      font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n      background: var(--bg-light);\n      color: var(--text);\n    }\n\n    .app {\n      max-width: 760px;\n      margin: 0 auto;\n      min-height: 100vh;\n      background: var(--bg-light);\n    }\n\n    header {\n      background: var(--bg-dark);\n      color: white;\n      padding: 28px 20px 30px;\n      border-bottom-left-radius: 28px;\n      border-bottom-right-radius: 28px;\n    }\n\n    .topline {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      margin-bottom: 22px;\n    }\n\n    .badge {\n      background: var(--gold);\n      color: #1b1305;\n      font-weight: 800;\n      border-radius: 999px;\n      padding: 8px 15px;\n      font-size: 1rem;\n      white-space: nowrap;\n    }\n\n    h1 {\n      margin: 0;\n      font-size: clamp(2rem, 8vw, 3rem);\n      line-height: 1;\n      letter-spacing: -0.04em;\n    }\n\n    .subtitle {\n      color: #b9afa4;\n      font-size: 1.05rem;\n      margin: 0 0 22px;\n      font-weight: 650;\n    }\n\n    .search {\n      width: 100%;\n      border: 0;\n      border-radius: 16px;\n      padding: 18px 18px;\n      font-size: 1.25rem;\n      outline: none;\n      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), var(--shadow);\n    }\n\n    .filters {\n      display: flex;\n      gap: 10px;\n      overflow-x: auto;\n      padding: 18px 0 2px;\n      scrollbar-width: none;\n    }\n\n    .filters::-webkit-scrollbar { display: none; }\n\n    .filter {\n      border: 1px solid rgba(255,255,255,.12);\n      background: rgba(255,255,255,.06);\n      color: white;\n      border-radius: 16px;\n      padding: 14px 18px;\n      font-size: 1rem;\n      font-weight: 800;\n      white-space: nowrap;\n      cursor: pointer;\n    }\n\n    .filter.active {\n      background: white;\n      color: var(--bg-dark);\n    }\n\n    main {\n      padding: 26px 18px 80px;\n    }\n\n    .count {\n      color: var(--muted);\n      text-transform: uppercase;\n      letter-spacing: .08em;\n      font-size: .95rem;\n      font-weight: 850;\n      margin: 0 0 16px 8px;\n    }\n\n    .section-title {\n      margin: 28px 0 12px 8px;\n      color: var(--muted);\n      font-size: .9rem;\n      font-weight: 900;\n      text-transform: uppercase;\n      letter-spacing: .08em;\n    }\n\n    .contact {\n      display: grid;\n      grid-template-columns: 70px 1fr auto;\n      gap: 14px;\n      align-items: center;\n      background: var(--card);\n      border: 1px solid var(--border);\n      border-radius: 24px;\n      padding: 18px;\n      margin-bottom: 14px;\n      box-shadow: 0 4px 18px rgba(0, 0, 0, .035);\n    }\n\n    .avatar {\n      width: 62px;\n      height: 62px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      font-weight: 900;\n      font-size: 1.35rem;\n      background: #f7efe0;\n      color: var(--gold-dark);\n    }\n\n    .identity h2 {\n      margin: 0 0 4px;\n      font-size: 1.28rem;\n      line-height: 1.1;\n      letter-spacing: -0.03em;\n    }\n\n    .role {\n      margin: 0 0 8px;\n      color: var(--muted);\n      font-size: 1rem;\n      font-weight: 650;\n    }\n\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      border-radius: 999px;\n      padding: 5px 10px;\n      font-size: .82rem;\n      font-weight: 900;\n      background: #f7efe0;\n      color: var(--gold-dark);\n    }\n\n    .tag.urgence { background: #fde8e6; color: var(--red); }\n    .tag.restauration { background: #fff0df; color: var(--orange); }\n    .tag.benevoles { background: #e8f2fb; color: var(--blue); }\n    .tag.infrastructures { background: #eaf6ef; color: var(--green); }\n    .tag.musique { background: #f0ebfa; color: var(--purple); }\n\n    .actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .call, .sms {\n      width: 52px;\n      height: 52px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      text-decoration: none;\n      font-size: 1.3rem;\n      border: 1px solid #f0d189;\n      background: #fff8e8;\n      color: var(--gold-dark);\n    }\n\n    .sms {\n      background: #f9fafb;\n      border-color: var(--border);\n      color: #43392f;\n      font-size: 1.05rem;\n    }\n\n    .empty {\n      background: rgba(255,255,255,.7);\n      border: 1px dashed var(--border);\n      border-radius: 20px;\n      padding: 24px;\n      text-align: center;\n      color: var(--muted);\n      font-weight: 700;\n    }\n\n    .admin-note {\n      margin-top: 30px;\n      padding: 18px;\n      border-radius: 18px;\n      background: rgba(255,255,255,.72);\n      border: 1px solid var(--border);\n      color: var(--muted);\n      font-size: .95rem;\n      line-height: 1.45;\n    }\n\n    @media (max-width: 520px) {\n      header { padding: 24px 16px 26px; }\n      main { padding-left: 12px; padding-right: 12px; }\n      .contact {\n        grid-template-columns: 58px 1fr auto;\n        gap: 12px;\n        padding: 15px;\n      }\n      .avatar {\n        width: 54px;\n        height: 54px;\n        font-size: 1.15rem;\n      }\n      .identity h2 { font-size: 1.15rem; }\n      .role { font-size: .95rem; }\n      .call, .sms { width: 48px; height: 48px; }\n    }\n  <\/style>\n\n\n  <div class=\"app\">\n    <header>\n      <div class=\"topline\">\n        <div class=\"badge\">\ud83e\ude97 2026<\/div>\n        <h1>Cantonale 26<\/h1>\n      <\/div>\n      <p class=\"subtitle\">Annuaire express des organisateurs<\/p>\n      <input id=\"search\" class=\"search\" type=\"search\" placeholder=\"Chercher un nom, un r\u00f4le\u2026\">\n      <div id=\"filters\" class=\"filters\" aria-label=\"Cat\u00e9gories\"><\/div>\n    <\/header>\n\n    <main>\n      <p id=\"count\" class=\"count\"><\/p>\n      <div id=\"list\"><\/div>\n\n      <div class=\"admin-note\">\n        <strong>Version prototype.<\/strong><br>\n        Dans WordPress, les contacts seraient g\u00e9r\u00e9s dans un espace admin avec ACF \/ CPT : nom, r\u00f4le, cat\u00e9gorie, t\u00e9l\u00e9phone, priorit\u00e9 et visibilit\u00e9. Cette page pourrait \u00eatre accessible par QR code et prot\u00e9g\u00e9e par mot de passe.\n      <\/div>\n    <\/main>\n  <\/div>\n\n  <script>\n    const contacts = [\n      { nom: \"Marie Dupont\", role: \"Responsable g\u00e9n\u00e9rale\", categorie: \"Urgence\", tel: \"0790000000\", priorite: true },\n      { nom: \"Jean Rochat\", role: \"Responsable restauration\", categorie: \"Restauration\", tel: \"0791111111\", priorite: true },\n      { nom: \"Anne-Claire Morel\", role: \"Cheffe b\u00e9n\u00e9voles\", categorie: \"B\u00e9n\u00e9voles\", tel: \"0792222222\", priorite: true },\n      { nom: \"Philippe Martin\", role: \"Infrastructure et mat\u00e9riel\", categorie: \"Infrastructures\", tel: \"0793333333\", priorite: true },\n      { nom: \"\u00c9ric Favre\", role: \"Coordination musicale\", categorie: \"Musique\", tel: \"0794444444\", priorite: true },\n      { nom: \"Sophie Keller\", role: \"Repas de soutien\", categorie: \"Restauration\", tel: \"0795555555\", priorite: false },\n      { nom: \"Luca Perrin\", role: \"Accueil des soci\u00e9t\u00e9s\", categorie: \"Musique\", tel: \"0796666666\", priorite: false },\n      { nom: \"Nadia Berger\", role: \"Planning b\u00e9n\u00e9voles\", categorie: \"B\u00e9n\u00e9voles\", tel: \"0797777777\", priorite: false },\n      { nom: \"Marc B\u00fchler\", role: \"\u00c9lectricit\u00e9 et technique\", categorie: \"Infrastructures\", tel: \"0798888888\", priorite: false },\n      { nom: \"Poste sanitaire\", role: \"Premiers secours\", categorie: \"Urgence\", tel: \"0799999999\", priorite: true }\n    ];\n\n    const categories = [\"Tous\", \"Urgence\", \"Restauration\", \"B\u00e9n\u00e9voles\", \"Infrastructures\", \"Musique\"];\n    let activeCategory = \"Tous\";\n\n    const searchInput = document.querySelector(\"#search\");\n    const filters = document.querySelector(\"#filters\");\n    const list = document.querySelector(\"#list\");\n    const count = document.querySelector(\"#count\");\n\n    function initials(name) {\n      return name\n        .split(\" \")\n        .filter(Boolean)\n        .slice(0, 2)\n        .map(part => part[0])\n        .join(\"\")\n        .toUpperCase();\n    }\n\n    function normalize(value) {\n      return value\n        .toLowerCase()\n        .normalize(\"NFD\")\n        .replace(\/[\\u0300-\\u036f]\/g, \"\");\n    }\n\n    function categoryClass(category) {\n      return normalize(category).replace(\/\\s+\/g, \"-\");\n    }\n\n    function renderFilters() {\n      filters.innerHTML = categories.map(category => `\n        <button class=\"filter ${category === activeCategory ? \"active\" : \"\"}\" data-category=\"${category}\">\n          ${category === \"Urgence\" ? \"\ud83d\udea8 \" : \"\"}${category}\n        <\/button>\n      `).join(\"\");\n\n      document.querySelectorAll(\".filter\").forEach(button => {\n        button.addEventListener(\"click\", () => {\n          activeCategory = button.dataset.category;\n          render();\n        });\n      });\n    }\n\n    function render() {\n      renderFilters();\n      const q = normalize(searchInput.value.trim());\n\n      const filtered = contacts\n        .filter(contact => activeCategory === \"Tous\" || contact.categorie === activeCategory)\n        .filter(contact => {\n          const haystack = normalize(`${contact.nom} ${contact.role} ${contact.categorie}`);\n          return haystack.includes(q);\n        })\n        .sort((a, b) => Number(b.priorite) - Number(a.priorite) || a.nom.localeCompare(b.nom));\n\n      count.textContent = `${filtered.length} contact${filtered.length > 1 ? \"s\" : \"\"}`;\n\n      if (!filtered.length) {\n        list.innerHTML = `<div class=\"empty\">Aucun contact trouv\u00e9.<\/div>`;\n        return;\n      }\n\n      list.innerHTML = filtered.map(contact => `\n        <article class=\"contact\">\n          <div class=\"avatar\">${initials(contact.nom)}<\/div>\n          <div class=\"identity\">\n            <h2>${contact.nom}<\/h2>\n            <p class=\"role\">${contact.role}<\/p>\n            <span class=\"tag ${categoryClass(contact.categorie)}\">${contact.categorie}<\/span>\n          <\/div>\n          <div class=\"actions\">\n            <a class=\"call\" href=\"tel:${contact.tel}\" aria-label=\"Appeler ${contact.nom}\">\u260e<\/a>\n            <a class=\"sms\" href=\"sms:${contact.tel}\" aria-label=\"Envoyer un SMS \u00e0 ${contact.nom}\">SMS<\/a>\n          <\/div>\n        <\/article>\n      `).join(\"\");\n    }\n\n    searchInput.addEventListener(\"input\", render);\n    render();\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Cantonale 26 \u2014 Annuaire organisateurs \ud83e\ude97 2026 Cantonale 26 Annuaire express des organisateurs Version prototype.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-43","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":1,"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/pages\/43\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/jeux-maths.ch\/index.php\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}