{"id":166,"date":"2026-07-16T09:09:23","date_gmt":"2026-07-16T09:09:23","guid":{"rendered":"https:\/\/taughtyouso.com\/?page_id=166"},"modified":"2026-07-16T09:32:10","modified_gmt":"2026-07-16T09:32:10","slug":"start-francais","status":"publish","type":"page","link":"https:\/\/taughtyouso.com\/?page_id=166&lang=fr","title":{"rendered":"Start &#8211; Fran\u00e7ais"},"content":{"rendered":"\n<script>\n\n\/**\n * Script d'arri\u00e8re-plan Camera Sweep pour WordPress - Version 13 (Fondu encha\u00een\u00e9 fluide & Fond assombri)\n * Fondu encha\u00een\u00e9 multim\u00e9dia fluide sans baisse de transparence dans le trou de serrure.\n * Luminosit\u00e9 du fond att\u00e9nu\u00e9e \u00e0 50% pour un contraste maximal.\n * (c) Taughtyouso UG (haftungsbeschr\u00e4nkt) 2026\n *\/\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. CONFIGURATION\n    \/\/ IMPORTANT : Entrez ici l'URL de votre masque PNG transparent !\n    const maskImageURL = 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/06\/outlined-sw-large-transparent.png';\n\n    const mediaList = [\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_1k7v1r1k7v1r1k7v-scaled.jpg' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Sanfte_Wellen_Video_Generiert.mp4' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_qe5hv2qe5hv2qe5h-1-scaled.jpg' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_i790qmi790qmi790-scaled.jpg' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_a1aemda1aemda1ae-scaled.jpg' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Video_202604062334.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Ba-86-A-4-E-9-5-Ccb-4-D-1-D-A-64-A-8286-B-9-B-82835.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/100-C-83-E-0-7838-4-E-21-8573-Bdd-99031934-C.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Video_Loop_Sanfte_Wellen_am_Strand.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/E-64661-E-8-A-0-E-4-4-Cd-4-8-Ac-0-7-F-6-Dd-282-Bbee.mp4' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_qe5hv2qe5hv2qe5h-scaled.jpg' }\n    ];\n\n    const textLines = [\n        \"H\u00e9, toi !\",\n        \"Que fais-tu ici ?\",\n        \"C'est juste une autre page d'accueil d'entreprise\",\n        \"La page d'accueil de taughtyouso\",\n        \"Ils g\u00e8rent la plateforme de quiz quoozle.com\",\n        \"Elle est bien \u2013 oui \u2013 vraiment bien !\",\n        \"Mais \u00e0 part \u00e7a, il n'y a rien \u00e0 voir ici\",\n        \"Ne g\u00e2che pas ta vie\",\n        \"Continue \u00e0 surfer !\",\n        \"(...)\",\n        \"(..)\",\n        \"(.)\",\n        \"H\u00e9, tu es toujours l\u00e0 !\",\n        \"Tout d'abord : je d\u00e9die ce site web \u00e0 Tatjana, que j'ai rencontr\u00e9e \u00e0 St-Barth il y a deux ans.\",\n        \"Blague \u00e0 part. C'\u00e9tait bien s\u00fbr une citation de 39,90 ou 99 Francs.\",\n        \"Tu ne connais pas ? Tu devrais regarder\",\n        \"En tout cas, si tu as un lien avec la publicit\u00e9\",\n        \"Il faut toujours commencer par d\u00e9tendre l'atmosph\u00e8re avec une blague stupide\",\n        \"Mais la vraie question reste bien s\u00fbr :\",\n        \"Que veux-tu vraiment ici ?\",\n        \"Tu me connais probablement personnellement dans la vraie vie ?\",\n        \"Ou est-ce vraiment pour les affaires ?\",\n        \"Si oui : essaie par e-mail ou LinkedIn\",\n        \"Si tu veux te renseigner sur Quoozle \u2013 regarde en haut dans Produits\",\n        \"Honn\u00eatement : pour l'instant il n'y a \u00e9videmment que Quoozle ici \u2013 mais peu importe\",\n        \"C'est vraiment bien \u2013 du moins je crois\",\n        \"Mais bien s\u00fbr, je d\u00e9couvrirai de toute fa\u00e7on ce qui t'int\u00e9resse\",\n        \"Parce que je le traque ici. Mais ne t'inqui\u00e8te pas \u2013 je le fais moi-m\u00eame\",\n        \"Avec Matomo \u2013 ce n'est donc pas une conspiration mondiale\",\n        \"Promis. (Bien que tout le monde dirait \u00e7a, bien s\u00fbr)\",\n        \"Mais bon \u2013 ce fut un honneur !\",\n        \"\u00c0 bient\u00f4t !\",\n        \"Ah oui \u2013 mon nom est Nils Peters\"\n    ];\n\n    const sweepDuration = 8000; \n    const fadeDuration = 1500;  \n    const textDisplayDuration = 5200; \n    const textPauseDuration = 1800;   \n\n    \/\/ 2. CR\u00c9ER LE CONTENEUR\n    const container = document.createElement('div');\n    container.id = 'camera-sweep-container';\n    Object.assign(container.style, {\n        position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', zIndex: '-1', overflow: 'hidden', backgroundColor: '#ffffff'\n    });\n    document.body.appendChild(container);\n\n    \/\/ VIGNETTE\n    const vignette = document.createElement('div');\n    vignette.id = 'sweep-vignette';\n    Object.assign(vignette.style, {\n        position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', zIndex: '20', pointerEvents: 'none',\n        background: 'radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)'\n    });\n    container.appendChild(vignette);\n\n    \/\/ \u00c9L\u00c9MENT TEXTE\n    const textOverlay = document.createElement('div');\n    textOverlay.id = 'sweep-text-overlay';\n    container.appendChild(textOverlay);\n\n    \/\/ 3. R\u00c8GLES DE DESIGN CSS (AVEC FILTRE DE LUMINOSIT\u00c9 \u00c0 50%)\n    const style = document.createElement('style');\n    style.innerHTML = `\n        #camera-sweep-container .sweep-layer {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            opacity: 0;\n            transition: opacity ${fadeDuration}ms ease-in-out;\n            will-change: opacity;\n        }\n        \n        \/* CALQUE DE FOND ATT\u00c9NU\u00c9 \u00c0 50% DE LUMINOSIT\u00c9 *\/\n        #camera-sweep-container .sweep-layer.base {\n            filter: brightness(0.5);\n        }\n        #camera-sweep-container .sweep-layer.base.active { opacity: 1; z-index: 1; }\n        \n        \/* CONTENEUR DE SUPERPOSITION AVEC MASQUE \u00c0 75% *\/\n        #camera-sweep-container .sweep-layer.overlay {\n            isolation: isolate; \n            transform: translateZ(0); \n            -webkit-transform: translateZ(0);\n            backface-visibility: hidden;\n            -webkit-backface-visibility: hidden;\n            \n            -webkit-mask: url('${maskImageURL}') center \/ 75% no-repeat;\n            mask: url('${maskImageURL}') center \/ 75% no-repeat;\n            -webkit-mask-image: url('${maskImageURL}');\n            mask-image: url('${maskImageURL}');\n            -webkit-mask-size: 75%;\n            mask-size: 75%;\n            -webkit-mask-position: center;\n            mask-position: center;\n            -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n            -webkit-mask-type: alpha;\n            mask-type: alpha;\n        }\n        \n        \/* LA VID\u00c9O S\u00c9LECTIONN\u00c9E DANS LE TROU DE SERRURE EST VISIBLE OPAQUE \u00c0 100% *\/\n        #camera-sweep-container .sweep-layer.overlay.active { opacity: 1; z-index: 2; }\n        \n        #camera-sweep-container .sweep-media {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            will-change: transform, filter;\n        }\n\n        \/* STYLE DE TEXTE *\/\n        #sweep-text-overlay {\n            position: absolute; top: 50%; left: 50%; z-index: 25; color: #ffffff;\n            font-family: var(--wp--preset--font-family--heading), \"Arial Black\", Impact, sans-serif;\n            font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1.2; text-align: center;\n            text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.4); width: 90%; max-width: 800px;\n            pointer-events: none; transform: translate(-50%, -50%); will-change: transform;\n        }\n        @media (max-width: 768px) { #sweep-text-overlay { font-size: 1.15rem; } }\n\n        .ydkj-puff-wrapper { display: inline-block; width: 100%; opacity: 0; will-change: transform, opacity, filter; }\n        .ydkj-active { animation: ydkjLinearDrift ${textDisplayDuration}ms linear forwards; }\n        .ydkj-active .ydkj-puff-wrapper { animation: ydkjPuffExplosion ${textDisplayDuration}ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }\n\n        @keyframes ydkjLinearDrift {\n            0% { transform: translate(calc(-50% + var(--startX)), calc(-50% + var(--startY))); }\n            100% { transform: translate(calc(-50% + var(--endX)), calc(-50% + var(--endY))); }\n        }\n        @keyframes ydkjPuffExplosion {\n            0% { opacity: 0; transform: scale(0.7); filter: blur(5px); }\n            15% { opacity: 1; transform: scale(1); filter: blur(0px); }\n            78% { opacity: 1; transform: scale(1.02); filter: blur(0px); }\n            100% { opacity: 0; transform: scale(3.0); filter: blur(12px); }\n        }\n\n        body, .site, #page, .site-content, #content, .main-container, .elementor-page {\n            background-color: transparent !important;\n        }\n    `;\n    document.head.appendChild(style);\n\n    \/\/ 4. MATRICES DE MOUVEMENT\n    const baseDesktopMovements = [\n        { start: 'scale(1.5) rotate(6deg) translate(-4%, -1%)', startBlur: '4px', end: 'scale(1.3) rotate(-3deg) translate(4%, 1%)', endBlur: '0px' },\n        { start: 'scale(1.3) rotate(-5deg) translate(4%, -2%)', startBlur: '0px', end: 'scale(1.6) rotate(4deg) translate(-4%, 2%)', endBlur: '5px' },\n        { start: 'scale(1.6) rotate(4deg) translate(-2%, 2%)', startBlur: '3px', end: 'scale(1.3) rotate(-4deg) translate(2%, -2%)', endBlur: '0px' },\n        { start: 'scale(1.4) rotate(-4deg) translate(-4%, 0%)', startBlur: '0px', end: 'scale(1.5) rotate(5deg) translate(4%, 0%)', endBlur: '3px' }\n    ];\n    const baseMobileMovements = [\n        { start: 'scale(2.1) rotate(6deg) translate(-18%, -1%)', startBlur: '5px', end: 'scale(1.9) rotate(-4deg) translate(18%, 2%)', endBlur: '0px' },\n        { start: 'scale(2.0) rotate(-5deg) translate(16%, -2%)', startBlur: '0px', end: 'scale(2.2) rotate(5deg) translate(-16%, 2%)', endBlur: '6px' },\n        { start: 'scale(2.2) rotate(4deg) translate(-20%, 1%)', startBlur: '4px', end: 'scale(1.9) rotate(-5deg) translate(20%, -1%)', endBlur: '0px' },\n        { start: 'scale(1.9) rotate(-6deg) translate(18%, -2%)', startBlur: '0px', end: 'scale(2.1) rotate(6deg) translate(-18%, 2%)', endBlur: '4px' }\n    ];\n\n    const overlayDesktopMovements = [\n        { start: 'scale(2.2) rotate(-3deg) translate(4%, 1%)', startBlur: '0px', end: 'scale(2.5) rotate(6deg) translate(-4%, -1%)', endBlur: '4px' },\n        { start: 'scale(2.5) rotate(4deg) translate(-4%, 2%)', startBlur: '5px', end: 'scale(2.0) rotate(-5deg) translate(4%, -2%)', endBlur: '0px' },\n        { start: 'scale(2.0) rotate(-4deg) translate(2%, -2%)', startBlur: '0px', end: 'scale(2.4) rotate(4deg) translate(-2%, 2%)', endBlur: '3px' },\n        { start: 'scale(2.3) rotate(5deg) translate(4%, 0%)', startBlur: '3px', end: 'scale(2.1) rotate(-4deg) translate(-4%, 0%)', endBlur: '0px' }\n    ];\n    const overlayMobileMovements = [\n        { start: 'scale(2.9) rotate(-4deg) translate(18%, 2%)', startBlur: '0px', end: 'scale(3.2) rotate(6deg) translate(-18%, -1%)', endBlur: '5px' },\n        { start: 'scale(3.2) rotate(5deg) translate(-16%, 2%)', startBlur: '6px', end: 'scale(2.8) rotate(-5deg) translate(16%, -2%)', endBlur: '0px' },\n        { start: 'scale(2.8) rotate(-5deg) translate(20%, -1%)', startBlur: '0px', end: 'scale(3.2) rotate(4deg) translate(-20%, 1%)', endBlur: '4px' },\n        { start: 'scale(3.1) rotate(6deg) translate(-18%, 2%)', startBlur: '4px', end: 'scale(2.8) rotate(-6deg) translate(18%, -2%)', endBlur: '0px' }\n    ];\n\n    let currentBaseIdx = -1, currentOverlayIdx = -1;\n    let baseMovementCounter = 0, overlayMovementCounter = 0;\n    let activeBaseLayer = null, activeOverlayLayer = null;\n\n    \/\/ 5. MOTEUR MULTIM\u00c9DIA (CORRECTION DU FONDU ENCHA\u00ceN\u00c9 FLUIDE)\n    function executeSweep(isOverlay) {\n        if (mediaList.length === 0) return;\n\n        let chosenIdx;\n        if (!isOverlay) {\n            let nextBase = currentBaseIdx;\n            while (nextBase === currentBaseIdx || nextBase === currentOverlayIdx) {\n                nextBase = Math.floor(Math.random() * mediaList.length);\n            }\n            currentBaseIdx = nextBase; chosenIdx = currentBaseIdx;\n        } else {\n            let nextOverlay = currentOverlayIdx;\n            while (nextOverlay === currentOverlayIdx || nextOverlay === currentBaseIdx) {\n                nextOverlay = Math.floor(Math.random() * mediaList.length);\n            }\n            currentOverlayIdx = nextOverlay; chosenIdx = currentOverlayIdx;\n        }\n\n        const mediaItem = mediaList[chosenIdx];\n        const layer = document.createElement('div');\n        layer.className = `sweep-layer ${isOverlay ? 'overlay' : 'base'}`;\n        \n        let mediaEl;\n        if (mediaItem.type === 'video') {\n            mediaEl = document.createElement('video'); mediaEl.src = mediaItem.url;\n            mediaEl.autoplay = true; mediaEl.loop = true; mediaEl.muted = true; mediaEl.playsInline = true; \n            mediaEl.className = 'sweep-media';\n        } else {\n            mediaEl = document.createElement('img'); mediaEl.src = mediaItem.url; mediaEl.className = 'sweep-media';\n        }\n        \n        mediaEl.style.transition = `transform ${sweepDuration}ms linear, filter ${sweepDuration}ms ease-out`;\n        \n        const isMobile = window.innerWidth <= 768;\n        \n        \/\/ Attribution du jeu de mouvements\n        let move;\n        if (!isOverlay) {\n            const currentSet = isMobile ? baseMobileMovements : baseDesktopMovements;\n            move = currentSet[baseMovementCounter % currentSet.length]; baseMovementCounter++;\n        } else {\n            const currentSet = isMobile ? overlayMobileMovements : overlayDesktopMovements;\n            move = currentSet[overlayMovementCounter % currentSet.length]; overlayMovementCounter++;\n        }\n        \n        mediaEl.style.transform = move.start; \n        mediaEl.style.filter = `blur(${move.startBlur})`;\n        \n        layer.appendChild(mediaEl); container.appendChild(layer);\n        layer.offsetHeight; layer.classList.add('active');\n        \n        setTimeout(() => {\n            mediaEl.style.transform = move.end; mediaEl.style.filter = `blur(${move.endBlur})`;\n        }, 50);\n\n        \/\/ --- CORRECTION : TRANSITION FLUIDE SANS BAISSE DE TRANSPARENCE ---\n        \/\/ Le nouvel \u00e9l\u00e9ment est superpos\u00e9 et appara\u00eet en fondu. \n        \/\/ L'ancien \u00e9l\u00e9ment reste intact et totalement visible en dessous, jusqu'\u00e0 ce que le nouveau soit l\u00e0 \u00e0 100%.\n        if (!isOverlay) {\n            const oldLayer = activeBaseLayer; activeBaseLayer = layer;\n            if (oldLayer) { \n                setTimeout(() => oldLayer.remove(), fadeDuration); \n            }\n            setTimeout(() => executeSweep(false), sweepDuration);\n        } else {\n            const oldLayer = activeOverlayLayer; activeOverlayLayer = layer;\n            if (oldLayer) { \n                \/\/ L'ancienne vid\u00e9o de masque est supprim\u00e9e en arri\u00e8re-plan, seulement APR\u00c8S que la nouvelle soit apparue \u00e0 100%\n                setTimeout(() => oldLayer.remove(), fadeDuration); \n            }\n            setTimeout(() => executeSweep(true), sweepDuration);\n        }\n    }\n\n    \/\/ 6. SAUT DE LIGNE\n    function wrapTextAtLimit(str, limit = 20) {\n        return str.split(' ').reduce((acc, word) => {\n            if (!acc.length) return [word];\n            let lastLine = acc[acc.length - 1];\n            if ((lastLine + ' ' + word).length <= limit) { acc[acc.length - 1] = lastLine + ' ' + word; } else { acc.push(word); }\n            return acc;\n        }, []).join('<br>');\n    }\n\n    \/\/ 7. MOTEUR DE TEXTE\n    let textIdx = 0;\n    function playNextTextLine() {\n        if (textLines.length === 0) return;\n        const formattedText = wrapTextAtLimit(textLines[textIdx], 20);\n        textOverlay.innerHTML = `<div class=\"ydkj-puff-wrapper\">${formattedText}<\/div>`;\n\n        const randomAngle = Math.random() * Math.PI * 2;\n        const isMobile = window.innerWidth <= 768;\n        const travelDistance = isMobile ? 60 : 120; \n\n        const startX = -Math.cos(randomAngle) * (travelDistance \/ 2);\n        const startY = -Math.sin(randomAngle) * (travelDistance \/ 2);\n        const endX = Math.cos(randomAngle) * (travelDistance \/ 2);\n        const endY = Math.sin(randomAngle) * (travelDistance \/ 2);\n\n        textOverlay.style.setProperty('--startX', `${startX}px`);\n        textOverlay.style.setProperty('--startY', `${startY}px`);\n        textOverlay.style.setProperty('--endX', `${endX}px`);\n        textOverlay.style.setProperty('--endY', `${endY}px`);\n\n        textOverlay.classList.remove('ydkj-active');\n        textOverlay.offsetHeight; textOverlay.classList.add('ydkj-active');\n\n        textIdx = (textIdx + 1) % textLines.length;\n        setTimeout(playNextTextLine, textDisplayDuration + textPauseDuration);\n    }\n\n    \/\/ D\u00c9MARRAGE\n    executeSweep(false);\n    setTimeout(function() { executeSweep(true); }, sweepDuration \/ 2);\n    setTimeout(function() { playNextTextLine(); }, 1500);\n});\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-166","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=166"}],"version-history":[{"count":1,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/166\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/166\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}