{"id":487,"date":"2026-01-26T11:14:31","date_gmt":"2026-01-26T10:14:31","guid":{"rendered":"https:\/\/boarscale.com\/index.php\/studio\/"},"modified":"2026-03-08T08:14:22","modified_gmt":"2026-03-08T07:14:22","slug":"studio","status":"publish","type":"page","link":"https:\/\/boarscale.com\/index.php\/studio\/","title":{"rendered":"STRATEGIC EYE"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><em>Perspective changes everything<\/em><\/h2>\n\n\n\n<!-- CONTENEUR HOME -->\n<div style=\"\n    max-width: 90%;\n    width: 700px;\n    min-width: 250px;\n    margin: 3rem auto;\n    padding: 0 1rem;\n    box-sizing: border-box;\n\">\n    <div id=\"home-quote-container\" style=\"\n        height: 140px;                    \/* hauteur fixe du bloc *\/\n        display: flex;\n        align-items: center;              \/* centrage vertical *\/\n        justify-content: center;          \/* centrage horizontal *\/\n        text-align: center;\n        box-sizing: border-box;\n    \">\n        <div id=\"home-quote\" style=\"\n            font-style: italic;\n            font-size: clamp(0.9em, 2vw, 1.4em); \/* texte responsive *\/\n            line-height: 1.4em;\n            opacity: 0;\n            transition: opacity 1s, transform 1s;\n            word-break: break-word;          \/* casse les mots si trop longs *\/\n        \"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ ======= Citations Home (20) =======\nconst homeQuotes = [\n  { text: \"Regarde les \u00e9toiles, pas tes pieds.\", author: \"Stephen Hawking \u2013 The Theory of Everything\" },\n  { text: \"Ce n\u2019est pas en regardant le sol que l\u2019on voit l\u2019horizon.\", author: \"Inception\" },\n  { text: \"Parfois, il faut savoir prendre du recul pour voir le vrai danger.\", author: \"Star Wars \u2013 Yoda\" },\n  { text: \"Le vrai courage, c\u2019est de savoir quand se retirer.\", author: \"Gladiator\" },\n  { text: \"Prends du recul, respire, et choisis ton moment.\", author: \"Matrix\" },\n  { text: \"Pour voir clair, il faut parfois quitter le feu de l\u2019action.\", author: \"Le Seigneur des Anneaux \u2013 Gandalf\" },\n  { text: \"Regarde le monde avec les yeux d\u2019un autre.\", author: \"Le Labyrinthe de Pan\" },\n  { text: \"Recule\u2026 et regarde ce que tu as cr\u00e9\u00e9.\", author: \"Avengers \u2013 Tony Stark\" },\n  { text: \"L\u2019instant o\u00f9 l\u2019on s\u2019\u00e9loigne est celui o\u00f9 l\u2019on comprend.\", author: \"Interstellar\" },\n  { text: \"Parfois, rester \u00e0 distance permet de mieux choisir.\", author: \"Harry Potter \u2013 Dumbledore\" },\n  { text: \"Ne te pr\u00e9cipite pas, le temps r\u00e9v\u00e9lera tout.\", author: \"Le Roi Lion \u2013 Rafiki\" },\n  { text: \"La perspective na\u00eet quand on prend de la hauteur.\", author: \"Inception \u2013 Dom Cobb\" },\n  { text: \"Le chaos devient compr\u00e9hensible quand on s\u2019\u00e9loigne.\", author: \"The Dark Knight \u2013 Batman\" },\n  { text: \"Tu dois te retirer pour mieux avancer.\", author: \"Star Wars \u2013 Obi-Wan Kenobi\" },\n  { text: \"Ce que tu vois d\u00e9pend de l\u2019endroit o\u00f9 tu te tiens.\", author: \"Shrek\" },\n  { text: \"Avant d\u2019agir, regarde le tableau complet.\", author: \"Sherlock Holmes\" },\n  { text: \"Ne te noie pas dans les d\u00e9tails, l\u2019ensemble compte plus.\", author: \"Les Animaux Fantastiques\" },\n  { text: \"Parfois, c\u2019est en l\u00e2chant prise qu\u2019on trouve la voie.\", author: \"Kung Fu Panda\" },\n  { text: \"Le recul n\u2019est pas de la faiblesse, c\u2019est de la lucidit\u00e9.\", author: \"Mad Max : Fury Road\" },\n  { text: \"Le temps et la distance r\u00e9v\u00e8lent la v\u00e9rit\u00e9.\", author: \"Inception \u2013 Dom Cobb\" }\n];\n\n\/\/ ======= Fonction pour afficher la citation =======\nfunction showRandomQuote(quotesArray, divId) {\n    const quoteDiv = document.getElementById(divId);\n    quoteDiv.style.opacity = 0; \/\/ fade out\n\n    setTimeout(() => {\n        const randomQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)];\n\n        \/\/ l\u00e9ger d\u00e9calage al\u00e9atoire pour effet Boarscale\n        const offsetX = (Math.random() - 0.5) * 6; \n        const offsetY = (Math.random() - 0.5) * 6; \n        quoteDiv.style.transform = `translate(${offsetX}px, ${offsetY}px)`;\n\n        quoteDiv.innerHTML = `\"${randomQuote.text}\"<br><strong>\u2014 ${randomQuote.author}<\/strong>`;\n        quoteDiv.style.opacity = 1; \/\/ fade in\n    }, 500);\n}\n\n\/\/ ======= Initialisation =======\nshowRandomQuote(homeQuotes, \"home-quote\");\n\n\/\/ Changement toutes les 7 secondes\nsetInterval(() => showRandomQuote(homeQuotes, \"home-quote\"), 7000);\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Boarscale est un studio de <strong>prise de recul strat\u00e9gique<\/strong>.<br>J\u2019interviens lorsque vous \u00eates trop impliqu\u00e9 dans votre projet pour le voir clairement, et qu\u2019un <strong>regard ext\u00e9rieur devient n\u00e9cessaire<\/strong> pour d\u00e9bloquer la situation.<\/p>\n\n\n\n<p>Quand tout est sur la table, que les options se contredisent, et que les d\u00e9cisions n\u2019avancent plus, mon r\u00f4le est d\u2019apporter <strong>distance, lucidit\u00e9 et discernement<\/strong>.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Ce que j\u2019apporte<\/h3>\n\n\n\n<p>Un point de vue ext\u00e9rieur, ind\u00e9pendant, sans enjeu politique ni affectif, pour :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>clarifier ce qui se joue r\u00e9ellement<\/li>\n\n\n\n<li>identifier les blocages invisibles<\/li>\n\n\n\n<li>questionner les \u00e9vidences<\/li>\n\n\n\n<li>faire \u00e9merger des d\u00e9cisions justes<\/li>\n<\/ul>\n\n\n\n<p>Je ne viens pas ajouter des couches.<br>Je viens <strong>retirer ce qui emp\u00eache de voir<\/strong>.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Quand faire appel au Boarscale<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vous tournez en rond malgr\u00e9 le travail accompli<\/li>\n\n\n\n<li>Vous avez besoin d\u2019un avis ext\u00e9rieur honn\u00eate<\/li>\n\n\n\n<li>Les d\u00e9cisions sont repouss\u00e9es ou dilu\u00e9es<\/li>\n\n\n\n<li>Vous sentez qu\u2019un angle vous \u00e9chappe<\/li>\n<\/ul>\n\n\n\n<p>Si vous cherchez des r\u00e9ponses toutes faites, ce n\u2019est pas ici.<br>Si vous cherchez <strong>de la clart\u00e9<\/strong>, probablement.<\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Comment j\u2019interviens<\/h3>\n\n\n\n<p>Les interventions sont :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>courtes<\/li>\n\n\n\n<li>cibl\u00e9es<\/li>\n\n\n\n<li>sans engagement long<\/li>\n<\/ul>\n\n\n\n<p>Elles reposent sur :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>l\u2019analyse<\/li>\n\n\n\n<li>le dialogue<\/li>\n\n\n\n<li>la mise \u00e0 distance<\/li>\n\n\n\n<li>une synth\u00e8se claire<\/li>\n<\/ul>\n\n\n\n<p>Ce travail permet ensuite de d\u00e9cider, d\u2019agir\u2026 ou d\u2019arr\u00eater.<\/p>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9sultat<\/h3>\n\n\n\n<p>\u00c0 l\u2019issue de l\u2019intervention, vous repartez avec :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>une vision plus nette<\/li>\n\n\n\n<li>des options hi\u00e9rarchis\u00e9es<\/li>\n\n\n\n<li>une d\u00e9cision possible<\/li>\n<\/ul>\n\n\n\n<p>Parfois, le projet change.<br>Parfois, c\u2019est le regard qui change.<\/p>\n\n\n\n<p>C\u2019est souvent suffisant pour d\u00e9bloquer la situation.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Reflex<\/h3>\n\n\n\n<div id=\"reflex-wrapper\">\n    <div class=\"reflex-header\">\n        <div class=\"stat-box\">SCORE: <span id=\"r-score\">0<\/span><\/div>\n        <div class=\"stat-box\">VIES: <span id=\"r-lives\">\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f<\/span><\/div>\n    <\/div>\n\n    <div class=\"reflex-grid\" id=\"reflex-board\">\n        <div class=\"r-btn\" id=\"sq-0\" onclick=\"hitSquare(0)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-1\" onclick=\"hitSquare(1)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-2\" onclick=\"hitSquare(2)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-3\" onclick=\"hitSquare(3)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-4\" onclick=\"hitSquare(4)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-5\" onclick=\"hitSquare(5)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-6\" onclick=\"hitSquare(6)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-7\" onclick=\"hitSquare(7)\"><\/div>\n        <div class=\"r-btn\" id=\"sq-8\" onclick=\"hitSquare(8)\"><\/div>\n        \n        <div id=\"r-overlay\" class=\"visible\">\n            <h2 id=\"r-msg\">PR\u00caT ?<\/h2>\n            <button id=\"r-start-btn\" onclick=\"startReflexGame()\">JOUER<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    #reflex-wrapper {\n        font-family: 'Arial Black', 'Arial', sans-serif;\n        max-width: 350px;\n        margin: 20px auto;\n        text-align: center;\n        user-select: none;\n        position: relative;\n    }\n\n    .reflex-header {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 15px;\n        background: #333;\n        color: white;\n        padding: 10px;\n        border-radius: 8px;\n        font-size: 16px;\n    }\n\n    .reflex-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 10px;\n        position: relative; \/* Pour l'overlay *\/\n    }\n\n    .r-btn {\n        background-color: #ddd;\n        aspect-ratio: 1 \/ 1;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: transform 0.05s;\n        border: 4px solid #ccc;\n        \/* Optimisation mobile *\/\n        touch-action: manipulation;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .r-btn:active { transform: scale(0.95); }\n\n    \/* --- \u00c9tats des carr\u00e9s --- *\/\n    \n    \/* La CIBLE (Bleu Cyan) *\/\n    .r-btn.active {\n        background-color: #00e5ff;\n        border-color: #00b8cc;\n        box-shadow: 0 0 15px #00e5ff;\n    }\n\n    \/* TOUCH\u00c9 (Vert) *\/\n    .r-btn.hit {\n        background-color: #00ff00 !important;\n        border-color: #00cc00 !important;\n        transform: scale(1.1);\n    }\n\n    \/* RAT\u00c9 (Rouge) *\/\n    .r-btn.miss {\n        background-color: #ff3333 !important;\n        animation: shake 0.3s;\n    }\n\n    \/* --- Overlay (Menu) --- *\/\n    #r-overlay {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(0,0,0,0.85);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        border-radius: 8px;\n        color: white;\n        z-index: 10;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.3s;\n    }\n    #r-overlay.visible { opacity: 1; pointer-events: auto; }\n\n    #r-start-btn {\n        background: #00e5ff; color: #000;\n        border: none; padding: 10px 25px;\n        font-size: 18px; font-weight: bold;\n        cursor: pointer; border-radius: 30px;\n        margin-top: 15px;\n        text-transform: uppercase;\n    }\n    #r-start-btn:hover { transform: scale(1.05); }\n\n    @keyframes shake {\n        0% { transform: translateX(0); }\n        25% { transform: translateX(-5px); }\n        50% { transform: translateX(5px); }\n        75% { transform: translateX(-5px); }\n        100% { transform: translateX(0); }\n    }\n<\/style>\n\n<script>\n    (function() {\n        \/\/ Variables\n        let score = 0;\n        let lives = 3;\n        let gameTimer = null; \/\/ Le timer du tour en cours\n        let currentSquare = null;\n        let gameSpeed = 1000; \/\/ Vitesse initiale (ms)\n        let isGameRunning = false;\n\n        \/\/ Audio Context (R\u00e9utilis\u00e9 pour efficacit\u00e9)\n        let audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n\n        function playSound(type) {\n            if (audioCtx.state === 'suspended') audioCtx.resume();\n            const osc = audioCtx.createOscillator();\n            const gain = audioCtx.createGain();\n            \n            osc.connect(gain);\n            gain.connect(audioCtx.destination);\n\n            if (type === 'hit') {\n                \/\/ Son aigu et court (Ping)\n                osc.type = 'sine';\n                osc.frequency.setValueAtTime(800, audioCtx.currentTime);\n                osc.frequency.exponentialRampToValueAtTime(1200, audioCtx.currentTime + 0.1);\n                gain.gain.setValueAtTime(0.1, audioCtx.currentTime);\n                gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.1);\n                osc.start();\n                osc.stop(audioCtx.currentTime + 0.1);\n            } else if (type === 'miss') {\n                \/\/ Son grave (Buzz)\n                osc.type = 'sawtooth';\n                osc.frequency.value = 150;\n                gain.gain.setValueAtTime(0.2, audioCtx.currentTime);\n                gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);\n                osc.start();\n                osc.stop(audioCtx.currentTime + 0.3);\n            }\n        }\n\n        \/\/ Fonction globale de d\u00e9marrage\n        window.startReflexGame = function() {\n            score = 0;\n            lives = 3;\n            gameSpeed = 1000; \/\/ Reset vitesse\n            isGameRunning = true;\n            \n            document.getElementById('r-score').innerText = score;\n            updateLivesDisplay();\n            \n            \/\/ Cacher l'overlay\n            document.getElementById('r-overlay').classList.remove('visible');\n            \n            \/\/ Lancer le premier tour apr\u00e8s un court d\u00e9lai\n            setTimeout(nextTurn, 500);\n        };\n\n        function updateLivesDisplay() {\n            let hearts = \"\";\n            for(let i=0; i<lives; i++) hearts += \"\u2764\ufe0f\";\n            document.getElementById('r-lives').innerText = hearts;\n        }\n\n        function nextTurn() {\n            if (!isGameRunning) return;\n\n            \/\/ Enlever l'ancienne cible si elle existe (cas rare)\n            if (currentSquare !== null) {\n                document.getElementById('sq-' + currentSquare).classList.remove('active');\n            }\n\n            \/\/ Choisir une case au hasard (diff\u00e9rente de la pr\u00e9c\u00e9dente si possible)\n            let randomSquare;\n            do {\n                randomSquare = Math.floor(Math.random() * 9);\n            } while (randomSquare === currentSquare);\n            \n            currentSquare = randomSquare;\n            \n            \/\/ Activer la case\n            const btn = document.getElementById('sq-' + currentSquare);\n            btn.classList.add('active');\n\n            \/\/ Lancer le compte \u00e0 rebours pour ce tour\n            \/\/ Plus le score est haut, plus gameSpeed est petit\n            clearTimeout(gameTimer);\n            gameTimer = setTimeout(() => {\n                handleMiss(); \/\/ Trop lent !\n            }, gameSpeed);\n        }\n\n        window.hitSquare = function(id) {\n            if (!isGameRunning) return;\n\n            \/\/ Si on clique sur la BONNE case\n            if (id === currentSquare) {\n                clearTimeout(gameTimer); \/\/ Arr\u00eate le timer de perte\n                \n                \/\/ Feedback visuel et sonore\n                const btn = document.getElementById('sq-' + id);\n                btn.classList.remove('active');\n                btn.classList.add('hit');\n                setTimeout(() => btn.classList.remove('hit'), 200);\n                playSound('hit');\n\n                \/\/ Augmenter score\n                score++;\n                document.getElementById('r-score').innerText = score;\n\n                \/\/ Acc\u00e9l\u00e9rer le jeu (min 400ms)\n                if (gameSpeed > 400) gameSpeed -= 20;\n\n                \/\/ Prochain tour imm\u00e9diat\n                currentSquare = null;\n                setTimeout(nextTurn, 250); \/\/ Petite pause avant le suivant\n            } \n            \/\/ Si on clique sur une MAUVAISE case\n            else {\n                \/\/ Feedback visuel erreur\n                const btn = document.getElementById('sq-' + id);\n                btn.classList.add('miss');\n                setTimeout(() => btn.classList.remove('miss'), 300);\n                \n                \/\/ On perd une vie mais le tour continue (le timer court toujours sur la vraie cible)\n                \/\/ OU on consid\u00e8re que cliquer \u00e0 c\u00f4t\u00e9 annule le tour ?\n                \/\/ Option choisie : P\u00e9nalit\u00e9 de vie imm\u00e9diate\n                lives--;\n                updateLivesDisplay();\n                playSound('miss');\n                \n                if (lives <= 0) endGame();\n            }\n        };\n\n        function handleMiss() {\n            \/\/ Appel\u00e9 quand le temps est \u00e9coul\u00e9\n            if (!isGameRunning) return;\n\n            playSound('miss');\n            lives--;\n            updateLivesDisplay();\n\n            \/\/ Retirer la classe active\n            if (currentSquare !== null) {\n                document.getElementById('sq-' + currentSquare).classList.remove('active');\n                currentSquare = null;\n            }\n\n            if (lives <= 0) {\n                endGame();\n            } else {\n                \/\/ On continue\n                setTimeout(nextTurn, 500);\n            }\n        }\n\n        function endGame() {\n            isGameRunning = false;\n            clearTimeout(gameTimer);\n            if (currentSquare !== null) {\n                document.getElementById('sq-' + currentSquare).classList.remove('active');\n            }\n            \n            document.getElementById('r-msg').innerHTML = \"GAME OVER<br><span style='font-size:0.7em'>Score: \" + score + \"<\/span>\";\n            document.getElementById('r-start-btn').innerText = \"REJOUER\";\n            document.getElementById('r-overlay').classList.add('visible');\n        }\n\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Perspective changes everything Boarscale est un studio de prise de recul strat\u00e9gique.J\u2019interviens lorsque vous \u00eates trop impliqu\u00e9 dans votre projet pour le voir clairement, et qu\u2019un regard ext\u00e9rieur devient n\u00e9cessaire pour d\u00e9bloquer la situation. Quand tout est sur la table, que les options se contredisent, et que les d\u00e9cisions n\u2019avancent plus, mon r\u00f4le est d\u2019apporter [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-487","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/pages\/487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":10,"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/pages\/487\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/pages\/487\/revisions\/643"}],"wp:attachment":[{"href":"https:\/\/boarscale.com\/index.php\/wp-json\/wp\/v2\/media?parent=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}