{"id":49,"date":"2026-06-30T06:42:01","date_gmt":"2026-06-30T06:42:01","guid":{"rendered":"https:\/\/madeleinebastide.com\/?page_id=49"},"modified":"2026-07-01T06:51:29","modified_gmt":"2026-07-01T06:51:29","slug":"mon-travail","status":"publish","type":"page","link":"https:\/\/madeleinebastide.com\/index.php\/mon-travail\/","title":{"rendered":"Mon travail"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Header - Madeleine Bastide<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Geist+Mono:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* ==========================================================================\n 0. VARIABLES GLOBALES\n ========================================================================== *\/\n :root {\n --bg-color: #fffdfa;\n --text-color: #43302E;\n --btn-color: #FFF1B5;\n --light-blue: #c1dbe8;\n --tag-border: rgba(81, 50, 41, 0.3);\n\n --font-heading: 'Playfair Display', serif;\n --font-body: 'Geist Mono', monospace;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n -webkit-font-smoothing: antialiased;\n }\n\n \/* ==========================================================================\n 1. BARRE DE NAVIGATION (HEADER STICKY)\n ========================================================================== *\/\n header {\n position: sticky;\n top: 0;\n background-color: var(--bg-color);\n z-index: 100;\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 0.5px solid var(--tag-border);\n }\n\n \/* --- LOGO SVG & ANIMATION HOVER --- *\/\n .logo {\n position: relative;\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n min-height: 35px;\n min-width: 35px; \/* Maintient l'espace quand le SVG disparait *\/\n }\n\n .logo svg {\n width: 35px;\n height: 35px;\n fill: var(--text-color); \/* Utilise la couleur du texte globale *\/\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;\n opacity: 1;\n }\n\n .logo .logo-text {\n font-family: var(--font-heading);\n font-size: 20px;\n font-weight: 500;\n color: var(--text-color);\n letter-spacing: 0.1px;\n position: absolute;\n left: 0;\n white-space: nowrap;\n opacity: 0;\n transform: translateX(-30px);\n transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n pointer-events: none; \/* Emp\u00eache le texte de bloquer le survol *\/\n }\n\n .logo:hover svg {\n transform: rotate(90deg) scale(0);\n opacity: 0;\n }\n\n .logo:hover .logo-text {\n opacity: 1;\n transform: translateX(0);\n }\n\n \/* --- LIENS DE NAVIGATION --- *\/\n nav {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .nav-links {\n display: flex;\n gap: 50px;\n font-family: var(--font-body);\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.8px;\n text-transform: uppercase;\n word-spacing: 1px;\n }\n\n .nav-links a {\n text-decoration: none;\n color: var(--text-color);\n position: relative;\n padding-bottom: 4px;\n transition: color 0.3s ease;\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0%;\n height: 1px;\n background-color: var(--text-color);\n transition: width 0.3s ease;\n }\n\n .nav-links a::before {\n content: '\u2193';\n position: absolute;\n left: -17px;\n top: 2px;\n font-size: 0.8rem;\n opacity: 0;\n transform: translateY(-5px);\n transition: all 0.3s ease;\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .nav-links a:hover::before {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* --- R\u00c9SEAUX SOCIAUX & BOUTON --- *\/\n .social-icons {\n display: flex;\n gap: 15px;\n align-items: center;\n margin-left: 10px;\n margin-right: 10px;\n }\n\n .social-icons svg {\n width: 18px;\n height: 18px;\n fill: var(--text-color);\n transition: opacity 0.2s ease;\n }\n\n .social-icons a:hover svg {\n opacity: 0.6;\n }\n\n .btn-primary {\n background-color: var(--light-blue);\n color: var(--text-color);\n text-decoration: none;\n padding: 10px 25px;\n border-radius: 50px;\n font-family: var(--font-body);\n font-size: 14px;\n text-transform: uppercase;\n font-weight: 500;\n transition: transform 0.5s ease;\n }\n\n .btn-primary:hover {\n transform: scale(1.05);\n }\n\n \/* --- RESPONSIVE --- *\/\n @media (max-width: 1024px) {\n header {\n flex-direction: column;\n gap: 20px;\n position: relative;\n padding: 20px;\n }\n nav {\n flex-wrap: wrap;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <a href=\"https:\/\/madeleinebastide.com\/index.php\/homepage\/\" class=\"logo\" aria-label=\"Madeleine Bastide \u2014 Accueil\">\n <svg id=\"Calque_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 979.9 986.1\">\n <path d=\"M256.9,440.2c34.4-3.8,73.8-10.8,108.7-12.4-1.6-8.1-30.1-40.4-35.5-47.2-44.2-61-84.6-120.2-128-180.8-12.4-19.6-35.3-49.1-45.3-70.1,95.1,72.5,192.3,160.1,283.8,237.7,2.5-47.8,10.9-113.6,18.9-160.9,2.2-2.3,2.8-1.3.8-3.8,7.3-43,15.8-159.4,25.5-202.5,10,69.9,20.1,153.1,28.4,223.4l-3.9,5,4-2.8c3,37.9,14.2,98.6,16.3,136.8,58.8-48.3,125.2-105.4,184.8-152.9,24.7-20.1,49.3-41.6,74-61.6,5.7-3.7,17.6-16.9,25.5-16.5-64.8,95.4-139.5,206.2-207.5,298.7,33.4.9,87,7.2,120.3,12.2,80.3,7.2,171.9,24,251.9,34.5,0,2.5,1.2,3.5-2.5,2.6-38.7,5.2-95.7,12.7-134,18.3-76.5,8.9-163.5,23.2-240.7,28.2,41.8,53.1,89.2,116.6,126.6,172.8,32,42.7,62,85,90.1,131.8-23.6-18.2-63.7-48.1-85.3-68.1-66.6-46.4-137.7-111.7-200.4-163.2-17.1,124.1-30.7,262.6-47.5,387.1-20.4-126.4-30.8-259.6-45.9-386.6-94.5,76-188.5,152.5-284.7,227.3,3.7-10.5,20.5-31,26.9-40.6,18.1-26.1,44.2-63.5,62.9-89.3,38.1-52.3,81.2-117.9,118.6-170.9-55.9-1.3-121.9-15.3-177.4-21.4-43.3-5.6-139.7-18.3-181.7-24.6,0,0-4.6-3.5-4.6-3.5,30-6.7,114.9-15.9,144.7-21.6,41.1-7.2,63-9.5,112.2-14.8Z\"\/>\n <\/svg>\n <span class=\"logo-text\">Madeleine Bastide<\/span>\n <\/a>\n\n <nav>\n <div class=\"nav-links\">\n <a href=\"https:\/\/madeleinebastide.com\/index.php\/a-propos\/\">\u00c0 propos<\/a>\n <a href=\"https:\/\/madeleinebastide.com\/index.php\/mon-travail\/\">Mon travail<\/a>\n <a href=\"#\">Mes projets perso<\/a>\n <\/div>\n <div class=\"social-icons\">\n <a href=\"#\" aria-label=\"X (Twitter)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" \/>\n <\/svg>\n <\/a>\n <a href=\"#\" aria-label=\"LinkedIn\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" \/>\n <\/svg>\n <\/a>\n <\/div>\n <a href=\"#\" class=\"btn-primary\">travaillons ensemble<\/a>\n <\/nav>\n <\/header>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2689316 e-con-full e-flex e-con e-parent\" data-id=\"2689316\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cce3fe9 elementor-widget elementor-widget-html\" data-id=\"cce3fe9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Header Title - Madeleine Bastide<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root {\n --bg-color: #fffdfa;\n --text-color: #43302E;\n --tag-border: rgba(81, 50, 41, 0.15);\n --font-heading: 'Playfair Display', serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n }\n\n \/* --- Animations --- *\/\n @keyframes drawSeparator {\n from { width: 0; }\n to { width: 100%; } \/* L'animation s'arr\u00eate \u00e0 100% du conteneur *\/\n }\n\n @keyframes editorialReveal {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* --- Style Esperluette \u00c9pur\u00e9e --- *\/\n .amp {\n font-family: Georgia, 'Times New Roman', serif;\n font-style: italic;\n font-weight: 400;\n }\n\n \/* --- Zone du Titre (M\u00eames contraintes que la grille) --- *\/\n .vpv-header {\n margin: 0 auto;\n padding: 60px 40px 0 40px; \/* M\u00eame marges internes gauche\/droite *\/\n animation: editorialReveal 1s ease forwards;\n }\n\n .vpv-header h1 {\n font-family: var(--font-heading);\n font-size: 70px;\n font-weight: 400;\n line-height: 1.05;\n letter-spacing: -0.02em;\n margin-bottom: 20px; \/* Espace r\u00e9duit entre le texte et la ligne *\/\n }\n\n \/* --- S\u00e9parateur Align\u00e9 sur la Grille --- *\/\n .separator {\n border: none;\n border-top: 0.5px solid var(--tag-border);\n width: 0;\n display: block;\n margin-top: 40px!important;\n animation: drawSeparator 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n\n \/* --- Ajustements Tablettes & Mobiles --- *\/\n @media (max-width: 1024px) {\n .vpv-header h1 { font-size: 4rem; }\n }\n\n @media (max-width: 768px) {\n .vpv-header { padding: 40px 20px 0 20px; } \/* Adaptation des marges sur mobile *\/\n .vpv-header h1 { font-size: 3rem; margin-bottom: 15px; }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"vpv-header\">\n <h1>S\u00e9lection de projets <span class=\"amp\">&<\/span> <br>\u00e9tudes de cas<\/h1>\n <hr class=\"separator\">\n <\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f2544be e-con-full e-flex e-con e-child\" data-id=\"f2544be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f98493 elementor-widget__width-auto btn-filtre filtre-all elementor-widget elementor-widget-button\" data-id=\"9f98493\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Tous les projets<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdeb7ad elementor-widget__width-auto btn-filtre filtre-branding elementor-widget elementor-widget-button\" data-id=\"fdeb7ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Branding<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42f6f63 elementor-widget__width-auto btn-filtre filtre-uiux elementor-widget elementor-widget-button\" data-id=\"42f6f63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">UI\/UX Design<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4dac0a1 elementor-widget__width-auto btn-filtre filtre-ia elementor-widget elementor-widget-button\" data-id=\"4dac0a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Outils IA<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b31e24a e-con-full e-flex e-con e-parent\" data-id=\"b31e24a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56f4795 elementor-widget elementor-widget-html\" data-id=\"56f4795\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"dynamic-vpv-grid\" class=\"vpv-grid\">\n <div class=\"portfolio-loading\">Chargement des projets...<\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n const gridContainer = document.getElementById('dynamic-vpv-grid');\n\n const siteUrl = window.location.origin;\n const primaryApiUrl = siteUrl + '\/wp-json\/wp\/v2\/posts?_embed&per_page=20';\n const fallbackApiUrl = siteUrl + '\/index.php?rest_route=\/wp\/v2\/posts&_embed&per_page=20';\n\n \/\/ 1. R\u00e9cup\u00e9ration des articles WordPress\n fetch(primaryApiUrl)\n .then(response => {\n if (!response.ok) throw new Error('R\u00e9ponse r\u00e9seau incorrecte');\n return response.json();\n })\n .then(posts => {\n renderGrid(posts);\n connectElementorFilters(); \/\/ Une fois la grille pr\u00eate, on la connecte aux filtres du dessus\n })\n .catch(error => {\n console.warn('\u00c9chec du chargement de l\\'API principale, tentative secours...', error);\n fetch(fallbackApiUrl)\n .then(res => res.json())\n .then(posts => {\n renderGrid(posts);\n connectElementorFilters();\n })\n .catch(() => {\n gridContainer.innerHTML = '<div class=\"portfolio-loading\">Erreur lors du chargement des projets.<\/div>';\n });\n });\n\n \/\/ 2. G\u00e9n\u00e9ration du HTML de la grille\n function renderGrid(posts) {\n if(!posts || posts.length === 0) {\n gridContainer.innerHTML = '<div class=\"portfolio-loading\">Aucun projet trouv\u00e9.<\/div>';\n return;\n }\n\n gridContainer.innerHTML = '';\n \n posts.forEach((post, index) => {\n let imageUrl = 'https:\/\/images.unsplash.com\/photo-1540555700478-4be289fbecef?q=80&w=2670&auto=format&fit=crop';\n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n }\n\n const projectNum = String(index + 1).padStart(2, '0') + '\/' + String(posts.length).padStart(2, '0');\n \n let postCategories = [];\n if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0]) {\n postCategories = post._embedded['wp:term'][0].map(term => term.slug);\n }\n\n \/\/ R\u00e9cup\u00e9ration des Pills ACF\n let tagsHtml = '';\n let p1 = '', p2 = '', p3 = '';\n if (post.acf) {\n if (post.acf.pills && typeof post.acf.pills === 'object') {\n p1 = post.acf.pills.pills_1 || post.acf.pills['pills-1'] || '';\n p2 = post.acf.pills.pills_2 || post.acf.pills['pills-2'] || '';\n p3 = post.acf.pills.pills_3 || post.acf.pills['pills-3'] || '';\n } else {\n p1 = post.acf.pills_1 || post.acf['pills-1'] || '';\n p2 = post.acf.pills_2 || post.acf['pills-2'] || '';\n p3 = post.acf.pills_3 || post.acf['pills-3'] || '';\n }\n }\n if (p1) tagsHtml += `<span class=\"vpv-tag-bubble\">${p1}<\/span>`;\n if (p2) tagsHtml += `<span class=\"vpv-tag-bubble\">${p2}<\/span>`;\n if (p3) tagsHtml += `<span class=\"vpv-tag-bubble\">${p3}<\/span>`;\n if (tagsHtml !== '') tagsHtml = `<div class=\"vpv-tags-container\">${tagsHtml}<\/div>`;\n\n const cardLink = document.createElement('a');\n cardLink.href = post.link;\n cardLink.className = 'vpv-project-card';\n cardLink.setAttribute('data-categories', postCategories.join(' ')); \n\n cardLink.innerHTML = `\n <div class=\"vpv-meta-header\">\n <div class=\"vpv-project-title\">${post.title.rendered}<\/div>\n <div class=\"vpv-project-num\">${projectNum}<\/div>\n <\/div>\n <div class=\"vpv-image-wrap\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${post.title.rendered}\">\n ${tagsHtml}\n <\/div>\n `;\n gridContainer.appendChild(cardLink);\n });\n }\n\n \/\/ 3. Connexion logique avec tes boutons Elementor\n function connectElementorFilters() {\n const boutons = document.querySelectorAll('.btn-filtre');\n const projets = document.querySelectorAll('.vpv-project-card');\n\n boutons.forEach(bouton => {\n bouton.addEventListener('click', (e) => {\n e.preventDefault();\n\n \/\/ Style actif\/inactif sur tes boutons Elementor\n boutons.forEach(b => {\n b.classList.remove('active');\n b.style.opacity = '0.6';\n });\n bouton.classList.add('active');\n bouton.style.opacity = '1';\n\n \/\/ D\u00e9tection de la cat\u00e9gorie li\u00e9e au bouton cliqu\u00e9\n let categorie = '';\n if(bouton.classList.contains('filtre-branding')) categorie = 'branding';\n if(bouton.classList.contains('filtre-uiux')) categorie = 'uiux';\n if(bouton.classList.contains('filtre-ia')) categorie = 'ia';\n\n \/\/ Filtrage de la grille HTML\n projets.forEach(projet => {\n const postCategories = projet.getAttribute('data-categories').split(' ');\n \n if(categorie === '' || postCategories.includes(categorie)) {\n projet.style.setProperty('display', 'flex', 'important');\n } else {\n projet.style.setProperty('display', 'none', 'important');\n }\n });\n });\n });\n\n \/\/ Activer le premier bouton par d\u00e9faut au chargement de la page\n const premierBouton = document.querySelector('.filtre-all');\n if(premierBouton) {\n premierBouton.classList.add('active');\n premierBouton.style.opacity = '1';\n }\n }\n});\n<\/script>\n\n<style>\n\/* ==========================================================================\n STYLE DE LA GRILLE (S'ALIGNE SUR TON RESTE EN PAD-LEFT\/RIGHT)\n ========================================================================== *\/\n.vpv-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr); \n gap: 60px 30px;\n width: 100%;\n margin-top: 40px;\n margin-bottom: 80px;\n padding-left: 0px !important;\n padding-right: 0px !important;\n box-sizing: border-box !important;\n}\n\n.vpv-project-card {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: #43302E;\n gap: 15px; \n transition: opacity 0.4s ease;\n}\n\n.vpv-meta-header {\n display: flex;\n justify-content: space-between; \n align-items: baseline;\n}\n\n.vpv-project-title {\n font-family: 'Playfair Display', serif;\n font-size: 20px;\n font-weight: 400;\n text-transform: uppercase;\n color: #43302E;\n}\n\n.vpv-project-num {\n font-family: 'Geist Mono', monospace;\n font-size: 15px;\n opacity: 0.5;\n}\n\n.vpv-image-wrap {\n width: 100%;\n aspect-ratio: 3 \/ 4; \n overflow: hidden;\n background-color: rgba(67, 48, 46, 0.03);\n position: relative; \n}\n\n.vpv-image-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.vpv-project-card:hover .vpv-image-wrap img {\n transform: scale(1.04);\n}\n\n\/* Pills ACF Style *\/\n.vpv-tags-container {\n position: absolute;\n bottom: 16px;\n left: 15px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n z-index: 2;\n}\n\n.vpv-tag-bubble {\n font-family: 'Geist Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.5px;\n color: #43302E;\n padding: 5px 12px;\n border-radius: 50px;\n text-transform: uppercase;\n background-color: rgba(255, 253, 250, 0.4); \n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition: all 0.3s ease;\n}\n\n.vpv-project-card:hover .vpv-tag-bubble {\n background-color: rgba(255, 253, 250, 0.75);\n}\n\n.portfolio-loading {\n font-family: 'Geist Mono', monospace;\n font-size: 14px;\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 40px 0;\n opacity: 0.7;\n color: #43302E;\n}\n\n@media (max-width: 1024px) {\n .vpv-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }\n}\n\n@media (max-width: 768px) {\n .vpv-grid { grid-template-columns: 1fr; gap: 50px; padding-left: 20px !important; padding-right: 20px !important; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-207e94a e-flex e-con-boxed e-con e-parent\" data-id=\"207e94a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f2df14 elementor-widget elementor-widget-html\" data-id=\"0f2df14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Footer - Madeleine Bastide<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Geist+Mono:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* ==========================================================================\n 0. VARIABLES GLOBALES & SETUP\n ========================================================================== *\/\n \n \/* Effet fluide natif pour tous les liens d'ancrage interne *\/\n html {\n scroll-behavior: smooth;\n }\n\n :root {\n --bg-color: #fffdfa;\n --text-color: #43302E;\n --tag-border: rgba(81, 50, 41, 0.3);\n\n --font-heading: 'Playfair Display', serif;\n --font-body: 'Geist Mono', monospace;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n \/* Ajout d'un padding top pour bien voir le footer isol\u00e9 *\/\n padding-top: 0px; \n }\n\n @keyframes drawSeparator {\n from { width: 0; }\n to { width: 100vw; }\n }\n\n \/* ==========================================================================\n 1. SECTION FOOTER & CALL TO ACTION (PLEIN \u00c9CRAN JAUNE CLAIR)\n ========================================================================== *\/\n footer {\n background-color: rgba(255, 241, 181, 0.8);\n padding: 60px 0 30px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n width: 100vw;\n margin-left: calc(-50vw + 50%); \n }\n\n .cta-title {\n font-family: var(--font-heading);\n font-size: 60px;\n font-weight: 300;\n color: var(--text-color);\n margin-bottom: 30px;\n letter-spacing: -0.01em;\n }\n\n .cta-buttons {\n display: flex;\n gap:30px;\n margin-bottom: 60px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .btn-dark {\n background-color: #fff;\n color: var(--text-color);\n text-decoration: none;\n padding: 10px 20px;\n border-radius: 50px;\n font-family: var(--font-body);\n font-size: 13px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: transform 0.2s ease, opacity 0.2s ease;\n }\n\n .btn-dark:hover {\n transform: scale(1.05);\n opacity: 0.9;\n }\n\n .footer-separator {\n border: none;\n border-top: 0.5px solid var(--tag-border);\n width: 0;\n margin-bottom: 30px !important; \/* Augment\u00e9 de 30px \u00e0 60px *\/\n animation: drawSeparator 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n\n .footer-credits {\n width: 100%;\n padding: 0 40px 0 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: var(--font-body);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-color);\n }\n\n .footer-links {\n display: flex;\n gap: 60px;\n }\n\n .footer-links a {\n color: var(--text-color);\n text-decoration: none;\n position: relative;\n }\n\n .footer-links a::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 0.5px;\n background-color: var(--text-color);\n transition: transform 0.3s ease;\n transform: scaleX(0);\n transform-origin: right;\n }\n\n .footer-links a:hover::after {\n transform: scaleX(1);\n transform-origin: left;\n }\n\n \/* ==========================================================================\n 2. RESPONSIVE \/ MEDIA QUERIES (MOBILE)\n ========================================================================== *\/\n @media (max-width: 768px) {\n .cta-title { font-size: 42px; }\n .cta-buttons { flex-direction: column; gap: 12px; width: 100%; max-width: 300px; }\n .footer-credits { flex-direction: column; gap: 20px; text-align: center; }\n .footer-links { flex-direction: column; gap: 12px; }\n .footer-separator { margin-bottom: 40px; } \/* Marge l\u00e9g\u00e8rement adapt\u00e9e pour le mobile *\/\n }\n <\/style>\n<\/head>\n<body>\n\n <footer>\n <h2 class=\"cta-title\">Et si on travaillait ensemble ?<\/h2>\n \n <div class=\"cta-buttons\">\n <a href=\"mailto:belmon.estors.madeleine@gmail.com\" class=\"btn-dark\">Me contacter<\/a>\n <a href=\"mon-cv.pdf\" download=\"CV_Madeleine_Bastide.pdf\" class=\"btn-dark\">T\u00e9l\u00e9charger mon CV<\/a>\n <\/div>\n\n <hr class=\"footer-separator\">\n\n <div class=\"footer-credits\">\n <div>\u00a9 2026 Madeleine Bastide<\/div>\n <div class=\"footer-links\">\n <a href=\"mailto:belmon.estors.madeleine@gmail.com\">belmon.estors.madeleine@gmail.com<\/a>\n <a href=\"https:\/\/linkedin.com\" target=\"_blank\">LinkedIn<\/a>\n <a href=\"#haut\">Retour en haut \u2191<\/a>\n <\/div>\n <\/div>\n <\/footer>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e2e3724 e-flex e-con-boxed e-con e-parent\" data-id=\"e2e3724\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a7937f elementor-widget elementor-widget-html\" data-id=\"3a7937f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Geist+Mono:wght@100..900&display=swap\" rel=\"stylesheet\">\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n const boutons = document.querySelectorAll('.btn-filtre');\n const projets = document.querySelectorAll('.projet-carte');\n\n boutons.forEach(bouton => {\n bouton.addEventListener('click', (e) => {\n e.preventDefault();\n\n \/\/ Gestion de la classe active et de l'opacit\u00e9\n boutons.forEach(b => {\n b.classList.remove('active');\n b.style.opacity = '0.6';\n });\n bouton.classList.add('active');\n bouton.style.opacity = '1';\n\n \/\/ D\u00e9termination de la cat\u00e9gorie\n let categorie = '';\n if(bouton.classList.contains('filtre-branding')) categorie = 'branding';\n if(bouton.classList.contains('filtre-uiux')) categorie = 'uiux';\n if(bouton.classList.contains('filtre-ia')) categorie = 'ia';\n\n \/\/ Filtrage des colonnes Elementor\n projets.forEach(projet => {\n if(categorie === '' || projet.classList.contains(categorie)) {\n projet.style.display = 'block';\n } else {\n projet.style.display = 'none';\n }\n });\n });\n });\n \n \/\/ Activer le premier bouton au d\u00e9marrage\n const premierBouton = document.querySelector('.filtre-all');\n if(premierBouton) {\n premierBouton.classList.add('active');\n premierBouton.style.opacity = '1';\n }\n});\n<\/script>\n\n<style>\n\/* 1. Ciblage chirurgical des boutons natifs Elementor et de leurs sous-couches *\/\n.btn-filtre,\n.btn-filtre a.elementor-button,\n.btn-filtre .elementor-button-content-wrapper {\n padding-left: 0px !important;\n padding-right: 0px !important;\n}\n\n\/* Application globale de la police et r\u00e9initialisation des positions *\/\n.btn-filtre .elementor-button-text, \n.btn-filtre {\n font-family: 'Geist Mono', monospace !important;\n font-size: 13px !important;\n color: #43302E !important;\n letter-spacing: 0.1px !important;\n position: relative !important;\n}\n\n\/* 2. Style de base et espacement ENTRE les boutons *\/\n.btn-filtre {\n opacity: 0.6;\n transition: opacity 0.3s ease !important;\n \n \/* G\u00e8re la marge entre les boutons \u00e0 l'ext\u00e9rieur, sans d\u00e9caler le premier texte *\/\n margin-right: 40px !important; \n padding-top: 10px !important;\n padding-bottom: 10px !important;\n}\n\n\/* On enl\u00e8ve la marge pour le tout dernier bouton de la ligne *\/\n.btn-filtre:last-child {\n margin-right: 0px !important;\n}\n\n.btn-filtre:hover,\n.btn-filtre.active {\n opacity: 1 !important;\n}\n\n\/* 3. Le petit point sous le filtre actif *\/\n.btn-filtre.active::after {\n content: '\u2022';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n color: #43302E;\n font-size: 20px;\n line-height: 1;\n}\n\n\/* Application de Geist Mono et reset des positions *\/\n.btn-filtre .elementor-button-text, \n.btn-filtre {\n font-family: 'Geist Mono', monospace !important;\n font-size: 13px !important;\n color: #43302E !important;\n letter-spacing: 0.1px !important;\n position: relative !important; \/* Crucial pour positionner le point *\/\n}\n\n\/* Style de base des filtres *\/\n.btn-filtre {\n opacity: 0.6;\n transition: opacity 0.3s ease !important;\n \/* ENL\u00c8VE LES MARGES GAUCHE ET DROITE DES BOUTONS NATIFS *\/\n padding: 0px 0px !important; \n}\n\n.btn-filtre:hover,\n.btn-filtre.active {\n opacity: 1 !important;\n}\n\n\/* --- LE PETIT POINT SOUS LE FILTRE ACTIF --- *\/\n.btn-filtre.active::after {\n content: '\u2022';\n position: absolute;\n bottom: -5px; \/* L\u00e9g\u00e8rement remont\u00e9 puisque le bouton a moins de padding en bas *\/\n left: 50%;\n transform: translateX(-50%);\n color: #43302E;\n font-size: 20px;\n line-height: 1;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Header – Madeleine Bastide Madeleine Bastide \u00c0 propos Mon travail Mes projets perso travaillons ensemble Header Title – Madeleine Bastide S\u00e9lection de projets & \u00e9tudes de cas Tous les projets Branding UI\/UX Design Outils IA Chargement des projets… Footer – Madeleine Bastide Et si on travaillait ensemble ? Me contacter T\u00e9l\u00e9charger mon CV \u00a9 2026 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-49","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":157,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}