Memory des symboles \u2014 Jeu CO<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper: #F6F3E7;\n --paper-line: #E3DCC4;\n --ink: #23301F;\n --ink-soft: #56604F;\n --forest: #2F4B3C;\n --forest-dark: #1D3226;\n --magenta: #B8005E;\n --magenta-dark: #8C0048;\n --brown: #8B5E34;\n --blue: #1C6FA8;\n --gold: #C99A2E;\n --card: #FFFDF6;\n --error: #A93226;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n background:\n repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(139,94,52,0.07) 27px, rgba(139,94,52,0.07) 28px),\n var(--paper);\n color:var(--ink);\n font-family:'Karla',sans-serif;\n min-height:100vh;\n display:flex; align-items:flex-start; justify-content:center;\n padding:32px 16px 60px;\n -webkit-tap-highlight-color:transparent;\n }\n .wrap{ width:100%; max-width:600px; }\n\n .masthead{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }\n .masthead h1{\n font-family:'Oswald',sans-serif; font-weight:700;\n font-size:clamp(26px,6vw,36px); letter-spacing:0.5px;\n color:var(--forest-dark); margin:0; line-height:1;\n }\n .masthead p{ margin:4px 0 0; color:var(--ink-soft); font-size:14.5px; }\n\n .sheet{ position:relative; background:var(--card); border:2px solid var(--forest-dark); padding:26px 24px 24px; }\n .sheet::before, .sheet::after{ content:\"\"; position:absolute; width:14px;height:14px; border:2px solid var(--magenta); }\n .sheet::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }\n .sheet::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }\n\n .grid-ref{ position:absolute; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1px; color:var(--brown); opacity:0.75; }\n .grid-ref.top-right{ top:6px; right:14px; }\n .grid-ref.bottom-left{ bottom:6px; left:14px; }\n\n .stats-row{\n display:flex; justify-content:space-between; align-items:center;\n font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.5px; color:var(--ink-soft);\n margin-bottom:16px;\n }\n .stats-row .val{ color:var(--forest-dark); font-weight:600; }\n .best-line{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin:-10px 0 16px; }\n\n .board{\n display:grid; grid-template-columns:repeat(4, 1fr); gap:9px;\n perspective:800px;\n }\n .card{ aspect-ratio:3\/4; cursor:pointer; }\n .card-inner{\n position:relative; width:100%; height:100%;\n transform-style:preserve-3d; transition:transform .45s ease;\n }\n .card.flipped .card-inner{ transform:rotateY(180deg); }\n .card-face{\n position:absolute; inset:0; backface-visibility:hidden;\n display:flex; align-items:center; justify-content:center;\n border:1.5px solid var(--forest-dark);\n }\n .card-front{\n background:\n repeating-linear-gradient(45deg, #E9E2CB, #E9E2CB 6px, #DFD6BA 6px, #DFD6BA 12px);\n border-color:var(--forest-dark);\n }\n .card-front.type-icon{ border-color:var(--magenta); }\n .card-front.type-icon::after{ content:\"SYMBOLE\"; }\n .card-front.type-name{\n border-color:var(--forest);\n background:\n repeating-linear-gradient(45deg, #E3EAE0, #E3EAE0 6px, #D7E0D2 6px, #D7E0D2 12px);\n }\n .card-front.type-name::after{ content:\"NOM\"; }\n .card-front::after{\n position:absolute; bottom:4px; left:0; right:0; text-align:center;\n font-family:'Oswald',sans-serif; font-size:8px; letter-spacing:1.2px;\n color:var(--ink-soft); opacity:0.7;\n }\n .card-front svg{ width:34%; height:34%; opacity:0.85; }\n .card-face.card-back{\n transform:rotateY(180deg);\n flex-direction:column; gap:4px; padding:6px; text-align:center;\n }\n .card-back.type-icon{ background:#fff; border-color:var(--magenta); }\n .card-back.type-name{ background:#EEF2EA; border-color:var(--forest); }\n .card-back.type-icon svg{ width:56%; height:56%; }\n .card-back.type-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; color:var(--forest-dark); line-height:1.2; }\n .card.matched .card-back{ background:#E8F2E7; border-color:var(--forest); }\n .card.mismatch .card-back{ background:#F7E7E3; border-color:var(--error); }\n\n .action-row{ display:flex; justify-content:center; margin-top:20px; }\n .btn{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.5px; font-weight:600; border:none; padding:12px 26px; cursor:pointer; }\n .btn-primary{ background:var(--magenta); color:#fff; }\n .btn-primary:hover{ background:var(--magenta-dark); }\n\n .result{ display:none; text-align:center; }\n .result.show{ display:block; }\n .stars{ font-size:34px; letter-spacing:6px; margin:6px 0 4px; }\n .stars .on{ color:var(--gold); }\n .stars .off{ color:var(--paper-line); }\n .result .big-line{ font-family:'Oswald',sans-serif; font-size:22px; color:var(--forest-dark); margin:6px 0 2px; font-weight:600; }\n .result .sub-line{ font-size:14px; color:var(--ink-soft); margin:0 0 18px; }\n .verdict{ font-size:15px; color:var(--ink-soft); max-width:420px; margin:0 auto 22px; }\n .restart-btn{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.5px; font-weight:600; background:var(--forest); color:#fff; border:none; padding:12px 26px; cursor:pointer; }\n .restart-btn:hover{ background:var(--forest-dark); }\n .board-wrap.hidden{ display:none; }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n <div class=\"masthead\">\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\">\n <circle cx=\"23\" cy=\"23\" r=\"20\" fill=\"none\" stroke=\"#1D3226\" stroke-width=\"2\"\/>\n <polygon points=\"23,7 26,23 23,20 20,23\" fill=\"#B8005E\"\/>\n <polygon points=\"23,39 26,23 23,26 20,23\" fill=\"#1D3226\"\/>\n <circle cx=\"23\" cy=\"23\" r=\"2.4\" fill=\"#1D3226\"\/>\n <\/svg>\n <div>\n <h1>Memory des symboles<\/h1>\n <p>Retrouve chaque symbole et son nom, le plus vite possible<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sheet\">\n <span class=\"grid-ref top-right\">8 PAIRES<\/span>\n <span class=\"grid-ref bottom-left\">1 : 10 000<\/span>\n\n <div class=\"board-wrap\" id=\"boardWrap\">\n <div class=\"stats-row\">\n <span>TEMPS <span class=\"val\" id=\"timeLabel\">00:00<\/span><\/span>\n <span>COUPS <span class=\"val\" id=\"movesLabel\">0<\/span><\/span>\n <span>PAIRES <span class=\"val\" id=\"pairsLabel\">0 \/ 8<\/span><\/span>\n <\/div>\n <p class=\"best-line\" id=\"bestLine\"><\/p>\n\n <div class=\"board\" id=\"board\"><\/div>\n <\/div>\n\n <div class=\"result\" id=\"result\">\n <p style=\"font-family:'Oswald',sans-serif;letter-spacing:1px;color:var(--ink-soft);margin-bottom:4px;\">PARCOURS TERMIN\u00c9<\/p>\n <div class=\"stars\" id=\"stars\"><\/div>\n <p class=\"big-line\" id=\"finalTime\"><\/p>\n <p class=\"sub-line\" id=\"finalMoves\"><\/p>\n <p class=\"verdict\" id=\"verdict\"><\/p>\n <button class=\"restart-btn\" id=\"restartBtn\">Rejouer<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\nconst ICONS = {\n boulder: `<svg viewBox=\"0 0 40 40\"><path d=\"M20 15c6 0 11 5 10.5 10.5S25 34 20 33.5s-10-5.5-9.5-11S14 15 20 15z\" fill=\"#1a1a1a\"\/><\/svg>`,\n cliff: `<svg viewBox=\"0 0 40 40\"><path d=\"M4 16c6-3 12 3 18-1s10-1 14 1\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/>${[7,13,19,25,31].map(x=>`<line x1=\"${x}\" y1=\"16\" x2=\"${x-2.5}\" y2=\"24\" stroke=\"#1a1a1a\" stroke-width=\"2\"\/>`).join('')}<\/svg>`,\n knoll: `<svg viewBox=\"0 0 40 40\"><ellipse cx=\"20\" cy=\"23\" rx=\"12\" ry=\"8\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"2.6\"\/><line x1=\"20\" y1=\"15\" x2=\"20\" y2=\"6\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"11\" y1=\"18\" x2=\"4\" y2=\"11\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"29\" y1=\"18\" x2=\"36\" y2=\"11\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><\/svg>`,\n depression: `<svg viewBox=\"0 0 40 40\"><ellipse cx=\"20\" cy=\"20\" rx=\"13\" ry=\"9\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"2.6\"\/><line x1=\"20\" y1=\"20\" x2=\"20\" y2=\"11\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"14\" y1=\"23\" x2=\"7\" y2=\"30\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"26\" y1=\"23\" x2=\"33\" y2=\"30\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><\/svg>`,\n water: `<svg viewBox=\"0 0 40 40\"><path d=\"M13 9c-5 3-7 10-4 15 3 5 10 7 15 4 5-3 7-10 4-15-3-5-10-7-15-4z\" fill=\"#1C6FA8\"\/><\/svg>`,\n marsh: `<svg viewBox=\"0 0 40 40\"><line x1=\"6\" y1=\"14\" x2=\"15\" y2=\"14\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><line x1=\"22\" y1=\"14\" x2=\"31\" y2=\"14\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><line x1=\"6\" y1=\"24\" x2=\"15\" y2=\"24\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><line x1=\"22\" y1=\"24\" x2=\"31\" y2=\"24\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><\/svg>`,\n thicket: `<svg viewBox=\"0 0 40 40\"><path d=\"M12 12c-5 4-6 12-1 17 5 5 14 5 18 0 4-5 3-13-2-17-5-4-11-4-15 0z\" fill=\"#2F4B3C\"\/><circle cx=\"14\" cy=\"16\" r=\"1.6\" fill=\"#F6F3E7\"\/><circle cx=\"24\" cy=\"14\" r=\"1.6\" fill=\"#F6F3E7\"\/><circle cx=\"16\" cy=\"24\" r=\"1.6\" fill=\"#F6F3E7\"\/><circle cx=\"25\" cy=\"24\" r=\"1.6\" fill=\"#F6F3E7\"\/><\/svg>`,\n building: `<svg viewBox=\"0 0 40 40\"><rect x=\"10\" y=\"10\" width=\"20\" height=\"20\" fill=\"#1a1a1a\"\/><\/svg>`\n};\nconst NAMES = {\n boulder:'Bloc rocheux', cliff:'Falaise', knoll:'Butte', depression:'D\u00e9pression',\n water:\"Point d'eau\", marsh:'Marais', thicket:'Fourr\u00e9', building:'B\u00e2timent'\n};\nconst BACK_ART = `<svg viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"16\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"1.4\" opacity=\"0.6\"\/><line x1=\"20\" y1=\"4\" x2=\"20\" y2=\"36\" stroke=\"#8B5E34\" stroke-width=\"1\" opacity=\"0.4\"\/><line x1=\"4\" y1=\"20\" x2=\"36\" y2=\"20\" stroke=\"#8B5E34\" stroke-width=\"1\" opacity=\"0.4\"\/><\/svg>`;\n\nconst SYM_IDS = Object.keys(ICONS);\n\nlet deck = [];\nlet firstCard = null, secondCard = null, lock = false;\nlet matches = 0, moves = 0, seconds = 0, started = false, timerHandle = null;\nlet bestScore = null; \/\/ {seconds, moves}\n\nfunction shuffle(arr){\n const a = arr.slice();\n for(let i=a.length-1;i>0;i--){ const j = Math.floor(Math.random()*(i+1)); [a[i],a[j]]=[a[j],a[i]]; }\n return a;\n}\n\nfunction pad(n){ return String(n).padStart(2,'0'); }\nfunction formatTime(s){ return `${pad(Math.floor(s\/60))}:${pad(s%60)}`; }\n\nfunction buildBoard(){\n matches = 0; moves = 0; seconds = 0; started = false; lock = false;\n firstCard = null; secondCard = null;\n clearInterval(timerHandle);\n\n deck = [];\n SYM_IDS.forEach(id => {\n deck.push({ symId: id, type: 'icon' });\n deck.push({ symId: id, type: 'name' });\n });\n deck = shuffle(deck);\n\n document.getElementById('timeLabel').textContent = '00:00';\n document.getElementById('movesLabel').textContent = '0';\n document.getElementById('pairsLabel').textContent = '0 \/ 8';\n document.getElementById('bestLine').textContent = bestScore\n ? `Ton meilleur score cette session : ${formatTime(bestScore.seconds)} \u2014 ${bestScore.moves} coups`\n : '';\n\n const board = document.getElementById('board');\n board.innerHTML = '';\n deck.forEach((c, idx) => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.index = idx;\n card.dataset.symId = c.symId;\n const backContent = c.type === 'icon'\n ? `<div class=\"card-face card-back type-icon\">${ICONS[c.symId]}<\/div>`\n : `<div class=\"card-face card-back type-name\">${NAMES[c.symId]}<\/div>`;\n card.innerHTML = `\n <div class=\"card-inner\">\n <div class=\"card-face card-front type-${c.type}\">${BACK_ART}<\/div>\n ${backContent}\n <\/div>`;\n card.addEventListener('click', () => onCardClick(card));\n board.appendChild(card);\n });\n\n document.getElementById('result').classList.remove('show');\n document.getElementById('boardWrap').classList.remove('hidden');\n}\n\nfunction onCardClick(card){\n if(lock) return;\n if(card.classList.contains('flipped') || card.classList.contains('matched')) return;\n\n if(!started){\n started = true;\n timerHandle = setInterval(() => {\n seconds++;\n document.getElementById('timeLabel').textContent = formatTime(seconds);\n }, 1000);\n }\n\n card.classList.add('flipped');\n\n if(!firstCard){\n firstCard = card;\n return;\n }\n secondCard = card;\n lock = true;\n moves++;\n document.getElementById('movesLabel').textContent = moves;\n\n const isMatch = firstCard.dataset.symId === secondCard.dataset.symId;\n\n if(isMatch){\n setTimeout(() => {\n firstCard.classList.add('matched');\n secondCard.classList.add('matched');\n matches++;\n document.getElementById('pairsLabel').textContent = `${matches} \/ 8`;\n firstCard = null; secondCard = null; lock = false;\n if(matches === 8) finishGame();\n }, 350);\n } else {\n firstCard.classList.add('mismatch');\n secondCard.classList.add('mismatch');\n setTimeout(() => {\n firstCard.classList.remove('flipped','mismatch');\n secondCard.classList.remove('flipped','mismatch');\n firstCard = null; secondCard = null; lock = false;\n }, 800);\n }\n}\n\nfunction finishGame(){\n clearInterval(timerHandle);\n if(!bestScore || seconds < bestScore.seconds || (seconds === bestScore.seconds && moves < bestScore.moves)){\n bestScore = { seconds, moves };\n }\n\n document.getElementById('boardWrap').classList.add('hidden');\n document.getElementById('result').classList.add('show');\n\n let starCount;\n if(moves <= 10) starCount = 3;\n else if(moves <= 14) starCount = 2;\n else starCount = 1;\n\n document.getElementById('stars').innerHTML = [1,2,3].map(i =>\n `<span class=\"${i<=starCount?'on':'off'}\">\u2605<\/span>`\n ).join('');\n\n document.getElementById('finalTime').textContent = `Termin\u00e9 en ${formatTime(seconds)}`;\n document.getElementById('finalMoves').textContent = `${moves} coups pour 8 paires`;\n\n let verdict;\n if(starCount === 3) verdict = \"M\u00e9moire de champion \u2014 tu associes les symboles \u00e0 leur nom sans h\u00e9siter.\";\n else if(starCount === 2) verdict = \"Bien jou\u00e9. Encore quelques parties et tu retiendras tous les symboles au premier coup d'\u0153il.\";\n else verdict = \"Les symboles commencent \u00e0 te devenir familiers \u2014 rejoue pour ancrer la m\u00e9moire.\";\n document.getElementById('verdict').textContent = verdict;\n}\n\ndocument.getElementById('restartBtn').addEventListener('click', buildBoard);\n\nbuildBoard();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Memory des symboles \u2014 Jeu CO Memory des symboles Retrouve chaque symbole et son nom, le plus vite possible 8 PAIRES 1 : 10 000 TEMPS 00:00 COUPS 0 PAIRES 0 \/ 8 PARCOURS TERMIN\u00c9 Rejouer<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-4696","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/comments?post=4696"}],"version-history":[{"count":4,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4696\/revisions"}],"predecessor-version":[{"id":4702,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4696\/revisions\/4702"}],"wp:attachment":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/media?parent=4696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nMemory des symboles \u2014 Jeu CO<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper: #F6F3E7;\n --paper-line: #E3DCC4;\n --ink: #23301F;\n --ink-soft: #56604F;\n --forest: #2F4B3C;\n --forest-dark: #1D3226;\n --magenta: #B8005E;\n --magenta-dark: #8C0048;\n --brown: #8B5E34;\n --blue: #1C6FA8;\n --gold: #C99A2E;\n --card: #FFFDF6;\n --error: #A93226;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n background:\n repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(139,94,52,0.07) 27px, rgba(139,94,52,0.07) 28px),\n var(--paper);\n color:var(--ink);\n font-family:'Karla',sans-serif;\n min-height:100vh;\n display:flex; align-items:flex-start; justify-content:center;\n padding:32px 16px 60px;\n -webkit-tap-highlight-color:transparent;\n }\n .wrap{ width:100%; max-width:600px; }\n\n .masthead{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }\n .masthead h1{\n font-family:'Oswald',sans-serif; font-weight:700;\n font-size:clamp(26px,6vw,36px); letter-spacing:0.5px;\n color:var(--forest-dark); margin:0; line-height:1;\n }\n .masthead p{ margin:4px 0 0; color:var(--ink-soft); font-size:14.5px; }\n\n .sheet{ position:relative; background:var(--card); border:2px solid var(--forest-dark); padding:26px 24px 24px; }\n .sheet::before, .sheet::after{ content:\"\"; position:absolute; width:14px;height:14px; border:2px solid var(--magenta); }\n .sheet::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }\n .sheet::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }\n\n .grid-ref{ position:absolute; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1px; color:var(--brown); opacity:0.75; }\n .grid-ref.top-right{ top:6px; right:14px; }\n .grid-ref.bottom-left{ bottom:6px; left:14px; }\n\n .stats-row{\n display:flex; justify-content:space-between; align-items:center;\n font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.5px; color:var(--ink-soft);\n margin-bottom:16px;\n }\n .stats-row .val{ color:var(--forest-dark); font-weight:600; }\n .best-line{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin:-10px 0 16px; }\n\n .board{\n display:grid; grid-template-columns:repeat(4, 1fr); gap:9px;\n perspective:800px;\n }\n .card{ aspect-ratio:3\/4; cursor:pointer; }\n .card-inner{\n position:relative; width:100%; height:100%;\n transform-style:preserve-3d; transition:transform .45s ease;\n }\n .card.flipped .card-inner{ transform:rotateY(180deg); }\n .card-face{\n position:absolute; inset:0; backface-visibility:hidden;\n display:flex; align-items:center; justify-content:center;\n border:1.5px solid var(--forest-dark);\n }\n .card-front{\n background:\n repeating-linear-gradient(45deg, #E9E2CB, #E9E2CB 6px, #DFD6BA 6px, #DFD6BA 12px);\n border-color:var(--forest-dark);\n }\n .card-front.type-icon{ border-color:var(--magenta); }\n .card-front.type-icon::after{ content:\"SYMBOLE\"; }\n .card-front.type-name{\n border-color:var(--forest);\n background:\n repeating-linear-gradient(45deg, #E3EAE0, #E3EAE0 6px, #D7E0D2 6px, #D7E0D2 12px);\n }\n .card-front.type-name::after{ content:\"NOM\"; }\n .card-front::after{\n position:absolute; bottom:4px; left:0; right:0; text-align:center;\n font-family:'Oswald',sans-serif; font-size:8px; letter-spacing:1.2px;\n color:var(--ink-soft); opacity:0.7;\n }\n .card-front svg{ width:34%; height:34%; opacity:0.85; }\n .card-face.card-back{\n transform:rotateY(180deg);\n flex-direction:column; gap:4px; padding:6px; text-align:center;\n }\n .card-back.type-icon{ background:#fff; border-color:var(--magenta); }\n .card-back.type-name{ background:#EEF2EA; border-color:var(--forest); }\n .card-back.type-icon svg{ width:56%; height:56%; }\n .card-back.type-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; color:var(--forest-dark); line-height:1.2; }\n .card.matched .card-back{ background:#E8F2E7; border-color:var(--forest); }\n .card.mismatch .card-back{ background:#F7E7E3; border-color:var(--error); }\n\n .action-row{ display:flex; justify-content:center; margin-top:20px; }\n .btn{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.5px; font-weight:600; border:none; padding:12px 26px; cursor:pointer; }\n .btn-primary{ background:var(--magenta); color:#fff; }\n .btn-primary:hover{ background:var(--magenta-dark); }\n\n .result{ display:none; text-align:center; }\n .result.show{ display:block; }\n .stars{ font-size:34px; letter-spacing:6px; margin:6px 0 4px; }\n .stars .on{ color:var(--gold); }\n .stars .off{ color:var(--paper-line); }\n .result .big-line{ font-family:'Oswald',sans-serif; font-size:22px; color:var(--forest-dark); margin:6px 0 2px; font-weight:600; }\n .result .sub-line{ font-size:14px; color:var(--ink-soft); margin:0 0 18px; }\n .verdict{ font-size:15px; color:var(--ink-soft); max-width:420px; margin:0 auto 22px; }\n .restart-btn{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.5px; font-weight:600; background:var(--forest); color:#fff; border:none; padding:12px 26px; cursor:pointer; }\n .restart-btn:hover{ background:var(--forest-dark); }\n .board-wrap.hidden{ display:none; }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n <div class=\"masthead\">\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\">\n <circle cx=\"23\" cy=\"23\" r=\"20\" fill=\"none\" stroke=\"#1D3226\" stroke-width=\"2\"\/>\n <polygon points=\"23,7 26,23 23,20 20,23\" fill=\"#B8005E\"\/>\n <polygon points=\"23,39 26,23 23,26 20,23\" fill=\"#1D3226\"\/>\n <circle cx=\"23\" cy=\"23\" r=\"2.4\" fill=\"#1D3226\"\/>\n <\/svg>\n <div>\n <h1>Memory des symboles<\/h1>\n <p>Retrouve chaque symbole et son nom, le plus vite possible<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sheet\">\n <span class=\"grid-ref top-right\">8 PAIRES<\/span>\n <span class=\"grid-ref bottom-left\">1 : 10 000<\/span>\n\n <div class=\"board-wrap\" id=\"boardWrap\">\n <div class=\"stats-row\">\n <span>TEMPS <span class=\"val\" id=\"timeLabel\">00:00<\/span><\/span>\n <span>COUPS <span class=\"val\" id=\"movesLabel\">0<\/span><\/span>\n <span>PAIRES <span class=\"val\" id=\"pairsLabel\">0 \/ 8<\/span><\/span>\n <\/div>\n <p class=\"best-line\" id=\"bestLine\"><\/p>\n\n <div class=\"board\" id=\"board\"><\/div>\n <\/div>\n\n <div class=\"result\" id=\"result\">\n <p style=\"font-family:'Oswald',sans-serif;letter-spacing:1px;color:var(--ink-soft);margin-bottom:4px;\">PARCOURS TERMIN\u00c9<\/p>\n <div class=\"stars\" id=\"stars\"><\/div>\n <p class=\"big-line\" id=\"finalTime\"><\/p>\n <p class=\"sub-line\" id=\"finalMoves\"><\/p>\n <p class=\"verdict\" id=\"verdict\"><\/p>\n <button class=\"restart-btn\" id=\"restartBtn\">Rejouer<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\nconst ICONS = {\n boulder: `<svg viewBox=\"0 0 40 40\"><path d=\"M20 15c6 0 11 5 10.5 10.5S25 34 20 33.5s-10-5.5-9.5-11S14 15 20 15z\" fill=\"#1a1a1a\"\/><\/svg>`,\n cliff: `<svg viewBox=\"0 0 40 40\"><path d=\"M4 16c6-3 12 3 18-1s10-1 14 1\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/>${[7,13,19,25,31].map(x=>`<line x1=\"${x}\" y1=\"16\" x2=\"${x-2.5}\" y2=\"24\" stroke=\"#1a1a1a\" stroke-width=\"2\"\/>`).join('')}<\/svg>`,\n knoll: `<svg viewBox=\"0 0 40 40\"><ellipse cx=\"20\" cy=\"23\" rx=\"12\" ry=\"8\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"2.6\"\/><line x1=\"20\" y1=\"15\" x2=\"20\" y2=\"6\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"11\" y1=\"18\" x2=\"4\" y2=\"11\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"29\" y1=\"18\" x2=\"36\" y2=\"11\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><\/svg>`,\n depression: `<svg viewBox=\"0 0 40 40\"><ellipse cx=\"20\" cy=\"20\" rx=\"13\" ry=\"9\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"2.6\"\/><line x1=\"20\" y1=\"20\" x2=\"20\" y2=\"11\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"14\" y1=\"23\" x2=\"7\" y2=\"30\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><line x1=\"26\" y1=\"23\" x2=\"33\" y2=\"30\" stroke=\"#8B5E34\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><\/svg>`,\n water: `<svg viewBox=\"0 0 40 40\"><path d=\"M13 9c-5 3-7 10-4 15 3 5 10 7 15 4 5-3 7-10 4-15-3-5-10-7-15-4z\" fill=\"#1C6FA8\"\/><\/svg>`,\n marsh: `<svg viewBox=\"0 0 40 40\"><line x1=\"6\" y1=\"14\" x2=\"15\" y2=\"14\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><line x1=\"22\" y1=\"14\" x2=\"31\" y2=\"14\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><line x1=\"6\" y1=\"24\" x2=\"15\" y2=\"24\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><line x1=\"22\" y1=\"24\" x2=\"31\" y2=\"24\" stroke=\"#1C6FA8\" stroke-width=\"2.6\"\/><\/svg>`,\n thicket: `<svg viewBox=\"0 0 40 40\"><path d=\"M12 12c-5 4-6 12-1 17 5 5 14 5 18 0 4-5 3-13-2-17-5-4-11-4-15 0z\" fill=\"#2F4B3C\"\/><circle cx=\"14\" cy=\"16\" r=\"1.6\" fill=\"#F6F3E7\"\/><circle cx=\"24\" cy=\"14\" r=\"1.6\" fill=\"#F6F3E7\"\/><circle cx=\"16\" cy=\"24\" r=\"1.6\" fill=\"#F6F3E7\"\/><circle cx=\"25\" cy=\"24\" r=\"1.6\" fill=\"#F6F3E7\"\/><\/svg>`,\n building: `<svg viewBox=\"0 0 40 40\"><rect x=\"10\" y=\"10\" width=\"20\" height=\"20\" fill=\"#1a1a1a\"\/><\/svg>`\n};\nconst NAMES = {\n boulder:'Bloc rocheux', cliff:'Falaise', knoll:'Butte', depression:'D\u00e9pression',\n water:\"Point d'eau\", marsh:'Marais', thicket:'Fourr\u00e9', building:'B\u00e2timent'\n};\nconst BACK_ART = `<svg viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"16\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"1.4\" opacity=\"0.6\"\/><line x1=\"20\" y1=\"4\" x2=\"20\" y2=\"36\" stroke=\"#8B5E34\" stroke-width=\"1\" opacity=\"0.4\"\/><line x1=\"4\" y1=\"20\" x2=\"36\" y2=\"20\" stroke=\"#8B5E34\" stroke-width=\"1\" opacity=\"0.4\"\/><\/svg>`;\n\nconst SYM_IDS = Object.keys(ICONS);\n\nlet deck = [];\nlet firstCard = null, secondCard = null, lock = false;\nlet matches = 0, moves = 0, seconds = 0, started = false, timerHandle = null;\nlet bestScore = null; \/\/ {seconds, moves}\n\nfunction shuffle(arr){\n const a = arr.slice();\n for(let i=a.length-1;i>0;i--){ const j = Math.floor(Math.random()*(i+1)); [a[i],a[j]]=[a[j],a[i]]; }\n return a;\n}\n\nfunction pad(n){ return String(n).padStart(2,'0'); }\nfunction formatTime(s){ return `${pad(Math.floor(s\/60))}:${pad(s%60)}`; }\n\nfunction buildBoard(){\n matches = 0; moves = 0; seconds = 0; started = false; lock = false;\n firstCard = null; secondCard = null;\n clearInterval(timerHandle);\n\n deck = [];\n SYM_IDS.forEach(id => {\n deck.push({ symId: id, type: 'icon' });\n deck.push({ symId: id, type: 'name' });\n });\n deck = shuffle(deck);\n\n document.getElementById('timeLabel').textContent = '00:00';\n document.getElementById('movesLabel').textContent = '0';\n document.getElementById('pairsLabel').textContent = '0 \/ 8';\n document.getElementById('bestLine').textContent = bestScore\n ? `Ton meilleur score cette session : ${formatTime(bestScore.seconds)} \u2014 ${bestScore.moves} coups`\n : '';\n\n const board = document.getElementById('board');\n board.innerHTML = '';\n deck.forEach((c, idx) => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.index = idx;\n card.dataset.symId = c.symId;\n const backContent = c.type === 'icon'\n ? `<div class=\"card-face card-back type-icon\">${ICONS[c.symId]}<\/div>`\n : `<div class=\"card-face card-back type-name\">${NAMES[c.symId]}<\/div>`;\n card.innerHTML = `\n <div class=\"card-inner\">\n <div class=\"card-face card-front type-${c.type}\">${BACK_ART}<\/div>\n ${backContent}\n <\/div>`;\n card.addEventListener('click', () => onCardClick(card));\n board.appendChild(card);\n });\n\n document.getElementById('result').classList.remove('show');\n document.getElementById('boardWrap').classList.remove('hidden');\n}\n\nfunction onCardClick(card){\n if(lock) return;\n if(card.classList.contains('flipped') || card.classList.contains('matched')) return;\n\n if(!started){\n started = true;\n timerHandle = setInterval(() => {\n seconds++;\n document.getElementById('timeLabel').textContent = formatTime(seconds);\n }, 1000);\n }\n\n card.classList.add('flipped');\n\n if(!firstCard){\n firstCard = card;\n return;\n }\n secondCard = card;\n lock = true;\n moves++;\n document.getElementById('movesLabel').textContent = moves;\n\n const isMatch = firstCard.dataset.symId === secondCard.dataset.symId;\n\n if(isMatch){\n setTimeout(() => {\n firstCard.classList.add('matched');\n secondCard.classList.add('matched');\n matches++;\n document.getElementById('pairsLabel').textContent = `${matches} \/ 8`;\n firstCard = null; secondCard = null; lock = false;\n if(matches === 8) finishGame();\n }, 350);\n } else {\n firstCard.classList.add('mismatch');\n secondCard.classList.add('mismatch');\n setTimeout(() => {\n firstCard.classList.remove('flipped','mismatch');\n secondCard.classList.remove('flipped','mismatch');\n firstCard = null; secondCard = null; lock = false;\n }, 800);\n }\n}\n\nfunction finishGame(){\n clearInterval(timerHandle);\n if(!bestScore || seconds < bestScore.seconds || (seconds === bestScore.seconds && moves < bestScore.moves)){\n bestScore = { seconds, moves };\n }\n\n document.getElementById('boardWrap').classList.add('hidden');\n document.getElementById('result').classList.add('show');\n\n let starCount;\n if(moves <= 10) starCount = 3;\n else if(moves <= 14) starCount = 2;\n else starCount = 1;\n\n document.getElementById('stars').innerHTML = [1,2,3].map(i =>\n `<span class=\"${i<=starCount?'on':'off'}\">\u2605<\/span>`\n ).join('');\n\n document.getElementById('finalTime').textContent = `Termin\u00e9 en ${formatTime(seconds)}`;\n document.getElementById('finalMoves').textContent = `${moves} coups pour 8 paires`;\n\n let verdict;\n if(starCount === 3) verdict = \"M\u00e9moire de champion \u2014 tu associes les symboles \u00e0 leur nom sans h\u00e9siter.\";\n else if(starCount === 2) verdict = \"Bien jou\u00e9. Encore quelques parties et tu retiendras tous les symboles au premier coup d'\u0153il.\";\n else verdict = \"Les symboles commencent \u00e0 te devenir familiers \u2014 rejoue pour ancrer la m\u00e9moire.\";\n document.getElementById('verdict').textContent = verdict;\n}\n\ndocument.getElementById('restartBtn').addEventListener('click', buildBoard);\n\nbuildBoard();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Memory des symboles \u2014 Jeu CO Memory des symboles Retrouve chaque symbole et son nom, le plus vite possible 8 PAIRES 1 : 10 000 TEMPS 00:00 COUPS 0 PAIRES 0 \/ 8 PARCOURS TERMIN\u00c9 Rejouer<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-4696","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/comments?post=4696"}],"version-history":[{"count":4,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4696\/revisions"}],"predecessor-version":[{"id":4702,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4696\/revisions\/4702"}],"wp:attachment":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/media?parent=4696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}