{"id":743,"date":"2025-11-27T22:34:47","date_gmt":"2025-11-27T20:34:47","guid":{"rendered":"https:\/\/adcommarketing.com\/?page_id=743"},"modified":"2025-11-27T23:05:34","modified_gmt":"2025-11-27T21:05:34","slug":"mes-realisation-test","status":"publish","type":"page","link":"https:\/\/adcommarketing.com\/index.php\/mes-realisation-test\/","title":{"rendered":"mes realisations"},"content":{"rendered":"\n<h1 class=\"wp-block-heading has-text-align-center\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-1-color\">Mes r\u00e9alisations<\/mark><\/h1>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Vous n&rsquo;allez jamais en croire vos yeux !<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<style>\n    :root {\n        --beige: #b0a89c;\n        --noir: #111111;\n        --blanc: #ffffff;\n    }\n\n    \/* Conteneur Principal *\/\n    .before-after {\n        position: relative;\n        width: 100%;\n        max-width: 1000px;\n        margin: 0 auto;\n        overflow: hidden;\n        border-radius: 20px;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n        cursor: ew-resize; \/* Curseur fl\u00e8che gauche-droite *\/\n        background-color: var(--noir);\n        user-select: none; \/* Emp\u00eache la s\u00e9lection de texte bleu accidentelle *\/\n    }\n\n    \/* Images *\/\n    .before-after img {\n        width: 100%;\n        height: auto;\n        display: block;\n        object-fit: cover;\n        pointer-events: none; \/* Important pour que la souris ne \"bloque\" pas sur l'image *\/\n    }\n\n    \/* Image du DESSUS (Avant) *\/\n    .before-after .img-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        \/* Au d\u00e9part, on coupe \u00e0 50% depuis la DROITE *\/\n        clip-path: inset(0 50% 0 0); \n        will-change: clip-path; \/* Optimisation performance *\/\n    }\n\n    \/* La barre verticale *\/\n    .slider-handle {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 50%; \/* Position initiale *\/\n        width: 4px;\n        background: var(--beige);\n        transform: translateX(-50%); \/* Pour centrer la ligne exactement sous la souris *\/\n        z-index: 10;\n        pointer-events: none;\n        box-shadow: 0 0 10px rgba(0,0,0,0.5);\n    }\n\n    \/* Le rond central *\/\n    .slider-circle {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 60px;\n        height: 60px;\n        background: var(--beige);\n        border-radius: 50%;\n        z-index: 11;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.4);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        pointer-events: none;\n    }\n\n    \/* Fl\u00e8ches et Texte dans le rond *\/\n    .slider-arrows {\n        color: var(--noir);\n        font-family: sans-serif;\n        font-weight: bold;\n        font-size: 18px;\n    }\n\n    \/* Labels (Optionnel : pour \u00e9crire Avant\/Apr\u00e8s sur les c\u00f4t\u00e9s) *\/\n    .label {\n        position: absolute;\n        top: 20px;\n        background: rgba(0,0,0,0.6);\n        color: #fff;\n        padding: 5px 10px;\n        border-radius: 5px;\n        font-family: 'Poppins', sans-serif;\n        font-size: 0.8rem;\n        pointer-events: none;\n        z-index: 5;\n    }\n    .label-before { left: 20px; }\n    .label-after { right: 20px; }\n\n<\/style>\n<\/head>\n<body>\n\n    <div class=\"before-after\" id=\"comparisonSlider\">\n        <img decoding=\"async\" src=\"http:\/\/adcommarketing.com\/wp-content\/uploads\/2025\/11\/SCORE-VUEES-EXPO-APRES-PUB.png\" alt=\"Apr\u00e8s\">\n        <span class=\"label label-after\">Apr\u00e8s<\/span>\n\n        <img decoding=\"async\" src=\"http:\/\/adcommarketing.com\/wp-content\/uploads\/2025\/11\/SCORE-VUEES-EXPO-AVANT-PUB.png\" class=\"img-overlay\" alt=\"Avant\">\n        <span class=\"label label-before\">Avant<\/span>\n\n        <div class=\"slider-handle\"><\/div>\n        <div class=\"slider-circle\">\n            <span class=\"slider-arrows\">&harr;<\/span>\n        <\/div>\n    <\/div>\n\n    <script>\n        const slider = document.getElementById('comparisonSlider');\n        const overlay = slider.querySelector('.img-overlay');\n        const handle = slider.querySelector('.slider-handle');\n        const circle = slider.querySelector('.slider-circle');\n\n        \/\/ Fonction principale de mouvement\n        function move(e) {\n            \/\/ R\u00e9cup\u00e9rer la position de la souris ou du doigt\n            \/\/ (e.pageX pour souris, e.touches[0].pageX pour tactile)\n            const pageX = e.type.includes('touch') ? e.touches[0].pageX : e.pageX;\n            \n            \/\/ Calculer la position relative dans le conteneur\n            const rect = slider.getBoundingClientRect();\n            let position = pageX - rect.left;\n\n            \/\/ Limiter pour ne pas sortir du cadre (entre 0 et largeur max)\n            if (position < 0) position = 0;\n            if (position > rect.width) position = rect.width;\n\n            \/\/ Calculer le pourcentage (0 \u00e0 100)\n            const percentage = (position \/ rect.width) * 100;\n\n            \/\/ --- MISE A JOUR DU VISUEL --- \/\/\n            \n            \/\/ 1. Couper l'image du dessus (clip-path inset right)\n            \/\/ On coupe ce qui d\u00e9passe \u00e0 droite du curseur\n            overlay.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;\n\n            \/\/ 2. Bouger la barre et le cercle\n            handle.style.left = `${percentage}%`;\n            circle.style.left = `${percentage}%`;\n        }\n\n        \/\/ \u00c9v\u00e9nements Souris (PC)\n        slider.addEventListener('mousemove', move);\n        \n        \/\/ \u00c9v\u00e9nements Tactiles (Mobile)\n        slider.addEventListener('touchmove', (e) => {\n            \/\/ Emp\u00eacher le scroll de la page quand on touche le slider\n            \/\/ e.preventDefault(); \n            move(e);\n        });\n\n        \/\/ Optionnel : Remettre au centre quand la souris sort (Effet rebond)\n        slider.addEventListener('mouseleave', () => {\n             overlay.style.transition = 'clip-path 0.5s ease';\n             handle.style.transition = 'left 0.5s ease';\n             circle.style.transition = 'left 0.5s ease';\n\n             overlay.style.clipPath = 'inset(0 50% 0 0)';\n             handle.style.left = '50%';\n             circle.style.left = '50%';\n\n             \/\/ Retirer la transition apr\u00e8s l'effet pour que le drag reste instantan\u00e9\n             setTimeout(() => {\n                 overlay.style.transition = 'none';\n                 handle.style.transition = 'none';\n                 circle.style.transition = 'none';\n             }, 500);\n        });\n    <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:40px; border-bottom: 5px solid #b0a89c; width:1080px; margin:auto; margin-bottom:40px;\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Bandeau Cr\u00e9ation Contenu &#8211; Glass Beige<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display&#038;display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* --- VARIABLES --- *\/\n        :root {\n            --beige: #b0a89c;\n            --blanc: #ffffff;\n            --texte-gris: #cccccc;\n            \n            \/* Param\u00e8tres Glass *\/\n            --glass-bg: rgba(20, 20, 20, 0.6);\n            --glass-border: rgba(176, 168, 156, 0.2);\n            --blur: 30px;\n            --radius: 32px;\n        }\n\n        body {\n            font-family: 'Poppins', sans-serif;\n            background-color: transparent; \n            margin: 0;\n            padding: 20px;\n        }\n\n        \/* --- BANDEAU RECTANGULAIRE (GLASS) --- *\/\n        .ads-banner-glass {\n            width: 100%;\n            max-width: 1100px;\n            margin: 0 auto;\n            \n            \/* EFFET VERRE *\/\n            background: var(--glass-bg);\n            backdrop-filter: blur(var(--blur));\n            -webkit-backdrop-filter: blur(var(--blur));\n            border: 1px solid var(--glass-border);\n            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.4);\n            border-radius: var(--radius);\n            \n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 60px;\n            gap: 60px;\n            \n            color: var(--blanc);\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* --- GAUCHE : TEXTE --- *\/\n        .banner-content {\n            flex: 1;\n        }\n\n        .banner-meta {\n            font-size: 0.8rem;\n            text-transform: uppercase;\n            letter-spacing: 3px;\n            color: rgba(255, 255, 255, 0.5);\n            font-weight: 600;\n            display: block;\n            margin-bottom: 15px;\n        }\n\n        \/* Titre en Beige *\/\n        .banner-title {\n            font-family: 'DM Serif Display', serif;\n            font-size: 2.8rem;\n            margin: 0 0 20px 0;\n            line-height: 1.1;\n            color: var(--beige);\n        }\n\n        .banner-desc {\n            font-size: 1rem;\n            line-height: 1.7;\n            color: var(--texte-gris);\n            font-weight: 300;\n            margin-bottom: 35px;\n            max-width: 550px;\n        }\n        \n        .banner-desc strong {\n            color: #fff;\n            font-weight: 500;\n        }\n\n        \/* --- DROITE : STATS --- *\/\n        .banner-stats {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 30px 50px;\n            flex-shrink: 0;\n            border-left: 1px solid var(--glass-border);\n            padding-left: 50px;\n        }\n\n        .stat-box h4 {\n            font-family: 'DM Serif Display', serif;\n            font-size: 2.5rem;\n            margin: 0;\n            color: var(--beige);\n        }\n\n        .stat-box span {\n            display: block;\n            font-size: 0.85rem;\n            color: rgba(255,255,255,0.6);\n            margin-top: 5px;\n        }\n\n        \/* --- BOUTON --- *\/\n        .simple-link {\n            display: inline-flex;\n            align-items: center;\n            color: var(--blanc);\n            text-decoration: none;\n            font-weight: 500;\n            border-bottom: 1px solid rgba(255,255,255,0.3);\n            padding-bottom: 2px;\n            transition: all 0.3s;\n        }\n        .simple-link:hover {\n            color: var(--beige);\n            border-color: var(--beige);\n            padding-bottom: 5px;\n        }\n\n        \/* --- RESPONSIVE --- *\/\n        @media (max-width: 900px) {\n            .ads-banner-glass {\n                flex-direction: column;\n                align-items: flex-start;\n                padding: 40px;\n            }\n            .banner-stats {\n                width: 100%;\n                border-left: none;\n                padding-left: 0;\n                padding-top: 30px;\n                border-top: 1px solid var(--glass-border);\n                margin-top: 20px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"ads-banner-glass\">\n        \n        <div class=\"banner-content\">\n            <span class=\"banner-meta\">Shooting &#038; Gestion Sociale<\/span>\n            <h3 class=\"banner-title\">Cr\u00e9ation de contenu<\/h3>\n            <p class=\"banner-desc\">\n                Je m\u2019occupe de tout, tu ne t&rsquo;occupes de rien !<br>\n                C\u2019est fini, tu ne payeras plus un alternant 1 000\u20ac\/mois pour qu\u2019il te fasse des posts Instagram m\u00eame pas optimis\u00e9s\u2026<br><br>\n                Je viens sur ton showroom, tes chantiers, ou dans tes lignes de production. \n                Je prends mes photos, je fais les retouches et je peux m\u00eame g\u00e9rer <strong>tes posts Instagram, Facebook ou Google !<\/strong><br><br>\n                Tu t\u2019occupes de ton m\u00e9tier, je m\u2019occupe du reste.\n            <\/p>\n            <a href=\"https:\/\/adcommarketing.com\/index.php\/contacte-moi\/\" class=\"simple-link\">\n                Organiser un shooting &rarr;\n            <\/a>\n        <\/div>\n\n        <div class=\"banner-stats\">\n            <div class=\"stat-box\">\n                <h4>Pro<\/h4>\n                <span>Qualit\u00e9 photo<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>Sur site<\/h4>\n                <span>D\u00e9placement inclus<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>100%<\/h4>\n                <span>Cl\u00e9 en main<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>Multi<\/h4>\n                <span>Canaux de diffusion<\/span>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:40px; border-bottom: 5px solid #b0a89c; width:1080px; margin:auto; margin-bottom:40px;\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Bandeau Facebook &#038; Instagram &#8211; Glass Beige<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display&#038;display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* --- VARIABLES --- *\/\n        :root {\n            --beige: #b0a89c; \/* Ton beige sp\u00e9cifique *\/\n            --blanc: #ffffff;\n            --texte-gris: #cccccc;\n            \n            \/* Param\u00e8tres Glass *\/\n            --glass-bg: rgba(20, 20, 20, 0.6);\n            --glass-border: rgba(176, 168, 156, 0.2);\n            --blur: 30px;\n            --radius: 32px;\n        }\n\n        body {\n            font-family: 'Poppins', sans-serif;\n            background-color: transparent; \/* Pas de fond, s'adapte \u00e0 ton site *\/\n            margin: 0;\n            padding: 20px;\n        }\n\n        \/* --- LE BANDEAU RECTANGULAIRE (GLASS) --- *\/\n        .ads-banner-glass {\n            width: 100%;\n            max-width: 1100px;\n            margin: 0 auto;\n            \n            \/* EFFET VERRE *\/\n            background: var(--glass-bg);\n            backdrop-filter: blur(var(--blur));\n            -webkit-backdrop-filter: blur(var(--blur));\n            border: 1px solid var(--glass-border);\n            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.4);\n            border-radius: var(--radius); \/* Bords bien arrondis *\/\n            \n            \/* Mise en page *\/\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 60px;\n            gap: 60px;\n            \n            color: var(--blanc);\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* --- GAUCHE : TEXTE --- *\/\n        .banner-content {\n            flex: 1;\n        }\n\n        .banner-meta {\n            font-size: 0.8rem;\n            text-transform: uppercase;\n            letter-spacing: 3px;\n            color: rgba(255, 255, 255, 0.5);\n            font-weight: 600;\n            display: block;\n            margin-bottom: 15px;\n        }\n\n        \/* LE TITRE EN BEIGE *\/\n        .banner-title {\n            font-family: 'DM Serif Display', serif;\n            font-size: 2.8rem;\n            margin: 0 0 20px 0;\n            line-height: 1.1;\n            color: var(--beige); \/* Application de la couleur demand\u00e9e *\/\n        }\n\n        .banner-desc {\n            font-size: 1rem;\n            line-height: 1.7;\n            color: var(--texte-gris);\n            font-weight: 300;\n            margin-bottom: 35px;\n            max-width: 500px;\n        }\n\n        \/* --- DROITE : CHIFFRES --- *\/\n        .banner-stats {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 30px 50px;\n            flex-shrink: 0;\n            border-left: 1px solid var(--glass-border);\n            padding-left: 50px;\n        }\n\n        .stat-box h4 {\n            font-family: 'DM Serif Display', serif;\n            font-size: 2.5rem;\n            margin: 0;\n            color: var(--beige); \/* Chiffres en beige aussi pour l'harmonie *\/\n        }\n\n        .stat-box span {\n            display: block;\n            font-size: 0.85rem;\n            color: rgba(255,255,255,0.6);\n            margin-top: 5px;\n        }\n\n        \/* --- BOUTON --- *\/\n        .simple-link {\n            display: inline-flex;\n            align-items: center;\n            color: var(--blanc);\n            text-decoration: none;\n            font-weight: 500;\n            border-bottom: 1px solid rgba(255,255,255,0.3);\n            padding-bottom: 2px;\n            transition: all 0.3s;\n        }\n        .simple-link:hover {\n            color: var(--beige);\n            border-color: var(--beige);\n            padding-bottom: 5px;\n        }\n\n        \/* --- RESPONSIVE --- *\/\n        @media (max-width: 900px) {\n            .ads-banner-glass {\n                flex-direction: column;\n                align-items: flex-start;\n                padding: 40px;\n            }\n            .banner-stats {\n                width: 100%;\n                border-left: none;\n                padding-left: 0;\n                padding-top: 30px;\n                border-top: 1px solid var(--glass-border);\n                margin-top: 20px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"ads-banner-glass\">\n        \n        <div class=\"banner-content\">\n            <span class=\"banner-meta\">Acquisition &#038; Visibilit\u00e9<\/span>\n            <h3 class=\"banner-title\">Facebook &#038; Instagram<\/h3>\n            <p class=\"banner-desc\">\n                Toucher la bonne audience ne devrait pas \u00eatre un hasard. \n                Gr\u00e2ce \u00e0 un ciblage pr\u00e9cis, nous transformons l&rsquo;int\u00e9r\u00eat en action concr\u00e8te.\n                Une gestion optimis\u00e9e pour faire grandir votre projet, simplement.\n            <\/p>\n            <a href=\"https:\/\/adcommarketing.com\/index.php\/contacte-moi\/\" class=\"simple-link\">\n                D\u00e9couvrir l&rsquo;accompagnement &rarr;\n            <\/a>\n        <\/div>\n\n        <div class=\"banner-stats\">\n            <div class=\"stat-box\">\n                <h4>+ Qualifi\u00e9<\/h4>\n                <span>Trafic cibl\u00e9<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>24\/7<\/h4>\n                <span>Actif<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>100%<\/h4>\n                <span>Mesurable<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>x2<\/h4>\n                <span>Potentiel<\/span>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:40px; border-bottom: 5px solid #b0a89c; width:1080px; margin:auto; margin-bottom:40px;\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Bandeau Site Web &#8211; Glass Beige<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display&#038;display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* --- VARIABLES IDENTIQUES AU PR\u00c9C\u00c9DENT --- *\/\n        :root {\n            --beige: #b0a89c; \/* Ton beige *\/\n            --blanc: #ffffff;\n            --texte-gris: #cccccc;\n            \n            \/* Param\u00e8tres Glass *\/\n            --glass-bg: rgba(20, 20, 20, 0.6);\n            --glass-border: rgba(176, 168, 156, 0.2);\n            --blur: 30px;\n            --radius: 32px;\n        }\n\n        body {\n            font-family: 'Poppins', sans-serif;\n            background-color: transparent; \/* Fond transparent *\/\n            margin: 0;\n            padding: 20px;\n        }\n\n        \/* --- LE BANDEAU --- *\/\n        .ads-banner-glass {\n            width: 100%;\n            max-width: 1100px;\n            margin: 0 auto;\n            \n            \/* Effet Verre *\/\n            background: var(--glass-bg);\n            backdrop-filter: blur(var(--blur));\n            -webkit-backdrop-filter: blur(var(--blur));\n            border: 1px solid var(--glass-border);\n            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.4);\n            border-radius: var(--radius);\n            \n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 60px;\n            gap: 60px;\n            \n            color: var(--blanc);\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* --- GAUCHE : TEXTE --- *\/\n        .banner-content {\n            flex: 1;\n        }\n\n        .banner-meta {\n            font-size: 0.8rem;\n            text-transform: uppercase;\n            letter-spacing: 3px;\n            color: rgba(255, 255, 255, 0.5);\n            font-weight: 600;\n            display: block;\n            margin-bottom: 15px;\n        }\n\n        \/* Titre en Beige *\/\n        .banner-title {\n            font-family: 'DM Serif Display', serif;\n            font-size: 2.8rem;\n            margin: 0 0 20px 0;\n            line-height: 1.1;\n            color: var(--beige);\n        }\n\n        .banner-desc {\n            font-size: 1rem;\n            line-height: 1.7;\n            color: var(--texte-gris);\n            font-weight: 300;\n            margin-bottom: 35px;\n            max-width: 580px; \/* Un peu plus large pour ce texte *\/\n        }\n        \n        .banner-desc strong {\n            color: #fff;\n            font-weight: 500;\n        }\n\n        \/* --- DROITE : CHIFFRES --- *\/\n        .banner-stats {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 30px 50px;\n            flex-shrink: 0;\n            border-left: 1px solid var(--glass-border);\n            padding-left: 50px;\n        }\n\n        .stat-box h4 {\n            font-family: 'DM Serif Display', serif;\n            font-size: 2.5rem;\n            margin: 0;\n            color: var(--beige); \/* Chiffres en beige *\/\n        }\n\n        .stat-box span {\n            display: block;\n            font-size: 0.85rem;\n            color: rgba(255,255,255,0.6);\n            margin-top: 5px;\n        }\n\n        \/* --- BOUTON --- *\/\n        .simple-link {\n            display: inline-flex;\n            align-items: center;\n            color: var(--blanc);\n            text-decoration: none;\n            font-weight: 500;\n            border-bottom: 1px solid rgba(255,255,255,0.3);\n            padding-bottom: 2px;\n            transition: all 0.3s;\n        }\n        .simple-link:hover {\n            color: var(--beige);\n            border-color: var(--beige);\n            padding-bottom: 5px;\n        }\n\n        \/* --- RESPONSIVE --- *\/\n        @media (max-width: 900px) {\n            .ads-banner-glass {\n                flex-direction: column;\n                align-items: flex-start;\n                padding: 40px;\n            }\n            .banner-stats {\n                width: 100%;\n                border-left: none;\n                padding-left: 0;\n                padding-top: 30px;\n                border-top: 1px solid var(--glass-border);\n                margin-top: 20px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"ads-banner-glass\">\n        \n        <div class=\"banner-content\">\n            <span class=\"banner-meta\">D\u00e9veloppement Web<\/span>\n            <h3 class=\"banner-title\">Site vitrine &#038; e-commerce<\/h3>\n            <p class=\"banner-desc\">\n                Je vois encore des agences vendre des sites \u00e0 10 000 ou 15 000 \u20ac.\n                Et derri\u00e8re, te coller un abonnement \u00e0 1 000 \u20ac\/mois \u00ab\u00a0pour la maintenance\u00a0\u00bb.<br><br>\n                Soyons honn\u00eates : un site web, \u00e7a ne vaut pas ce prix-l\u00e0.<br>\n                Ce qui compte, c\u2019est d\u2019avoir <strong>un site qui te ram\u00e8ne du business.<\/strong><br><br>\n                On remet un peu de bon sens dans le digital ensemble ?\n            <\/p>\n            <a href=\"https:\/\/adcommarketing.com\/index.php\/contacte-moi\/\" class=\"simple-link\">\n                D\u00e9marrer mon projet &rarr;\n            <\/a>\n        <\/div>\n\n        <div class=\"banner-stats\">\n            <div class=\"stat-box\">\n                <h4>100%<\/h4>\n                <span>Propri\u00e9taire<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>0\u20ac<\/h4>\n                <span>Frais cach\u00e9s<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>SEO<\/h4>\n                <span>Optimis\u00e9 Google<\/span>\n            <\/div>\n            <div class=\"stat-box\">\n                <h4>Unique<\/h4>\n                <span>Design sur-mesure<\/span>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Mes r\u00e9alisations Vous n&rsquo;allez jamais en croire vos yeux ! Apr\u00e8s Avant &harr; Bandeau Cr\u00e9ation Contenu &#8211; Glass Beige Shooting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-743","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/pages\/743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/comments?post=743"}],"version-history":[{"count":12,"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/pages\/743\/revisions"}],"predecessor-version":[{"id":760,"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/pages\/743\/revisions\/760"}],"wp:attachment":[{"href":"https:\/\/adcommarketing.com\/index.php\/wp-json\/wp\/v2\/media?parent=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}