{"id":79,"date":"2025-03-04T09:34:56","date_gmt":"2025-03-04T08:34:56","guid":{"rendered":"https:\/\/apprentissage.com\/ressources-etudiantes\/?page_id=79"},"modified":"2025-03-06T14:33:57","modified_gmt":"2025-03-06T13:33:57","slug":"accueil","status":"publish","type":"page","link":"https:\/\/apprentissage.com\/ressources-etudiantes\/","title":{"rendered":"accueil"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n \n \n \n Blog Homepage<\/title>\n <style>\n \/* Container reset and isolation with stronger containment *\/\n .blog-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 \/* Grid containment with stronger positioning *\/\n .blog-container .blog-grid {\n width: 90% !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n padding: 20px !important;\n display: grid !important;\n grid-template-columns: 1fr 300px !important;\n gap: 30px !important;\n position: relative !important;\n left: 0 !important;\n right: 0 !important;\n overflow: visible !important;\n z-index: 1 !important;\n transform: translateZ(0) !important;\n }\n\n \/* Featured article containment *\/\n .blog-container .featured-article {\n position: relative !important;\n width: 100% !important;\n margin-bottom: 20px !important;\n z-index: 1 !important;\n transform: translateZ(0) !important;\n max-width: 100% !important;\n overflow: hidden !important;\n border-radius: 8px !important;\n }\n\n .blog-container .featured-article img {\n width: 100% !important;\n height: 400px !important;\n object-fit: cover !important;\n display: block !important;\n position: relative !important;\n z-index: 1 !important;\n }\n\n .blog-container .featured-article .article-content {\n position: relative !important;\n width: 100% !important;\n padding: 30px !important;\n background: rgba(0, 0, 0, 0.9) !important;\n text-align: center !important;\n color: white !important;\n z-index: 2 !important;\n }\n\n \/* Only apply absolute positioning on larger screens *\/\n @media (min-width: 769px) {\n .blog-container .featured-article .article-content {\n position: absolute !important;\n bottom: 0 !important;\n left: 0 !important;\n right: 0 !important;\n z-index: 2 !important;\n }\n }\n\n \/* Reset all elements within container *\/\n .blog-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 \/* Add !important to all existing style properties *\/\n .blog-container .blog-grid {\n display: grid !important;\n grid-template-columns: 1fr 300px !important;\n gap: 30px !important;\n background: linear-gradient(120deg, #def4ff, #e8f7ff, #f0faff, #e8f7ff, #def4ff) !important;\n background-size: 400% 400% !important;\n animation: subtleWave 15s ease infinite !important;\n padding: 30px !important;\n border-radius: 12px !important;\n }\n\n .blog-container .main-content {\n display: flex !important;\n flex-direction: column !important;\n gap: 30px !important;\n }\n\n .blog-container .articles-grid {\n display: grid !important;\n grid-template-columns: repeat(3, 1fr) !important;\n gap: 20px !important;\n }\n\n .blog-container .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 .blog-container .article-card:hover {\n transform: translateY(-2px) !important;\n box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;\n }\n\n .blog-container .article-card img {\n width: 100% !important;\n height: 200px !important;\n object-fit: cover !important;\n }\n\n .blog-container .article-card .card-content {\n padding: 15px !important;\n }\n\n .blog-container .sidebar > * {\n margin-bottom: 30px !important;\n }\n\n .blog-container .sidebar > *:last-child {\n margin-bottom: 0 !important;\n }\n\n .blog-container .sidebar h2 {\n margin-top: 30px !important;\n }\n\n .blog-container .most-read {\n list-style: none !important;\n }\n\n .blog-container .most-read-item {\n display: flex !important;\n align-items: center !important;\n padding: 15px 0 !important;\n border-bottom: 1px solid #ddd !important;\n width: 100% !important;\n }\n\n .blog-container .most-read-item a {\n display: flex !important;\n align-items: center !important;\n width: 100% !important;\n text-decoration: none !important;\n color: inherit !important;\n }\n\n .blog-container .number-badge {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 30px !important;\n height: 30px !important;\n background: #44a6d9 !important;\n color: white !important;\n border-radius: 50% !important;\n flex-shrink: 0 !important;\n margin-right: 15px !important;\n }\n\n .blog-container .most-read-item h3 {\n flex: 1 !important;\n margin: 0 !important;\n font-size: 1rem !important;\n padding: 0 !important;\n display: block !important;\n }\n\n .blog-container .most-read-item:hover h3 {\n color: #0071e1 !important;\n }\n\n .blog-container .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 @media (min-width: 769px) {\n .blog-container .category-tag {\n font-size: 0.6em !important;\n }\n }\n\n .blog-container h1 {\n font-family: 'Quicksand', sans-serif !important;\n margin-bottom: 10px !important;\n font-size: 1.8rem !important;\n }\n \n .blog-container h2 {\n font-family: 'Quicksand', sans-serif !important;\n margin-bottom: 10px !important;\n font-size: 1.2rem !important;\n }\n \n .blog-container h3 {\n font-family: 'Quicksand', sans-serif !important;\n margin-bottom: 10px !important;\n font-size: 1rem !important;\n }\n\n \/* Resource Cards Styles *\/\n .blog-container .resource-cards {\n display: grid !important;\n grid-template-columns: repeat(2, 1fr) !important;\n gap: 15px !important;\n margin-top: 15px !important;\n }\n\n .blog-container .resource-card {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n text-align: center !important;\n padding: 15px !important;\n background: white !important;\n border-radius: 12px !important;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n text-decoration: none !important;\n color: #333 !important;\n aspect-ratio: 1 !important;\n transition: transform 0.2s, box-shadow 0.2s !important;\n }\n\n .blog-container .resource-card:hover {\n transform: translateY(-2px) !important;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;\n }\n\n .blog-container .resource-icon {\n font-size: 24px !important;\n margin-bottom: 10px !important;\n }\n\n .blog-container .resource-title {\n font-size: 14px !important;\n font-weight: 500 !important;\n line-height: 1.3 !important;\n }\n\n \/* Newsletter Form Styles *\/\n .blog-container .newsletter-section {\n background: white !important;\n padding: 30px !important; \n border-radius: 12px !important;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n }\n\n .blog-container .newsletter-section h2 {\n margin-bottom: 20px !important; \n font-size: 1.5rem !important;\n color: #333 !important;\n }\n\n .blog-container .newsletter-section p {\n margin-bottom: 25px !important; \n color: #666 !important;\n line-height: 1.6 !important;\n }\n\n .blog-container .form-group {\n margin-bottom: 20px !important; \n }\n\n .blog-container .form-group:last-child {\n margin-bottom: 25px !important; \n }\n\n .blog-container .form-input {\n width: 100% !important;\n padding: 14px !important; \n border: 1px solid #ddd !important;\n border-radius: 6px !important;\n font-size: 14px !important;\n transition: all 0.3s ease !important;\n background-color: #f8f9fa !important; \n }\n\n .blog-container .form-input:focus {\n border-color: #44a6d9 !important;\n outline: none !important;\n background-color: white !important;\n box-shadow: 0 0 0 3px rgba(68, 166, 217, 0.1) !important;\n }\n\n .blog-container .checkbox-container {\n display: flex !important;\n align-items: flex-start !important;\n gap: 12px !important;\n font-size: 14px !important;\n color: #666 !important;\n line-height: 1.4 !important;\n margin: 25px 0 !important; \n padding: 5px 0 !important; \n }\n\n .blog-container .checkbox-container input[type=\"checkbox\"] {\n margin-top: 3px !important;\n width: 16px !important;\n height: 16px !important;\n }\n\n .blog-container .submit-btn {\n width: 100% !important;\n padding: 14px !important; \n background: #44a6d9 !important;\n color: white !important;\n border: none !important;\n border-radius: 6px !important;\n font-weight: 500 !important; \n font-size: 14px !important; \n cursor: pointer !important;\n transition: all 0.3s ease !important;\n text-transform: uppercase !important; \n letter-spacing: 1px !important; \n animation: vibrate 2s infinite !important;\n }\n\n @keyframes vibrate {\n 0% { transform: translateX(0) !important; }\n 2% { transform: translateX(-2px) !important; }\n 4% { transform: translateX(2px) !important; }\n 6% { transform: translateX(-2px) !important; }\n 8% { transform: translateX(2px) !important; }\n 10% { transform: translateX(-2px) !important; }\n 12% { transform: translateX(0) !important; }\n 100% { transform: translateX(0) !important; }\n }\n\n .blog-container .submit-btn:hover {\n background: #3789b4 !important;\n transform: translateY(-1px) !important;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;\n animation: none !important; \/* Stop vibration on hover *\/\n }\n\n \/* Thematic Recommendations Styles *\/\n .blog-container .thematic-recommendations {\n width: 90% !important;\n max-width: 1200px !important;\n margin: 60px auto !important;\n padding: 0 20px !important;\n }\n\n .blog-container .thematic-recommendations h2 {\n text-align: center !important;\n margin-bottom: 30px !important;\n font-size: 1.8rem !important;\n color: #333 !important;\n }\n\n .blog-container .thematic-categories-grid {\n display: grid !important;\n grid-template-columns: repeat(3, 1fr) !important;\n gap: 30px !important;\n }\n\n .blog-container .category-section {\n background: white !important;\n border-radius: 12px !important;\n padding: 20px !important;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;\n }\n\n .blog-container .category-section h3 {\n color: #333 !important;\n font-size: 1.4rem !important;\n margin-bottom: 20px !important;\n padding-bottom: 10px !important;\n border-bottom: 2px solid #44a6d9 !important;\n }\n\n .blog-container .category-articles {\n display: flex !important;\n flex-direction: column !important;\n gap: 15px !important;\n }\n\n .blog-container .category-article-card {\n display: grid !important;\n grid-template-columns: 120px 1fr !important;\n gap: 15px !important;\n padding: 10px !important;\n border-radius: 8px !important;\n transition: all 0.3s ease !important;\n text-decoration: none !important;\n color: inherit !important;\n }\n\n .blog-container .category-article-card:hover {\n background: #f5f5f5 !important;\n transform: translateX(5px) !important;\n }\n\n .blog-container .category-article-image {\n width: 120px !important;\n height: 80px !important;\n border-radius: 6px !important;\n object-fit: cover !important;\n }\n\n .blog-container .category-article-content {\n display: flex !important;\n flex-direction: column !important;\n justify-content: center !important;\n }\n\n .blog-container .category-article-tag {\n font-size: 0.7rem !important;\n color: #44a6d9 !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin-bottom: 5px !important;\n }\n\n .blog-container .category-article-title {\n font-size: 0.9rem !important;\n line-height: 1.4 !important;\n color: #333 !important;\n margin: 0 !important;\n }\n\n @media (max-width: 768px) {\n .blog-container .thematic-categories-grid {\n grid-template-columns: 1fr !important;\n }\n\n .blog-container .category-article-card {\n display: flex !important;\n flex-direction: column !important;\n gap: 10px !important;\n padding: 10px !important;\n }\n\n .blog-container .category-article-image {\n width: 100% !important;\n height: 160px !important;\n border-radius: 6px !important;\n }\n\n .blog-container .category-article-content {\n padding: 0 5px !important;\n }\n }\n\n @media (max-height: 600px) and (orientation: landscape) {\n .blog-container .thematic-recommendations {\n margin: 30px auto !important;\n }\n\n .blog-container .category-section {\n padding: 15px !important;\n }\n\n .blog-container .category-section h3 {\n font-size: 1.2rem !important;\n margin-bottom: 15px !important;\n }\n\n .blog-container .category-article-card {\n padding: 8px !important;\n }\n }\n\n \/* START ADDED MOBILE STYLES *\/\n @media (max-width: 768px) {\n .blog-container .blog-grid {\n grid-template-columns: 1fr !important;\n }\n\n .blog-container .articles-grid {\n grid-template-columns: 1fr !important;\n }\n\n .blog-container .resource-cards {\n grid-template-columns: repeat(2, 1fr) !important;\n }\n\n .blog-container .featured-article {\n display: flex !important;\n flex-direction: column !important;\n }\n\n .blog-container .featured-article img {\n height: 200px !important;\n width: 100% !important;\n }\n\n .blog-container .blog-grid {\n display: flex !important;\n flex-direction: column !important;\n }\n\n .blog-container .main-content {\n order: 1 !important;\n }\n\n .blog-container .sidebar {\n order: 2 !important;\n margin-top: 30px !important;\n }\n }\n \/* END ADDED MOBILE STYLES *\/\n\n \/* START ADDED LINK STYLES *\/\n .blog-container .featured-article a,\n .blog-container .articles-grid a,\n .blog-container .most-read a {\n text-decoration: none !important;\n color: inherit !important;\n transition: all 0.3s ease !important;\n }\n\n .blog-container .most-read-item a {\n display: block !important;\n width: 100% !important;\n padding: -5px 0 !important;\n }\n \/* END ADDED LINK STYLES *\/\n\n \/* START FIXED HOVER STYLES *\/\n \/* Already applied to .article-card *\/\n \/* END FIXED HOVER STYLES *\/\n\n .blog-container span.checkmark,\n .blog-container .checkbox-container span.checkmark,\n .blog-container form span.checkmark,\n .blog-container .form-group span.checkmark,\n .blog-container input[type=\"checkbox\"] + span.checkmark,\n .blog-container .elementor span.checkmark,\n .blog-container .wpforms-container span.checkmark {\n display: none !important;\n background: none !important;\n background-color: transparent !important;\n border: none !important;\n width: 0 !important;\n height: 0 !important;\n opacity: 0 !important;\n position: absolute !important;\n pointer-events: none !important;\n visibility: hidden !important;\n margin: 0 !important;\n padding: 0 !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: 0 !important;\n max-height: 0 !important;\n overflow: hidden !important;\n clip: rect(0 0 0 0) !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n transform: scale(0) !important;\n }\n\n .blog-container span.checkmark::before,\n .blog-container span.checkmark::after {\n content: none !important;\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n }\n\n \/* Updated IDs with 'apprentissage' prefix *\/\n #apprentissage-newsletterForm.newsletter-form {\n \/* existing styles *\/\n }\n\n #apprentissage-nom.form-input {\n \/* existing styles *\/\n }\n\n #apprentissage-prenom.form-input {\n \/* existing styles *\/\n }\n\n #apprentissage-email.form-input {\n \/* existing styles *\/\n }\n\n \/* Updated button styles with stronger specificity *\/\n .blog-container .submit-btn.newsletter-submit {\n width: 100% !important;\n padding: 14px !important;\n background: #44a6d9 !important;\n color: white !important;\n border: none !important;\n border-radius: 6px !important;\n font-weight: 500 !important;\n font-size: 14px !important;\n cursor: pointer !important;\n transition: all 0.3s ease !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n display: block !important;\n text-align: center !important;\n line-height: 1.5 !important;\n margin: 0 !important;\n position: relative !important;\n z-index: 1 !important;\n }\n\n \/* Pagination Styles *\/\n .blog-container .pagination {\n display: flex !important;\n justify-content: center !important;\n align-items: center !important;\n gap: 10px !important;\n margin-top: 40px !important;\n padding: 20px 0 !important;\n }\n\n .blog-container .pagination-button {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n min-width: 40px !important;\n height: 40px !important;\n padding: 0 15px !important;\n background: white !important;\n border: 2px solid #44a6d9 !important;\n border-radius: 20px !important;\n color: #44a6d9 !important;\n font-weight: 600 !important;\n cursor: pointer !important;\n transition: all 0.3s ease !important;\n }\n\n .blog-container .pagination-button:hover {\n background: #44a6d9 !important;\n color: white !important;\n }\n\n .blog-container .pagination-button.active {\n background: #44a6d9 !important;\n color: white !important;\n }\n\n .blog-container .pagination-button:disabled {\n background: #f0f0f0 !important;\n border-color: #ddd !important;\n color: #999 !important;\n cursor: not-allowed !important;\n opacity: 0.7 !important;\n }\n\n .blog-container .pagination-dots {\n color: #44a6d9 !important;\n font-weight: bold !important;\n }\n\n \/* Reset des styles pr\u00e9c\u00e9dents pour most-read *\/\n .blog-container .most-read {\n list-style: none !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n\n .blog-container .most-read-item {\n margin-bottom: 10px !important;\n padding: 10px 0 !important;\n border-bottom: 1px solid #ddd !important;\n }\n\n .blog-container .most-read-item a {\n display: grid !important;\n grid-template-columns: 40px 1fr !important;\n grid-gap: 15px !important;\n align-items: center !important;\n text-decoration: none !important;\n color: inherit !important;\n }\n\n .blog-container .number-badge {\n width: 30px !important;\n height: 30px !important;\n background: #44a6d9 !important;\n color: white !important;\n border-radius: 50% !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n font-weight: bold !important;\n }\n\n .blog-container .most-read-item h3 {\n margin: 0 !important;\n padding: 0 !important;\n font-size: 1rem !important;\n }\n\n .blog-container .most-read-item:hover h3 {\n color: #0071e1 !important;\n }\n \n .blog-container .search-filter-container {\n display: flex !important;\n gap: 20px !important;\n margin: 30px 0 !important;\n flex-wrap: wrap !important;\n }\n\n .blog-container .search-bar {\n flex: 1 !important;\n min-width: 250px !important;\n }\n\n .blog-container .search-input {\n width: 100% !important;\n padding: 12px 20px !important;\n border: 2px solid #44a6d9 !important;\n border-radius: 25px !important;\n font-size: 13px !important;\n transition: all 0.3s ease !important;\n background: white !important;\n }\n\n .blog-container .search-input:focus {\n outline: none !important;\n box-shadow: 0 0 0 3px rgba(68, 166, 217, 0.2) !important;\n }\n\n .blog-container .category-filter {\n width: 200px !important;\n }\n\n .blog-container .category-select {\n width: 100% !important;\n padding: 12px 20px !important;\n border: 2px solid #44a6d9 !important;\n border-radius: 25px !important;\n font-size: 13px !important;\n background: white !important;\n cursor: pointer !important;\n appearance: none !important;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2344a6d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 10px center !important;\n background-size: 20px !important;\n }\n\n .blog-container .category-select:focus {\n outline: none !important;\n box-shadow: 0 0 0 3px rgba(68, 166, 217, 0.2) !important;\n }\n\n @media (max-width: 768px) {\n .blog-container .search-filter-container {\n flex-direction: column !important;\n }\n\n .blog-container .category-filter {\n width: 100% !important;\n }\n }\n\n .blog-container .sort-filter {\n width: 200px !important;\n }\n\n .blog-container .sort-select {\n width: 100% !important;\n padding: 12px 20px !important;\n border: 2px solid #44a6d9 !important;\n border-radius: 25px !important;\n font-size: 13px !important;\n background: white !important;\n cursor: pointer !important;\n appearance: none !important;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2344a6d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 10px center !important;\n background-size: 20px !important;\n }\n\n .blog-container .sort-select:focus {\n outline: none !important;\n box-shadow: 0 0 0 3px rgba(68, 166, 217, 0.2) !important;\n }\n\n @media (max-width: 768px) {\n .blog-container .sort-filter {\n width: 100% !important;\n }\n }\n\n \/* Random Recommendations Styles *\/\n .blog-container .random-recommendations {\n width: 90% !important;\n max-width: 1200px !important;\n margin: 60px auto !important;\n padding: 0 20px !important;\n }\n\n .blog-container .random-recommendations h2 {\n text-align: center !important;\n margin-bottom: 30px !important;\n font-size: 1.8rem !important;\n color: #333 !important;\n }\n\n .blog-container .random-articles-grid {\n display: grid !important;\n grid-template-columns: repeat(3, 1fr) !important;\n gap: 25px !important;\n }\n\n .blog-container .random-article-card {\n background: white !important;\n border-radius: 12px !important;\n overflow: hidden !important;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;\n transition: transform 0.3s ease, box-shadow 0.3s ease !important;\n display: flex !important;\n flex-direction: column !important;\n }\n\n .blog-container .random-article-card:hover {\n transform: translateY(-5px) !important;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;\n }\n\n .blog-container .random-article-image {\n width: 100% !important;\n height: 200px !important;\n object-fit: cover !important;\n }\n\n .blog-container .random-article-content {\n padding: 20px !important;\n flex-grow: 1 !important;\n display: flex !important;\n flex-direction: column !important;\n }\n\n .blog-container .random-article-category {\n font-size: 0.7rem !important;\n color: #44a6d9 !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin-bottom: 10px !important;\n }\n\n .blog-container .random-article-title {\n font-size: 1.1rem !important;\n color: #333 !important;\n margin-bottom: 15px !important;\n line-height: 1.4 !important;\n flex-grow: 1 !important;\n }\n\n .blog-container .random-article-excerpt {\n font-size: 0.9rem !important;\n color: #666 !important;\n margin-bottom: 15px !important;\n line-height: 1.5 !important;\n }\n\n .blog-container .random-article-date {\n font-size: 0.8rem !important;\n color: #999 !important;\n }\n\n @media (max-width: 768px) {\n .blog-container .random-articles-grid {\n grid-template-columns: 1fr !important;\n }\n\n .blog-container .random-recommendations {\n margin: 40px auto !important;\n }\n\n .blog-container .random-recommendations h2 {\n font-size: 1.4rem !important;\n }\n }\n\n \/* Ajout des media queries pour mobile paysage *\/\n @media (max-height: 600px) and (orientation: landscape) {\n .blog-container .blog-grid {\n grid-template-columns: 1fr !important;\n padding: 15px !important;\n }\n\n .blog-container .featured-article img {\n height: 250px !important;\n }\n\n .blog-container .article-card img {\n height: 150px !important;\n }\n\n .blog-container .articles-grid {\n grid-template-columns: repeat(2, 1fr) !important;\n gap: 15px !important;\n }\n\n .blog-container .random-articles-grid {\n grid-template-columns: repeat(2, 1fr) !important;\n gap: 15px !important;\n }\n\n .blog-container .random-article-image {\n height: 150px !important;\n }\n\n .blog-container .resource-cards {\n grid-template-columns: repeat(3, 1fr) !important;\n gap: 10px !important;\n }\n\n .blog-container .resource-card {\n padding: 10px !important;\n }\n\n .blog-container .resource-icon {\n font-size: 20px !important;\n margin-bottom: 5px !important;\n }\n\n .blog-container .resource-title {\n font-size: 12px !important;\n }\n\n .blog-container .featured-article .article-content {\n padding: 20px !important;\n }\n\n .blog-container h1 {\n font-size: 1.4rem !important;\n }\n\n .blog-container h2 {\n font-size: 1.1rem !important;\n }\n\n .blog-container .newsletter-section {\n padding: 20px !important;\n }\n\n .blog-container .form-input,\n .blog-container .submit-btn {\n padding: 10px !important;\n }\n\n .blog-container .search-input,\n .blog-container .category-select,\n .blog-container .sort-select {\n padding: 8px 15px !important;\n font-size: 12px !important;\n }\n\n .blog-container .search-filter-container {\n gap: 10px !important;\n margin: 15px 0 !important;\n }\n\n .blog-container .pagination {\n margin-top: 20px !important;\n }\n\n .blog-container .pagination-button {\n min-width: 35px !important;\n height: 35px !important;\n font-size: 13px !important;\n }\n\n .blog-container .random-recommendations {\n margin: 30px auto !important;\n }\n\n .blog-container .random-article-content {\n padding: 12px !important;\n }\n\n .blog-container .random-article-title {\n font-size: 0.9rem !important;\n }\n\n .blog-container .random-article-excerpt {\n font-size: 0.8rem !important;\n }\n }\n\n \/* Media queries for landscape *\/\n @media (max-height: 600px) and (orientation: landscape) {\n \/* Random Recommendations Section *\/\n .blog-container .random-recommendations {\n margin: 20px auto !important;\n padding: 0 15px !important;\n }\n\n .blog-container .random-recommendations h2 {\n font-size: 1.4rem !important;\n margin-bottom: 20px !important;\n }\n\n .blog-container .random-articles-grid {\n grid-template-columns: repeat(3, 1fr) !important;\n gap: 15px !important;\n }\n\n .blog-container .random-article-card {\n min-height: unset !important;\n }\n\n .blog-container .random-article-image {\n height: 120px !important;\n }\n\n .blog-container .random-article-content {\n padding: 10px !important;\n }\n\n .blog-container .random-article-title {\n font-size: 0.9rem !important;\n margin-bottom: 5px !important;\n }\n\n .blog-container .random-article-excerpt {\n font-size: 0.8rem !important;\n margin-bottom: 5px !important;\n line-height: 1.3 !important;\n }\n\n \/* Thematic Recommendations Section *\/\n .blog-container .thematic-recommendations {\n margin: 20px auto !important;\n padding: 0 15px !important;\n }\n\n .blog-container .thematic-recommendations h2 {\n font-size: 1.4rem !important;\n margin-bottom: 20px !important;\n }\n\n .blog-container .thematic-categories-grid {\n grid-template-columns: repeat(3, 1fr) !important;\n gap: 15px !important;\n }\n\n .blog-container .category-section {\n padding: 12px !important;\n }\n\n .blog-container .category-section h3 {\n font-size: 1.1rem !important;\n margin-bottom: 12px !important;\n padding-bottom: 8px !important;\n }\n\n .blog-container .category-articles {\n gap: 10px !important;\n }\n\n .blog-container .category-article-card {\n grid-template-columns: 80px 1fr !important;\n gap: 10px !important;\n padding: 8px !important;\n }\n\n .blog-container .category-article-image {\n width: 80px !important;\n height: 60px !important;\n }\n\n .blog-container .category-article-tag {\n font-size: 0.6rem !important;\n margin-bottom: 3px !important;\n }\n\n .blog-container .category-article-title {\n font-size: 0.8rem !important;\n line-height: 1.3 !important;\n }\n }\n\n \/* Additional mobile portrait mode adjustments *\/\n @media (max-width: 768px) {\n .blog-container .random-articles-grid {\n grid-template-columns: 1fr !important;\n gap: 20px !important;\n }\n\n .blog-container .random-article-image {\n height: 200px !important;\n }\n\n .blog-container .thematic-categories-grid {\n grid-template-columns: 1fr !important;\n gap: 20px !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"blog-container\">\n <div class=\"blog-grid\">\n <main class=\"main-content\">\n <div class=\"featured-article\">\n <!-- Featured article will be inserted here -->\n <\/div>\n <div class=\"search-filter-container\">\n <div class=\"search-bar\">\n <input type=\"text\" id=\"searchInput\" class=\"search-input\" placeholder=\"Rechercher un article...\">\n <\/div>\n <div class=\"category-filter\">\n <select id=\"categoryFilter\" class=\"category-select\">\n <option value=\"\">Toutes les cat\u00e9gories<\/option>\n <!-- Categories will be populated dynamically -->\n <\/select>\n <\/div>\n <div class=\"sort-filter\">\n <select id=\"sortFilter\" class=\"sort-select\">\n <option value=\"newest\">Plus r\u00e9cents<\/option>\n <option value=\"oldest\">Plus anciens<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"articles-grid\">\n <!-- Articles will be inserted here -->\n <\/div>\n <div class=\"pagination\">\n <!-- Pagination will be inserted here -->\n <\/div>\n <\/main>\n <aside class=\"sidebar\">\n <h2>Les plus lus<\/h2>\n <ul class=\"most-read\">\n <!-- Most read articles will be inserted here -->\n <\/ul>\n \n <h2 class=\"mt-8\">Ressources \u00e9tudiantes<\/h2>\n <div class=\"resource-cards\">\n <a href=\"https:\/\/apprentissage.com\/ressources-etudiantes\/orientation-choix-formation\" class=\"resource-card\">\n <span class=\"resource-icon\">\ud83c\udfaf<\/span>\n <span class=\"resource-title\">Orientation & Choix de Formation<\/span>\n <\/a>\n <a href=\"https:\/\/apprentissage.com\/ressources-etudiantes\/vie-etudiante-alternance\" class=\"resource-card\">\n <span class=\"resource-icon\">\ud83d\udcda<\/span>\n <span class=\"resource-title\">Vie \u00c9tudiante & Alternance<\/span>\n <\/a>\n <a href=\"https:\/\/apprentissage.com\/ressources-etudiantes\/trouver-entreprise-candidature\" class=\"resource-card\">\n <span class=\"resource-icon\">\ud83c\udfe2<\/span>\n <span class=\"resource-title\">Trouver une Entreprise & Candidature<\/span>\n <\/a>\n <a href=\"https:\/\/apprentissage.com\/ressources-etudiantes\/aides-financement\" class=\"resource-card\">\n <span class=\"resource-icon\">\ud83d\udcb0<\/span>\n <span class=\"resource-title\">Aides & Financement<\/span>\n <\/a>\n <a href=\"https:\/\/apprentissage.com\/ressources-etudiantes\/debouches-carriere\" class=\"resource-card\">\n <span class=\"resource-icon\">\ud83d\ude80<\/span>\n <span class=\"resource-title\">D\u00e9bouch\u00e9s & Carri\u00e8re<\/span>\n <\/a>\n <a href=\"https:\/\/apprentissage.com\/ressources-etudiantes\/temoignages-success-stories\" class=\"resource-card\">\n <span class=\"resource-icon\">\ud83c\udf1f<\/span>\n <span class=\"resource-title\">T\u00e9moignages & Success Stories<\/span>\n <\/a>\n <\/div>\n \n <!-- Newsletter Section -->\n <div class=\"newsletter-section mt-8\">\n <h2>Restez inform\u00e9 !<\/h2>\n <p>Recevez nos meilleures offres d'alternance et nos conseils personnalis\u00e9s.<\/p>\n \n <form id=\"apprentissage-newsletterForm\" class=\"newsletter-form\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"apprentissage-nom\" name=\"nom\" placeholder=\"Votre nom\" required class=\"form-input\">\n <\/div>\n <div class=\"form-group\">\n <input type=\"text\" id=\"apprentissage-prenom\" name=\"prenom\" placeholder=\"Votre pr\u00e9nom\" required class=\"form-input\">\n <\/div>\n <div class=\"form-group\">\n <input type=\"email\" id=\"apprentissage-email\" name=\"email\" placeholder=\"Votre email\" required class=\"form-input\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" required>\n <span class=\"checkmark\"><\/span>\n J'accepte de recevoir la newsletter et reconnais avoir pris connaissance de la <a href=\"\/politique-confidentialite\" style=\"color: #44a6d9; text-decoration: underline;\">politique de confidentialit\u00e9<\/a>\n <\/label>\n <\/div>\n <button type=\"submit\" class=\"submit-btn newsletter-submit\">S'inscrire \u00e0 la newsletter<\/button>\n <\/form>\n <\/div>\n <\/aside>\n <\/div>\n <div class=\"random-recommendations\">\n <h2>Voici des ressources \u00e9tudiantes qui pourraient vous int\u00e9resser<\/h2>\n <div class=\"random-articles-grid\">\n <!-- Articles will be inserted here dynamically -->\n <\/div>\n <\/div>\n <div class=\"thematic-recommendations\">\n <h2>D'autres articles par th\u00e9matiques<\/h2>\n <div class=\"thematic-categories-grid\">\n <!-- Category grids will be inserted here dynamically -->\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Utilisation du chemin relatif pour l'API WordPress\n const WORDPRESS_API_URL = window.location.origin + '\/ressources-etudiantes';\n const ARTICLES_PER_PAGE = 9;\n let currentPage = 1;\n let totalArticles = 0;\n let allArticles = [];\n let filteredArticles = [];\n let categories = new Set();\n\n async function fetchArticles() {\n try {\n \/\/ Fetch all posts first to get total count\n const response = await fetch(`${WORDPRESS_API_URL}\/wp-json\/wp\/v2\/posts?_embed&per_page=100`);\n allArticles = await response.json();\n totalArticles = allArticles.length;\n filteredArticles = [...allArticles];\n\n \/\/ Extract and populate categories\n allArticles.forEach(article => {\n const category = article._embedded?.['wp:term']?.[0]?.[0]?.name;\n if (category) categories.add(category);\n });\n populateCategories();\n\n \/\/ Display featured article (latest post)\n displayFeaturedArticle(allArticles[0]);\n\n \/\/ Display first page of regular articles\n displayRegularArticles(allArticles.slice(1), 1);\n\n \/\/ Setup pagination\n setupPagination();\n\n \/\/ Fetch and display most read articles\n await fetchMostReadArticles();\n\n \/\/ Setup search and filter handlers\n setupSearchAndFilter();\n\n \/\/ Display random articles\n await displayRandomArticles();\n } catch (error) {\n console.error('Error fetching articles:', error);\n }\n }\n\n function populateCategories() {\n const categorySelect = document.getElementById('categoryFilter');\n categories.forEach(category => {\n const option = document.createElement('option');\n option.value = category;\n option.textContent = category;\n categorySelect.appendChild(option);\n });\n }\n\n function displayFeaturedArticle(article) {\n const featuredSection = document.querySelector('.featured-article');\n const imageUrl = article._embedded?.['wp:featuredmedia']?.[0]?.source_url || '\/api\/placeholder\/800\/400';\n \n featuredSection.innerHTML = `\n <a href=\"${article.link}\" style=\"display: block; text-decoration: none;\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${article.title.rendered}\">\n <div class=\"article-content\" style=\"color: white !important;\">\n <span class=\"category-tag\" style=\"color: white !important;\">${article._embedded?.['wp:term']?.[0]?.[0]?.name || 'Category'}<\/span>\n <h1 style=\"color: white !important;\">${article.title.rendered}<\/h1>\n <\/div>\n <\/a>\n `;\n }\n\n function displayRegularArticles(articles, page) {\n const startIndex = (page - 1) * ARTICLES_PER_PAGE;\n const endIndex = startIndex + ARTICLES_PER_PAGE;\n const articlesToShow = articles.slice(startIndex, endIndex);\n\n const articlesGrid = document.querySelector('.articles-grid');\n if (articlesToShow.length === 0) {\n articlesGrid.innerHTML = '<div class=\"no-results\">Aucun article trouv\u00e9<\/div>';\n return;\n }\n\n articlesGrid.innerHTML = articlesToShow.map(article => `\n <a href=\"${article.link}\" style=\"text-decoration: none; color: inherit;\">\n <article class=\"article-card\">\n <img decoding=\"async\" src=\"${article._embedded?.['wp:featuredmedia']?.[0]?.source_url || '\/api\/placeholder\/400\/200'}\" alt=\"${article.title.rendered}\">\n <div class=\"card-content\">\n <span class=\"category-tag\">${article._embedded?.['wp:term']?.[0]?.[0]?.name || 'Category'}<\/span>\n <h3>${article.title.rendered}<\/h3>\n <\/div>\n <\/article>\n <\/a>\n `).join('');\n }\n\n async function fetchMostReadArticles() {\n try {\n const response = await fetch(`${WORDPRESS_API_URL}\/wp-json\/wp\/v2\/posts?per_page=5`);\n const articles = await response.json();\n \n const mostReadList = document.querySelector('.most-read');\n mostReadList.innerHTML = articles.map((article, index) => `\n <li class=\"most-read-item\">\n <a href=\"${article.link}\">\n <div class=\"number-badge\">${index + 1}<\/div>\n <h3>${article.title.rendered}<\/h3>\n <\/a>\n <\/li>\n `).join('');\n } catch (error) {\n console.error('Error fetching most read articles:', error);\n }\n }\n\n function setupPagination() {\n const totalPages = Math.ceil(filteredArticles.length \/ ARTICLES_PER_PAGE);\n const paginationContainer = document.querySelector('.pagination');\n \n if (totalPages <= 1) {\n paginationContainer.innerHTML = '';\n return;\n }\n\n function generatePaginationHTML(currentPage, totalPages) {\n let buttons = [];\n \n \/\/ Previous button\n buttons.push(`<button class=\"pagination-button\" ${currentPage === 1 ? 'disabled' : ''} onclick=\"changePage(${currentPage - 1})\">\u2190<\/button>`);\n \n \/\/ First page\n buttons.push(`<button class=\"pagination-button ${currentPage === 1 ? 'active' : ''}\" onclick=\"changePage(1)\">1<\/button>`);\n \n \/\/ Dots after first page\n if (currentPage > 3) {\n buttons.push(`<span class=\"pagination-dots\">...<\/span>`);\n }\n \n \/\/ Pages around current page\n for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {\n buttons.push(`<button class=\"pagination-button ${currentPage === i ? 'active' : ''}\" onclick=\"changePage(${i})\">${i}<\/button>`);\n }\n \n \/\/ Dots before last page\n if (currentPage < totalPages - 2) {\n buttons.push(`<span class=\"pagination-dots\">...<\/span>`);\n }\n \n \/\/ Last page\n if (totalPages > 1) {\n buttons.push(`<button class=\"pagination-button ${currentPage === totalPages ? 'active' : ''}\" onclick=\"changePage(${totalPages})\">${totalPages}<\/button>`);\n }\n \n \/\/ Next button\n buttons.push(`<button class=\"pagination-button\" ${currentPage === totalPages ? 'disabled' : ''} onclick=\"changePage(${currentPage + 1})\">\u2192<\/button>`);\n \n return buttons.join('');\n }\n \n paginationContainer.innerHTML = generatePaginationHTML(currentPage, totalPages);\n }\n\n function changePage(page) {\n if (page < 1 || page > Math.ceil(filteredArticles.length \/ ARTICLES_PER_PAGE)) return;\n \n currentPage = page;\n displayRegularArticles(filteredArticles, currentPage);\n setupPagination();\n \n \/\/ Scroll to top of articles grid smoothly\n document.querySelector('.articles-grid').scrollIntoView({ behavior: 'smooth' });\n }\n\n function setupSearchAndFilter() {\n const searchInput = document.getElementById('searchInput');\n const categoryFilter = document.getElementById('categoryFilter');\n const sortFilter = document.getElementById('sortFilter');\n\n function filterAndSortArticles() {\n const searchTerm = searchInput.value.toLowerCase();\n const selectedCategory = categoryFilter.value;\n const sortOrder = sortFilter.value;\n\n \/\/ Filter articles\n filteredArticles = allArticles.slice(1).filter(article => {\n const matchesSearch = article.title.rendered.toLowerCase().includes(searchTerm);\n const matchesCategory = !selectedCategory || \n article._embedded?.['wp:term']?.[0]?.[0]?.name === selectedCategory;\n return matchesSearch && matchesCategory;\n });\n\n \/\/ Sort articles\n filteredArticles.sort((a, b) => {\n const dateA = new Date(a.date);\n const dateB = new Date(b.date);\n return sortOrder === 'newest' ? dateB - dateA : dateA - dateB;\n });\n\n currentPage = 1;\n displayRegularArticles(filteredArticles, currentPage);\n setupPagination();\n }\n\n searchInput.addEventListener('input', filterAndSortArticles);\n categoryFilter.addEventListener('change', filterAndSortArticles);\n sortFilter.addEventListener('change', filterAndSortArticles);\n }\n\n async function addContactToBrevo(formData) {\n try {\n const response = await fetch('https:\/\/api.sendinblue.com\/v3\/contacts', {\n method: 'POST',\n headers: {\n 'Accept': 'application\/json',\n 'Content-Type': 'application\/json',\n 'api-key': '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'\n },\n body: JSON.stringify({\n email: formData.email,\n attributes: {\n PRENOM: formData.prenom,\n NOM: formData.nom\n },\n listIds: [34],\n updateEnabled: true\n })\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const text = await response.text();\n return text ? JSON.parse(text) : {};\n } catch (error) {\n console.error('Error:', error);\n throw error;\n }\n }\n\n async function sendWelcomeEmail(formData) {\n const emailTemplate = `\n <html>\n <body style=\"font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f5f5f5;\">\n <div style=\"max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);\">\n <!-- Header avec logo 60% plus grand -->\n <div style=\"background-color: #0071e1; padding: 40px 20px; text-align: center;\">\n <img decoding=\"async\" src=\"https:\/\/pacific-webtools.com\/wp-content\/uploads\/2025\/01\/logoapprentissage.webp\" alt=\"Apprentissage.com\" style=\"max-height: 128px; width: auto;\">\n <\/div>\n\n <!-- Content avec design am\u00e9lior\u00e9 -->\n <div style=\"padding: 40px 30px;\">\n <h2 style=\"color: #0071e1;\">Bienvenue dans la communaut\u00e9 Apprentissage.com !<\/h2>\n \n <div style=\"border-left: 4px solid #0071e1; padding-left: 20px; margin: 30px 0;\">\n <p style=\"font-size: 16px; color: #333; margin: 0 0 15px;\">Bonjour ${formData.prenom} ${formData.nom},<\/p>\n <p style=\"font-size: 16px; color: #333; line-height: 1.8;\">Nous sommes ravis de vous compter parmi nos abonn\u00e9s ! Vous recevrez d\u00e9sormais nos meilleures offres d'alternance et nos conseils personnalis\u00e9s pour booster votre recherche.<\/p>\n <\/div>\n \n <!-- CTA Section am\u00e9lior\u00e9e -->\n <div style=\"background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%); border-radius: 12px; padding: 35px; text-align: center; margin: 30px 0; box-shadow: 0 2px 10px rgba(0,113,225,0.1);\">\n <div style=\"background-color: white; display: inline-block; padding: 8px 20px; border-radius: 20px; margin-bottom: 15px;\">\n <h3 style=\"color: #0071e1; margin: 0; font-size: 20px;\"> D\u00e9couvrez nos derni\u00e8res offres<\/h3>\n <\/div>\n <p style=\"color: #333; margin: 0 0 25px; font-size: 16px;\">Ne manquez pas les opportunit\u00e9s qui correspondent \u00e0 votre profil !<\/p>\n <a href=\"https:\/\/apprentissage.com\/offres-apprentissage-alternance\/\" style=\"display: inline-block; background: linear-gradient(135deg, #0071e1 0%, #005bb8 100%); color: white; padding: 16px 35px; text-decoration: none; border-radius: 25px; font-weight: bold; transition: transform 0.2s; box-shadow: 0 4px 15px rgba(0,113,225,0.2);\">Voir les offres<\/a>\n <\/div>\n\n <!-- Bloc avantages -->\n <div style=\"background-color: #f8f9fa; border-radius: 8px; padding: 25px; margin: 30px 0;\">\n <h4 style=\"color: #333; margin: 0 0 15px; font-size: 18px;\">Ce qui vous attend :<\/h4>\n <ul style=\"margin: 0; padding: 0 0 0 20px; color: #555;\">\n <li style=\"margin-bottom: 10px;\">Des offres d'alternance s\u00e9lectionn\u00e9es selon vos crit\u00e8res<\/li>\n <li style=\"margin-bottom: 10px;\">Des conseils d'experts pour r\u00e9ussir vos candidatures<\/li>\n <li style=\"margin-bottom: 10px;\">Des \u00e9v\u00e9nements exclusifs avec nos entreprises partenaires<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Footer am\u00e9lior\u00e9 -->\n <div style=\"background: linear-gradient(135deg, #004c98 0%, #003a75 100%); color: white; padding: 35px; text-align: center;\">\n <p style=\"margin: 0 0 5px; font-size: 15px;\">Cordialement,<\/p>\n <p style=\"margin: 0 0 25px; font-weight: bold; font-size: 16px;\">L'\u00e9quipe Apprentissage.com<\/p>\n <div style=\"margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15);\">\n <a href=\"https:\/\/apprentissage.com\" style=\"color: white; text-decoration: none; font-size: 15px;\">www.apprentissage.com<\/a>\n <div style=\"margin-top: 15px; font-size: 13px; color: rgba(255,255,255,0.7);\">\n <a href=\"https:\/\/apprentissage.com\/mentions-legales\" style=\"color: rgba(255,255,255,0.7); text-decoration: none; margin: 0 10px;\">Mentions l\u00e9gales<\/a>\n |\n <a href=\"https:\/\/apprentissage.com\/confidentialite\" style=\"color: rgba(255,255,255,0.7); text-decoration: none; margin: 0 10px;\">Politique de confidentialit\u00e9<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/body>\n <\/html>`;\n\n const response = await fetch('https:\/\/api.sendinblue.com\/v3\/smtp\/email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'api-key': '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'\n },\n body: JSON.stringify({\n sender: {\n name: 'Apprentissage.com',\n email: 'contact@subventions.com'\n },\n to: [{\n email: formData.email,\n name: `${formData.prenom} ${formData.nom}`\n }],\n subject: 'Bienvenue dans la communaut\u00e9 Apprentissage.com !',\n htmlContent: emailTemplate\n })\n });\n\n if (!response.ok) {\n throw new Error('Erreur lors de l\\'envoi de l\\'email de bienvenue');\n }\n\n return response.json();\n }\n\n async function sendAdminNotification(formData) {\n const notificationTemplate = `\n <html>\n <body style=\"font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0;\">\n <div style=\"max-width: 600px; margin: 0 auto; padding: 20px;\">\n <h2 style=\"color: #0071e1;\">Nouvelle inscription newsletter<\/h2>\n <div style=\"background: #f5f5f5; padding: 20px; border-radius: 8px;\">\n <h3>Informations de l'inscrit :<\/h3>\n <ul style=\"list-style: none; padding: 0;\">\n <li><strong>Nom :<\/strong> ${formData.nom}<\/li>\n <li><strong>Pr\u00e9nom :<\/strong> ${formData.prenom}<\/li>\n <li><strong>Email :<\/strong> ${formData.email}<\/li>\n <li><strong>Date d'inscription :<\/strong> ${new Date().toLocaleString('fr-FR')}<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/body>\n <\/html>`;\n\n const response = await fetch('https:\/\/api.sendinblue.com\/v3\/smtp\/email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'api-key': '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'\n },\n body: JSON.stringify({\n sender: {\n name: 'Syst\u00e8me de notification',\n email: 'contact@subventions.com'\n },\n to: [{\n email: 'richard95.attal@gmail.com',\n name: 'Administrateur'\n }],\n subject: 'Nouvelle inscription newsletter',\n htmlContent: notificationTemplate\n })\n });\n\n if (!response.ok) {\n throw new Error('Erreur lors de l\\'envoi de la notification admin');\n }\n\n return response.json();\n }\n document.getElementById('apprentissage-newsletterForm').addEventListener('submit', async function(e) {\n e.preventDefault();\n\n const formData = {\n nom: document.getElementById('apprentissage-nom').value,\n prenom: document.getElementById('apprentissage-prenom').value,\n email: document.getElementById('apprentissage-email').value\n };\n\n try {\n \/\/ Afficher un message de chargement\n const submitButton = this.querySelector('button[type=\"submit\"]');\n const originalButtonText = submitButton.textContent;\n submitButton.textContent = 'Inscription en cours...';\n submitButton.disabled = true;\n\n \/\/ 1. Ajouter le contact \u00e0 la liste Brevo\n await addContactToBrevo(formData);\n\n \/\/ 2. Envoyer l'email de bienvenue\n await sendWelcomeEmail(formData);\n\n \/\/ 3. Envoyer la notification \u00e0 l'administrateur\n await sendAdminNotification(formData);\n\n \/\/ R\u00e9initialiser le formulaire et afficher un message de succ\u00e8s\n this.reset();\n alert('Inscription r\u00e9ussie ! V\u00e9rifiez votre bo\u00eete mail pour confirmer votre inscription.');\n\n } catch (error) {\n console.error('Erreur:', error);\n alert('Une erreur est survenue lors de l\\'inscription. Veuillez r\u00e9essayer.');\n\n } finally {\n \/\/ Restaurer le bouton\n submitButton.textContent = originalButtonText;\n submitButton.disabled = false;\n }\n });\n \n \/\/ New function to display random articles\n async function displayRandomArticles() {\n try {\n if (!allArticles || allArticles.length === 0) {\n console.error('No articles available');\n return;\n }\n\n \/\/ Get 6 random articles\n let randomArticles = [...allArticles]\n .sort(() => Math.random() - 0.5)\n .slice(0, 6);\n\n const randomArticlesGrid = document.querySelector('.random-articles-grid');\n if (!randomArticlesGrid) return;\n\n randomArticlesGrid.innerHTML = randomArticles.map(article => {\n const imageUrl = article._embedded?.['wp:featuredmedia']?.[0]?.source_url || '\/api\/placeholder\/400\/200';\n const category = article._embedded?.['wp:term']?.[0]?.[0]?.name || 'Cat\u00e9gorie';\n const date = new Date(article.date).toLocaleDateString('fr-FR', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n const metaDescription = article.yoast_head_json?.description || \n article.meta?.description || \n article.excerpt.rendered.replace(\/<[^>]*>\/g, '').substring(0, 100) + '...';\n\n return `\n <a href=\"${article.link}\" class=\"random-article-card\" style=\"text-decoration: none;\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${article.title.rendered}\" class=\"random-article-image\">\n <div class=\"random-article-content\">\n <div class=\"random-article-category\">${category}<\/div>\n <h3 class=\"random-article-title\">${article.title.rendered}<\/h3>\n <p class=\"random-article-excerpt\">${metaDescription}<\/p>\n <div class=\"random-article-date\">${date}<\/div>\n <\/div>\n <\/a>\n `;\n }).join('');\n\n } catch (error) {\n console.error('Error displaying random articles:', error);\n }\n }\n\n \/\/ Add new function to display thematic articles\n async function displayThematicArticles() {\n try {\n if (!allArticles || allArticles.length === 0) {\n console.error('No articles available');\n return;\n }\n\n \/\/ Get unique categories and randomize their order\n const categoriesMap = new Map();\n allArticles.forEach(article => {\n const category = article._embedded?.['wp:term']?.[0]?.[0];\n if (category) {\n if (!categoriesMap.has(category.id)) {\n categoriesMap.set(category.id, {\n name: category.name,\n articles: []\n });\n }\n categoriesMap.get(category.id).articles.push(article);\n }\n });\n\n const categoriesArray = Array.from(categoriesMap.values())\n .sort(() => Math.random() - 0.5);\n\n const thematicGrid = document.querySelector('.thematic-categories-grid');\n if (!thematicGrid) return;\n\n thematicGrid.innerHTML = categoriesArray.map(category => {\n \/\/ Get 3 random articles from this category\n const randomArticles = category.articles\n .sort(() => Math.random() - 0.5)\n .slice(0, 3);\n\n return `\n <div class=\"category-section\">\n <h3>${category.name}<\/h3>\n <div class=\"category-articles\">\n ${randomArticles.map(article => {\n const imageUrl = article._embedded?.['wp:featuredmedia']?.[0]?.source_url || '\/api\/placeholder\/200\/150';\n return `\n <a href=\"${article.link}\" class=\"category-article-card\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${article.title.rendered}\" class=\"category-article-image\">\n <div class=\"category-article-content\">\n <span class=\"category-article-tag\">${category.name}<\/span>\n <h4 class=\"category-article-title\">${article.title.rendered}<\/h4>\n <\/div>\n <\/a>\n `;\n }).join('')}\n <\/div>\n <\/div>\n `;\n }).join('');\n\n } catch (error) {\n console.error('Error displaying thematic articles:', error);\n }\n }\n\n \/\/ Update the initialization to include the new thematic articles\n document.addEventListener('DOMContentLoaded', async () => {\n await fetchArticles();\n displayThematicArticles();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\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>Blog Homepage Toutes les cat\u00e9gories Plus r\u00e9centsPlus anciens Les plus lus Ressources \u00e9tudiantes \ud83c\udfaf Orientation & Choix de Formation \ud83d\udcda Vie \u00c9tudiante & Alternance \ud83c\udfe2 Trouver une Entreprise & Candidature \ud83d\udcb0 Aides & Financement \ud83d\ude80 D\u00e9bouch\u00e9s & Carri\u00e8re \ud83c\udf1f T\u00e9moignages & Success Stories Restez inform\u00e9 ! Recevez nos meilleures offres d’alternance et nos conseils personnalis\u00e9s. […]<\/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":""},"class_list":["post-79","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>accueil - Apprentissage.com - Ressources \u00e9tudiantes<\/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:\/\/apprentissage.com\/ressources-etudiantes\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"accueil - Apprentissage.com - Ressources \u00e9tudiantes\" \/>\n<meta property=\"og:description\" content=\"Blog Homepage Toutes les cat\u00e9gories Plus r\u00e9centsPlus anciens Les plus lus Ressources \u00e9tudiantes \ud83c\udfaf Orientation & Choix de Formation \ud83d\udcda Vie \u00c9tudiante & Alternance \ud83c\udfe2 Trouver une Entreprise & Candidature \ud83d\udcb0 Aides & Financement \ud83d\ude80 D\u00e9bouch\u00e9s & Carri\u00e8re \ud83c\udf1f T\u00e9moignages & Success Stories Restez inform\u00e9 ! Recevez nos meilleures offres d’alternance et nos conseils personnalis\u00e9s. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/apprentissage.com\/ressources-etudiantes\/\" \/>\n<meta property=\"og:site_name\" content=\"Apprentissage.com - Ressources \u00e9tudiantes\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-06T13:33:57+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/\",\"url\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/\",\"name\":\"accueil - Apprentissage.com - Ressources \u00e9tudiantes\",\"isPartOf\":{\"@id\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/#website\"},\"datePublished\":\"2025-03-04T08:34:56+00:00\",\"dateModified\":\"2025-03-06T13:33:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/apprentissage.com\/ressources-etudiantes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"accueil\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/#website\",\"url\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/\",\"name\":\"Apprentissage.com - Ressources \u00e9tudiantes\",\"description\":\"Tous les conseils pour rentrer correctement dans le monde professionnel\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/apprentissage.com\/ressources-etudiantes\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"accueil - Apprentissage.com - Ressources \u00e9tudiantes","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:\/\/apprentissage.com\/ressources-etudiantes\/","og_locale":"fr_FR","og_type":"article","og_title":"accueil - Apprentissage.com - Ressources \u00e9tudiantes","og_description":"Blog Homepage Toutes les cat\u00e9gories Plus r\u00e9centsPlus anciens Les plus lus Ressources \u00e9tudiantes \ud83c\udfaf Orientation & Choix de Formation \ud83d\udcda Vie \u00c9tudiante & Alternance \ud83c\udfe2 Trouver une Entreprise & Candidature \ud83d\udcb0 Aides & Financement \ud83d\ude80 D\u00e9bouch\u00e9s & Carri\u00e8re \ud83c\udf1f T\u00e9moignages & Success Stories Restez inform\u00e9 ! Recevez nos meilleures offres d’alternance et nos conseils personnalis\u00e9s. […]","og_url":"https:\/\/apprentissage.com\/ressources-etudiantes\/","og_site_name":"Apprentissage.com - Ressources \u00e9tudiantes","article_modified_time":"2025-03-06T13:33:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/apprentissage.com\/ressources-etudiantes\/","url":"https:\/\/apprentissage.com\/ressources-etudiantes\/","name":"accueil - Apprentissage.com - Ressources \u00e9tudiantes","isPartOf":{"@id":"https:\/\/apprentissage.com\/ressources-etudiantes\/#website"},"datePublished":"2025-03-04T08:34:56+00:00","dateModified":"2025-03-06T13:33:57+00:00","breadcrumb":{"@id":"https:\/\/apprentissage.com\/ressources-etudiantes\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/apprentissage.com\/ressources-etudiantes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/apprentissage.com\/ressources-etudiantes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/apprentissage.com\/ressources-etudiantes\/"},{"@type":"ListItem","position":2,"name":"accueil"}]},{"@type":"WebSite","@id":"https:\/\/apprentissage.com\/ressources-etudiantes\/#website","url":"https:\/\/apprentissage.com\/ressources-etudiantes\/","name":"Apprentissage.com - Ressources \u00e9tudiantes","description":"Tous les conseils pour rentrer correctement dans le monde professionnel","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/apprentissage.com\/ressources-etudiantes\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/pages\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":78,"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/pages\/79\/revisions"}],"predecessor-version":[{"id":362,"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/pages\/79\/revisions\/362"}],"wp:attachment":[{"href":"https:\/\/apprentissage.com\/ressources-etudiantes\/wp-json\/wp\/v2\/media?parent=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}