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!important;\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!important;\n font-family: var(--font-body);\n font-size: 14px!important;\n font-weight: 400!important;\n letter-spacing: 0.8px!important;\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!important;\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!important;\n border-radius: 50px;\n font-family: var(--font-body);\n font-size: 14px!important;\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-db337c8 e-con-full e-flex e-con e-parent\" data-id=\"db337c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-815b7bf elementor-widget elementor-widget-html\" data-id=\"815b7bf\" 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>Brand & Digital Designer<\/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 DE CHARTE GRAPHIQUE & KEYFRAMES GLOBAL\n ========================================================================== *\/\n :root {\n --bg-color: #fffdfa;\n --text-color: #43302E;\n --btn-color: #FFF1B5; \/* Jaune clair officiel *\/\n --blue-color: #649fbd;\n --light-blue: #c1dbe8;\n --border-color: #43302E;\n --tag-border: rgba(81, 50, 41, 0.3);\n --yellow-dark: #ba8f02;\n\n --font-heading: 'Playfair Display', serif;\n --font-body: 'Geist Mono', monospace;\n }\n \n html {\n scroll-behavior: smooth;\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 @keyframes drawSeparator {\n from { width: 0; }\n to { width: 100vw; }\n }\n\n @keyframes editorialReveal {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* --- LA TECHNIQUE DE L'ESPERLUETTE UNIQUE --- *\/\n .amp {\n font-family: Georgia, 'Times New Roman', serif;\n font-style: italic;\n font-weight: 400;\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 {\n font-family: var(--font-heading);\n font-size: 20px;\n font-weight: 500;\n color: var(--text-color);\n text-decoration: none;\n letter-spacing: 0.1px;\n }\n\n nav {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .nav-links {\n display: flex;\n gap: 40px;\n font-family: var(--font-body);\n font-size: 12px;\n font-weight: 500;\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: -15px;\n top: 2px;\n font-size: 0.75rem;\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 .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 }\n\n .btn-primary {\n background-color: var(--light-blue);\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 text-transform: uppercase;\n font-weight: 500;\n transition: transform 0.2s ease;\n }\n\n .btn-primary:hover {\n transform: scale(1.05);\n }\n\n \/* ==========================================================================\n 2. S\u00c9PARATEURS LIGNES PLEIN \u00c9CRAN\n ========================================================================== *\/\n .separator {\n border: none;\n border-top: 0.5px solid var(--tag-border);\n width: 0;\n margin-left: calc(-50vw + 50%);\n margin-top: 0;\n margin-bottom: 0;\n animation: drawSeparator 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n\n \/* ==========================================================================\n 3. MAIN CONTAINER & SECTION HERO (TEXTES D'ENTR\u00c9E)\n ========================================================================== *\/\n main {\n padding: 60px 40px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n }\n\n .hero {\n margin-bottom: 60px;\n }\n\n 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: 15px;\n }\n\n .hero h2 {\n font-family: var(--font-body);\n font-size: 18px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n margin-bottom: 60px;\n opacity: 0.9;\n }\n\n .focus-section {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 15px;\n font-family: var(--font-body);\n font-size: 13px;\n }\n\n .focus-label {\n margin-right: 1px;\n font-size: 13px;\n }\n\n .tag {\n border: 1px solid var(--tag-border);\n padding: 6px 16px;\n border-radius: 50px;\n color: var(--text-color);\n background-color: transparent;\n font-size: 13px;\n letter-spacing: 0.5px;\n word-spacing: 1px;\n }\n\n \/* ==========================================================================\n 4. CAROUSEL IMAGES (SLIDER HORIZONTAL AUTOMATIQUE)\n ========================================================================== *\/\n .slider-container {\n width: 100%;\n max-width: 1000px;\n align-self: flex-end;\n position: relative;\n overflow: hidden;\n background-color: transparent;\n padding: 0;\n aspect-ratio: 16 \/ 9;\n margin-bottom: 60px;\n }\n\n .slider-track {\n display: flex;\n transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n width: 100%;\n height: 100%;\n }\n\n .slide {\n min-width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);\n }\n\n \/* ==========================================================================\n 5. SECTION \u00c0 PROPOS (MANIFESTE INTRO & PHOTO DE PROFIL)\n ========================================================================== *\/\n .editorial-about {\n display: flex;\n flex-direction: column;\n width: 100%;\n margin-top: 60px;\n margin-bottom: 60px;\n }\n\n .about-manifesto {\n display: grid;\n grid-template-columns: 30% 70%;\n gap: 60px;\n margin-bottom: 60px;\n align-items: start;\n }\n\n .manifesto-title {\n font-family: var(--font-body);\n font-size: 15px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 16px;\n word-spacing: 1px;\n color: var(--text-color);\n animation: editorialReveal 0.8s ease forwards;\n animation-delay: 0.3s;\n margin-top: 0px;\n }\n\n .about-profile-container {\n margin-top: 30px;\n width: 100%;\n aspect-ratio: 3 \/ 4;\n overflow: hidden;\n border: 0.5px solid var(--tag-border);\n }\n\n .about-profile-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(30%) sepia(10%);\n transition: transform 0.6s ease;\n }\n\n .about-manifesto:hover .about-profile-container img {\n transform: scale(1.05);\n }\n\n .manifesto-text {\n font-family: var(--font-heading);\n font-size: 40px;\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: 0.2px;\n color: var(--text-color);\n margin-top: -10px; \n animation: editorialReveal 1s ease forwards;\n animation-delay: 0.5s;\n max-width: 90%;\n }\n\n .manifesto-text span {\n font-family: var(--font-body);\n font-size: 15px;\n font-weight: 300;\n display: block;\n margin-top: 15px;\n line-height: 1.5;\n text-transform: none;\n letter-spacing: 0.2px;\n color: var(--text-color);\n opacity: 0.7;\n max-width: 80%;\n }\n\n \/* ==========================================================================\n 5B. INDEX DES EXP\u00c9RIENCES (TABLE INTERACTIVE)\n ========================================================================== *\/\n .parcours-index-title {\n font-family: var(--font-body);\n font-size: 15px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--yellow-dark);\n font-weight: 400;\n word-spacing: 5px;\n margin-bottom: 30px;\n animation: editorialReveal 0.8s ease forwards;\n animation-delay: 1.2s;\n }\n\n .index-table {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n }\n\n .index-row {\n display: grid;\n grid-template-columns: 15% 30% 55%;\n padding: 20px 0;\n padding-left:10px!important;\n border-bottom: 0.5px solid rgba(67, 48, 46, 0.15);\n text-decoration: none;\n color: var(--text-color);\n opacity: 0;\n transform: translateY(15px);\n animation: editorialReveal 0.7s ease forwards;\n transition: background-color 0.3s ease;\n }\n\n .index-row:nth-child(1) { animation-delay: 1.5s; }\n .index-row:nth-child(2) { animation-delay: 1.7s; }\n .index-row:nth-child(3) { animation-delay: 1.9s; }\n\n .index-row:hover {\n background-color: rgba(255, 241, 181, 0.2);\n cursor: pointer;\n }\n\n .index-cell-date {\n font-family: var(--font-body);\n font-size: 15px;\n color: var(--yellow-dark);\n font-weight: 400;\n letter-spacing:1px!important;\n align-self: center;\n transition: transform 0.5s ease;\n }\n\n .index-cell-company {\n align-self: center;\n transition: transform 0.4s ease;\n }\n\n .index-cell-company h4 {\n font-family: var(--font-heading);\n font-size: 20px;\n font-weight: 400;\n color: var(--yellow-dark);\n letter-spacing: 0.2px;\n margin-bottom: 5px;\n }\n\n .index-cell-company span {\n font-family: var(--font-body);\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n opacity: 0.8;\n letter-spacing: 0.5px;\n word-spacing: 1px;\n }\n\n .index-cell-desc {\n font-family: var(--font-body);\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.8;\n padding-right: 20px;\n align-self: center;\n transition: transform 0.4s ease, opacity 0.4s ease;\n }\n\n .index-row:hover .index-cell-date,\n .index-row:hover .index-cell-company,\n .index-row:hover .index-cell-desc {\n transform: translateX(6px);\n }\n\n .index-row:hover .index-cell-desc {\n opacity: 1;\n }\n\n \/* ==========================================================================\n 8. RESPONSIVE \/ MEDIA QUERIES\n ========================================================================== *\/\n @media (max-width: 1024px) {\n h1 { font-size: 4rem; }\n header { flex-direction: column; gap: 20px; position: relative; padding: 20px; } \n nav { flex-wrap: wrap; justify-content: center; }\n .slider-container { align-self: center; }\n .separator { width: 100%; margin-left: 0; } \n \n .about-manifesto { grid-template-columns: 1fr; gap: 16px; }\n .manifesto-text { font-size: 28px; }\n .index-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }\n .index-cell-desc { padding-right: 0; }\n \n .index-row:hover .index-cell-date,\n .index-row:hover .index-cell-company,\n .index-row:hover .index-cell-desc {\n transform: none;\n }\n }\n\n @media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n main { padding: 40px 20px; }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <main>\n\n <section class=\"hero\">\n <h1>Madeleine Bastide<\/h1>\n <h2>Direction artistique, UI\/UX design <span class=\"amp\">&<\/span> Identit\u00e9 visuelle<\/h2>\n\n <div class=\"focus-section\">\n <span class=\"focus-label\">My focus :<\/span>\n <span class=\"tag\">Outils IA<\/span>\n <span class=\"tag\">Branding<\/span>\n <span class=\"tag\">UI\/UX Design<\/span>\n <span class=\"tag\">Social Media<\/span>\n <span class=\"tag\">SEO<\/span>\n <span class=\"tag\">Design \u00c9ditorial<\/span>\n <\/div>\n <\/section>\n\n <section class=\"slider-container\">\n <div class=\"slider-track\" id=\"sliderTrack\">\n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop\" alt=\"Portfolio Projet 1\">\n <\/div>\n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558655146-d09347e92766?q=80&w=2600&auto=format&fit=crop\" alt=\"Portfolio Projet 2\">\n <\/div>\n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541462608143-67571c6738dd?q=80&w=2600&auto=format&fit=crop\" alt=\"Portfolio Projet 3\">\n <\/div>\n <\/div>\n <\/section>\n\n <hr class=\"separator\">\n\n <section class=\"editorial-about\">\n <div class=\"about-manifesto\">\n <div class=\"manifesto-title\" style=\"text-align: right;\">\n Qui je suis \u2014\n <div class=\"about-profile-container\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?q=80&w=2564&auto=format&fit=crop\" alt=\"Madeleine Bastide\">\n <\/div>\n <\/div>\n\n <h2 class=\"manifesto-text\">\n Concevoir des identit\u00e9s qui marquent. B\u00e2tir des interfaces qui durent.\n <span>Je combine direction artistique strat\u00e9gique et UX\/UI design pour propulser l'identit\u00e9 visuelle des startups tech et des projets innovants depuis la France.<\/span>\n <\/h2>\n <\/div>\n\n <div class=\"parcours-index-title\">Parcours professionnel \u2014<\/div>\n\n <div class=\"index-table\">\n <div class=\"index-row\">\n <div class=\"index-cell-date\">2024 \u2014 Pr\u00e9sent<\/div>\n <div class=\"index-cell-company\">\n <h4>Madeleine Bastide Studio<\/h4>\n <span>Freelance Studio<\/span>\n <\/div>\n <div class=\"index-cell-desc\">\n Cr\u00e9ation d'identit\u00e9s de marque compl\u00e8tes, d'interfaces d'outils IA et de syst\u00e8mes de design \u00e9ditoriaux pour des clients internationaux dans la Tech et le Web3.\n <\/div>\n <\/div>\n\n <div class=\"index-row\">\n <div class=\"index-cell-date\">2022 \u2014 2024<\/div>\n <div class=\"index-cell-company\">\n <h4>Agence Creative Paris<\/h4>\n <span>Directrice Artistique Senior<\/span>\n <\/div>\n <div class=\"index-cell-desc\">\n Supervision de la strat\u00e9gie visuelle et refonte UX\/UI de plateformes SaaS complexes. Accompagnement strat\u00e9gique et mentorat de designers juniors.\n <\/div>\n <\/div>\n\n <div class=\"index-row\">\n <div class=\"index-cell-date\">2020 \u2014 2022<\/div>\n <div class=\"index-cell-company\">\n <h4>Synapse Fintech<\/h4>\n <span>UI\/UX Designer<\/span>\n <\/div>\n <div class=\"index-cell-desc\">\n Conception d'applications mobiles bancaires B2B et impl\u00e9mentation de parcours utilisateurs simplifi\u00e9s et performants bas\u00e9s sur la data.\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const track = document.getElementById('sliderTrack');\n const slides = document.querySelectorAll('.slide');\n let currentIndex = 0;\n const totalSlides = slides.length;\n\n function moveToNextSlide() {\n currentIndex++;\n if (currentIndex >= totalSlides) {\n currentIndex = 0;\n }\n updateSliderPosition();\n }\n\n function updateSliderPosition() {\n track.style.transform = `translateX(-${currentIndex * 100}%)`;\n }\n\n setInterval(moveToNextSlide, 3500);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9ef0cf e-con-full e-flex e-con e-parent\" data-id=\"e9ef0cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-593b0fe elementor-widget elementor-widget-html\" data-id=\"593b0fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"manifesto-title\" style=\"margin-top: 0px; padding-left: 40px; \">Mon travail \u2014<\/div>\n\n<div id=\"home-dynamic-grid\" class=\"projects-grid\">\n <div class=\"portfolio-loading\">Chargement des r\u00e9alisations...<\/div>\n<\/div>\n\n<div class=\"more-projects-container\">\n <a href=\"\/work\/\" class=\"btn-outline\">Plus de projets<\/a>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n const gridContainer = document.getElementById('home-dynamic-grid');\n\n const siteUrl = window.location.origin;\n const primaryApiUrl = siteUrl + '\/wp-json\/wp\/v2\/posts?_embed&per_page=4'; \n const fallbackApiUrl = siteUrl + '\/index.php?rest_route=\/wp\/v2\/posts&_embed&per_page=4';\n\n function fetchHomeProjects(url, isFallback = false) {\n fetch(url)\n .then(response => {\n if (!response.ok) throw new Error('R\u00e9ponse API incorrecte');\n return response.json();\n })\n .then(posts => {\n renderHomeGrid(posts);\n })\n .catch(error => {\n console.warn('\u00c9chec chargement API:', url, error);\n if (!isFallback) {\n fetchHomeProjects(fallbackApiUrl, true);\n } else {\n gridContainer.innerHTML = '<div class=\"portfolio-loading\">Erreur lors du chargement des projets.<\/div>';\n }\n });\n }\n\n fetchHomeProjects(primaryApiUrl);\n\n function renderHomeGrid(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') + '\/';\n\n let categoriesText = '';\n if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0]) {\n const filteredTerms = post._embedded['wp:term'][0].filter(term => {\n const slug = term.slug.toLowerCase();\n return slug !== 'all' && slug !== 'tous-les-projets' && slug !== 'tous';\n });\n categoriesText = filteredTerms.map(term => term.name).join(', ');\n }\n if (!categoriesText) categoriesText = 'Projet';\n\n let pillsList = [];\n if (post.acf) {\n if (post.acf.pills && typeof post.acf.pills === 'object') {\n if (post.acf.pills.pills_1) pillsList.push(post.acf.pills.pills_1);\n if (post.acf.pills.pills_2) pillsList.push(post.acf.pills.pills_2);\n if (post.acf.pills.pills_3) pillsList.push(post.acf.pills.pills_3);\n } else {\n if (post.acf.pills_1) pillsList.push(post.acf.pills_1);\n if (post.acf.pills_2) pillsList.push(post.acf.pills_2);\n if (post.acf.pills_3) pillsList.push(post.acf.pills_3);\n }\n }\n \n let projectDescHtml = '';\n if (pillsList.length > 0) {\n projectDescHtml = pillsList.map(pill => `<span class=\"pill-term\">${pill}<\/span>`).join(' <span class=\"pill-dot\">\u2022<\/span> ');\n } else {\n projectDescHtml = 'Case Study';\n }\n\n const titleRaw = post.title.rendered;\n\n const cardLink = document.createElement('a');\n cardLink.href = post.link;\n cardLink.className = 'project-card';\n\n \/\/ Structure nettoy\u00e9e sans l'overlay textuel interne\n cardLink.innerHTML = `\n <div class=\"project-image-container\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${titleRaw}\">\n <\/div>\n <div class=\"project-meta\">\n <div class=\"meta-row\">\n <div class=\"project-title\"><span class=\"project-number\">${projectNum}<\/span>${titleRaw}<\/div>\n <div class=\"project-tags\">${categoriesText}<\/div>\n <\/div>\n <div class=\"meta-row\">\n <div class=\"project-desc\">${projectDescHtml}<\/div>\n <div class=\"project-view\">[View]<\/div>\n <\/div>\n <\/div>\n `;\n gridContainer.appendChild(cardLink);\n });\n }\n});\n<\/script>\n\n<style>\n\/* ==========================================================================\n STYLE DE LA GRILLE D'ACCUEIL AUTOMATIS\u00c9E\n ========================================================================== *\/\n.projects-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px 30px;\n width: 100%;\n margin-top: 30px;\n margin-bottom: 30px;\n padding-left: 40px !important;\n padding-right: 40px !important;\n box-sizing: border-box !important;\n}\n\n.project-card {\n display: flex;\n flex-direction: column;\n gap: 16px;\n text-decoration: none;\n color: #43302E;\n}\n\n.project-image-container {\n width: 100%;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n position: relative;\n background-color: rgba(67, 48, 46, 0.02);\n}\n\n.project-image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.project-card:hover .project-image-container img {\n transform: scale(1.08);\n}\n\n\/* M\u00e9tadonn\u00e9es sous les visuels *\/\n.project-meta {\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-family: 'Geist Mono', monospace;\n text-transform: uppercase;\n}\n\n.meta-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.project-title {\n font-family: 'Playfair Display', serif;\n font-size: 20px;\n font-weight: 500;\n color: #649fbd;\n text-transform: none;\n}\n\n.project-number {\n font-family: 'Geist Mono', monospace;\n font-size: 15px;\n margin-right: 12px;\n font-weight: 400;\n color: #649fbd;\n}\n\n.project-tags {\n font-size: 13px;\n letter-spacing: 0.5px;\n color: #649fbd;\n max-width: 50%;\n text-align: right;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.project-desc {\n font-size: 12px;\n color: #43302E;\n letter-spacing: 0.5px;\n text-transform: none;\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.pill-term {\n opacity: 0.9;\n}\n\n.pill-dot {\n opacity: 0.4;\n font-size: 8px;\n}\n\n.project-view {\n font-size: 12px;\n letter-spacing: 0.5px;\n color: #43302E;\n opacity: 0.8;\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: 60px 0;\n opacity: 0.7;\n color: #43302E;\n}\n\n\/* ==========================================================================\n STYLE ET COMPORTEMENT DU BOUTON \"PLUS DE PROJETS\"\n ========================================================================== *\/\n.more-projects-container {\n display: flex;\n justify-content: center;\n margin-top: 30px;\n margin-bottom: 30px;\n width: 100%;\n}\n\n.btn-outline {\n display: inline-block;\n background-color: transparent;\n color: #649fbd;\n border: 0.5px solid #649fbd;\n text-decoration: none;\n padding: 12px 28px;\n border-radius: 50px;\n font-family: 'Geist Mono', monospace !important;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 500;\n transition: all 0.5s ease;\n}\n\n.btn-outline:hover {\n transform: scale(1.05);\n background-color: #649fbd;\n color: #fffdfa;\n}\n\n\/* Responsive de la grille d'accueil *\/\n@media (max-width: 1024px) {\n .projects-grid { padding-left: 20px !important; padding-right: 20px !important; }\n}\n\n@media (max-width: 768px) {\n .projects-grid { grid-template-columns: 1fr; gap: 40px; }\n .project-tags { max-width: 100%; text-align: left; }\n .meta-row { flex-direction: column; gap: 4px; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-62dfab1 e-con-full e-flex e-con e-parent\" data-id=\"62dfab1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68a2f51 elementor-widget elementor-widget-html\" data-id=\"68a2f51\" 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<\/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 Brand & Digital Designer Madeleine Bastide Direction artistique, UI\/UX design & Identit\u00e9 visuelle My focus : Outils IA Branding UI\/UX Design Social Media SEO Design \u00c9ditorial Qui je suis \u2014 Concevoir des identit\u00e9s qui marquent. B\u00e2tir des interfaces qui durent. […]<\/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-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/2","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=2"}],"version-history":[{"count":84,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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!important;\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!important;\n font-family: var(--font-body);\n font-size: 14px!important;\n font-weight: 400!important;\n letter-spacing: 0.8px!important;\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!important;\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!important;\n border-radius: 50px;\n font-family: var(--font-body);\n font-size: 14px!important;\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-db337c8 e-con-full e-flex e-con e-parent\" data-id=\"db337c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-815b7bf elementor-widget elementor-widget-html\" data-id=\"815b7bf\" 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>Brand & Digital Designer<\/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 DE CHARTE GRAPHIQUE & KEYFRAMES GLOBAL\n ========================================================================== *\/\n :root {\n --bg-color: #fffdfa;\n --text-color: #43302E;\n --btn-color: #FFF1B5; \/* Jaune clair officiel *\/\n --blue-color: #649fbd;\n --light-blue: #c1dbe8;\n --border-color: #43302E;\n --tag-border: rgba(81, 50, 41, 0.3);\n --yellow-dark: #ba8f02;\n\n --font-heading: 'Playfair Display', serif;\n --font-body: 'Geist Mono', monospace;\n }\n \n html {\n scroll-behavior: smooth;\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 @keyframes drawSeparator {\n from { width: 0; }\n to { width: 100vw; }\n }\n\n @keyframes editorialReveal {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* --- LA TECHNIQUE DE L'ESPERLUETTE UNIQUE --- *\/\n .amp {\n font-family: Georgia, 'Times New Roman', serif;\n font-style: italic;\n font-weight: 400;\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 {\n font-family: var(--font-heading);\n font-size: 20px;\n font-weight: 500;\n color: var(--text-color);\n text-decoration: none;\n letter-spacing: 0.1px;\n }\n\n nav {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .nav-links {\n display: flex;\n gap: 40px;\n font-family: var(--font-body);\n font-size: 12px;\n font-weight: 500;\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: -15px;\n top: 2px;\n font-size: 0.75rem;\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 .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 }\n\n .btn-primary {\n background-color: var(--light-blue);\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 text-transform: uppercase;\n font-weight: 500;\n transition: transform 0.2s ease;\n }\n\n .btn-primary:hover {\n transform: scale(1.05);\n }\n\n \/* ==========================================================================\n 2. S\u00c9PARATEURS LIGNES PLEIN \u00c9CRAN\n ========================================================================== *\/\n .separator {\n border: none;\n border-top: 0.5px solid var(--tag-border);\n width: 0;\n margin-left: calc(-50vw + 50%);\n margin-top: 0;\n margin-bottom: 0;\n animation: drawSeparator 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n\n \/* ==========================================================================\n 3. MAIN CONTAINER & SECTION HERO (TEXTES D'ENTR\u00c9E)\n ========================================================================== *\/\n main {\n padding: 60px 40px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n }\n\n .hero {\n margin-bottom: 60px;\n }\n\n 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: 15px;\n }\n\n .hero h2 {\n font-family: var(--font-body);\n font-size: 18px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n margin-bottom: 60px;\n opacity: 0.9;\n }\n\n .focus-section {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 15px;\n font-family: var(--font-body);\n font-size: 13px;\n }\n\n .focus-label {\n margin-right: 1px;\n font-size: 13px;\n }\n\n .tag {\n border: 1px solid var(--tag-border);\n padding: 6px 16px;\n border-radius: 50px;\n color: var(--text-color);\n background-color: transparent;\n font-size: 13px;\n letter-spacing: 0.5px;\n word-spacing: 1px;\n }\n\n \/* ==========================================================================\n 4. CAROUSEL IMAGES (SLIDER HORIZONTAL AUTOMATIQUE)\n ========================================================================== *\/\n .slider-container {\n width: 100%;\n max-width: 1000px;\n align-self: flex-end;\n position: relative;\n overflow: hidden;\n background-color: transparent;\n padding: 0;\n aspect-ratio: 16 \/ 9;\n margin-bottom: 60px;\n }\n\n .slider-track {\n display: flex;\n transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n width: 100%;\n height: 100%;\n }\n\n .slide {\n min-width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);\n }\n\n \/* ==========================================================================\n 5. SECTION \u00c0 PROPOS (MANIFESTE INTRO & PHOTO DE PROFIL)\n ========================================================================== *\/\n .editorial-about {\n display: flex;\n flex-direction: column;\n width: 100%;\n margin-top: 60px;\n margin-bottom: 60px;\n }\n\n .about-manifesto {\n display: grid;\n grid-template-columns: 30% 70%;\n gap: 60px;\n margin-bottom: 60px;\n align-items: start;\n }\n\n .manifesto-title {\n font-family: var(--font-body);\n font-size: 15px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 16px;\n word-spacing: 1px;\n color: var(--text-color);\n animation: editorialReveal 0.8s ease forwards;\n animation-delay: 0.3s;\n margin-top: 0px;\n }\n\n .about-profile-container {\n margin-top: 30px;\n width: 100%;\n aspect-ratio: 3 \/ 4;\n overflow: hidden;\n border: 0.5px solid var(--tag-border);\n }\n\n .about-profile-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(30%) sepia(10%);\n transition: transform 0.6s ease;\n }\n\n .about-manifesto:hover .about-profile-container img {\n transform: scale(1.05);\n }\n\n .manifesto-text {\n font-family: var(--font-heading);\n font-size: 40px;\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: 0.2px;\n color: var(--text-color);\n margin-top: -10px; \n animation: editorialReveal 1s ease forwards;\n animation-delay: 0.5s;\n max-width: 90%;\n }\n\n .manifesto-text span {\n font-family: var(--font-body);\n font-size: 15px;\n font-weight: 300;\n display: block;\n margin-top: 15px;\n line-height: 1.5;\n text-transform: none;\n letter-spacing: 0.2px;\n color: var(--text-color);\n opacity: 0.7;\n max-width: 80%;\n }\n\n \/* ==========================================================================\n 5B. INDEX DES EXP\u00c9RIENCES (TABLE INTERACTIVE)\n ========================================================================== *\/\n .parcours-index-title {\n font-family: var(--font-body);\n font-size: 15px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--yellow-dark);\n font-weight: 400;\n word-spacing: 5px;\n margin-bottom: 30px;\n animation: editorialReveal 0.8s ease forwards;\n animation-delay: 1.2s;\n }\n\n .index-table {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n }\n\n .index-row {\n display: grid;\n grid-template-columns: 15% 30% 55%;\n padding: 20px 0;\n padding-left:10px!important;\n border-bottom: 0.5px solid rgba(67, 48, 46, 0.15);\n text-decoration: none;\n color: var(--text-color);\n opacity: 0;\n transform: translateY(15px);\n animation: editorialReveal 0.7s ease forwards;\n transition: background-color 0.3s ease;\n }\n\n .index-row:nth-child(1) { animation-delay: 1.5s; }\n .index-row:nth-child(2) { animation-delay: 1.7s; }\n .index-row:nth-child(3) { animation-delay: 1.9s; }\n\n .index-row:hover {\n background-color: rgba(255, 241, 181, 0.2);\n cursor: pointer;\n }\n\n .index-cell-date {\n font-family: var(--font-body);\n font-size: 15px;\n color: var(--yellow-dark);\n font-weight: 400;\n letter-spacing:1px!important;\n align-self: center;\n transition: transform 0.5s ease;\n }\n\n .index-cell-company {\n align-self: center;\n transition: transform 0.4s ease;\n }\n\n .index-cell-company h4 {\n font-family: var(--font-heading);\n font-size: 20px;\n font-weight: 400;\n color: var(--yellow-dark);\n letter-spacing: 0.2px;\n margin-bottom: 5px;\n }\n\n .index-cell-company span {\n font-family: var(--font-body);\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n opacity: 0.8;\n letter-spacing: 0.5px;\n word-spacing: 1px;\n }\n\n .index-cell-desc {\n font-family: var(--font-body);\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.8;\n padding-right: 20px;\n align-self: center;\n transition: transform 0.4s ease, opacity 0.4s ease;\n }\n\n .index-row:hover .index-cell-date,\n .index-row:hover .index-cell-company,\n .index-row:hover .index-cell-desc {\n transform: translateX(6px);\n }\n\n .index-row:hover .index-cell-desc {\n opacity: 1;\n }\n\n \/* ==========================================================================\n 8. RESPONSIVE \/ MEDIA QUERIES\n ========================================================================== *\/\n @media (max-width: 1024px) {\n h1 { font-size: 4rem; }\n header { flex-direction: column; gap: 20px; position: relative; padding: 20px; } \n nav { flex-wrap: wrap; justify-content: center; }\n .slider-container { align-self: center; }\n .separator { width: 100%; margin-left: 0; } \n \n .about-manifesto { grid-template-columns: 1fr; gap: 16px; }\n .manifesto-text { font-size: 28px; }\n .index-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }\n .index-cell-desc { padding-right: 0; }\n \n .index-row:hover .index-cell-date,\n .index-row:hover .index-cell-company,\n .index-row:hover .index-cell-desc {\n transform: none;\n }\n }\n\n @media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n main { padding: 40px 20px; }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <main>\n\n <section class=\"hero\">\n <h1>Madeleine Bastide<\/h1>\n <h2>Direction artistique, UI\/UX design <span class=\"amp\">&<\/span> Identit\u00e9 visuelle<\/h2>\n\n <div class=\"focus-section\">\n <span class=\"focus-label\">My focus :<\/span>\n <span class=\"tag\">Outils IA<\/span>\n <span class=\"tag\">Branding<\/span>\n <span class=\"tag\">UI\/UX Design<\/span>\n <span class=\"tag\">Social Media<\/span>\n <span class=\"tag\">SEO<\/span>\n <span class=\"tag\">Design \u00c9ditorial<\/span>\n <\/div>\n <\/section>\n\n <section class=\"slider-container\">\n <div class=\"slider-track\" id=\"sliderTrack\">\n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop\" alt=\"Portfolio Projet 1\">\n <\/div>\n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558655146-d09347e92766?q=80&w=2600&auto=format&fit=crop\" alt=\"Portfolio Projet 2\">\n <\/div>\n <div class=\"slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541462608143-67571c6738dd?q=80&w=2600&auto=format&fit=crop\" alt=\"Portfolio Projet 3\">\n <\/div>\n <\/div>\n <\/section>\n\n <hr class=\"separator\">\n\n <section class=\"editorial-about\">\n <div class=\"about-manifesto\">\n <div class=\"manifesto-title\" style=\"text-align: right;\">\n Qui je suis \u2014\n <div class=\"about-profile-container\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?q=80&w=2564&auto=format&fit=crop\" alt=\"Madeleine Bastide\">\n <\/div>\n <\/div>\n\n <h2 class=\"manifesto-text\">\n Concevoir des identit\u00e9s qui marquent. B\u00e2tir des interfaces qui durent.\n <span>Je combine direction artistique strat\u00e9gique et UX\/UI design pour propulser l'identit\u00e9 visuelle des startups tech et des projets innovants depuis la France.<\/span>\n <\/h2>\n <\/div>\n\n <div class=\"parcours-index-title\">Parcours professionnel \u2014<\/div>\n\n <div class=\"index-table\">\n <div class=\"index-row\">\n <div class=\"index-cell-date\">2024 \u2014 Pr\u00e9sent<\/div>\n <div class=\"index-cell-company\">\n <h4>Madeleine Bastide Studio<\/h4>\n <span>Freelance Studio<\/span>\n <\/div>\n <div class=\"index-cell-desc\">\n Cr\u00e9ation d'identit\u00e9s de marque compl\u00e8tes, d'interfaces d'outils IA et de syst\u00e8mes de design \u00e9ditoriaux pour des clients internationaux dans la Tech et le Web3.\n <\/div>\n <\/div>\n\n <div class=\"index-row\">\n <div class=\"index-cell-date\">2022 \u2014 2024<\/div>\n <div class=\"index-cell-company\">\n <h4>Agence Creative Paris<\/h4>\n <span>Directrice Artistique Senior<\/span>\n <\/div>\n <div class=\"index-cell-desc\">\n Supervision de la strat\u00e9gie visuelle et refonte UX\/UI de plateformes SaaS complexes. Accompagnement strat\u00e9gique et mentorat de designers juniors.\n <\/div>\n <\/div>\n\n <div class=\"index-row\">\n <div class=\"index-cell-date\">2020 \u2014 2022<\/div>\n <div class=\"index-cell-company\">\n <h4>Synapse Fintech<\/h4>\n <span>UI\/UX Designer<\/span>\n <\/div>\n <div class=\"index-cell-desc\">\n Conception d'applications mobiles bancaires B2B et impl\u00e9mentation de parcours utilisateurs simplifi\u00e9s et performants bas\u00e9s sur la data.\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const track = document.getElementById('sliderTrack');\n const slides = document.querySelectorAll('.slide');\n let currentIndex = 0;\n const totalSlides = slides.length;\n\n function moveToNextSlide() {\n currentIndex++;\n if (currentIndex >= totalSlides) {\n currentIndex = 0;\n }\n updateSliderPosition();\n }\n\n function updateSliderPosition() {\n track.style.transform = `translateX(-${currentIndex * 100}%)`;\n }\n\n setInterval(moveToNextSlide, 3500);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9ef0cf e-con-full e-flex e-con e-parent\" data-id=\"e9ef0cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-593b0fe elementor-widget elementor-widget-html\" data-id=\"593b0fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"manifesto-title\" style=\"margin-top: 0px; padding-left: 40px; \">Mon travail \u2014<\/div>\n\n<div id=\"home-dynamic-grid\" class=\"projects-grid\">\n <div class=\"portfolio-loading\">Chargement des r\u00e9alisations...<\/div>\n<\/div>\n\n<div class=\"more-projects-container\">\n <a href=\"\/work\/\" class=\"btn-outline\">Plus de projets<\/a>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n const gridContainer = document.getElementById('home-dynamic-grid');\n\n const siteUrl = window.location.origin;\n const primaryApiUrl = siteUrl + '\/wp-json\/wp\/v2\/posts?_embed&per_page=4'; \n const fallbackApiUrl = siteUrl + '\/index.php?rest_route=\/wp\/v2\/posts&_embed&per_page=4';\n\n function fetchHomeProjects(url, isFallback = false) {\n fetch(url)\n .then(response => {\n if (!response.ok) throw new Error('R\u00e9ponse API incorrecte');\n return response.json();\n })\n .then(posts => {\n renderHomeGrid(posts);\n })\n .catch(error => {\n console.warn('\u00c9chec chargement API:', url, error);\n if (!isFallback) {\n fetchHomeProjects(fallbackApiUrl, true);\n } else {\n gridContainer.innerHTML = '<div class=\"portfolio-loading\">Erreur lors du chargement des projets.<\/div>';\n }\n });\n }\n\n fetchHomeProjects(primaryApiUrl);\n\n function renderHomeGrid(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') + '\/';\n\n let categoriesText = '';\n if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0]) {\n const filteredTerms = post._embedded['wp:term'][0].filter(term => {\n const slug = term.slug.toLowerCase();\n return slug !== 'all' && slug !== 'tous-les-projets' && slug !== 'tous';\n });\n categoriesText = filteredTerms.map(term => term.name).join(', ');\n }\n if (!categoriesText) categoriesText = 'Projet';\n\n let pillsList = [];\n if (post.acf) {\n if (post.acf.pills && typeof post.acf.pills === 'object') {\n if (post.acf.pills.pills_1) pillsList.push(post.acf.pills.pills_1);\n if (post.acf.pills.pills_2) pillsList.push(post.acf.pills.pills_2);\n if (post.acf.pills.pills_3) pillsList.push(post.acf.pills.pills_3);\n } else {\n if (post.acf.pills_1) pillsList.push(post.acf.pills_1);\n if (post.acf.pills_2) pillsList.push(post.acf.pills_2);\n if (post.acf.pills_3) pillsList.push(post.acf.pills_3);\n }\n }\n \n let projectDescHtml = '';\n if (pillsList.length > 0) {\n projectDescHtml = pillsList.map(pill => `<span class=\"pill-term\">${pill}<\/span>`).join(' <span class=\"pill-dot\">\u2022<\/span> ');\n } else {\n projectDescHtml = 'Case Study';\n }\n\n const titleRaw = post.title.rendered;\n\n const cardLink = document.createElement('a');\n cardLink.href = post.link;\n cardLink.className = 'project-card';\n\n \/\/ Structure nettoy\u00e9e sans l'overlay textuel interne\n cardLink.innerHTML = `\n <div class=\"project-image-container\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${titleRaw}\">\n <\/div>\n <div class=\"project-meta\">\n <div class=\"meta-row\">\n <div class=\"project-title\"><span class=\"project-number\">${projectNum}<\/span>${titleRaw}<\/div>\n <div class=\"project-tags\">${categoriesText}<\/div>\n <\/div>\n <div class=\"meta-row\">\n <div class=\"project-desc\">${projectDescHtml}<\/div>\n <div class=\"project-view\">[View]<\/div>\n <\/div>\n <\/div>\n `;\n gridContainer.appendChild(cardLink);\n });\n }\n});\n<\/script>\n\n<style>\n\/* ==========================================================================\n STYLE DE LA GRILLE D'ACCUEIL AUTOMATIS\u00c9E\n ========================================================================== *\/\n.projects-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px 30px;\n width: 100%;\n margin-top: 30px;\n margin-bottom: 30px;\n padding-left: 40px !important;\n padding-right: 40px !important;\n box-sizing: border-box !important;\n}\n\n.project-card {\n display: flex;\n flex-direction: column;\n gap: 16px;\n text-decoration: none;\n color: #43302E;\n}\n\n.project-image-container {\n width: 100%;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n position: relative;\n background-color: rgba(67, 48, 46, 0.02);\n}\n\n.project-image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.project-card:hover .project-image-container img {\n transform: scale(1.08);\n}\n\n\/* M\u00e9tadonn\u00e9es sous les visuels *\/\n.project-meta {\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-family: 'Geist Mono', monospace;\n text-transform: uppercase;\n}\n\n.meta-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.project-title {\n font-family: 'Playfair Display', serif;\n font-size: 20px;\n font-weight: 500;\n color: #649fbd;\n text-transform: none;\n}\n\n.project-number {\n font-family: 'Geist Mono', monospace;\n font-size: 15px;\n margin-right: 12px;\n font-weight: 400;\n color: #649fbd;\n}\n\n.project-tags {\n font-size: 13px;\n letter-spacing: 0.5px;\n color: #649fbd;\n max-width: 50%;\n text-align: right;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.project-desc {\n font-size: 12px;\n color: #43302E;\n letter-spacing: 0.5px;\n text-transform: none;\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.pill-term {\n opacity: 0.9;\n}\n\n.pill-dot {\n opacity: 0.4;\n font-size: 8px;\n}\n\n.project-view {\n font-size: 12px;\n letter-spacing: 0.5px;\n color: #43302E;\n opacity: 0.8;\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: 60px 0;\n opacity: 0.7;\n color: #43302E;\n}\n\n\/* ==========================================================================\n STYLE ET COMPORTEMENT DU BOUTON \"PLUS DE PROJETS\"\n ========================================================================== *\/\n.more-projects-container {\n display: flex;\n justify-content: center;\n margin-top: 30px;\n margin-bottom: 30px;\n width: 100%;\n}\n\n.btn-outline {\n display: inline-block;\n background-color: transparent;\n color: #649fbd;\n border: 0.5px solid #649fbd;\n text-decoration: none;\n padding: 12px 28px;\n border-radius: 50px;\n font-family: 'Geist Mono', monospace !important;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 500;\n transition: all 0.5s ease;\n}\n\n.btn-outline:hover {\n transform: scale(1.05);\n background-color: #649fbd;\n color: #fffdfa;\n}\n\n\/* Responsive de la grille d'accueil *\/\n@media (max-width: 1024px) {\n .projects-grid { padding-left: 20px !important; padding-right: 20px !important; }\n}\n\n@media (max-width: 768px) {\n .projects-grid { grid-template-columns: 1fr; gap: 40px; }\n .project-tags { max-width: 100%; text-align: left; }\n .meta-row { flex-direction: column; gap: 4px; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-62dfab1 e-con-full e-flex e-con e-parent\" data-id=\"62dfab1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68a2f51 elementor-widget elementor-widget-html\" data-id=\"68a2f51\" 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<\/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 Brand & Digital Designer Madeleine Bastide Direction artistique, UI\/UX design & Identit\u00e9 visuelle My focus : Outils IA Branding UI\/UX Design Social Media SEO Design \u00c9ditorial Qui je suis \u2014 Concevoir des identit\u00e9s qui marquent. B\u00e2tir des interfaces qui durent. […]<\/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-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/2","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=2"}],"version-history":[{"count":84,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}