{"id":95188,"date":"2025-03-04T11:14:48","date_gmt":"2025-03-04T10:14:48","guid":{"rendered":"https:\/\/vipschool.fr\/blog\/?page_id=95188"},"modified":"2025-03-04T11:25:16","modified_gmt":"2025-03-04T10:25:16","slug":"test","status":"publish","type":"page","link":"https:\/\/vipschool.fr\/blog\/test\/","title":{"rendered":"test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"95188\" class=\"elementor elementor-95188\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a30807a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a30807a\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\" data-core-v316-plus=\"true\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0040809 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"0040809\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Quicksand:wght@400;700&display=swap\" rel=\"stylesheet\">\n    <title>Mod\u00e8le d'Article - Apprentissage.com<\/title>\n    <style>\n        \/* Reset et isolation du conteneur principal *\/\n        .apprentissage-article-container {\n            position: relative !important;\n            width: 100% !important;\n            min-width: 100% !important;\n            max-width: 100% !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            background: white !important;\n            overflow-x: hidden !important;\n            box-sizing: border-box !important;\n            display: block !important;\n            isolation: isolate !important;\n            z-index: 1 !important;\n            transform: translateZ(0) !important;\n        }\n\n        \/* Reset de tous les \u00e9l\u00e9ments dans le conteneur *\/\n        .apprentissage-article-container * {\n            all: unset;\n            display: revert;\n            box-sizing: border-box !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            font-family: \"Quicksand\", Arial, sans-serif !important;\n            line-height: normal !important;\n        }\n\n        \/* Structure principale *\/\n        .apprentissage-article-content {\n            width: 100% !important;\n            max-width: 1200px !important;\n            margin: 0 auto !important;\n            padding: 0 20px !important;\n            position: relative !important;\n        }\n\n        \/* Image mise en avant et titre H1 *\/\n        .apprentissage-article-header {\n            width: 100% !important;\n            position: relative !important;\n            border-radius: 8px !important;\n            overflow: hidden !important;\n            margin-bottom: 40px !important;\n        }\n\n        .apprentissage-article-header img {\n            width: 100% !important;\n            height: 500px !important;\n            object-fit: cover !important;\n            display: block !important;\n            transition: filter 0.3s ease !important;\n        }\n\n        .apprentissage-article-header:hover img {\n            filter: brightness(0.8) !important;\n        }\n\n        .apprentissage-article-title {\n            position: absolute !important;\n            bottom: 0 !important;\n            left: 0 !important;\n            right: 0 !important;\n            padding: 30px !important;\n            background: rgba(0, 0, 0, 0.7) !important;\n            z-index: 2 !important;\n        }\n\n        .apprentissage-article-title h1 {\n            color: white !important;\n            font-size: 2.2rem !important;\n            font-weight: 700 !important;\n            margin-bottom: 10px !important;\n        }\n\n        .apprentissage-article-meta {\n            display: flex !important;\n            align-items: center !important;\n            gap: 15px !important;\n            color: rgba(255, 255, 255, 0.9) !important;\n            font-size: 0.9rem !important;\n        }\n\n        .apprentissage-article-meta span {\n            display: flex !important;\n            align-items: center !important;\n            gap: 5px !important;\n        }\n\n        .apprentissage-article-meta svg {\n            width: 18px !important;\n            height: 18px !important;\n        }\n\n        \/* Table des mati\u00e8res *\/\n        .apprentissage-article-toc {\n            background: linear-gradient(120deg, #def4ff, #e8f7ff, #f0faff) !important;\n            border-radius: 12px !important;\n            padding: 25px !important;\n            margin-bottom: 40px !important;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;\n        }\n\n        .apprentissage-article-toc-title {\n            font-size: 1.4rem !important;\n            font-weight: 700 !important;\n            color: #333 !important;\n            margin-bottom: 15px !important;\n            display: flex !important;\n            align-items: center !important;\n            gap: 10px !important;\n        }\n\n        .apprentissage-article-toc-title svg {\n            width: 24px !important;\n            height: 24px !important;\n            color: #44a6d9 !important;\n        }\n\n        .apprentissage-article-toc-list {\n            list-style: none !important;\n            padding-left: 10px !important;\n        }\n\n        .apprentissage-article-toc-list li {\n            margin-bottom: 12px !important;\n            position: relative !important;\n        }\n\n        .apprentissage-article-toc-list li a {\n            color: #333 !important;\n            text-decoration: none !important;\n            display: block !important;\n            padding: 8px 15px !important;\n            border-radius: 5px !important;\n            transition: all 0.2s ease !important;\n            font-weight: 500 !important;\n        }\n\n        .apprentissage-article-toc-list li a:hover {\n            background: rgba(68, 166, 217, 0.1) !important;\n            color: #44a6d9 !important;\n            transform: translateX(5px) !important;\n        }\n\n        .apprentissage-article-toc-list li.toc-h2 {\n            padding-left: 20px !important;\n        }\n\n        .apprentissage-article-toc-list li.toc-h3 {\n            padding-left: 40px !important;\n            font-size: 0.9rem !important;\n        }\n\n        \/* Contenu de l'article *\/\n        .apprentissage-article-body {\n            line-height: 1.8 !important;\n            color: #333 !important;\n        }\n\n        .apprentissage-article-body h2 {\n            font-size: 1.8rem !important;\n            font-weight: 700 !important;\n            color: #333 !important;\n            margin-top: 50px !important;\n            margin-bottom: 25px !important;\n            padding-bottom: 10px !important;\n            border-bottom: 2px solid #44a6d9 !important;\n        }\n\n        .apprentissage-article-body h3 {\n            font-size: 1.4rem !important;\n            font-weight: 700 !important;\n            color: #333 !important;\n            margin-top: 35px !important;\n            margin-bottom: 20px !important;\n        }\n\n        .apprentissage-article-body p {\n            margin-bottom: 20px !important;\n            line-height: 1.8 !important;\n            font-size: 1.05rem !important;\n        }\n\n        .apprentissage-article-body ul,\n        .apprentissage-article-body ol {\n            margin-bottom: 25px !important;\n            padding-left: 30px !important;\n        }\n\n        .apprentissage-article-body li {\n            margin-bottom: 10px !important;\n            line-height: 1.7 !important;\n        }\n\n        .apprentissage-article-body img {\n            max-width: 100% !important;\n            height: auto !important;\n            border-radius: 8px !important;\n            margin: 25px 0 !important;\n        }\n\n        .apprentissage-article-body blockquote {\n            background: #f5f5f5 !important;\n            border-left: 4px solid #44a6d9 !important;\n            padding: 20px !important;\n            margin: 25px 0 !important;\n            font-style: italic !important;\n        }\n\n        \/* S\u00e9parateur et auteur *\/\n        .apprentissage-article-author {\n            margin: 50px 0 !important;\n            padding: 30px !important;\n            background: #f9f9f9 !important;\n            border-radius: 12px !important;\n            display: flex !important;\n            align-items: center !important;\n            gap: 20px !important;\n        }\n\n        .apprentissage-article-author-avatar {\n            width: 80px !important;\n            height: 80px !important;\n            border-radius: 50% !important;\n            object-fit: cover !important;\n        }\n\n        .apprentissage-article-author-info h4 {\n            font-size: 1.2rem !important;\n            font-weight: 700 !important;\n            margin-bottom: 5px !important;\n        }\n\n        .apprentissage-article-author-info p {\n            color: #666 !important;\n            font-size: 0.95rem !important;\n            line-height: 1.5 !important;\n        }\n\n        \/* Grille des articles r\u00e9cents *\/\n        .apprentissage-article-related {\n            margin-top: 50px !important;\n            padding-top: 50px !important;\n            border-top: 1px solid #eee !important;\n        }\n\n        .apprentissage-article-related h3 {\n            font-size: 1.8rem !important;\n            font-weight: 700 !important;\n            margin-bottom: 30px !important;\n            text-align: center !important;\n        }\n\n        .apprentissage-article-grid {\n            display: grid !important;\n            grid-template-columns: repeat(3, 1fr) !important;\n            gap: 20px !important;\n            margin-bottom: 50px !important;\n        }\n\n        .apprentissage-article-card {\n            background: white !important;\n            border-radius: 8px !important;\n            overflow: hidden !important;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;\n            transition: all 0.3s ease !important;\n            cursor: pointer !important;\n        }\n\n        .apprentissage-article-card:hover {\n            transform: translateY(-2px) !important;\n            box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;\n        }\n\n        .apprentissage-article-card img {\n            width: 100% !important;\n            height: 200px !important;\n            object-fit: cover !important;\n        }\n\n        .apprentissage-article-card .apprentissage-card-content {\n            padding: 15px !important;\n        }\n\n        .apprentissage-article-card .apprentissage-category-tag {\n            display: inline-block !important;\n            padding: 5px 10px !important;\n            background: #44a6d9 !important; \n            color: white !important; \n            border-radius: 4px !important;\n            font-size: 0.8em !important;\n            margin-bottom: 10px !important;\n        }\n\n        .apprentissage-article-card h3 {\n            font-size: 1.1rem !important;\n            font-weight: 700 !important;\n            margin-bottom: 10px !important;\n            line-height: 1.4 !important;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 992px) {\n            .apprentissage-article-grid {\n                grid-template-columns: repeat(2, 1fr) !important;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .apprentissage-article-header img {\n                height: 300px !important;\n            }\n\n            .apprentissage-article-title h1 {\n                font-size: 1.8rem !important;\n            }\n\n            .apprentissage-article-author {\n                flex-direction: column !important;\n                text-align: center !important;\n            }\n\n            .apprentissage-article-body h2 {\n                font-size: 1.5rem !important;\n            }\n\n            .apprentissage-article-body h3 {\n                font-size: 1.3rem !important;\n            }\n        }\n\n        @media (max-width: 576px) {\n            .apprentissage-article-grid {\n                grid-template-columns: 1fr !important;\n            }\n\n            .apprentissage-article-title h1 {\n                font-size: 1.5rem !important;\n            }\n\n            .apprentissage-article-meta {\n                flex-direction: column !important;\n                align-items: flex-start !important;\n                gap: 5px !important;\n            }\n        }\n    <\/style>\n<\/head>\n\n<body>\n  <!-- Conteneur principal -->\n  <div class=\"apprentissage-article-container\">\n    <article class=\"apprentissage-article-content\">\n      <!-- Header avec image mise en avant et titre -->\n      <header class=\"apprentissage-article-header\">\n        <img decoding=\"async\" id=\"apprentissage-featured-image\" src=\"\/api\/placeholder\/1200\/500\" alt=\"\">\n        <div class=\"apprentissage-article-title\">\n          <h1 id=\"apprentissage-article-title\">Titre de l'article<\/h1>\n          <div class=\"apprentissage-article-meta\">\n            <span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                   stroke-linejoin=\"round\">\n                <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\n                <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line>\n                <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line>\n                <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line>\n              <\/svg>\n              <time id=\"apprentissage-article-date\" datetime=\"2025-03-01\">Date de publication<\/time>\n            <\/span>\n            <span>\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                   stroke-linejoin=\"round\">\n                <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n                <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n              <\/svg>\n              <span id=\"apprentissage-article-author\">Auteur<\/span>\n            <\/span>\n          <\/div>\n        <\/div>\n      <\/header>\n\n      <!-- Table des mati\u00e8res -->\n      <div class=\"apprentissage-article-toc\">\n        <h2 class=\"apprentissage-article-toc-title\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n               stroke-linejoin=\"round\">\n            <line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line>\n            <line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line>\n            <line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line>\n            <line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"><\/line>\n            <line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"><\/line>\n            <line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"><\/line>\n          <\/svg>\n          Table des mati\u00e8res\n        <\/h2>\n        <ul id=\"apprentissage-article-toc-list\" class=\"apprentissage-article-toc-list\">\n          <!-- La table des mati\u00e8res sera g\u00e9n\u00e9r\u00e9e dynamiquement par JavaScript -->\n        <\/ul>\n      <\/div>\n\n      <!-- Corps de l'article -->\n      <div class=\"apprentissage-article-body\">\n        <p>\n          Lorem ipsum dolor sit amet, <strong>consectetur adipiscing<\/strong> elit. Nullam dictum\n          sapien a quam ornare, eget varius neque feugiat. Nunc fermentum, massa eget aliquam lobortis,\n          nibh diam sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna\n          aliquyam erat, sed diam voluptua. \n        <\/p>\n        <p>\n          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum\n          dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore\n          et dolore magna aliquyam erat, sed diam voluptua. \n        <\/p>\n\n        <h2>1. Nullam dictum sapien a quam ornare<\/h2>\n        <p>\n          Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at\n          nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue\n          semper porta. Mauris massa.\n        <\/p>\n        \n        <h3>1.1 Maecenas mattis sed convallis<\/h3>\n        <p>\n          Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque\n          volutpat condimentum velit. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor\n          neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.\n        <\/p>\n\n        <h3>1.2 Proin quam ipsum ante quis turpis<\/h3>\n        <p>\n          Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo\n          ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet\n          eget, justo. Sed pretium blandit orci.\n        <\/p>\n\n        <h2>2. Nullam mauris orci, aliquet et, iaculis et<\/h2>\n        <p>\n          Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer\n          risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.\n          Praesent libero. Sed cursus ante dapibus diam. Sed nisi.\n        <\/p>\n\n        <h3>2.1 Fusce nec tellus sed augue<\/h3>\n        <p>\n          Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque\n          nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.\n          Proin ut ligula vel nunc egestas porttitor.\n        <\/p>\n\n        <h2>3. Sed convallis tristique sem<\/h2>\n        <p>\n          Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque\n          volutpat condimentum velit. Sed non quam. In vel mi sit amet augue congue elementum. Morbi\n          in ipsum sit amet pede facilisis laoreet. \n        <\/p>\n\n        <h3>3.1 Nam nec ante sed lacinia<\/h3>\n        <p>\n          Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin\n          quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.\n        <\/p>\n\n        <h3>3.2 Integer euismod lacus luctus magna<\/h3>\n        <p>\n          Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue\n          eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia\n          Curae; Morbi lacinia molestie dui.\n        <\/p>\n      <\/div>\n\n      <!-- Information sur l'auteur -->\n      <div class=\"apprentissage-article-author\">\n        <img decoding=\"async\" id=\"apprentissage-author-avatar\" src=\"\/api\/placeholder\/150\/150\" alt=\"\"\n             class=\"apprentissage-article-author-avatar\">\n        <div class=\"apprentissage-article-author-info\">\n          <h4 id=\"apprentissage-author-name\">Nom de l'auteur<\/h4>\n          <p id=\"apprentissage-author-bio\">Biographie de l'auteur<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Articles associ\u00e9s -->\n      <div class=\"apprentissage-article-related\">\n        <h3>Articles similaires<\/h3>\n        <div id=\"apprentissage-recent-articles\" class=\"apprentissage-article-grid\">\n          <!-- Les articles r\u00e9cents seront charg\u00e9s dynamiquement par JavaScript -->\n        <\/div>\n      <\/div>\n    <\/article>\n  <\/div>\n\n  <!-- SCRIPT (sans CSS) -->\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      console.log(\"Initialisation du script\");\n      identifyCurrentPageAndFetchData();\n      setupSmoothScroll();\n    });\n\n    \/\/ 1. R\u00e9cup\u00e8re les posts via l'API et tente de trouver celui qui correspond au slug\n    function identifyCurrentPageAndFetchData() {\n      \/\/ On enl\u00e8ve le slash final s'il existe\n      const currentPath = window.location.pathname.replace(\/\\\/$\/, '');\n      const pathSegments = currentPath.split('\/');\n      const currentSlug = pathSegments.pop() || ''; \n      console.log(\"Slug d\u00e9tect\u00e9 :\", currentSlug);\n\n      \/\/ R\u00e9cup\u00e8re 20 posts max, avec les m\u00e9dias et auteurs inclus\n      const apiUrl = `${window.location.origin}\/blog\/wp-json\/wp\/v2\/posts?_embed&per_page=20`;\n      console.log(\"URL de l'API:\", apiUrl);\n\n      fetch(apiUrl)\n        .then(response => {\n          if (!response.ok) {\n            throw new Error(`Erreur HTTP: ${response.status}`);\n          }\n          return response.json();\n        })\n        .then(posts => {\n          console.log(`Nombre d'articles r\u00e9cup\u00e9r\u00e9s : ${posts.length}`);\n\n          \/\/ Cherche l'article dont le slug correspond \u00e0 currentSlug\n          let currentPost = posts.find(post => post.slug === currentSlug);\n\n          if (currentPost) {\n            console.log(\"Article courant trouv\u00e9 :\", currentPost.title.rendered);\n            updateArticleDetails(currentPost);\n\n            \/\/ Affiche 3 autres articles dans la section \"Articles similaires\"\n            const otherPosts = posts.filter(p => p.id !== currentPost.id).slice(0, 3);\n            displaySimilarArticles(otherPosts);\n\n          } else {\n            console.warn(\"Aucun article correspondant au slug. Extraction depuis le DOM.\");\n            extractFromDOM();\n\n            \/\/ On affiche quand m\u00eame 3 articles (ex : les 3 premiers) pour la section \"Articles similaires\"\n            displaySimilarArticles(posts.slice(0, 3));\n          }\n        })\n        .catch(error => {\n          console.error(\"Erreur lors de la r\u00e9cup\u00e9ration des articles :\", error);\n          \/\/ Fallback si l'API \u00e9choue\n          extractFromDOM();\n          displayFallbackArticles();\n        });\n    }\n\n    \/\/ 2. Met \u00e0 jour les infos dans le template (titre, image, date, auteur...)\n    function updateArticleDetails(post) {\n      \/\/ Titre\n      const titleElement = document.getElementById('apprentissage-article-title');\n      if (titleElement) {\n        titleElement.innerHTML = post.title.rendered;\n      }\n      \/\/ Image mise en avant\n      if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n        const featuredImage = post._embedded['wp:featuredmedia'][0];\n        const imageUrl = featuredImage.source_url;\n        const imageElement = document.getElementById('apprentissage-featured-image');\n        if (imageElement && imageUrl) {\n          imageElement.src = imageUrl;\n          imageElement.alt = post.title.rendered;\n        }\n      }\n      \/\/ Date\n      if (post.date) {\n        const dateElement = document.getElementById('apprentissage-article-date');\n        if (dateElement) {\n          try {\n            const date = new Date(post.date);\n            const options = { day: 'numeric', month: 'long', year: 'numeric' };\n            dateElement.textContent = date.toLocaleDateString('fr-FR', options);\n            dateElement.setAttribute('datetime', post.date);\n          } catch (e) {\n            console.error(\"Erreur formatage date :\", e);\n            dateElement.textContent = post.date.split('T')[0];\n          }\n        }\n      }\n      \/\/ Auteur\n      if (post._embedded && post._embedded.author && post._embedded.author[0]) {\n        const author = post._embedded.author[0];\n        const authorElement = document.getElementById('apprentissage-article-author');\n        const authorNameElement = document.getElementById('apprentissage-author-name');\n        const authorBioElement = document.getElementById('apprentissage-author-bio');\n        const authorAvatarElement = document.getElementById('apprentissage-author-avatar');\n\n        if (authorElement)      authorElement.textContent = author.name;\n        if (authorNameElement)  authorNameElement.textContent = author.name;\n        if (authorBioElement && author.description) {\n          authorBioElement.textContent = author.description;\n        }\n        if (authorAvatarElement && author.avatar_urls) {\n          authorAvatarElement.src = author.avatar_urls['96'] || '\/api\/placeholder\/150\/150';\n          authorAvatarElement.alt = author.name;\n        }\n      }\n      \/\/ G\u00e9n\u00e8re la TOC apr\u00e8s avoir ins\u00e9r\u00e9 le contenu\n      generateTableOfContents();\n    }\n\n    \/\/ 3. Extraction directe depuis le DOM WordPress si l\u2019API \u00e9choue ou si pas de correspondance\n    function extractFromDOM() {\n      console.log(\"Extraction des donn\u00e9es depuis le DOM WordPress...\");\n      \/\/ Titre\n      const wpTitle = document.querySelector('h1.entry-title, h1.post-title, article h1, .page-title');\n      if (wpTitle) {\n        const ourTitle = document.getElementById('apprentissage-article-title');\n        if (ourTitle) {\n          ourTitle.textContent = wpTitle.textContent.trim();\n        }\n      }\n      \/\/ Date\n      const wpDate = document.querySelector('time.entry-date, .posted-on time, .post-date');\n      if (wpDate) {\n        const ourDate = document.getElementById('apprentissage-article-date');\n        if (ourDate) {\n          ourDate.textContent = wpDate.textContent.trim();\n        }\n      }\n      \/\/ Auteur\n      const wpAuthor = document.querySelector('.author a, .entry-author a, .post-author');\n      if (wpAuthor) {\n        const authorText = wpAuthor.textContent.trim();\n        const ourAuthor = document.getElementById('apprentissage-article-author');\n        const ourAuthorName = document.getElementById('apprentissage-author-name');\n        if (ourAuthor) {\n          ourAuthor.textContent = authorText;\n        }\n        if (ourAuthorName) {\n          ourAuthorName.textContent = authorText;\n        }\n      }\n      \/\/ Image mise en avant\n      const wpImage = document.querySelector('.post-thumbnail img, .wp-post-image, .entry-content img:first-of-type');\n      if (wpImage) {\n        const imageSrc = wpImage.getAttribute('src');\n        const ourImage = document.getElementById('apprentissage-featured-image');\n        if (ourImage && imageSrc) {\n          ourImage.src = imageSrc;\n          \/\/ On r\u00e9cup\u00e8re le titre s\u2019il existe pour l\u2019attribut alt\n          const wpTitleForAlt = document.querySelector('h1.entry-title, h1.post-title');\n          ourImage.alt = wpTitleForAlt ? wpTitleForAlt.textContent.trim() : \"Image de l'article\";\n        }\n      }\n      generateTableOfContents();\n    }\n\n    \/\/ 4. Affiche la table des mati\u00e8res (h2, h3) en fonction du contenu pr\u00e9sent\n    function generateTableOfContents() {\n      console.log(\"G\u00e9n\u00e9ration de la table des mati\u00e8res...\");\n      const articleBody = document.querySelector('.apprentissage-article-body');\n      const tocList = document.getElementById('apprentissage-article-toc-list');\n\n      if (!articleBody || !tocList) return;\n\n      const headings = articleBody.querySelectorAll('h2, h3');\n      if (headings.length === 0) {\n        \/\/ S\u2019il n\u2019y a pas de titres, on masque la TOC\n        const tocContainer = document.querySelector('.apprentissage-article-toc');\n        if (tocContainer) tocContainer.style.display = 'none';\n        return;\n      }\n\n      \/\/ On vide la liste avant de la re-g\u00e9n\u00e9rer\n      tocList.innerHTML = '';\n\n      headings.forEach((heading, index) => {\n        \/\/ Ajoute un id s\u2019il n\u2019existe pas\n        if (!heading.id) {\n          const headingText = heading.textContent.toLowerCase()\n            .replace(\/[^a-z0-9]+\/g, '-')\n            .replace(\/(^-|-$)\/g, '');\n          heading.id = `section-${headingText || index}`;\n        }\n        \/\/ Cr\u00e9e l\u2019\u00e9l\u00e9ment de liste\n        const listItem = document.createElement('li');\n        if (heading.tagName === 'H2') {\n          listItem.classList.add('toc-h2');\n        } else {\n          listItem.classList.add('toc-h3');\n        }\n        const link = document.createElement('a');\n        link.href = `#${heading.id}`;\n        link.textContent = heading.textContent;\n        listItem.appendChild(link);\n        tocList.appendChild(listItem);\n      });\n    }\n\n    \/\/ 5. Active le d\u00e9filement fluide sur les ancres de la TOC\n    function setupSmoothScroll() {\n      console.log(\"Configuration du scroll fluide...\");\n      const tocLinks = document.querySelectorAll('.apprentissage-article-toc-list a');\n      tocLinks.forEach(link => {\n        link.addEventListener('click', function(e) {\n          e.preventDefault();\n          const targetId = this.getAttribute('href').substring(1);\n          const targetElement = document.getElementById(targetId);\n          if (targetElement) {\n            const offset = 80; \n            const targetPosition = targetElement.getBoundingClientRect().top \n                                   + window.pageYOffset - offset;\n            window.scrollTo({\n              top: targetPosition,\n              behavior: 'smooth'\n            });\n          }\n        });\n      });\n    }\n\n    \/\/ 6. Affiche les articles similaires (3 articles) dans la grille\n    function displaySimilarArticles(articles) {\n      console.log(\"Affichage des articles similaires...\");\n      const articlesGrid = document.getElementById('apprentissage-recent-articles');\n      if (!articlesGrid) return;\n\n      \/\/ On vide la grille\n      articlesGrid.innerHTML = '';\n\n      articles.forEach(article => {\n        try {\n          const imageUrl = article._embedded?.['wp:featuredmedia']?.[0]?.source_url \n                           || '\/api\/placeholder\/400\/200';\n          const category = article._embedded?.['wp:term']?.[0]?.[0]?.name || 'Cat\u00e9gorie';\n          const articleElement = document.createElement('a');\n          articleElement.href = article.link;\n          articleElement.style.textDecoration = 'none';\n          articleElement.style.color = 'inherit';\n\n          articleElement.innerHTML = `\n            <article class=\"apprentissage-article-card\">\n              <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${article.title.rendered}\">\n              <div class=\"apprentissage-card-content\">\n                <span class=\"apprentissage-category-tag\">${category}<\/span>\n                <h3>${article.title.rendered}<\/h3>\n              <\/div>\n            <\/article>\n          `;\n          articlesGrid.appendChild(articleElement);\n        } catch (error) {\n          console.error(\"Erreur lors de l'affichage d'un article :\", error);\n        }\n      });\n    }\n\n    \/\/ 7. Articles de secours si tout \u00e9choue\n    function displayFallbackArticles() {\n      console.log(\"Affichage des articles de secours...\");\n      const articlesGrid = document.getElementById('apprentissage-recent-articles');\n      if (!articlesGrid) return;\n\n      const fallbackArticles = [\n        {\n          title: 'Comment trouver une alternance en 2025',\n          image: '\/api\/placeholder\/400\/200',\n          category: 'Conseils',\n          link: '#'\n        },\n        {\n          title: 'Les avantages de l\\'apprentissage en entreprise',\n          image: '\/api\/placeholder\/400\/200',\n          category: 'Guide',\n          link: '#'\n        },\n        {\n          title: 'Top 10 des m\u00e9tiers en alternance les plus recherch\u00e9s',\n          image: '\/api\/placeholder\/400\/200',\n          category: 'Tendances',\n          link: '#'\n        }\n      ];\n\n      articlesGrid.innerHTML = fallbackArticles.map(article => `\n        <a href=\"${article.link}\" style=\"text-decoration: none; color: inherit;\">\n          <article class=\"apprentissage-article-card\">\n            <img decoding=\"async\" src=\"${article.image}\" alt=\"${article.title}\">\n            <div class=\"apprentissage-card-content\">\n              <span class=\"apprentissage-category-tag\">${article.category}<\/span>\n              <h3>${article.title}<\/h3>\n            <\/div>\n          <\/article>\n        <\/a>\n      `).join('');\n    }\n  <\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\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>Mod\u00e8le d&#8217;Article &#8211; Apprentissage.com Titre de l&#8217;article Date de publication Auteur Table des mati\u00e8res Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum sapien a quam ornare, eget varius neque feugiat. Nunc fermentum, massa eget aliquam lobortis, nibh diam sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>test - Etudiants en Alternance : Derni\u00e8res actus &amp; tendances<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vipschool.fr\/blog\/test\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"test - Etudiants en Alternance : Derni\u00e8res actus &amp; tendances\" \/>\n<meta property=\"og:description\" content=\"Mod\u00e8le d&#8217;Article &#8211; Apprentissage.com Titre de l&#8217;article Date de publication Auteur Table des mati\u00e8res Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum sapien a quam ornare, eget varius neque feugiat. Nunc fermentum, massa eget aliquam lobortis, nibh diam sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vipschool.fr\/blog\/test\/\" \/>\n<meta property=\"og:site_name\" content=\"Etudiants en Alternance : Derni\u00e8res actus &amp; tendances\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-04T10:25:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vipschool.fr\/blog\/test\/\",\"url\":\"https:\/\/vipschool.fr\/blog\/test\/\",\"name\":\"test - Etudiants en Alternance : Derni\u00e8res actus & tendances\",\"isPartOf\":{\"@id\":\"https:\/\/vipschool.fr\/blog\/#website\"},\"datePublished\":\"2025-03-04T10:14:48+00:00\",\"dateModified\":\"2025-03-04T10:25:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vipschool.fr\/blog\/test\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vipschool.fr\/blog\/test\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vipschool.fr\/blog\/test\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vipschool.fr\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vipschool.fr\/blog\/#website\",\"url\":\"https:\/\/vipschool.fr\/blog\/\",\"name\":\"Etudiants en Alternance : Derni\u00e8res actus & tendances\",\"description\":\"\u00c9chos d'Alternance : Les Nouvelles de Demain, Aujourd'hui.\",\"publisher\":{\"@id\":\"https:\/\/vipschool.fr\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vipschool.fr\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vipschool.fr\/blog\/#organization\",\"name\":\"Etudiants en Alternance : Derni\u00e8res actus & tendances\",\"url\":\"https:\/\/vipschool.fr\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/vipschool.fr\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vipschool.fr\/blog\/wp-content\/uploads\/2022\/11\/L-1-1.jpg\",\"contentUrl\":\"https:\/\/vipschool.fr\/blog\/wp-content\/uploads\/2022\/11\/L-1-1.jpg\",\"width\":333,\"height\":333,\"caption\":\"Etudiants en Alternance : Derni\u00e8res actus & tendances\"},\"image\":{\"@id\":\"https:\/\/vipschool.fr\/blog\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"test - Etudiants en Alternance : Derni\u00e8res actus & tendances","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vipschool.fr\/blog\/test\/","og_locale":"fr_FR","og_type":"article","og_title":"test - Etudiants en Alternance : Derni\u00e8res actus & tendances","og_description":"Mod\u00e8le d&#8217;Article &#8211; Apprentissage.com Titre de l&#8217;article Date de publication Auteur Table des mati\u00e8res Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum sapien a quam ornare, eget varius neque feugiat. Nunc fermentum, massa eget aliquam lobortis, nibh diam sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, [&hellip;]","og_url":"https:\/\/vipschool.fr\/blog\/test\/","og_site_name":"Etudiants en Alternance : Derni\u00e8res actus & tendances","article_modified_time":"2025-03-04T10:25:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/vipschool.fr\/blog\/test\/","url":"https:\/\/vipschool.fr\/blog\/test\/","name":"test - Etudiants en Alternance : Derni\u00e8res actus & tendances","isPartOf":{"@id":"https:\/\/vipschool.fr\/blog\/#website"},"datePublished":"2025-03-04T10:14:48+00:00","dateModified":"2025-03-04T10:25:16+00:00","breadcrumb":{"@id":"https:\/\/vipschool.fr\/blog\/test\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vipschool.fr\/blog\/test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vipschool.fr\/blog\/test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vipschool.fr\/blog\/"},{"@type":"ListItem","position":2,"name":"test"}]},{"@type":"WebSite","@id":"https:\/\/vipschool.fr\/blog\/#website","url":"https:\/\/vipschool.fr\/blog\/","name":"Etudiants en Alternance : Derni\u00e8res actus & tendances","description":"\u00c9chos d'Alternance : Les Nouvelles de Demain, Aujourd'hui.","publisher":{"@id":"https:\/\/vipschool.fr\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vipschool.fr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/vipschool.fr\/blog\/#organization","name":"Etudiants en Alternance : Derni\u00e8res actus & tendances","url":"https:\/\/vipschool.fr\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/vipschool.fr\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/vipschool.fr\/blog\/wp-content\/uploads\/2022\/11\/L-1-1.jpg","contentUrl":"https:\/\/vipschool.fr\/blog\/wp-content\/uploads\/2022\/11\/L-1-1.jpg","width":333,"height":333,"caption":"Etudiants en Alternance : Derni\u00e8res actus & tendances"},"image":{"@id":"https:\/\/vipschool.fr\/blog\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/pages\/95188"}],"collection":[{"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/comments?post=95188"}],"version-history":[{"count":8,"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/pages\/95188\/revisions"}],"predecessor-version":[{"id":95306,"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/pages\/95188\/revisions\/95306"}],"wp:attachment":[{"href":"https:\/\/vipschool.fr\/blog\/wp-json\/wp\/v2\/media?parent=95188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}