{"id":36,"date":"2026-02-12T15:28:07","date_gmt":"2026-02-12T15:28:07","guid":{"rendered":"https:\/\/melyo-agence.com\/?page_id=36"},"modified":"2026-03-03T15:07:43","modified_gmt":"2026-03-03T15:07:43","slug":"elementor-36","status":"publish","type":"page","link":"https:\/\/melyo-agence.com\/","title":{"rendered":"Melyo | L&rsquo;accompagnement visibilit\u00e9 de A \u00e0 Z"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"36\" class=\"elementor elementor-36\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48d9745 e-flex e-con-boxed e-con e-parent\" data-id=\"48d9745\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab84cb7 elementor-widget elementor-widget-html\" data-id=\"ab84cb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- CONFIGURATION G\u00c9N\u00c9RALE --- *\/\nhtml {\n    scroll-behavior: smooth;\n}\n\n#hero, #melyo, #accompagnement, #mathias, #avis, #questions {\n    scroll-margin-top: 90px;\n}\n\n\/* --- LE HEADER DYNAMIQUE --- *\/\n#melyo-dynamic-header {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100px; \/* Un peu plus haut au d\u00e9part pour l'\u00e9l\u00e9gance *\/\n    background: transparent; \/* Transparent au repos *\/\n    display: flex;\n    align-items: center;\n    z-index: 10000;\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); \/* Transition ultra fluide *\/\n    padding: 0 40px;\n    box-sizing: border-box;\n    border-bottom: 1px solid transparent;\n}\n\n\/* --- \u00c9TAT AU SCROLL (APPARENCE \u00c9L\u00c9GANTE) --- *\/\n#melyo-dynamic-header.scrolled {\n    height: 75px;\n    background: rgba(14, 77, 146, 0.95); \/* Bleu Royal avec opacit\u00e9 *\/\n    backdrop-filter: blur(15px); \/* Effet de flou glassmorphism *\/\n    -webkit-backdrop-filter: blur(15px);\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.header-inner {\n    width: 100%;\n    max-width: 1300px;\n    margin: 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n\/* --- LOGO --- *\/\n.logo-container img {\n    height: 60px;\n    width: auto;\n    transition: all 0.4s ease;\n    \/* Si ton logo a un fond blanc (JPG), cette ombre douce l'int\u00e8gre mieux *\/\n    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.05)); \n}\n\n.scrolled .logo-container img {\n    height: 48px;\n}\n\n\/* --- NAVIGATION --- *\/\n.nav-links {\n    display: flex;\n    gap: 30px;\n    align-items: center;\n}\n\n.nav-links a {\n    text-decoration: none;\n    font-family: 'Questrial', sans-serif;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--royal-blue); \/* Bleu Royal quand on est en haut *\/\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n\/* Les liens deviennent blancs quand le header devient bleu *\/\n.scrolled .nav-links a {\n    color: #ffffff;\n    opacity: 0.9;\n}\n\n.nav-links a:hover {\n    transform: translateY(-2px);\n    color: var(--royal-blue-medium);\n}\n\n.scrolled .nav-links a:hover {\n    color: #4a9eff; \/* Bleu clair au survol sur fond bleu *\/\n    opacity: 1;\n}\n\n\/* --- BOUTON CONTACT --- *\/\n.btn-contact {\n    background: var(--royal-blue); \/* Bouton Bleu au d\u00e9part *\/\n    color: #ffffff !important;\n    padding: 14px 28px;\n    border-radius: 50px;\n    font-family: 'Questrial', sans-serif;\n    font-weight: 900;\n    font-size: 14px;\n    text-decoration: none !important;\n    transition: all 0.4s ease;\n    box-shadow: 0 8px 20px rgba(14, 77, 146, 0.2);\n}\n\n\/* Le bouton devient blanc au scroll *\/\n.scrolled .btn-contact {\n    background: #ffffff;\n    color: var(--royal-blue) !important;\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.btn-contact:hover {\n    transform: scale(1.05) translateY(-2px);\n    box-shadow: 0 12px 25px rgba(14, 77, 146, 0.3);\n}\n\n.scrolled .btn-contact:hover {\n    background: #f8fafd;\n    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);\n}\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 1024px) {\n    .nav-links { display: none; }\n    #melyo-dynamic-header { padding: 0 20px; height: 80px; }\n}\n<\/style>\n\n<header id=\"melyo-dynamic-header\">\n    <div class=\"header-inner\">\n        <a href=\"#hero\" class=\"logo-container\">\n            <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/Logo_melyo_officiel-1.jpg\" alt=\"Logo Melyo\">\n        <\/a>\n\n        <nav class=\"nav-links\">\n            <a href=\"#hero\">Accueil<\/a>\n            <a href=\"#melyo\">Melyo<\/a>\n            <a href=\"#accompagnement\">M\u00e9thode<\/a>\n            <a href=\"#mathias\">Histoire<\/a>\n            <a href=\"#avis\">T\u00e9moignages<\/a>\n            <a href=\"#questions\">FAQ<\/a>\n        <\/nav>\n\n        <a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" target=\"_blank\" class=\"btn-contact\" rel=\"noopener\">\n            Nous contacter\n        <\/a>\n    <\/div>\n<\/header>\n\n<script>\nwindow.onscroll = function() {\n    var header = document.getElementById(\"melyo-dynamic-header\");\n    if (window.pageYOffset > 30) {\n        header.classList.add(\"scrolled\");\n    } else {\n        header.classList.remove(\"scrolled\");\n    }\n};\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd997cd elementor-widget elementor-widget-html\" data-id=\"bd997cd\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"hero\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- IMPORTATION POLICE --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial:wght@400;700;900&display=swap');\n\n\/* --- VARIABLES D'IDENTIT\u00c9 --- *\/\n:root {\n    --royal-blue: #0E4D92; \n    --royal-blue-medium: #1F548E; \n    --royal-blue-initial: #3D78B5;\n    --royal-blue-light: rgba(14, 77, 146, 0.1);\n    --text-deep: #122231;\n    --text-muted: #3e4c59;\n    --white-muted: #A5C7F0; \n    --font-melyo: 'Questrial', sans-serif;\n}\n\n\/* --- SECTION PRINCIPALE --- *\/\n.melyo-hero {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 60px;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 20px;\n    font-family: var(--font-melyo);\n    position: relative;\n    overflow: hidden;\n}\n\n.hero-text { flex: 1.3; position: relative; z-index: 2; }\n\n\/* TITRE AVEC ANIMATION FLOU *\/\n.hero-title-crescendo {\n    font-size: 85px; \n    line-height: 1.05; \n    margin-bottom: 35px;\n    letter-spacing: -3px;\n    text-align: left;\n}\n\n.step-1, .step-2, .step-3 {\n    display: inline-block;\n    opacity: 0;\n    filter: blur(12px);\n    animation: blurReveal 1s ease-out forwards;\n}\n\n.step-1 { color: var(--royal-blue-initial); animation-delay: 0.2s; font-weight: 400; }\n.step-2 { font-weight: 700; color: var(--royal-blue-medium); animation-delay: 0.5s; }\n.step-3 { \n    font-weight: 900; \n    color: var(--royal-blue); \n    border-bottom: 8px solid var(--royal-blue);\n    padding-bottom: 2px;\n    line-height: 0.9;\n    animation-delay: 0.8s;\n    text-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.4);\n}\n\n@keyframes blurReveal {\n    to { opacity: 1; filter: blur(0); }\n}\n\n\/* SYST\u00c8ME DE LUCIOLES *\/\n.firefly-container {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.firefly {\n    position: absolute;\n    width: 6px; height: 6px;\n    background: var(--royal-blue-initial);\n    border-radius: 50%;\n    filter: blur(2px);\n    box-shadow: 0 0 10px var(--royal-blue-initial), 0 0 20px var(--royal-blue-medium);\n    opacity: 0;\n    animation: fly 7s infinite ease-in-out;\n}\n\n@keyframes fly {\n    0% { transform: translate(0,0) scale(1); opacity: 0; }\n    20% { opacity: 0.8; }\n    80% { opacity: 0.6; }\n    100% { transform: translate(60px, -80px) scale(0.5); opacity: 0; }\n}\n\n\/* --- SOUS-TITRE & CTA --- *\/\n.hero-subtitle {\n    font-size: 20px;\n    line-height: 1.7;\n    color: var(--text-muted);\n    margin-bottom: 40px;\n    max-width: 600px;\n}\n\n.highlight-obj {\n    font-weight: 700;\n    color: var(--text-deep);\n    border-bottom: 3px solid var(--royal-blue);\n    padding-bottom: 2px;\n}\n\n.hero-cta {\n    display: inline-block;\n    background: var(--royal-blue);\n    color: #ffffff !important;\n    padding: 16px 38px; \n    border-radius: 50px;\n    text-decoration: none !important;\n    font-weight: 700;\n    font-size: 17px;\n    transition: all 0.3s ease;\n    box-shadow: 0 10px 30px rgba(14, 77, 146, 0.25);\n    border: 2px solid var(--royal-blue);\n}\n\n.hero-cta:hover {\n    background: #ffffff;\n    color: var(--royal-blue) !important;\n    transform: translateY(-3px);\n    box-shadow: 0 15px 35px rgba(14, 77, 146, 0.35);\n}\n\n.cta-note {\n    display: block;\n    margin-top: 15px;\n    font-size: 14px;\n    color: var(--text-muted);\n    font-style: italic;\n    opacity: 0.8;\n}\n\n\/* --- VISUEL DROITE --- *\/\n.hero-visual {\n    flex: 0.7;\n    display: flex;\n    justify-content: center;\n    perspective: 1200px;\n    z-index: 2;\n}\n\n.roadmap-card {\n    background: var(--royal-blue); \n    backdrop-filter: blur(12px);\n    padding: 50px 40px;\n    border-radius: 40px;\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    box-shadow: 0 30px 70px rgba(14, 77, 146, 0.3);\n    min-height: 550px;\n    width: 380px;\n    display: flex;\n    flex-direction: column;\n    animation: floatCard 8s ease-in-out infinite;\n    position: relative;\n    overflow: hidden;\n}\n\n@keyframes floatCard {\n    0%, 100% { transform: translateY(0) rotateY(0deg); }\n    50% { transform: translateY(-15px) rotateY(3deg); }\n}\n\n.roadmap-header-group {\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n.roadmap-title {\n    font-size: 13px;\n    font-weight: 900;\n    color: var(--white-muted);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    margin-bottom: 8px;\n}\n\n.roadmap-subtitle {\n    font-size: 15px;\n    color: #ffffff;\n    font-weight: 700;\n}\n\n.roadmap-body {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    margin-bottom: 40px;\n}\n\n.roadmap-line {\n    position: absolute;\n    left: 25px; top: 10px; bottom: 10px;\n    width: 3px;\n    background: rgba(255,255,255,0.1);\n    border-radius: 10px;\n    z-index: 1;\n}\n\n.roadmap-line::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background: linear-gradient(to bottom, var(--white-muted), #ffffff);\n    border-radius: 10px;\n    animation: growLine 3s ease-out forwards;\n    transform-origin: top;\n}\n\n@keyframes growLine {\n    0% { transform: scaleY(0); }\n    100% { transform: scaleY(1); }\n}\n\n.line-glint {\n    position: absolute;\n    top: -50px; left: 0; width: 100%; height: 60px;\n    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8), transparent);\n    z-index: 2;\n    animation: glintMove 2.5s infinite linear;\n}\n\n@keyframes glintMove {\n    0% { top: -20%; opacity: 0; }\n    50% { opacity: 1; }\n    100% { top: 120%; opacity: 0; }\n}\n\n.phase-item {\n    position: relative;\n    padding-left: 75px;\n    z-index: 3;\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.phase-item:hover { transform: translateX(10px); }\n\n.phase-number {\n    position: absolute;\n    left: 0; top: 50%;\n    transform: translateY(-50%);\n    width: 50px; height: 50px;\n    background: #ffffff;\n    color: var(--royal-blue);\n    border-radius: 14px;\n    display: flex;\n    align-items: center; justify-content: center;\n    font-weight: 900; font-size: 18px;\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n}\n\n.phase-title { \n    font-size: 20px; \n    font-weight: 900; \n    color: #ffffff; \n    margin-bottom: 4px;\n}\n\n.phase-desc { \n    font-size: 14px; \n    color: var(--white-muted); \n    line-height: 1.4; \n}\n\n.roadmap-footer { text-align: center; margin-top: auto; }\n\n.roadmap-btn-secondary {\n    display: inline-block;\n    padding: 12px 30px;\n    border: 2px solid #ffffff;\n    border-radius: 50px;\n    color: #ffffff;\n    text-decoration: none;\n    font-weight: 700;\n    font-size: 14px;\n    transition: 0.3s;\n}\n\n.roadmap-btn-secondary:hover { background: #ffffff; color: var(--royal-blue); }\n\n\/* MOBILE RESPONSIVE *\/\n@media (max-width: 980px) {\n    .melyo-hero { flex-direction: column; text-align: center; padding: 40px 20px; }\n    .hero-text { margin-bottom: 60px; }\n    .hero-title-crescendo { font-size: 55px; letter-spacing: -2px; }\n    .firefly-container { display: none; }\n    .roadmap-card { width: 100%; max-width: 380px; }\n}\n<\/style>\n\n<section class=\"melyo-hero\">\n    <div class=\"firefly-container\">\n        <div class=\"firefly\" style=\"top:20%; left:10%; animation-duration: 6s;\"><\/div>\n        <div class=\"firefly\" style=\"top:50%; left:60%; animation-duration: 8s;\"><\/div>\n        <div class=\"firefly\" style=\"top:70%; left:30%; animation-duration: 5s;\"><\/div>\n        <div class=\"firefly\" style=\"top:30%; left:80%; animation-duration: 7s;\"><\/div>\n        <div class=\"firefly\" style=\"top:80%; left:10%; animation-duration: 9s;\"><\/div>\n    <\/div>\n\n    <div class=\"hero-text\">\n        <h1 class=\"hero-title-crescendo\">\n            <span class=\"step-1\">Structurez.<\/span><br>\n            <span class=\"step-2\">Publiez.<\/span><br>\n            <span class=\"step-3\">Convertissez.<\/span>\n        <\/h1>\n        <p class=\"hero-subtitle\">\n            Nous accompagnons les ind\u00e9pendants sur <strong>90 jours.<\/strong><br>\n            <span class=\"highlight-obj\">Objectif<\/span> : rendre votre visibilit\u00e9 digitale simple et accessible.\n        <\/p>\n        \n        <a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" target=\"_blank\" class=\"hero-cta\" rel=\"noopener\">\n            Discuter de votre projet\n        <\/a>\n        <span class=\"cta-note\">*\u00e9videmment, l'appel est gratuit ici...<\/span>\n    <\/div>\n\n    <div class=\"hero-visual\">\n        <div class=\"roadmap-card\">\n            <div class=\"roadmap-header-group\">\n                <div class=\"roadmap-title\">Parcours d'accompagnement<\/div>\n                <div class=\"roadmap-subtitle\">La m\u00e9thode compl\u00e8te sur 3 mois<\/div>\n            <\/div>\n            \n            <div class=\"roadmap-body\">\n                <div class=\"roadmap-line\">\n                    <div class=\"line-glint\"><\/div>\n                <\/div>\n                \n                <div class=\"phase-item\">\n                    <div class=\"phase-number\">01<\/div>\n                    <div class=\"phase-title\">Structurez<\/div>\n                    <div class=\"phase-desc\">Audit complet & fondations de marque.<\/div>\n                <\/div>\n\n                <div class=\"phase-item\">\n                    <div class=\"phase-number\">02<\/div>\n                    <div class=\"phase-title\">Publiez<\/div>\n                    <div class=\"phase-desc\">Strat\u00e9gie \u00e9ditoriale & cr\u00e9ation de contenus.<\/div>\n                <\/div>\n\n                <div class=\"phase-item\">\n                    <div class=\"phase-number\">03<\/div>\n                    <div class=\"phase-title\">Convertissez<\/div>\n                    <div class=\"phase-desc\">Syst\u00e8me de vente & automatisation.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"roadmap-footer\">\n                <a href=\"#\" class=\"roadmap-btn-secondary\">En savoir plus<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49429b2 elementor-widget elementor-widget-html\" data-id=\"49429b2\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"douleurs\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES --- *\/\n:root {\n    --melyo-red: #E63946;\n    --melyo-red-soft: rgba(230, 57, 70, 0.85);\n    --melyo-blue: #0E4D92;\n    --text-deep: #122231;\n    --text-muted: #4a5a6a;\n    --bg-white: #ffffff;\n    \/* D\u00e9grad\u00e9 pour l'effet Shiny Pok\u00e9mon *\/\n    --shiny-grad: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 55%, transparent 60%);\n}\n\n.melyo-problem-section {\n    background: var(--bg-white);\n    padding: 100px 20px;\n    font-family: 'Questrial', sans-serif;\n    position: relative;\n    overflow: hidden;\n}\n\n\/* --- ANIMATIONS G\u00c9N\u00c9RALES --- *\/\n\/* Flottement l\u00e9ger des cartes au repos *\/\n@keyframes gentleFloat {\n    0%, 100% { transform: translateY(0) scale(1); }\n    50% { transform: translateY(-8px) scale(1); }\n}\n\n\/* Passage de l'effet Shiny au clic *\/\n@keyframes shinyPass {\n    0% { transform: translate(-30%, -30%) rotate(0deg); opacity: 0; }\n    10% { opacity: 1; }\n    100% { transform: translate(30%, 30%) rotate(10deg); opacity: 1; }\n}\n\n\/* Flux d'\u00e9nergie \"Ligne de vie\" du footer *\/\n@keyframes lifelineFlow {\n    0% { background-position: 0% 50%; }\n    50% { background-position: 100% 50%; }\n    100% { background-position: 0% 50%; }\n}\n\n\/* --- HEADER --- *\/\n.problem-container {\n    max-width: 1100px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 5;\n}\n\n.problem-header {\n    text-align: center;\n    margin-bottom: 70px;\n}\n.problem-header h2 {\n    font-size: 42px; font-weight: 900; color: var(--text-deep);\n    margin-bottom: 20px; letter-spacing: -1px;\n    line-height: 1.2;\n}\n.underline-red {\n    border-bottom: 4px solid var(--melyo-red);\n    padding-bottom: 2px;\n    display: inline-block;\n}\n.problem-subtitle {\n    font-size: 20px; color: var(--text-muted); font-weight: 400; margin-top: 15px;\n}\n\n\/* --- GRILLE & CARTES --- *\/\n.problem-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n    perspective: 1500px;\n}\n\n.problem-card {\n    position: relative;\n    height: 450px;\n    cursor: pointer;\n    \/* \u00c9tat initial avant apparition *\/\n    opacity: 0;\n    transform: translateY(50px) scale(0.95);\n    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n\/* \u00c9tat visible + Activation du flottement *\/\n.problem-card.is-visible {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    \/* Le flottement commence apr\u00e8s l'arriv\u00e9e de la carte *\/\n    animation: gentleFloat 5s ease-in-out infinite 1s;\n}\n\/* D\u00e9calage du flottement pour un effet plus naturel *\/\n.problem-card:nth-child(2).is-visible { animation-delay: 1.5s; }\n.problem-card:nth-child(3).is-visible { animation-delay: 2s; }\n\n.card-inner {\n    position: relative;\n    width: 100%; height: 100%;\n    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n    transform-style: preserve-3d;\n}\n\n.flipped .card-inner { transform: rotateY(180deg); }\n\n.card-front, .card-back {\n    position: absolute;\n    width: 100%; height: 100%;\n    backface-visibility: hidden;\n    border-radius: 40px;\n    padding: 45px 30px;\n    display: flex; flex-direction: column;\n    justify-content: center; align-items: center;\n    box-shadow: 0 15px 45px rgba(0,0,0,0.06);\n    overflow: hidden;\n}\n\n.card-front { \n    background: white; \n    border: 1px solid rgba(230, 57, 70, 0.1); \n}\n\n.card-back { \n    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);\n    border: 2px solid var(--melyo-blue);\n    transform: rotateY(180deg);\n    position: relative;\n}\n\n\/* L'effet Shiny Pok\u00e9mon *\/\n.card-back::after {\n    content: '';\n    position: absolute;\n    top: -100%; left: -100%;\n    width: 300%; height: 300%;\n    background: var(--shiny-grad);\n    pointer-events: none; z-index: 3; opacity: 0;\n}\n.flipped .card-back::after {\n    animation: shinyPass 1.8s ease-in-out forwards 0.2s;\n}\n\n\/* --- CONTENU CARTES --- *\/\n.icon-wrap { width: 65px; height: 65px; margin-bottom: 30px; color: var(--melyo-red); transition: transform 0.3s ease; }\n.problem-card:hover .card-front .icon-wrap { transform: scale(1.1); }\n.card-back .icon-wrap { color: var(--melyo-blue); }\n\n.card-title { font-size: 24px; font-weight: 700; color: var(--text-deep); margin-bottom: 20px; }\n.card-text { font-size: 16px; color: var(--text-muted); line-height: 1.6; }\n.card-text b { color: var(--text-deep); font-weight: 700; }\n.card-back .card-text b { color: var(--melyo-blue); }\n\n.click-hint {\n    margin-top: 30px; font-size: 11px; font-weight: 800;\n    text-transform: uppercase; letter-spacing: 2px;\n    color: var(--melyo-red); opacity: 0.7;\n}\n\n\/* --- FOOTER \u00c9NERGIE --- *\/\n.problem-footer-wrap {\n    margin: 80px auto 0;\n    max-width: 800px;\n    position: relative;\n    z-index: 1;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: all 1s ease 0.8s;\n}\n\n.problem-footer-wrap.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* Le conteneur blanc avec bordure rouge permanente *\/\n.problem-footer-inner {\n    position: relative;\n    background: white;\n    padding: 35px 40px;\n    border-radius: 30px;\n    z-index: 2;\n    text-align: center;\n    border: 2px solid var(--melyo-red); \/* Contour permanent *\/\n    background-clip: padding-box; \/* Important pour que le flux ne passe pas sous le fond blanc *\/\n}\n\n\/* Le flux d'\u00e9nergie \"Ligne de vie\" derri\u00e8re *\/\n.problem-footer-wrap::after {\n    content: '';\n    position: absolute;\n    top: -5px; left: -5px; right: -5px; bottom: -5px; \/* L\u00e9g\u00e8rement plus grand que le bloc *\/\n    border-radius: 35px;\n    z-index: -1;\n    \/* D\u00e9grad\u00e9 complexe pour l'effet \u00e9lectrique\/vie *\/\n    background: linear-gradient(90deg, var(--melyo-red), #ffc3c8, #ffffff, #ffc3c8, var(--melyo-red));\n    background-size: 300% 100%;\n    animation: lifelineFlow 4s linear infinite;\n    filter: blur(4px); \/* Flou pour l'effet de halo d'\u00e9nergie *\/\n    opacity: 0.8;\n}\n\n.problem-footer-inner h4 { \n    font-size: 22px; margin: 0; color: var(--text-deep); \n    font-weight: 500; line-height: 1.4;\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 900px) {\n    .problem-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }\n    .problem-card { height: auto; min-height: 400px; }\n    .problem-header h2 { font-size: 32px; }\n    .problem-card.is-visible { animation: none; } \/* D\u00e9sactive le flottement sur mobile pour perf *\/\n}\n<\/style>\n\n<section class=\"melyo-problem-section\">\n    <div class=\"problem-container\">\n        \n        <div class=\"problem-header\">\n            <h2>L\u2019expertise est l\u00e0, mais le message se <span class=\"underline-red\">perd.<\/span><\/h2>\n            <p class=\"problem-subtitle\">Ressentez-vous l'un de ces points de friction ?<\/p>\n        <\/div>\n\n        <div class=\"problem-grid\">\n            \n            <div class=\"problem-card\" onclick=\"this.classList.toggle('flipped')\">\n                <div class=\"card-inner\">\n                    <div class=\"card-front\">\n                        <div class=\"icon-wrap\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\" \/>\n                                <circle cx=\"12\" cy=\"12\" r=\"1\" fill=\"currentColor\"\/>\n                                <path d=\"M12 3v3m0 12v3m9-9h-3M6 12H3\" stroke-linecap=\"round\"\/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"card-title\">Offre peu claire<\/h3>\n                        <p class=\"card-text\">Pr\u00e9senter votre expertise de mani\u00e8re <b>simple et attractive<\/b> est un d\u00e9fi. R\u00e9sultat : on ne comprend pas <b>imm\u00e9diatement pourquoi vous choisir.<\/b><\/p>\n                        <span class=\"click-hint\">Voir la solution<\/span>\n                    <\/div>\n                    <div class=\"card-back\">\n                        <div class=\"icon-wrap\">\n                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\n                        <\/div>\n                        <p class=\"card-text\">Votre offre doit se r\u00e9sumer en <b>une seule phrase<\/b>, avec des mots simples, une notion de dur\u00e9e et un <b>b\u00e9n\u00e9fice clair<\/b> imm\u00e9diatement palpable.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"problem-card\" onclick=\"this.classList.toggle('flipped')\">\n                <div class=\"card-inner\">\n                    <div class=\"card-front\">\n                        <div class=\"icon-wrap\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n                        <\/div>\n                        <h3 class=\"card-title\">Manque de temps<\/h3>\n                        <p class=\"card-text\">Entre le quotidien et la gestion client, il reste <b>peu de place<\/b> pour une strat\u00e9gie efficace. Vous testez seul et <b>perdez des mois \u00e0 it\u00e9rer.<\/b><\/p>\n                        <span class=\"click-hint\">Voir la solution<\/span>\n                    <\/div>\n                    <div class=\"card-back\">\n                        <div class=\"icon-wrap\">\n                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n                        <\/div>\n                        <p class=\"card-text\">Le secret est de choisir <b>la seule strat\u00e9gie<\/b> adapt\u00e9e \u00e0 vos contraintes r\u00e9elles. Arr\u00eatez de tester, <b>appliquez ce qui fonctionne<\/b>.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"problem-card\" onclick=\"this.classList.toggle('flipped')\">\n                <div class=\"card-inner\">\n                    <div class=\"card-front\">\n                        <div class=\"icon-wrap\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8m-4-4v4\"\/><\/svg>\n                        <\/div>\n                        <h3 class=\"card-title\">Codes du digital<\/h3>\n                        <p class=\"card-text\">Algorithmes, marketing... vous avez tent\u00e9 sans r\u00e9sultats, mais vous savez que c\u2019est devenu un <b>levier incontournable<\/b> aujourd'hui.<\/p>\n                        <span class=\"click-hint\">Voir la solution<\/span>\n                    <\/div>\n                    <div class=\"card-back\">\n                        <div class=\"icon-wrap\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                              <path d=\"M3 17l6-6 4 4 8-8\"><\/path>\n                              <path d=\"M14 7h7v7\"><\/path>\n                              <circle cx=\"3\" cy=\"17\" r=\"2\"><\/circle>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"card-text\">\u00c7a s\u2019apprend <b>\u00e9tape par \u00e9tape<\/b>. Repartez avec un <b>plan d\u2019action simple<\/b>, clair et personnalis\u00e9 lors d'un \u00e9change gratuit.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"problem-footer-wrap\">\n            <div class=\"problem-footer-inner\">\n                <h4>La visibilit\u00e9 sans strat\u00e9gie est une <b>d\u00e9pense d'\u00e9nergie inutile.<\/b><\/h4>\n            <\/div>\n        <\/div>\n        \n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const observerOptions = { threshold: 0.2 };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                \/\/ Apparition en cascade des cartes avec petit d\u00e9lai\n                entry.target.querySelectorAll('.problem-card').forEach((card, index) => {\n                    setTimeout(() => {\n                        card.classList.add('is-visible');\n                    }, index * 250); \/\/ 250ms de d\u00e9lai entre chaque carte\n                });\n                \n                \/\/ Apparition du footer apr\u00e8s les cartes\n                const footer = entry.target.querySelector('.problem-footer-wrap');\n                if(footer) footer.classList.add('is-visible');\n                \n                observer.unobserve(entry.target);\n            }\n        });\n    }, observerOptions);\n\n    observer.observe(document.querySelector('.melyo-problem-section'));\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe283f elementor-widget elementor-widget-html\" data-id=\"2fe283f\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"melyo\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES & POLICES --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial:wght@400;700;900&display=swap');\n\n:root {\n    --royal-blue: #0E4D92; \n    --royal-blue-dark: #051d3a;\n    --royal-blue-shine: rgba(14, 77, 146, 0.8); \n    --royal-blue-lighter-solid: #2b6cb8; \n    --strong-white-opale: rgba(255, 255, 255, 0.92);\n    --text-deep: #122231;\n    --font-melyo: 'Questrial', sans-serif;\n}\n\n\/* --- SECTION PRINCIPALE --- *\/\n.melyo-why-section {\n    max-width: 1200px;\n    margin: 80px auto;\n    padding: 80px 40px;\n    background: radial-gradient(circle at center, var(--royal-blue) 0%, var(--royal-blue-dark) 100%);\n    font-family: var(--font-melyo);\n    position: relative;\n    overflow: hidden;\n    border-radius: 60px;\n    box-shadow: 0 40px 100px rgba(6, 26, 51, 0.5);\n    perspective: 1000px;\n    opacity: 0;\n    transform: translateY(100px);\n    transition: all 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);\n}\n\n.melyo-why-section.section-revealed {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* ORBES *\/\n.bg-orb {\n    position: absolute;\n    width: 500px; height: 500px;\n    background: radial-gradient(circle, rgba(14, 77, 146, 0.25) 0%, transparent 70%);\n    border-radius: 50%;\n    filter: blur(60px);\n    z-index: 1;\n    pointer-events: none;\n    animation: orbFloat 25s infinite alternate ease-in-out;\n}\n@keyframes orbFloat {\n    0% { transform: translate(-20%, -20%); }\n    100% { transform: translate(20%, 10%); }\n}\n\n\/* --- TITRE --- *\/\n.why-header { text-align: center; margin-bottom: 60px; position: relative; z-index: 10; }\n.why-header h2 {\n    font-size: 44px; font-weight: 900; color: #ffffff;\n    letter-spacing: -1.5px; margin: 0;\n}\n.underline-highlight {\n    position: relative; display: inline-block;\n    border-bottom: 3px solid var(--royal-blue-lighter-solid);\n}\n\n\/* --- GRILLE --- *\/\n.why-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n    position: relative;\n    z-index: 10;\n}\n\n\/* --- CARTE --- *\/\n.why-card {\n    background: var(--strong-white-opale);\n    backdrop-filter: blur(20px);\n    padding: 40px 35px;\n    border-radius: 40px;\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    transition: transform 0.1s ease-out, box-shadow 0.3s ease;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    overflow: hidden;\n    transform-style: preserve-3d;\n    opacity: 0;\n    transform: translateY(40px);\n}\n\n.why-card.card-revealed {\n    opacity: 1;\n    transform: translateY(0);\n    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n\/* Spotlight cartes *\/\n.why-card::before {\n    content: '';\n    position: absolute;\n    top: var(--y); left: var(--x);\n    width: 450px; height: 450px;\n    background: radial-gradient(circle, var(--royal-blue-shine) 0%, transparent 65%);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    mix-blend-mode: overlay;\n}\n.why-card:hover::before { opacity: 1; }\n.why-card:hover { box-shadow: 0 20px 50px rgba(14, 77, 146, 0.15); border-color: #fff; }\n\n.why-icon { \n    width: 45px; height: 45px; \n    color: var(--royal-blue); \n    margin-bottom: 25px;\n    transition: 0.4s ease;\n}\n.why-card:hover .why-icon { transform: translateZ(45px) scale(1.1); color: var(--royal-blue-lighter-solid); }\n\n.why-card h3 { font-size: 26px; font-weight: 800; color: var(--text-deep); margin-bottom: 18px; }\n.why-card p { font-size: 16px; line-height: 1.7; color: #444; margin: 0; }\n.highlight-blue { color: var(--royal-blue); font-weight: 800; }\n\n\/* --- FOOTER & NOUVEAU BOUTON --- *\/\n.why-footer { \n    text-align: center; margin-top: 70px; \n    position: relative; z-index: 10;\n}\n\n.btn-melyo-white {\n    display: inline-block;\n    background: #ffffff;\n    color: var(--royal-blue) !important;\n    padding: 18px 55px;\n    border-radius: 100px;\n    font-weight: 800;\n    font-size: 18px;\n    text-decoration: none !important;\n    position: relative;\n    overflow: hidden;\n    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n}\n\n\/* Effet de balayage lumineux (Shine) *\/\n.btn-melyo-white::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -150%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);\n    transform: skewX(-25deg);\n    transition: 0.6s;\n}\n\n.btn-melyo-white:hover {\n    background: #ffffff;\n    transform: translateY(-3px) scale(1.02);\n    \/* Surbrillance ext\u00e9rieure (Glow) *\/\n    box-shadow: 0 15px 45px rgba(255, 255, 255, 0.3), 0 0 20px rgba(14, 77, 146, 0.2);\n    color: var(--royal-blue-lighter-solid) !important;\n}\n\n\/* D\u00e9clenchement de la surbrillance interne au survol *\/\n.btn-melyo-white:hover::after {\n    left: 150%;\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 992px) {\n    .why-grid { grid-template-columns: 1fr; gap: 25px; }\n    .melyo-why-section { padding: 60px 30px; border-radius: 40px; }\n    .why-header h2 { font-size: 34px; }\n}\n<\/style>\n\n<section class=\"melyo-why-section\" id=\"melyo-why-trigger\">\n    <div class=\"bg-orb\"><\/div>\n\n    <div class=\"why-container\">\n        <div class=\"why-header\">\n            <h2>Pourquoi choisir <span class=\"underline-highlight\">Melyo<\/span> ?<\/h2>\n        <\/div>\n\n        <div class=\"why-grid\">\n            <div class=\"why-card js-tilt-card\">\n                <svg class=\"why-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><path d=\"M9 12l2 2 4-4\"><\/path><\/svg>\n                <h3>Transparence<\/h3>\n                <p>Prestation <span class=\"highlight-blue\">100% personnalis\u00e9e<\/span> de A \u00e0 Z. Accompagnement complet sans co\u00fbts cach\u00e9s. <\/p>\n            <\/div>\n\n            <div class=\"why-card js-tilt-card\">\n                <svg class=\"why-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 8v8\"><\/path><path d=\"M8 12h8\"><\/path><\/svg>\n                <h3>Engagement<\/h3>\n                <p>Rendre <span class=\"highlight-blue\">accessible<\/span> la visibilit\u00e9 digitale. Permettre \u00e0 des personnes qui n\u2019ont pas grandi \u00e0 l\u2019\u00e8re du num\u00e9rique d\u2019acc\u00e9der \u00e0 des m\u00e9thodes pour construire une image <span class=\"highlight-blue\">align\u00e9e \u00e0 leurs valeurs<\/span>.<\/p>\n            <\/div>\n\n            <div class=\"why-card js-tilt-card\">\n                <svg class=\"why-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path><\/svg>\n                <h3>R\u00e9activit\u00e9<\/h3>\n                <p>Interlocuteur unique pour maintenir un lien continu, <span class=\"highlight-blue\">r\u00e9ponse en 24h<\/span>.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"why-footer\">\n            <a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" target=\"_blank\" class=\"btn-melyo-white\" rel=\"noopener\">Discutons ensemble ?<\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ 1. Tilt sur les cartes uniquement\n    const cards = document.querySelectorAll('.js-tilt-card');\n    cards.forEach(card => {\n        card.addEventListener('mousemove', e => {\n            const rect = card.getBoundingClientRect();\n            const x = e.clientX - rect.left;\n            const y = e.clientY - rect.top;\n            card.style.setProperty('--x', `${x}px`);\n            card.style.setProperty('--y', `${y}px`);\n            const centerX = rect.width \/ 2;\n            const centerY = rect.height \/ 2;\n            const rotateX = (y - centerY) \/ 15;\n            const rotateY = (centerX - x) \/ 15;\n            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.01, 1.01, 1.01)`;\n        });\n        card.addEventListener('mouseleave', () => {\n            card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;\n        });\n    });\n\n    \/\/ 2. Animation d'entr\u00e9e\n    const sectionTrigger = document.querySelector('#melyo-why-trigger');\n    const internalCards = sectionTrigger.querySelectorAll('.why-card');\n    const sectionObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('section-revealed');\n                setTimeout(() => {\n                     internalCards.forEach((card, index) => {\n                        setTimeout(() => { card.classList.add('card-revealed'); }, index * 250);\n                    });\n                }, 600);\n                sectionObserver.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.25 });\n    sectionObserver.observe(sectionTrigger);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a72b63d elementor-widget elementor-widget-html\" data-id=\"a72b63d\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"expertise\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- POLICES & STYLE GLOBAL --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@200;300&family=Questrial&display=swap');\n\n.stats-section {\n    position: relative;\n    padding: 80px 20px;\n    max-width: 1200px;\n    margin: 0 auto;\n    font-family: 'Questrial', sans-serif;\n    color: #122231;\n    overflow: hidden;\n}\n\n\/* --- D\u00c9CORATION D'ARRI\u00c8RE-PLAN --- *\/\n.stats-bg-deco {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    z-index: 0;\n    pointer-events: none;\n}\n\n.bg-circle {\n    position: absolute;\n    border-radius: 50%;\n    border: 1px solid rgba(14, 77, 146, 0.1);\n}\n\n.c1 { width: 800px; height: 800px; top: -300px; left: -200px; animation: rotateBg 120s linear infinite; }\n.c2 { width: 500px; height: 500px; bottom: -150px; right: -100px; border-color: rgba(14, 77, 146, 0.05); animation: rotateBgReverse 90s linear infinite; }\n\n@keyframes rotateBg { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n@keyframes rotateBgReverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }\n\n\/* --- GRILLE ET CARTES --- *\/\n.stats-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n    position: relative;\n    z-index: 1;\n}\n\n.stat-card {\n    background: #ffffff;\n    border: 1px solid rgba(14, 77, 146, 0.1);\n    border-radius: 24px;\n    padding: 50px 30px;\n    text-align: center;\n    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);\n    opacity: 0;\n    transform: translateY(30px);\n}\n\n.stat-card.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.stat-card:hover {\n    border-color: #0E4D92;\n    transform: translateY(-5px);\n    box-shadow: 0 20px 50px rgba(14, 77, 146, 0.15);\n}\n\n\/* --- TYPOGRAPHIE DES CHIFFRES --- *\/\n.stat-number-wrapper {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 200;\n    font-size: 72px;\n    color: #122231;\n    margin-bottom: 15px;\n    line-height: 1;\n    display: flex;\n    justify-content: center;\n    align-items: baseline;\n}\n\n.stat-value { color: #0E4D92; font-weight: 300; }\n.stat-prefix, .stat-suffix { font-size: 36px; font-weight: 300; color: #0E4D92; }\n\n.stat-title {\n    font-size: 20px;\n    font-weight: 700;\n    margin-bottom: 15px;\n    color: #122231;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n.stat-desc { font-size: 16px; color: #5a6b7c; line-height: 1.6em; }\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 980px) {\n    .stats-grid { grid-template-columns: 1fr; gap: 40px; }\n    .stat-number-wrapper { font-size: 60px; }\n}\n<\/style>\n\n<div class=\"stats-section\">\n    <div class=\"stats-bg-deco\">\n        <div class=\"bg-circle c1\"><\/div>\n        <div class=\"bg-circle c2\"><\/div>\n    <\/div>\n\n    <div class=\"stats-grid\">\n        <div class=\"stat-card\" data-target=\"8000\" data-duration=\"2500\">\n            <div class=\"stat-number-wrapper\">\n                <span class=\"stat-prefix\">+<\/span><span class=\"stat-value\">0<\/span>\n            <\/div>\n            <h3 class=\"stat-title\">Followers<\/h3>\n            <p class=\"stat-desc\">\n                Bient\u00f4t 10 ans de cr\u00e9ation de contenu sur toutes les plateformes, de YouTube \u00e0 LinkedIn : les canaux, je les connais. Choisir ce qu\u2019il y a de mieux pour vous, je sais faire.\n            <\/p>\n        <\/div>\n\n        <div class=\"stat-card\" data-target=\"10\" data-duration=\"2000\">\n            <div class=\"stat-number-wrapper\">\n                <span class=\"stat-prefix\">+<\/span><span class=\"stat-value\">0<\/span>\n            <\/div>\n            <h3 class=\"stat-title\">Clients accompagn\u00e9s<\/h3>\n            <p class=\"stat-desc\">\n                Des experts qui ont repris le contr\u00f4le de leur image et qui pilotent aujourd'hui leur croissance sans d\u00e9pendre des algorithmes.\n            <\/p>\n        <\/div>\n\n        <div class=\"stat-card\" data-target=\"100\" data-duration=\"2000\">\n            <div class=\"stat-number-wrapper\">\n                <span class=\"stat-value\">0<\/span><span class=\"stat-suffix\">%<\/span>\n            <\/div>\n            <h3 class=\"stat-title\">Taux de r\u00e9ussite<\/h3>\n            <p class=\"stat-desc\">\n                La satisfaction client n'est pas une option. Chaque accompagnement est con\u00e7u pour d\u00e9livrer un r\u00e9sultat concret, mesurable et une autonomie totale.\n            <\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\nfunction animateValue(card) {\n    const obj = card.querySelector('.stat-value');\n    const end = parseInt(card.getAttribute('data-target'));\n    const duration = parseInt(card.getAttribute('data-duration'));\n    let startTimestamp = null;\n\n    const step = (timestamp) => {\n        if (!startTimestamp) startTimestamp = timestamp;\n        const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\n        \n        const easeOutQuad = 1 - Math.pow(1 - progress, 3);\n        const currentCount = Math.floor(easeOutQuad * end);\n        \n        obj.innerHTML = currentCount.toLocaleString('fr-FR');\n\n        if (progress < 1) {\n            window.requestAnimationFrame(step);\n        }\n    };\n    window.requestAnimationFrame(step);\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    const observerOptions = {\n        threshold: 0.25 \n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                const card = entry.target;\n                card.classList.add('is-visible'); \n                animateValue(card); \n                observer.unobserve(card); \n            }\n        });\n    }, observerOptions);\n\n    document.querySelectorAll('.stat-card').forEach(card => {\n        observer.observe(card);\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c312388 elementor-widget elementor-widget-html\" data-id=\"c312388\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"accompagnement\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES --- *\/\n:root {\n    --royal-blue: #0E4D92;\n    --royal-blue-glow: rgba(14, 77, 146, 0.1);\n    --text-deep: #122231;\n    --text-muted: #4a5a6a;\n    --font-melyo: 'Questrial', sans-serif;\n}\n\n.melyo-offer-container {\n    max-width: 1000px;\n    margin: 100px auto;\n    padding: 0 20px;\n    font-family: var(--font-melyo);\n    background: #ffffff;\n}\n\n\/* --- TITRE --- *\/\n.offer-intro {\n    text-align: center;\n    margin-bottom: 120px;\n}\n.offer-intro h2 {\n    font-size: 48px;\n    font-weight: 900;\n    color: var(--text-deep);\n    letter-spacing: -1.5px;\n    margin-bottom: 20px;\n}\n.offer-intro p {\n    font-size: 16px;\n    color: var(--royal-blue);\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    font-weight: 700;\n    opacity: 0.8;\n}\n\n\/* --- TIMELINE --- *\/\n.offer-steps { position: relative; padding: 40px 0; }\n.offer-steps::before {\n    content: '';\n    position: absolute;\n    left: 30px; top: 0; bottom: 0;\n    width: 1px;\n    background: linear-gradient(to bottom, transparent, #e0e6ed 10%, #e0e6ed 90%, transparent);\n}\n\n.progress-glow {\n    position: absolute;\n    left: 30px; top: 0;\n    width: 2px; height: 0%;\n    background: linear-gradient(to bottom, transparent, var(--royal-blue), #3D78B5, transparent);\n    box-shadow: 0 0 15px var(--royal-blue-glow);\n    z-index: 2;\n    transform: translateX(-50%);\n    transition: height 0.6s cubic-bezier(0.33, 1, 0.68, 1);\n}\n\n\/* --- CARTES --- *\/\n.month-card {\n    position: relative;\n    padding-left: 80px;\n    margin-bottom: 120px;\n    opacity: 0.3;\n    transform: translateY(30px);\n    transition: all 0.8s ease;\n}\n\n.month-card.is-active { opacity: 1; transform: translateY(0); }\n\n.step-anchor {\n    position: absolute;\n    left: 30px; top: 0;\n    width: 12px; height: 12px;\n    background: #ffffff;\n    border: 1px solid #e0e6ed;\n    border-radius: 50%;\n    transform: translate(-50%, 0);\n    z-index: 3;\n}\n\n.is-active .step-anchor {\n    border-color: var(--royal-blue);\n    box-shadow: 0 0 0 6px var(--royal-blue-glow);\n    background: var(--royal-blue);\n}\n\n.card-content { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; }\n.card-left h3 { font-size: 32px; font-weight: 900; color: var(--text-deep); line-height: 1.1; }\n.month-num { font-size: 14px; color: var(--royal-blue); font-weight: 900; text-transform: uppercase; display: block; margin-bottom: 15px; }\n\n.month-goal {\n    margin-top: 25px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--text-muted);\n    border-left: 2px solid var(--royal-blue-glow);\n    padding-left: 15px;\n}\n\n\/* --- LISTES DE D\u00c9TAILS --- *\/\n.step-list { list-style: none; padding: 0; margin: 0; }\n\n.step-list li {\n    font-size: 15px;\n    color: var(--text-muted);\n    padding: 14px 15px;\n    margin-left: -15px;\n    border-bottom: 1px solid #f0f3f6;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: 0 12px 12px 0;\n    border-left: 0px solid var(--royal-blue);\n}\n\n.step-list li:hover {\n    background: #f8faff;\n    border-left: 4px solid var(--royal-blue);\n    padding-left: 25px;\n    color: var(--text-deep);\n    box-shadow: 10px 5px 20px rgba(14, 77, 146, 0.03);\n}\n\n.step-list li strong { transition: color 0.3s; }\n.step-list li:hover strong { color: var(--royal-blue); }\n\n.tag {\n    font-size: 9px;\n    font-weight: 900;\n    padding: 3px 8px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    white-space: nowrap;\n    margin-top: 3px;\n    transition: all 0.3s;\n}\n\n.step-list li:hover .tag-livrable { background: var(--royal-blue); color: #ffffff; }\n.step-list li:hover .tag-appel { border-color: var(--royal-blue); color: var(--royal-blue); }\n\n.tag-appel { background: #f4f7fa; color: #5a7d9a; border: 1px solid rgba(0,0,0,0.05); }\n.tag-livrable { background: #f0f7ff; color: var(--royal-blue); }\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 900px) {\n    .card-content { grid-template-columns: 1fr; gap: 30px; }\n    .month-card { padding-left: 50px; }\n    .offer-steps::before, .progress-glow, .step-anchor { left: 15px; }\n}\n<\/style>\n\n<section class=\"melyo-offer-container\">\n    <div class=\"offer-intro\">\n        <p>Accompagnement Visibilit\u00e9<\/p>\n        <h2>Voter syst\u00e8me sur-mesure<\/h2>\n    <\/div>\n\n    <div class=\"offer-steps\" id=\"melyoTimeline\">\n        <div class=\"progress-glow\" id=\"progressGlow\"><\/div>\n\n        <div class=\"month-card is-active\">\n            <div class=\"step-anchor\"><\/div>\n            <div class=\"card-content\">\n                <div class=\"card-left\">\n                    <span class=\"month-num\">PHASE 01<\/span>\n                    <h3>Strat\u00e9gie & Structure<\/h3>\n                    <div class=\"month-goal\">\n                        <strong>Objectif :<\/strong> Construire un syst\u00e8me de visibilit\u00e9 complet et attirer des clients de mani\u00e8re r\u00e9guli\u00e8re.\n                    <\/div>\n                <\/div>\n                <div class=\"card-right\">\n                    <ul class=\"step-list\">\n                        <li><span><strong>Entretien approfondi<\/strong> : Diagnostic de l'activit\u00e9 et vision<\/span> <span class=\"tag tag-appel\">Appel<\/span><\/li>\n                        <li><span><strong>Audit complet<\/strong> : R\u00e9seaux, site, discours et branding<\/span><\/li>\n                        <li><span><strong>Analyse cibl\u00e9e<\/strong> : Positionnement actuel et concurrents<\/span><\/li>\n                        <li><span><strong>Diagnostic strat\u00e9gique<\/strong> : Forces, faiblesses et opportunit\u00e9s<\/span> <span class=\"tag tag-livrable\">Livrable<\/span><\/li>\n                        <li><span><strong>Clarification<\/strong> : Cibles, proposition de valeur et canaux<\/span> <span class=\"tag tag-appel\">Appel<\/span><\/li>\n                        <li><span><strong>Document strat\u00e9gique<\/strong> : Plan actionnable \u00e0 6-12 mois<\/span> <span class=\"tag tag-livrable\">Livrable<\/span><\/li>\n                        <li><span><strong>Architecture du syst\u00e8me<\/strong> : Parcours prospect et Funnel<\/span><\/li>\n                        <li><span><strong>Sch\u00e9ma d\u2019\u00e9cosyst\u00e8me<\/strong> et plan d\u2019action prioris\u00e9<\/span> <span class=\"tag tag-livrable\">Livrable<\/span><\/li>\n                        <li><span><strong>R\u00e9capitulatif<\/strong> et transition vers l'op\u00e9rationnel<\/span> <span class=\"tag tag-appel\">Appel<\/span><\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"month-card\">\n            <div class=\"step-anchor\"><\/div>\n            <div class=\"card-content\">\n                <div class=\"card-left\">\n                    <span class=\"month-num\">PHASE 02<\/span>\n                    <h3>Mise en place Op\u00e9rationnelle<\/h3>\n                    <div class=\"month-goal\">\n                        <strong>Objectif :<\/strong> Construire une v\u00e9ritable visibilit\u00e9 via une pr\u00e9sence harmonis\u00e9e et impactante.\n                    <\/div>\n                <\/div>\n                <div class=\"card-right\">\n                    <ul class=\"step-list\">\n                        <li><span><strong>Optimisation des comptes<\/strong> : Bio, branding et coh\u00e9rence<\/span><\/li>\n                        <li><span><strong>Ligne \u00e9ditoriale<\/strong> : Piliers de contenus et angles<\/span><\/li>\n                        <li><span><strong>Charte \u00e9ditoriale<\/strong> personnalis\u00e9e<\/span> <span class=\"tag tag-livrable\">Livrable<\/span><\/li>\n                        <li><span><strong>Syst\u00e8me de production<\/strong> : 2 mois d'id\u00e9es et KPI<\/span><\/li>\n                        <li><span><strong>Ajustement du funnel<\/strong> : Lead magnet et capture<\/span><\/li>\n                        <li><span><strong>Pr\u00e9sentation finale<\/strong> et ajustements op\u00e9rationnels<\/span> <span class=\"tag tag-appel\">Appel<\/span><\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"month-card\">\n            <div class=\"step-anchor\"><\/div>\n            <div class=\"card-content\">\n                <div class=\"card-left\">\n                    <span class=\"month-num\">PHASE 03<\/span>\n                    <h3>Transmission & Autonomie<\/h3>\n                    <div class=\"month-goal\">\n                        <strong>Objectif :<\/strong> Devenir 100% autonome pour piloter son syst\u00e8me seul apr\u00e8s l'accompagnement.\n                    <\/div>\n                <\/div>\n                <div class=\"card-right\">\n                    <ul class=\"step-list\">\n                        <li><span><strong>Formation personnalis\u00e9e<\/strong> : Outils et lecture des KPI<\/span><\/li>\n                        <li><span><strong>M\u00e9thodologie<\/strong> : Production de contenus autonome<\/span><\/li>\n                        <li><span><strong>Ajustements r\u00e9els<\/strong> : Analyse des retours et corrections<\/span><\/li>\n                        <li><span><strong>Suivi post-accompagnement<\/strong> : Support durant 3 mois<\/span><\/li>\n                        <li><span><strong>Point mensuel<\/strong> inclus et support strat\u00e9gique<\/span> <span class=\"tag tag-appel\">Suivi<\/span><\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\nwindow.addEventListener('scroll', () => {\n    const cards = document.querySelectorAll('.month-card');\n    const glow = document.getElementById('progressGlow');\n    const timeline = document.getElementById('melyoTimeline');\n    const timelineRect = timeline.getBoundingClientRect();\n    const windowHeight = window.innerHeight;\n\n    let progress = (windowHeight \/ 2 - timelineRect.top) \/ timelineRect.height * 100;\n    progress = Math.max(0, Math.min(progress, 98));\n    glow.style.height = progress + '%';\n\n    cards.forEach(card => {\n        const cardTop = card.getBoundingClientRect().top;\n        if (cardTop < windowHeight * 0.75) card.classList.add('is-active');\n        else card.classList.remove('is-active');\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e9901b achetez elementor-widget elementor-widget-html\" data-id=\"3e9901b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial&display=swap');\n\n#melyo-comparison-wrapper {\n    --melyo-red: #E63946;\n    --melyo-blue: #0E4D92;\n    --text-dark: #122231;\n    --text-grey: #5a6b7c;\n    --bg-card-no: #fdfdfd;\n    font-family: 'Questrial', sans-serif;\n    width: 100%;\n    max-width: 1100px;\n    margin: 60px auto;\n    padding: 20px;\n}\n\n\/* --- TITRES --- *\/\n.comp-header-area { text-align: center; margin-bottom: 60px; }\n.comp-main-title { font-size: clamp(30px, 5vw, 42px); color: var(--text-grey); font-weight: 400; line-height: 1.2; }\n\n\/* Soulignement du titre *\/\n.title-highlight { \n    color: var(--melyo-blue); \n    font-weight: 900; \n    display: inline-block; \n    text-decoration: underline;\n    text-decoration-thickness: 3px;\n    text-underline-offset: 6px;\n}\n\n\/* --- GRILLE & PERSPECTIVE --- *\/\n.comparison-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 40px;\n    position: relative;\n    perspective: 1000px;\n}\n\n\/* --- CARTES : \u00c9TAT INITIAL --- *\/\n.comp-card {\n    padding: 50px 40px;\n    border-radius: 35px;\n    position: relative;\n    overflow: hidden;\n    background: white;\n    transition: transform 0.1s ease-out, opacity 0.8s ease, box-shadow 0.3s ease;\n    opacity: 0;\n    transform: translateY(40px);\n    transform-style: preserve-3d;\n}\n\n.revealed .comp-card {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* --- CARTE DROITE (HORS P\u00c9RIM\u00c8TRE) : CROIX G\u00c9ANTE --- *\/\n.card-no {\n    background: var(--bg-card-no);\n    border: 2px solid #f0f0f0;\n}\n\n.scribble-overlay {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%; height: 100%;\n    pointer-events: none;\n    z-index: 5;\n    opacity: 0.45;\n}\n\n.scribble-path {\n    stroke: var(--melyo-red);\n    stroke-width: 6; \/* Trait un peu plus \u00e9pais pour la croix *\/\n    fill: none;\n    stroke-linecap: round; \/* Bords arrondis style crayon *\/\n    stroke-linejoin: round;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n}\n\n.revealed .scribble-path {\n    \/* Animation qui dessine les traits *\/\n    animation: drawCross 1s ease-out forwards;\n}\n\n@keyframes drawCross {\n    to { stroke-dashoffset: 0; }\n}\n\n\/* --- CARTE GAUCHE (OUI) --- *\/\n.card-yes {\n    border: 2px solid var(--melyo-blue);\n    box-shadow: 0 20px 50px rgba(14, 77, 146, 0.08);\n}\n\n\/* --- CONTENU --- *\/\n.card-header { font-size: 26px; font-weight: 700; margin-bottom: 30px; display: flex; align-items: center; gap: 12px; }\n.card-no .card-header { color: var(--text-grey); }\n.card-yes .card-header { color: var(--melyo-blue); }\n\n.comp-list { list-style: none; padding: 0; margin: 0; }\n.comp-item { margin-bottom: 25px; display: flex; gap: 15px; font-size: 16px; line-height: 1.5; color: var(--text-dark); }\n\n.icon-box { flex-shrink: 0; width: 24px; height: 24px; margin-top: 3px; transform: translateZ(20px); }\n\n.fill-no { fill: var(--melyo-red); }\n.fill-yes { fill: var(--melyo-blue); }\n\n.text-muted { color: var(--text-grey); }\n\n\/* --- CTA SUR \u00c9LEV\u00c9 (MODIFI\u00c9) --- *\/\n.comp-cta-container { text-align: center; margin-top: 60px; }\n.comp-btn {\n    display: inline-block;\n    background: var(--melyo-blue);\n    color: white;\n    padding: 18px 40px;\n    border-radius: 100px;\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    box-shadow: 0 10px 30px rgba(14,77,146,0.3);\n}\n\n\/* Correction : forcer la couleur blanche au survol *\/\n.comp-btn:hover { \n    transform: translateY(-12px) scale(1.05); \n    background: #083666;\n    color: white !important; \/* Ajout de !important *\/\n    box-shadow: 0 20px 40px rgba(14,77,146,0.4);\n}\n\n@media (max-width: 850px) {\n    .comparison-grid { grid-template-columns: 1fr; }\n    .comp-card { transform: none !important; }\n}\n<\/style>\n\n<div id=\"melyo-comparison-wrapper\">\n\n    <div class=\"comp-header-area\">\n        <h2 class=\"comp-main-title\">\n            <span class=\"title-highlight\">Ce que vous achetez<\/span><br>\n            vs ce que vous n\u2019achetez pas\n        <\/h2>\n    <\/div>\n\n    <div class=\"comparison-grid\" id=\"comp-trigger\">\n        \n        <div class=\"comp-card card-yes js-tilt\">\n            <div class=\"card-header\">L'Offre Melyo<\/div>\n            <ul class=\"comp-list\">\n                <li class=\"comp-item\">\n                    <div class=\"icon-box\"><svg viewBox=\"0 0 24 24\" class=\"fill-yes\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg><\/div>\n                    <span><strong>Une strat\u00e9gie sur-mesure :<\/strong> Un plan d'action clair et d\u00e9taill\u00e9, adapt\u00e9 \u00e0 VOTRE march\u00e9.<\/span>\n                <\/li>\n                <li class=\"comp-item\">\n                    <div class=\"icon-box\"><svg viewBox=\"0 0 24 24\" class=\"fill-yes\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg><\/div>\n                    <span><strong>Cr\u00e9ation de supports :<\/strong> Landing page, r\u00e9seaux sociaux... je mets tout en place. <\/span>\n                <\/li>\n                <li class=\"comp-item\">\n                    <div class=\"icon-box\"><svg viewBox=\"0 0 24 24\" class=\"fill-yes\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg><\/div>\n                    <span><strong>100% autonomie :<\/strong> \u00c0 la fin de l'accompagnement, vous n'avez plus besoin de moi.<\/span>\n                <\/li>\n            <\/ul>\n        <\/div>\n\n        <div class=\"comp-card card-no js-tilt\">\n            \n            <svg class=\"scribble-overlay\" viewBox=\"0 0 400 500\" preserveAspectRatio=\"none\">\n                 <path class=\"scribble-path\" d=\"M30,40 Q200,250 370,460\" \/> \n                \n                 <path class=\"scribble-path\" d=\"M370,40 Q200,250 30,460\" style=\"animation-delay: 0.4s;\" \/> \n            <\/svg>\n\n            <div class=\"card-header\">Hors p\u00e9rim\u00e8tre<\/div>\n            <ul class=\"comp-list\">\n                <li class=\"comp-item text-muted\">\n                    <div class=\"icon-box\"><svg viewBox=\"0 0 24 24\" class=\"fill-no\"><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\/><\/svg><\/div>\n                    <span><strong>D\u00e9veloppement web :<\/strong> Je ne code pas des sites entiers. Je laisse \u00e7a aux agences sp\u00e9cialis\u00e9es.<\/span>\n                <\/li>\n                <li class=\"comp-item text-muted\">\n                    <div class=\"icon-box\"><svg viewBox=\"0 0 24 24\" class=\"fill-no\"><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\/><\/svg><\/div>\n                    <span><strong>R\u00e9sultat 24h :<\/strong> La \"baguette magique\" pour faire x10 en un jour n'est pas encore invent\u00e9e.<\/span>\n                <\/li>\n                <li class=\"comp-item text-muted\">\n                    <div class=\"icon-box\"><svg viewBox=\"0 0 24 24\" class=\"fill-no\"><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\/><\/svg><\/div>\n                    <span><strong>Automatisation IA :<\/strong> On utilise l'humain avant tout. Pas de robots froids ici.<\/span>\n                <\/li>\n            <\/ul>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"comp-cta-container\">\n        <a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" class=\"comp-btn\" target=\"_blank\" rel=\"noopener\">On v\u00e9rifie si \u00e7a match ?<\/a>\n    <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const trigger = document.querySelector('#comp-trigger');\n    const tiltCards = document.querySelectorAll('.js-tilt');\n\n    \/\/ TILT 3D SOURIS\n    tiltCards.forEach(card => {\n        card.addEventListener('mousemove', (e) => {\n            const rect = card.getBoundingClientRect();\n            const x = e.clientX - rect.left;\n            const y = e.clientY - rect.top;\n            const centerX = rect.width \/ 2;\n            const centerY = rect.height \/ 2;\n            const rotateX = (y - centerY) \/ 15;\n            const rotateY = (centerX - x) \/ 15;\n            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;\n        });\n\n        card.addEventListener('mouseleave', () => {\n            card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;\n        });\n    });\n\n    \/\/ APPARITION AU SCROLL\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('revealed');\n                observer.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.15 });\n\n    observer.observe(trigger);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84e1eb3 elementor-widget elementor-widget-html\" data-id=\"84e1eb3\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"mathias\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES & POLICE --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial:wght@400;700;900&display=swap');\n\n:root {\n    --royal-blue: #0E4D92;\n    --font-melyo: 'Questrial', sans-serif;\n}\n\n\/* --- SECTION GLOBALE --- *\/\n.melyo-bio-wrapper {\n    position: relative;\n    background: #ffffff;\n    padding: 100px 20px;\n    overflow: hidden;\n    font-family: var(--font-melyo);\n}\n\n\/* --- \u00c9L\u00c9MENTS EN MOUVEMENT (LUCIOLES) --- *\/\n.bio-firefly {\n    position: absolute;\n    width: 4px; height: 4px;\n    background: var(--royal-blue);\n    border-radius: 50%;\n    box-shadow: 0 0 10px 2px rgba(14, 77, 146, 0.2);\n    z-index: 1;\n    animation: flyAround 15s infinite ease-in-out;\n}\n\n@keyframes flyAround {\n    0%, 100% { transform: translate(0, 0); opacity: 0.1; }\n    50% { transform: translate(60px, -60px); opacity: 0.4; }\n}\n\n.f1 { top: 15%; left: 8%; }\n.f2 { top: 80%; left: 88%; animation-delay: -4s; }\n.f3 { top: 45%; left: 92%; animation-delay: -8s; }\n\n\/* --- ANIMATION DE FLOTTEMENT --- *\/\n@keyframes bioFloat {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-12px); }\n}\n\n\/* --- LE CADRE --- *\/\n.bio-card {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    background: var(--royal-blue);\n    border-radius: 40px;\n    padding: 60px;\n    display: flex;\n    align-items: center;\n    gap: 60px;\n    z-index: 10;\n    box-shadow: \n        0 0 0 3px #ffffff,\n        0 0 40px rgba(255, 255, 255, 0.4),\n        0 30px 70px rgba(14, 77, 146, 0.25);\n    animation: bioFloat 8s ease-in-out infinite;\n    \/* Perspective augment\u00e9e pour un effet beaucoup plus plat et subtil *\/\n    perspective: 2500px;\n}\n\n\/* --- PHOTO AVEC EFFET 3D SUBTIL --- *\/\n.bio-img {\n    flex: 0.7;\n    border-radius: 25px;\n    overflow: hidden;\n    line-height: 0;\n    border: 1px solid #ffffff;\n    \/* Ombre de base l\u00e9g\u00e8rement plus douce *\/\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);\n    transform-style: preserve-3d;\n    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; \/* Transition un peu plus lente pour la douceur *\/\n    will-change: transform;\n}\n\n.bio-img img { \n    width: 100%; \n    height: auto; \n    display: block;\n    \/* Tr\u00e8s l\u00e9ger zoom pour \u00e9viter les bords *\/\n    transform: scale(1.01);\n}\n\n.bio-content { flex: 1.3; color: #ffffff; }\n\n\/* --- TITRE --- *\/\n.bio-title {\n    font-size: 36px;\n    font-weight: 900;\n    margin-bottom: 25px;\n    color: #ffffff;\n    white-space: nowrap;\n}\n\n\/* Brillance r\u00e9duite sur Melyo *\/\n.highlight-melyo {\n    color: #ffffff;\n    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n}\n\n\/* --- TEXTES --- *\/\n.bio-intro {\n    color: #ffffff;\n    font-weight: 700;\n    font-size: 20px;\n    display: block;\n    margin-bottom: 20px;\n}\n\n.bio-text {\n    font-size: 17px;\n    line-height: 1.8;\n    color: rgba(255, 255, 255, 0.95);\n    font-weight: 400;\n}\n.bio-text p { margin-bottom: 18px; }\n.bio-text strong { font-weight: 700; color: #ffffff; }\n\n.bio-footer {\n    margin-top: 35px;\n    padding-top: 30px;\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.bio-sig {\n    font-size: 24px;\n    font-weight: 900;\n    margin-bottom: 5px;\n    color: #ffffff;\n}\n\n.bio-job {\n    color: rgba(255, 255, 255, 0.8);\n    font-size: 15px;\n    margin-bottom: 30px;\n    display: block;\n}\n\n\/* BOUTON CTA BLANC *\/\n.bio-btn {\n    display: inline-block;\n    background: #ffffff;\n    color: var(--royal-blue) !important;\n    padding: 16px 40px;\n    border-radius: 50px;\n    text-decoration: none !important;\n    font-weight: 700;\n    font-size: 17px;\n    transition: 0.3s ease-in-out;\n    box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\n.bio-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n    background: #f8f9fa;\n}\n\n\/* MOBILE *\/\n@media (max-width: 950px) {\n    .bio-card { flex-direction: column; text-align: center; padding: 50px 30px; gap: 40px; }\n    .bio-title { font-size: 28px; white-space: normal; }\n    .bio-img { width: 80%; margin: 0 auto; transform: none !important; }\n}\n<\/style>\n\n<section class=\"melyo-bio-wrapper\">\n    <div class=\"bio-firefly f1\"><\/div>\n    <div class=\"bio-firefly f2\"><\/div>\n    <div class=\"bio-firefly f3\"><\/div>\n\n    <div class=\"bio-card\" id=\"bioCard\">\n        <div class=\"bio-img\" id=\"bioImg\">\n            <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/mathias-scaled.jpg\" alt=\"Mathias - Fondateur de Melyo\">\n        <\/div>\n\n        <div class=\"bio-content\">\n            <h2 class=\"bio-title\">Qui se cache derri\u00e8re <span class=\"highlight-melyo\">Melyo<\/span>\u2026<\/h2>\n            \n            <span class=\"bio-intro\">Je m'appelle Mathias, j\u2019ai 19 ans.<\/span>\n            \n            <div class=\"bio-text\">\n                <p>Je suis consultant en strat\u00e9gie de visibilit\u00e9. Je cr\u00e9e des syst\u00e8mes de communication digitaux, con\u00e7us pour transformer une expertise en une pr\u00e9sence en ligne <strong>align\u00e9e \u00e0 vous<\/strong>.<\/p>\n                <p>Ma mission ? J\u2019accompagne les ind\u00e9pendants \u00e0 valoriser leur savoir-faire et leur savoir-\u00eatre au service de leur activit\u00e9.<\/p>\n                <p>Notre ambition : transmettre des m\u00e9thodes \u00e9prouv\u00e9es pour aider chaque business \u00e0 gagner en <strong>visibilit\u00e9<\/strong> et en <strong>attractivit\u00e9<\/strong>. Nous accompagnons des porteurs de projets au savoir-faire singulier avec une approche <strong>100% sur-mesure<\/strong>.<\/p>\n            <\/div>\n\n            <div class=\"bio-footer\">\n                <div class=\"bio-sig\">Mathias<\/div>\n                <span class=\"bio-job\">Fondateur de Melyo<\/span>\n                <a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" target=\"_blank\" class=\"bio-btn\" rel=\"noopener\">On en discute ?<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ Gestion du mouvement 3D SUBTIL de la photo\nconst bioCard = document.getElementById('bioCard');\nconst bioImg = document.getElementById('bioImg');\n\n\/\/ On v\u00e9rifie que les \u00e9l\u00e9ments existent avant de lancer le script (s\u00e9curit\u00e9 Elementor)\nif (bioCard && bioImg) {\n    bioCard.addEventListener('mousemove', (e) => {\n        const rect = bioImg.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const centerX = rect.width \/ 2;\n        const centerY = rect.height \/ 2;\n        \n        \/\/ Calcul de la rotation (Diviseur augment\u00e9 \u00e0 40 pour un effet tr\u00e8s l\u00e9ger)\n        const rotateX = (centerY - y) \/ 40;\n        const rotateY = (x - centerX) \/ 40;\n        \n        \/\/ Application de la transformation avec un scale tr\u00e8s l\u00e9ger\n        bioImg.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.01)`;\n        \n        \/\/ D\u00e9placement dynamique de l'ombre (beaucoup plus faible)\n        const shadowX = -rotateY * 0.5;\n        const shadowY = rotateX * 0.5 + 20;\n        \/\/ Ombre plus transparente (0.3)\n        bioImg.style.boxShadow = `${shadowX}px ${shadowY}px 40px rgba(0, 0, 0, 0.3)`;\n    });\n\n    \/\/ R\u00e9initialisation\n    bioCard.addEventListener('mouseleave', () => {\n        bioImg.style.transform = `rotateX(0deg) rotateY(0deg) scale(1)`;\n        bioImg.style.boxShadow = `0 20px 40px rgba(0, 0, 0, 0.25)`;\n    });\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4da85f1 e-flex e-con-boxed e-con e-parent\" data-id=\"4da85f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf6c739 elementor-widget elementor-widget-html\" data-id=\"bf6c739\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"avis\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES & FONTS --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial:wght@400;700;900&display=swap');\n\n:root {\n    --royal-blue: #0E4D92;\n    --text-deep: #122231;\n    --text-muted: #4a5a6a;\n}\n\n.melyo-testimonials-section {\n    padding: 120px 0;\n    background: #ffffff;\n    font-family: 'Questrial', sans-serif;\n    overflow: hidden;\n}\n\n\/* --- TITRE AVEC PR\u00c9SENCE MAXIMALE --- *\/\n.testi-intro {\n    max-width: 1000px;\n    margin: 0 auto 80px;\n    padding: 0 20px;\n    text-align: center;\n}\n\n.testi-intro h2 {\n    font-size: 52px; \/* Taille augment\u00e9e *\/\n    font-weight: 900;\n    line-height: 1.1;\n    color: var(--text-deep);\n    letter-spacing: -2px;\n    display: inline-block;\n    position: relative;\n    padding-bottom: 25px;\n    \/* Soulignement graphique \"Melyo Brush\" *\/\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 300 18'%3E%3Cpath d='M3 13.5c47.8-2.4 95.7-4.3 143.6-5.7 47.8-1.3 95.5-2.2 143.1-2.5 2.9 0 5.8.1 8.7.3-36.8 5.9-74.1 9.7-111.7 11.3C134.9 19.8 83.2 18.1 3 13.5z' fill='%230e4d92'\/%3E%3C\/svg%3E\");\n    background-position: bottom center;\n    background-repeat: no-repeat;\n    background-size: 70% 15px;\n}\n\n.testi-intro p {\n    font-size: 20px;\n    color: var(--text-muted);\n    font-weight: 400;\n    max-width: 750px;\n    margin: 30px auto 0;\n    line-height: 1.6;\n}\n\n.testi-intro strong {\n    color: var(--royal-blue);\n    font-weight: 700;\n}\n\n\/* --- LE SLIDER INFINI (NETTOY\u00c9) --- *\/\n.testi-slider {\n    display: flex;\n    overflow: hidden;\n    position: relative;\n    padding: 20px 0;\n}\n\n.testi-track {\n    display: flex;\n    width: calc(450px * 10);\n    animation: scrollInfinite 60s linear infinite; \/* Ralenti pour plus de s\u00e9r\u00e9nit\u00e9 *\/\n}\n\n.testi-track:hover {\n    animation-play-state: paused;\n}\n\n@keyframes scrollInfinite {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(calc(-450px * 5)); }\n}\n\n\/* --- CARTE T\u00c9MOIGNAGE --- *\/\n.testi-card {\n    width: 400px;\n    margin: 0 25px;\n    background: #ffffff;\n    border-radius: 40px;\n    padding: 45px;\n    border: 1px solid rgba(14, 77, 146, 0.08);\n    box-shadow: 0 15px 45px rgba(14, 77, 146, 0.05);\n    display: flex;\n    flex-direction: column;\n    transition: all 0.4s ease;\n}\n\n.testi-card:hover {\n    border-color: var(--royal-blue);\n    transform: translateY(-8px);\n    box-shadow: 0 30px 60px rgba(14, 77, 146, 0.12);\n}\n\n.quote-icon {\n    font-size: 50px;\n    color: var(--royal-blue);\n    opacity: 0.15;\n    margin-bottom: -20px;\n    font-family: serif;\n}\n\n.testi-content {\n    font-size: 16px;\n    line-height: 1.7;\n    color: var(--text-muted);\n    margin-bottom: 30px;\n    flex-grow: 1;\n}\n\n.testi-client {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    border-top: 1px solid rgba(0,0,0,0.05);\n    padding-top: 20px;\n}\n\n.client-logo {\n    width: 50px; height: 50px;\n    border-radius: 12px;\n    object-fit: contain;\n    background: #f9f9f9;\n    padding: 5px;\n}\n\n.client-meta h4 { font-size: 17px; font-weight: 700; color: var(--text-deep); margin: 0; }\n.client-meta span { font-size: 13px; color: var(--royal-blue); font-weight: 700; }\n\n\/* RESPONSIVE *\/\n@media (max-width: 850px) {\n    .testi-intro h2 { font-size: 34px; background-size: 90% 12px; }\n    .testi-intro p { font-size: 17px; }\n    .testi-card { width: 320px; padding: 30px; }\n    @keyframes scrollInfinite {\n        100% { transform: translateX(calc(-370px * 5)); }\n    }\n}\n<\/style>\n\n<section class=\"melyo-testimonials-section\">\n    <div class=\"testi-intro\">\n        <h2>Ils g\u00e8rent leur communication seuls.<\/h2>\n        <p>L'ind\u00e9pendance digitale n'est pas une promesse, c'est un <strong>r\u00e9sultat<\/strong>. Voici ce qu'en disent ceux qui l'ont atteinte.<\/p>\n    <\/div>\n\n    <div class=\"testi-slider\">\n        <div class=\"testi-track\">\n            \n            <div class=\"testi-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testi-content\">En toute honn\u00eatet\u00e9, l\u2019accompagnement de Melyo m\u2019a \u00e9t\u00e9 recommand\u00e9 par un proche\u2026 et je suis ravi. \u00c9coute, valeurs et surtout expertise : tout y est.<\/p>\n                <div class=\"testi-client\">\n                    <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/odysse_logo.png\" alt=\"Odysse\" class=\"client-logo\">\n                    <div class=\"client-meta\">\n                        <h4>Gu\u00e9nol\u00e9<\/h4>\n                        <span>Recruteur ind\u00e9pendant<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testi-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testi-content\">Mathias a \u00e9t\u00e9 tr\u00e8s r\u00e9actif et a su r\u00e9pondre \u00e0 toutes nos demandes lors de notre changement de logo. Nous recommandons fortement.<\/p>\n                <div class=\"testi-client\">\n                    <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/RCGG_logo.png\" alt=\"RCGG\" class=\"client-logo\">\n                    <div class=\"client-meta\">\n                        <h4>Noam<\/h4>\n                        <span>Club de rugby<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testi-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testi-content\">Un accompagnement \u00e0 la hauteur de mes besoins et de mes attentes. Je recommande vivement \ud83d\ude09<\/p>\n                <div class=\"testi-client\">\n                    <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/PGB_logo.jpeg\" alt=\"PGB\" class=\"client-logo\">\n                    <div class=\"client-meta\">\n                        <h4>Anne<\/h4>\n                        <span>Animatrice petite enfance<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testi-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testi-content\">Mathias a parfaitement cern\u00e9 mes besoins et m\u2019a accompagn\u00e9 comme je le souhaitais : 100 % personnalis\u00e9. Un accompagnement humain et accessible.<\/p>\n                <div class=\"testi-client\">\n                    <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/Thrapy_logo.webp\" alt=\"Thrapy\" class=\"client-logo\">\n                    <div class=\"client-meta\">\n                        <h4>Claude<\/h4>\n                        <span>Hypnoth\u00e9rapeute<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testi-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testi-content\">Ma communication est plus claire et plus professionnelle, et surtout, elle me ressemble. L\u2019accompagnement est \u00e0 la fois strat\u00e9gique et op\u00e9rationnel.<\/p>\n                <div class=\"testi-client\">\n                    <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/ACM_logo.jpg\" alt=\"ACM\" class=\"client-logo\">\n                    <div class=\"client-meta\">\n                        <h4>Anne-C\u00e9cile<\/h4>\n                        <span>Assistante administrative<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testi-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testi-content\">En toute honn\u00eatet\u00e9, l\u2019accompagnement de Melyo m\u2019a \u00e9t\u00e9 recommand\u00e9 par un proche\u2026 et je suis ravi. \u00c9coute, valeurs et surtout expertise : tout y est.<\/p><div class=\"testi-client\"><img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/odysse_logo.png\" class=\"client-logo\"><div class=\"client-meta\"><h4>Gu\u00e9nol\u00e9<\/h4><span>Recruteur ind\u00e9pendant<\/span><\/div><\/div><\/div>\n            <div class=\"testi-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testi-content\">Mathias a \u00e9t\u00e9 tr\u00e8s r\u00e9actif et a su r\u00e9pondre \u00e0 toutes nos demandes lors de notre changement de logo. Nous recommandons fortement.<\/p><div class=\"testi-client\"><img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/RCGG_logo.png\" class=\"client-logo\"><div class=\"client-meta\"><h4>Noam<\/h4><span>Club de rugby<\/span><\/div><\/div><\/div>\n            <div class=\"testi-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testi-content\">Un accompagnement \u00e0 la hauteur de mes besoins et de mes attentes. Je recommande vivement \ud83d\ude09<\/p><div class=\"testi-client\"><img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/PGB_logo.jpeg\" class=\"client-logo\"><div class=\"client-meta\"><h4>Anne<\/h4><span>Animatrice petite enfance<\/span><\/div><\/div><\/div>\n            <div class=\"testi-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testi-content\">Mathias a parfaitement cern\u00e9 mes besoins et m\u2019a accompagn\u00e9 comme je le souhaitais : 100 % personnalis\u00e9. Un accompagnement humain et accessible.<\/p><div class=\"testi-client\"><img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/Thrapy_logo.webp\" class=\"client-logo\"><div class=\"client-meta\"><h4>Claude<\/h4><span>Hypnoth\u00e9rapeute<\/span><\/div><\/div><\/div>\n            <div class=\"testi-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testi-content\">Ma communication est plus claire et plus professionnelle, et surtout, elle me ressemble. L\u2019accompagnement est \u00e0 la fois strat\u00e9gique et op\u00e9rationnel.<\/p><div class=\"testi-client\"><img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/ACM_logo.jpg\" class=\"client-logo\"><div class=\"client-meta\"><h4>Anne-C\u00e9cile<\/h4><span>Assistante administrative<\/span><\/div><\/div><\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7e1882 e-flex e-con-boxed e-con e-parent\" data-id=\"a7e1882\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee37837 elementor-widget elementor-widget-html\" data-id=\"ee37837\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"questions\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES & FONTS --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial:wght@400;700;900&display=swap');\n\n:root {\n    --royal-blue: #0E4D92;\n    --text-deep: #122231;\n    --text-muted: #4a5a6a;\n    --faq-bg: #fcfdfe;\n}\n\n.melyo-faq-section {\n    padding: 120px 20px;\n    background: #ffffff;\n    font-family: 'Questrial', sans-serif;\n}\n\n.faq-container {\n    max-width: 900px;\n    margin: 0 auto;\n}\n\n\/* --- TITRE XXL --- *\/\n.faq-header {\n    text-align: center;\n    margin-bottom: 80px;\n}\n\n.faq-header h2 {\n    font-size: 52px;\n    font-weight: 900;\n    color: var(--text-deep);\n    letter-spacing: -2px;\n    display: inline-block;\n    position: relative;\n    padding-bottom: 20px;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 300 18'%3E%3Cpath d='M3 13.5c47.8-2.4 95.7-4.3 143.6-5.7 47.8-1.3 95.5-2.2 143.1-2.5 2.9 0 5.8.1 8.7.3-36.8 5.9-74.1 9.7-111.7 11.3C134.9 19.8 83.2 18.1 3 13.5z' fill='%230e4d92'\/%3E%3C\/svg%3E\");\n    background-position: bottom center;\n    background-repeat: no-repeat;\n    background-size: 80% 12px;\n}\n\n.faq-header p {\n    font-size: 20px;\n    color: var(--text-muted);\n    margin-top: 20px;\n}\n\n\/* --- ACCORD\u00c9ON --- *\/\n.faq-item {\n    margin-bottom: 15px;\n    border-radius: 25px;\n    border: 1px solid rgba(14, 77, 146, 0.08);\n    background: #ffffff;\n    overflow: hidden;\n    transition: all 0.3s ease;\n}\n\n.faq-item:hover {\n    border-color: var(--royal-blue);\n    box-shadow: 0 10px 30px rgba(14, 77, 146, 0.05);\n}\n\n.faq-question {\n    padding: 25px 35px;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    user-select: none;\n}\n\n.faq-question h3 {\n    font-size: 19px;\n    font-weight: 700;\n    color: var(--text-deep);\n    margin: 0;\n    transition: color 0.3s ease;\n}\n\n.faq-icon {\n    width: 24px;\n    height: 24px;\n    position: relative;\n    transition: transform 0.4s ease;\n}\n\n.faq-icon::before, .faq-icon::after {\n    content: '';\n    position: absolute;\n    background: var(--royal-blue);\n    transition: all 0.3s ease;\n}\n\n.faq-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }\n.faq-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }\n\n\/* \u00c9tat Ouvert *\/\n.faq-item.active {\n    border-color: var(--royal-blue);\n    box-shadow: 0 15px 40px rgba(14, 77, 146, 0.08);\n}\n\n.faq-item.active .faq-icon {\n    transform: rotate(45deg);\n}\n\n.faq-item.active h3 {\n    color: var(--royal-blue);\n}\n\n.faq-answer {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);\n    background: var(--faq-bg);\n}\n\n.faq-item.active .faq-answer {\n    max-height: 1000px;\n    transition: max-height 1s ease-in-out;\n}\n\n.answer-content {\n    padding: 0 35px 30px 35px;\n    font-size: 16px;\n    line-height: 1.8;\n    color: var(--text-muted);\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 768px) {\n    .faq-header h2 { font-size: 34px; }\n    .faq-question { padding: 20px 25px; }\n    .faq-question h3 { font-size: 17px; }\n}\n<\/style>\n\n<section class=\"melyo-faq-section\">\n    <div class=\"faq-container\">\n        \n        <div class=\"faq-header\">\n            <h2>Questions Fr\u00e9quentes<\/h2>\n            <p>Tout ce que vous devez savoir avant de reprendre le contr\u00f4le.<\/p>\n        <\/div>\n\n        <div class=\"faq-list\">\n            \n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>\u00c0 qui s\u2019adresse Melyo ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Nous accompagnons les ind\u00e9pendants qui veulent une visibilit\u00e9 simple, claire et utile pour vendre (sans devenir influenceur).<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Je n\u2019ai pas le temps de cr\u00e9er du contenu. C\u2019est un probl\u00e8me ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Non. Nous construisons une m\u00e9thode l\u00e9g\u00e8re et r\u00e9aliste, adapt\u00e9e \u00e0 votre rythme et \u00e0 votre activit\u00e9.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Je ne suis pas \u00e0 l\u2019aise avec les r\u00e9seaux sociaux.<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Ce n\u2019est pas n\u00e9cessaire. Nous vous aidons \u00e0 communiquer avec vos mots, sans vous forcer \u00e0 vous exposer.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Quels r\u00e9sultats puis-je attendre ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Nous visons une communication plus claire, plus coh\u00e9rente et une visibilit\u00e9 qui g\u00e9n\u00e8re des demandes. Le tout avec une m\u00e9thode que vous gardez.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>C\u2019est du sur-mesure ou une m\u00e9thode \u201ccopier-coller\u201d ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Tout est 100% personnalis\u00e9 : strat\u00e9gie, message, contenus et canaux sont construits pour votre activit\u00e9, vos objectifs et vos contraintes.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Sur quels canaux allons-nous travailler ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Nous choisissons avec vous les canaux les plus pertinents (LinkedIn, Instagram, site, Google, etc.), sans dispersion.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Est-ce que vous faites \u00e0 ma place ou vous me formez ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Les deux : nous structurons et optimisons, puis nous vous transmettons la m\u00e9thode pour que vous soyez autonome.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Je n\u2019ai pas de site web. C\u2019est bloquant ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Non. Nous pouvons cr\u00e9er une page de vente unique si besoin. Sinon, on priorise ce qui vous apporte le plus imm\u00e9diatement.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Est-ce que je dois utiliser l\u2019IA ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Non. Si vous le souhaitez, nous vous montrons comment l\u2019utiliser simplement pour gagner du temps, sans complexit\u00e9.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"faq-item\">\n                <div class=\"faq-question\">\n                    <h3>Comment d\u00e9marrer ?<\/h3>\n                    <div class=\"faq-icon\"><\/div>\n                <\/div>\n                <div class=\"faq-answer\">\n                    <div class=\"answer-content\">Nous commen\u00e7ons par un \u00e9change pour comprendre votre activit\u00e9, puis nous vous pr\u00e9sentons un plan clair des chantiers et des priorit\u00e9s.<\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ Script simple pour l'accord\u00e9on\ndocument.querySelectorAll('.faq-question').forEach(question => {\n    question.addEventListener('click', () => {\n        const item = question.parentElement;\n        item.classList.toggle('active');\n        \n        \/\/ Optionnel : Fermer les autres quand on en ouvre un\n        \/*\n        document.querySelectorAll('.faq-item').forEach(otherItem => {\n            if (otherItem !== item) otherItem.classList.remove('active');\n        });\n        *\/\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a4203b elementor-widget elementor-widget-html\" data-id=\"9a4203b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- IMPORT & VARIABLES --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Questrial:wght@400;700;900&display=swap');\n\n:root {\n    --royal-blue: #0E4D92;\n    --royal-blue-dark: #082d56;\n    --text-deep: #122231;\n    --font-melyo: 'Questrial', sans-serif;\n}\n\n\/* --- SECTION CONTENEUR (\u00c9PUR\u00c9E) --- *\/\n.melyo-light-cta-section {\n    padding: 80px 20px;\n    background-color: #ffffff;\n    font-family: var(--font-melyo);\n    display: flex;\n    justify-content: center;\n}\n\n\/* --- ANIMATION SUBTILE --- *\/\n@keyframes softFloat {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-10px); }\n}\n\n\/* --- LA CARTE (PLUS FINE ET MODERNE) --- *\/\n.light-cta-card {\n    width: 100%;\n    max-width: 850px;\n    background: linear-gradient(145deg, var(--royal-blue) 0%, var(--royal-blue-dark) 100%);\n    border-radius: 32px; \/* Moins \"bulle\", plus structurel *\/\n    padding: 60px 40px;\n    text-align: center;\n    position: relative;\n    box-shadow: 0 20px 40px rgba(14, 77, 146, 0.15);\n    animation: softFloat 6s ease-in-out infinite;\n    overflow: hidden;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\/* Suppression du Glass Overlay lourd au profit d'un grain tr\u00e8s l\u00e9ger *\/\n.light-cta-card::before {\n    content: \"\";\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background: url('https:\/\/www.transparenttextures.com\/patterns\/stardust.png'); \/* Grain subtil *\/\n    opacity: 0.05;\n    pointer-events: none;\n}\n\n\/* --- CONTENU TEXTE --- *\/\n.cta-title-light {\n    font-size: 40px;\n    font-weight: 700;\n    color: #ffffff;\n    margin-bottom: 20px;\n    letter-spacing: -1px;\n    line-height: 1.2;\n}\n\n.cta-subtitle-light {\n    font-size: 18px;\n    color: rgba(255, 255, 255, 0.85);\n    max-width: 600px;\n    margin: 0 auto 40px;\n    line-height: 1.6;\n}\n\n\/* --- BOUTON REVISIT\u00c9 --- *\/\n.btn-clean-white {\n    display: inline-block;\n    background: #ffffff;\n    color: var(--royal-blue) !important;\n    padding: 18px 45px;\n    border-radius: 12px; \/* Forme plus \"pro\" *\/\n    text-decoration: none !important;\n    font-weight: 700;\n    font-size: 17px;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1);\n}\n\n.btn-clean-white:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    background: #fdfdfd;\n}\n\n.cta-footer-note-light {\n    margin-top: 25px;\n    color: rgba(255, 255, 255, 0.5);\n    font-size: 13px;\n    letter-spacing: 0.5px;\n}\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 768px) {\n    .light-cta-card { padding: 40px 25px; border-radius: 24px; }\n    .cta-title-light { font-size: 30px; }\n    .cta-subtitle-light { font-size: 16px; }\n}\n<\/style>\n\n<section class=\"melyo-light-cta-section\">\n    <div class=\"light-cta-card\">\n        <h2 class=\"cta-title-light\">Sommes-nous compatibles ?<\/h2>\n        <p class=\"cta-subtitle-light\">\n            L\u2019accompagnement ne s\u2019adresse pas \u00e0 tout le monde. <br>\n            Le premier audit de votre situation est <strong>offert<\/strong>.\n        <\/p>\n        \n        <a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" target=\"_blank\" class=\"btn-clean-white\" rel=\"noopener\">\n            R\u00e9server mon audit gratuit\n        <\/a>\n        \n        <p class=\"cta-footer-note-light\">SANS ENGAGEMENT \u00b7 100% GRATUIT<\/p>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee184b1 elementor-widget elementor-widget-html\" data-id=\"ee184b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* --- VARIABLES --- *\/\n:root {\n    --royal-blue-classic: #0E4D92;\n    --font-melyo: 'Questrial', sans-serif;\n}\n\n\/* --- STRUCTURE G\u00c9N\u00c9RALE (LARGEUR TOTALE) --- *\/\n.melyo-footer-minimal {\n    background-color: var(--royal-blue-classic);\n    color: #ffffff;\n    font-family: var(--font-melyo);\n    padding: 60px 40px 30px; \/* Align\u00e9 sur le padding du header *\/\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.footer-inner {\n    max-width: 1300px; \/* Align\u00e9 sur la largeur du header *\/\n    margin: 0 auto;\n}\n\n\/* --- SECTION HAUTE --- *\/\n.footer-main {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 40px;\n    padding-bottom: 40px;\n}\n\n.footer-info {\n    flex: 1.5;\n}\n\n.footer-logo-min img {\n    height: 45px;\n    width: auto;\n    margin-bottom: 15px;\n}\n\n.footer-slogan {\n    font-size: 15px;\n    line-height: 1.6;\n    color: #ffffff;\n    max-width: 500px;\n    font-weight: 400;\n}\n\n\/* --- NAVIGATION --- *\/\n.footer-nav-min {\n    display: flex;\n    gap: 60px;\n}\n\n.footer-nav-min h4 {\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    margin-bottom: 15px;\n    color: #ffffff;\n    font-weight: 700;\n}\n\n.footer-nav-min ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.footer-nav-min ul li {\n    margin-bottom: 10px;\n}\n\n.footer-nav-min ul li a {\n    text-decoration: none;\n    color: #ffffff;\n    font-size: 14px;\n    transition: all 0.3s ease;\n    display: inline-block;\n}\n\n.footer-nav-min ul li a:hover {\n    color: #ffffff;\n    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);\n    transform: translateX(3px);\n}\n\n\/* --- SECTION BASSE (L\u00c9GAL \u00c9PUR\u00c9) --- *\/\n.footer-legal-min {\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n    padding-top: 25px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 15px;\n}\n\n.copy-min {\n    font-size: 13px;\n    color: #ffffff;\n}\n\n.legal-links-min {\n    display: flex;\n    gap: 25px;\n}\n\n.legal-links-min a {\n    text-decoration: none;\n    color: #ffffff;\n    font-size: 13px;\n    transition: 0.3s;\n    font-weight: 400;\n}\n\n.legal-links-min a:hover {\n    text-decoration: underline;\n    text-underline-offset: 4px;\n}\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 980px) {\n    .melyo-footer-minimal { padding: 50px 20px; }\n    .footer-main { flex-direction: column; text-align: center; }\n    .footer-slogan { margin: 0 auto; }\n    .footer-nav-min { justify-content: center; gap: 40px; }\n    .footer-legal-min { flex-direction: column; text-align: center; }\n}\n<\/style>\n\n<footer class=\"melyo-footer-minimal\">\n    <div class=\"footer-inner\">\n        \n        <div class=\"footer-main\">\n            <div class=\"footer-info\">\n                <a href=\"#hero\" class=\"footer-logo-min\">\n                    <img decoding=\"async\" src=\"http:\/\/melyo-agence.com\/wp-content\/uploads\/2026\/02\/Logo_melyo_officiel-1.jpg\" alt=\"Melyo\">\n                <\/a>\n                <p class=\"footer-slogan\">\n                    Rendre la visibilit\u00e9 digitale accessible, en accompagnant les ind\u00e9pendants \u00e0 valoriser leur savoir-faire et leur savoir-\u00eatre au service de leur activit\u00e9.\n                <\/p>\n            <\/div>\n\n            <nav class=\"footer-nav-min\">\n                <div class=\"nav-col\">\n                    <h4>Navigation<\/h4>\n                    <ul>\n                        <li><a href=\"#hero\">Accueil<\/a><\/li>\n                        <li><a href=\"#melyo\">Melyo<\/a><\/li>\n                        <li><a href=\"#accompagnement\">M\u00e9thode<\/a><\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"nav-col\">\n                    <h4>Ressources<\/h4>\n                    <ul>\n                        <li><a href=\"#avis\">Avis<\/a><\/li>\n                        <li><a href=\"#questions\">FAQ<\/a><\/li>\n                        <li><a href=\"https:\/\/www.cal.eu\/mathias-melyo\/30min?overlayCalendar=true\" target=\"_blank\" rel=\"noopener\">Contact<\/a><\/li>\n                    <\/ul>\n                <\/div>\n            <\/nav>\n        <\/div>\n\n        <div class=\"footer-legal-min\">\n            <div class=\"copy-min\">\n                \u00a9 Tous droits r\u00e9serv\u00e9s \u2013 Site r\u00e9alis\u00e9 par <strong>Melyo<\/strong>.\n            <\/div>\n            <div class=\"legal-links-min\">\n                <a href=\"https:\/\/melyo-agence.com\/index.php\/privacy-policy\/\">Mentions l\u00e9gales<\/a>\n                <a href=\"https:\/\/melyo-agence.com\/index.php\/po\/\">Politique de confidentialit\u00e9<\/a>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/footer>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Melyo rend la visibilit\u00e9 digitale accessible aux ind\u00e9pendants. Valorisez votre savoir-faire et votre savoir-\u00eatre avec une strat\u00e9gie claire en 90 jours. <\/p>\n","protected":false},"author":1,"featured_media":14,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-36","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/pages\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":232,"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/pages\/36\/revisions\/356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/media\/14"}],"wp:attachment":[{"href":"https:\/\/melyo-agence.com\/index.php\/wp-json\/wp\/v2\/media?parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}