{"id":16,"date":"2026-06-30T05:26:58","date_gmt":"2026-06-30T05:26:58","guid":{"rendered":"https:\/\/madeleinebastide.com\/?page_id=16"},"modified":"2026-07-01T11:59:07","modified_gmt":"2026-07-01T11:59:07","slug":"a-propos","status":"publish","type":"page","link":"https:\/\/madeleinebastide.com\/index.php\/a-propos\/","title":{"rendered":"\u00c0 propos"},"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!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;\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 class=\"elementor-element elementor-element-cd580e7 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"cd580e7\" 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\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u00c0 Propos \u2014 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 :root {\n --bg-color: #fffdfa;\n --text-color: #43302E;\n --btn-color: #FFF1B5;\n --blue-color: #649fbd;\n --light-blue: #c1dbe8;\n --border-color: #43302E;\n --tag-border: rgba(81, 50, 41, 0.15);\n --yellow-dark: #ba8f02;\n --font-heading: 'Playfair Display', serif;\n --font-body: 'Geist Mono', monospace;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box !important; }\n html { scroll-behavior: smooth; }\n body { background-color: var(--bg-color); color: var(--text-color); -webkit-font-smoothing: antialiased; overflow-x: hidden; }\n\n main {\n padding: 60px 40px !important;\n margin: 0 auto !important;\n display: block;\n width: 100% !important;\n max-width: 100% !important;\n }\n\n .about-page-header { margin-bottom: 60px; width: 100%; }\n .user-name { font-family: var(--font-heading); font-size: 70px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 15px; }\n .user-title { font-family: var(--font-body); font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; opacity: 0.9; }\n\n \/* Grille principale contrainte *\/\n .about-layout-grid {\n display: flex;\n align-items: flex-start;\n gap: 60px;\n margin-bottom: 80px;\n width: 100%;\n }\n\n .about-sidebar {\n width: 28%;\n min-width: 280px;\n display: flex;\n flex-direction: column;\n gap: 45px;\n }\n\n \/* FORCE LA COLONNE DE DROITE \u00c0 RESTER DANS L'\u00c9CRAN *\/\n .about-content-stream {\n width: 72%;\n flex: 1;\n min-width: 0; \/* TR\u00c8S IMPORTANT : emp\u00eache flexbox de pousser hors de l'\u00e9cran *\/\n display: flex;\n flex-direction: column;\n gap: 60px;\n }\n\n .stream-section { width: 100%; }\n .stream-section h2 { font-family: var(--font-body); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--yellow-dark); margin-bottom: 25px; border-bottom: 0.5px solid var(--tag-border); padding-bottom: 10px; font-weight: 500; width: 100%; }\n\n .cv-table { width: 100%; display: flex; flex-direction: column; }\n \n .cv-row {\n display: flex;\n padding: 24px 0;\n border-bottom: 0.5px solid rgba(67, 48, 46, 0.1);\n width: 100%;\n }\n .cv-row:last-child { border-bottom: none; }\n\n .cv-cell-date {\n width: 15%;\n min-width: 120px;\n font-family: var(--font-body);\n font-size: 15px;\n color: var(--text-color);\n opacity: 0.8;\n letter-spacing: 1px;\n margin-top: 6px;\n }\n\n .cv-cell-details {\n width: 78%;\n flex: 1;\n min-width: 0;\n }\n\n .cv-cell-details h4 { font-family: var(--font-heading); font-size: 25px; font-weight: 400; margin-bottom: 4px; color: var(--yellow-dark); }\n .cv-cell-details span { font-family: var(--font-body); font-size: 16px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 12px; color: var(--yellow-dark);}\n \n .cv-cell-details ul {\n padding-left: 15px;\n font-family: var(--font-body);\n font-size: 14px;\n line-height: 1.6;\n letter-spacing: -0.3px !important;\n opacity: 0.8;\n width: 100%;\n }\n\n .cv-cell-details ul li {\n margin-bottom: 15px;\n white-space: normal !important; \/* \u00c9vite que le texte reste sur une seule ligne *\/\n word-break: break-word !important;\n text-align: justify;\n }\n\n .about-profile-container { width: 100%; aspect-ratio: 3 \/ 4; overflow: hidden; border: 0.5px solid var(--tag-border); }\n .about-profile-container img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) sepia(10%); transition: transform 0.8s ease; }\n .about-profile-container:hover img { transform: scale(1.04); }\n .sidebar-block h3 { font-family: var(--font-body); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--yellow-dark); margin-bottom: 16px; font-weight: 500; }\n .sidebar-block p, .sidebar-block a { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-color); text-decoration: none; display: block; }\n .sidebar-block a:hover { color: var(--blue-color); }\n .skill-tags-group { display: flex; flex-wrap: wrap; gap: 8px; }\n .skill-pill { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.5px; color: var(--text-color); border: 1px solid var(--tag-border); padding: 5px 14px; border-radius: 50px; text-transform: uppercase; }\n .formation-title { font-family: var(--font-heading); font-size: 20px !important; font-weight: 500 !important; letter-spacing: 0.8px; margin-bottom: 2px; color: var(--yellow-dark) !important; }\n .formation-degree { font-family: var(--font-body); font-size: 14px !important; opacity: 0.8; font-weight: 400 !important; letter-spacing: 0.2px!important; display: block; margin-bottom: 12px; color: var(--text-color) !important; text-transform: none !important; }\n\n @media (max-width: 1024px) {\n .about-layout-grid { flex-direction: column; }\n .about-sidebar, .about-content-stream { width: 100% !important; }\n }\n\n @media (max-width: 768px) {\n main { padding: 40px 20px !important; }\n .cv-row { flex-direction: column; gap: 10px; }\n .cv-cell-date { width: 100%; }\n .cv-cell-details { width: 100%; }\n }\n<\/style>\n\n<body>\n\n <main>\n\n <section class=\"about-page-header\">\n <h1 class=\"user-name\">Madeleine Bastide<\/h1>\n <h2 class=\"user-title\">Direction artistique, UI\/UX design <span class=\"amp\">&<\/span> Identit\u00e9 visuelle<\/h2>\n <\/section>\n\n <div class=\"about-layout-grid\">\n \n <aside class=\"about-sidebar\">\n \n <div class=\"about-profile-container\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540555700478-4be289fbecef?q=80&w=2670&auto=format&fit=crop\" alt=\"Madeleine Bastide Profile\">\n <\/div>\n\n <div class=\"sidebar-block\">\n <h3>Contact \u2014<\/h3>\n <p>06.89.86.57.37<\/p>\n <a href=\"mailto:belmon.estors.madeleine@gmail.com\">belmon.estors.madeleine@gmail.com<\/a>\n <a href=\"https:\/\/linkedin.com\" target=\"_blank\">linkedin.com\/in\/madeleine<\/a>\n <\/div>\n\n <div class=\"sidebar-block\">\n <h3>Expertises \u2014<\/h3>\n <div class=\"skill-tags-group\">\n <span class=\"skill-pill\">UI\/UX & Web Design<\/span>\n <span class=\"skill-pill\">Brand & Digital Design<\/span>\n <span class=\"skill-pill\">Vid\u00e9o & Motion<\/span>\n <span class=\"skill-pill\">Outils IA<\/span>\n <span class=\"skill-pill\">Social Media<\/span>\n <span class=\"skill-pill\">Strat\u00e9gie Digitale<\/span>\n <span class=\"skill-pill\">Gestion de projet<\/span>\n <span class=\"skill-pill\">Relation client<\/span>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-block\">\n <h3>Outils \u2014<\/h3>\n <div class=\"skill-tags-group\">\n <span class=\"skill-pill\">Figma<\/span>\n <span class=\"skill-pill\">WordPress<\/span>\n <span class=\"skill-pill\">Elementor<\/span>\n <span class=\"skill-pill\">Yootheme<\/span>\n <span class=\"skill-pill\">Photoshop<\/span>\n <span class=\"skill-pill\">Illustrator<\/span>\n <span class=\"skill-pill\">Indesign<\/span>\n <span class=\"skill-pill\">PremierePro<\/span>\n <span class=\"skill-pill\">AfterEffect<\/span>\n <span class=\"skill-pill\">Langage HTML & CSS<\/span>\n <\/div>\n <\/div>\n\n <\/aside>\n\n <section class=\"about-content-stream\">\n \n <div class=\"stream-section\">\n <h2>Exp\u00e9riences Professionnelles<\/h2>\n \n <div class=\"cv-table\">\n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">depuis 2024<\/div>\n <div class=\"cv-cell-details\">\n <h4>Com' \u00e0 la fran\u00e7aise<\/h4>\n <span>Brand & Web Designer<\/span>\n <ul>\n <li><strong>Gestion de projet & Conseil :<\/strong> Recueil des briefs clients, conseil strat\u00e9gique, \u00e9laboration de devis et pilotage des projets de la conception \u00e0 la livraison.<\/li>\n <li><strong>Branding & Identit\u00e9 Visuelle :<\/strong> Cr\u00e9ation d'identit\u00e9s de marque compl\u00e8tes (logotypes, palettes chromatiques, typographies) et d\u00e9clinaisons sur supports print et objets promotionnels.<\/li>\n <li><strong>UI\/UX Design & Web Design :<\/strong> Conception et d\u00e9veloppement de sites internet de A \u00e0 Z via WordPress, Elementor et Yootheme. Int\u00e9gration HTML et optimisation du r\u00e9f\u00e9rencement naturel (SEO).<\/li>\n <li><strong>Social Media & Content Creation :<\/strong> Conception visuelle, r\u00e9daction de contenus optimis\u00e9s pour les r\u00e9seaux sociaux, captation et montage vid\u00e9o.<\/li>\n <li><strong>Data & Performance :<\/strong> Analyse des indicateurs de performance web (trafic, taux de clic) et social media (port\u00e9e, engagement) pour ajuster les strat\u00e9gies.<\/li>\n <li><strong>Innovation :<\/strong> Int\u00e9gration responsable et pertinente des outils d'Intelligence Artificielle dans les processus cr\u00e9atifs, notamment pour le langage HTML.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">2024<\/div>\n <div class=\"cv-cell-details\">\n <h4>Biolane<\/h4>\n <span>Graphiste Digital<\/span>\n <ul>\n <li><strong>Cr\u00e9ation digitale :<\/strong> Production de contenus social media and de visuels e-commerce (banni\u00e8res, assets) pour le site de Biolane et les sites partenaires, dans le strict respect de la charte graphique de la marque.<\/li>\n <li><strong>Communication corporate :<\/strong> Conception de newsletters et de pr\u00e9sentations strat\u00e9giques destin\u00e9es aux partenaires internes, externes et aux influenceurs.<\/li>\n <li><strong>Vid\u00e9o & Motion :<\/strong> Captation en studio, tournage, montage, retouche chromatique et habillage graphique d'interviews et d'\u00e9v\u00e9nements promotionnels.<\/li>\n <li><strong>Photographie :<\/strong> Prises de vue en studio (packshots, fiches produits e-commerce) et cr\u00e9ation de visuels lifestyle pour les r\u00e9seaux sociaux.<\/li>\n <li><strong>\u00c9ditorial & Print :<\/strong> Conception de supports de communication papier (flyers promotionnels pour le lancement de nouveaux produits, \u00e9laboration de magazines ludiques destin\u00e9s aux enfants).<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">2019 \u2014 2024<\/div>\n <div class=\"cv-cell-details\">\n <h4>Libertie<\/h4>\n <span>Graphiste<\/span>\n <ul>\n <li><strong>Web & E-commerce :<\/strong> D\u00e9veloppement de l'interface du site internet (merchandising, home page), cr\u00e9ation de newsletters et de lookbooks hebdomadaires.<\/li>\n <li><strong>Cr\u00e9ation visuelle :<\/strong> Animation des r\u00e9seaux sociaux, illustration digitale et print, prises de vue et retouches photographiques.<\/li>\n <li><strong>Design Textile & Print :<\/strong> Conception de projets textiles de A \u00e0 Z (motifs, t-shirts, tote-bags) et cr\u00e9ation de supports imprim\u00e9s pour les boutiques et envois clients.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"stream-section\">\n <h2>Formations <span class=\"amp\">&<\/span> Dipl\u00f4mes<\/h2>\n \n <div class=\"cv-table\">\n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">2018-2019<\/div>\n <div class=\"cv-cell-details\">\n <h4 class=\"formation-title\">\u00c9cole du Louvre, Paris<\/h4>\n <span class=\"formation-degree\">Cursus Histoire de l'Art (en auditeur libre)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">2016-2018<\/div>\n <div class=\"cv-cell-details\">\n <h4 class=\"formation-title\">Institut Ste Genevi\u00e8ve, Paris<\/h4>\n <span class=\"formation-degree\">BTS Design Produits<\/span>\n <\/div>\n <\/div>\n \n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">2015-2016<\/div>\n <div class=\"cv-cell-details\">\n <h4 class=\"formation-title\">EPMC La Ruche, Paris<\/h4>\n <span class=\"formation-degree\">Mise \u00e0 niveau en Arts Appliqu\u00e9s<\/span>\n <\/div>\n <\/div>\n \n <div class=\"cv-row\">\n <div class=\"cv-cell-date\">2014-2015<\/div>\n <div class=\"cv-cell-details\">\n <h4 class=\"formation-title\">Universit\u00e9 Catholique de l'Ouest, Angers<\/h4>\n <span class=\"formation-degree\">Arts Plastiques | Licence 1<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/section>\n\n <\/div>\n\n <\/main>\n\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07fffc6 elementor-widget elementor-widget-html\" data-id=\"07fffc6\" 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 \u00c0 Propos \u2014 Madeleine Bastide Madeleine Bastide Direction artistique, UI\/UX design & Identit\u00e9 visuelle Contact \u2014 06.89.86.57.37 belmon.estors.madeleine@gmail.com linkedin.com\/in\/madeleine Expertises \u2014 UI\/UX & Web Design Brand & Digital Design Vid\u00e9o & Motion Outils IA Social Media Strat\u00e9gie Digitale Gestion de […]<\/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-16","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":43,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/madeleinebastide.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}