{"id":182,"date":"2025-12-23T13:30:55","date_gmt":"2025-12-23T11:30:55","guid":{"rendered":"https:\/\/digital25.fr\/?page_id=182"},"modified":"2025-12-23T13:30:55","modified_gmt":"2025-12-23T11:30:55","slug":"ma-methode","status":"publish","type":"page","link":"https:\/\/digital25.fr\/index.php\/ma-methode\/","title":{"rendered":"Ma m\u00e9thode"},"content":{"rendered":"\n<style>\n    \/* --- STYLE PAGE M\u00c9THODE --- *\/\n    \n    .process-wrapper {\n        background-color: transparent !important;\n        max-width: 1000px !important;\n        margin: 0 auto !important;\n        padding: 40px 20px !important;\n        font-family: 'Poppins', 'Segoe UI', sans-serif !important;\n    }\n\n    \/* HEADER *\/\n    .process-header {\n        text-align: center !important;\n        margin-bottom: 60px !important;\n    }\n    \n    .process-title {\n        font-size: 2.5rem !important;\n        font-weight: 800 !important;\n        color: #2c3e50 !important;\n        text-transform: uppercase !important;\n        margin-bottom: 20px !important;\n    }\n    \n    .process-highlight { color: #BA3D07 !important; }\n    \n    .process-subtitle {\n        color: #666 !important;\n        font-size: 1.1rem !important;\n        max-width: 700px !important;\n        margin: 0 auto !important;\n    }\n\n    \/* TIMELINE CONTAINER *\/\n    .timeline {\n        position: relative !important;\n        max-width: 800px !important;\n        margin: 0 auto !important;\n    }\n\n    \/* LIGNE VERTICALE CENTRALE *\/\n    .timeline::after {\n        content: '' !important;\n        position: absolute !important;\n        width: 4px !important;\n        background-color: #BA3D07 !important; \/* Ligne Orange *\/\n        top: 0 !important;\n        bottom: 0 !important;\n        left: 50% !important;\n        margin-left: -2px !important;\n        border-radius: 2px !important;\n        opacity: 0.2 !important;\n    }\n\n    \/* LES \u00c9TAPES (CARDS) *\/\n    .step-card {\n        padding: 10px 40px !important;\n        position: relative !important;\n        background-color: inherit !important;\n        width: 50% !important;\n        box-sizing: border-box !important;\n    }\n\n    \/* Position gauche\/droite *\/\n    .left { left: 0 !important; text-align: right !important; }\n    .right { left: 50% !important; text-align: left !important; }\n\n    \/* CONTENU DE LA CARTE *\/\n    .content {\n        padding: 30px !important;\n        background-color: white !important;\n        position: relative !important;\n        border-radius: 15px !important;\n        box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;\n        border: 1px solid #fff !important;\n        transition: transform 0.3s !important;\n    }\n    \n    .content:hover { transform: translateY(-5px) !important; }\n\n    \/* ROND CENTRAL (NUM\u00c9RO) *\/\n    .step-number {\n        width: 50px !important;\n        height: 50px !important;\n        background: #BA3D07 !important;\n        border: 4px solid #fff !important;\n        border-radius: 50% !important;\n        position: absolute !important;\n        top: 25px !important;\n        right: -25px !important; \/* Pour les \u00e9l\u00e9ments de gauche *\/\n        z-index: 10 !important;\n        color: #fff !important;\n        font-weight: bold !important;\n        font-size: 1.2rem !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        box-shadow: 0 0 0 4px rgba(186, 61, 7, 0.1) !important;\n    }\n\n    \/* Ajustement du rond pour les \u00e9l\u00e9ments de droite *\/\n    .right .step-number {\n        left: -25px !important;\n        right: auto !important;\n    }\n\n    \/* TYPO *\/\n    .step-title {\n        font-size: 1.4rem !important;\n        color: #2c3e50 !important;\n        font-weight: 700 !important;\n        margin-top: 0 !important;\n        margin-bottom: 10px !important;\n    }\n    \n    .step-desc {\n        color: #666 !important;\n        line-height: 1.5 !important;\n        font-size: 0.95rem !important;\n        margin: 0 !important;\n    }\n\n    \/* APPEL ACTION FINAL *\/\n    .process-cta {\n        text-align: center !important;\n        margin-top: 60px !important;\n    }\n    \n    .btn-start {\n        background: #2c3e50 !important;\n        color: #fff !important;\n        padding: 15px 40px !important;\n        border-radius: 50px !important;\n        text-decoration: none !important;\n        font-weight: bold !important;\n        transition: 0.3s !important;\n    }\n    .btn-start:hover { background: #BA3D07 !important; }\n\n    \/* MOBILE RESPONSIVE (Important pour timeline) *\/\n    @media screen and (max-width: 768px) {\n        .timeline::after { left: 31px !important; }\n        \n        .step-card {\n            width: 100% !important;\n            padding-left: 70px !important;\n            padding-right: 25px !important;\n        }\n        \n        .step-card.left, .step-card.right { left: 0 !important; text-align: left !important; }\n        \n        .left .step-number, .right .step-number {\n            left: 6px !important;\n            right: auto !important;\n        }\n        \n        .process-title { font-size: 1.8rem !important; }\n    }\n\/* --- IMPORTATION DE LA POLICE POPPINS (GOOGLE FONTS) --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700;800&display=swap');\n\n\/* --- APPLICATION \u00c0 TOUT LE SITE --- *\/\n\/* On force cette police sur tous les textes, titres et boutons *\/\nh1, h2, h3, h4, h5, h6, p, input, textarea, button, select, label {\n    font-family: 'Poppins', Helvetica, Arial, sans-serif !important;\n}\n\n\/* Petit ajustement pour que ce soit plus joli (moins tass\u00e9) *\/\nbody {\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased; \/* Rend la police plus nette sur Mac *\/\n}\n\n\/* Titres en majuscules plus impactants *\/\nh1, h2, .portfolio-title, .about-title, .hero-title {\n    letter-spacing: 0.5px;\n}\n\/* --- CORRECTIF ALIGNEMENT BULLES TIMELINE --- *\/\n\n\/* 1. R\u00e9glage par d\u00e9faut (Cartes de Gauche) *\/\n.step-number {\n    \/* On pousse beaucoup plus loin pour traverser la marge et atteindre la ligne *\/\n    \/* Calcul : 40px de marge + 25px (moiti\u00e9 de la bulle) = 65px *\/\n    right: -65px !important; \n    top: 20px !important; \/* Un peu plus haut pour \u00eatre align\u00e9 avec le titre *\/\n}\n\n\/* 2. R\u00e9glage pour les Cartes de Droite *\/\n.right .step-number {\n    left: -65px !important; \/* M\u00eame chose vers la gauche *\/\n    right: auto !important;\n}\n\n\/* 3. MOBILE : R\u00e9glage sp\u00e9cifique smartphone *\/\n@media screen and (max-width: 768px) {\n    .timeline::after { left: 31px !important; } \/* Rappel position ligne mobile *\/\n    \n    .left .step-number, .right .step-number {\n        \/* Sur mobile, la ligne est \u00e0 gauche pour tout le monde *\/\n        \/* On aligne la bulle sur cette ligne \u00e0 gauche *\/\n        left: -45px !important; \n        right: auto !important;\n    }\n}\n<\/style>\n\n<div class=\"process-wrapper\">\n\n    <div class=\"process-header\">\n        <h1 class=\"process-title\">Comment on <span class=\"process-highlight\">Travaille ensemble ?<\/span><\/h1>\n        <p class=\"process-subtitle\">Un processus clair, sans jargon technique, pour mener votre projet du premier caf\u00e9 \u00e0 la mise en ligne.<\/p>\n    <\/div>\n\n    <div class=\"timeline\">\n\n        <div class=\"step-card left\">\n            <div class=\"content\">\n                <div class=\"step-number\">1<\/div>\n                <h3 class=\"step-title\">La Rencontre<\/h3>\n                <p class=\"step-desc\">\n                    Tout commence par un \u00e9change (chez vous, en visio ou par t\u00e9l\u00e9phone). On ne parle pas de code, on parle de <strong>votre m\u00e9tier<\/strong>, vos clients et vos objectifs. C&rsquo;est l&rsquo;\u00e9tape la plus importante.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"step-card right\">\n            <div class=\"content\">\n                <div class=\"step-number\">2<\/div>\n                <h3 class=\"step-title\">La Strat\u00e9gie &#038; Maquette<\/h3>\n                <p class=\"step-desc\">\n                    Je vous propose une structure de site et un design adapt\u00e9 \u00e0 votre image. On valide ensemble l&rsquo;aspect visuel avant de commencer la construction technique.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"step-card left\">\n            <div class=\"content\">\n                <div class=\"step-number\">3<\/div>\n                <h3 class=\"step-title\">Le D\u00e9veloppement<\/h3>\n                <p class=\"step-desc\">\n                    C&rsquo;est l\u00e0 que je travaille dans l&rsquo;ombre. Je code votre site sur-mesure, j&rsquo;optimise la vitesse et je s\u00e9curise le tout sur mes serveurs. Vous suivez l&rsquo;avanc\u00e9e via un lien priv\u00e9.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"step-card right\">\n            <div class=\"content\">\n                <div class=\"step-number\">4<\/div>\n                <h3 class=\"step-title\">Mise en Ligne &#038; Formation<\/h3>\n                <p class=\"step-desc\">\n                    Une fois valid\u00e9, le site est lanc\u00e9 ! Je ne vous laisse pas seul : je vous forme (1h \u00e0 2h) pour que vous sachiez modifier vos textes et photos en toute autonomie.\n                <\/p>\n            <\/div>\n        <\/div>\n        \n        <div class=\"step-card left\">\n            <div class=\"content\">\n                <div class=\"step-number\">5<\/div>\n                <h3 class=\"step-title\">Suivi &#038; Maintenance<\/h3>\n                <p class=\"step-desc\">\n                    Votre site vit. Je m&rsquo;occupe des sauvegardes quotidiennes et des mises \u00e0 jour de s\u00e9curit\u00e9. Un probl\u00e8me ? Vous avez mon num\u00e9ro direct, pas un centre d&rsquo;appel.\n                <\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"process-cta\">\n        <a href=\"\/index.php\/contactez-nous\/\" class=\"btn-start\">Pr\u00eat \u00e0 d\u00e9marrer l&rsquo;\u00e9tape 1 ?<\/a>\n    <\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Comment on Travaille ensemble ? Un processus clair, sans jargon technique, pour mener votre projet du premier caf\u00e9 \u00e0 la mise en ligne. 1 La Rencontre Tout commence par un \u00e9change (chez vous, en visio ou par t\u00e9l\u00e9phone). On ne parle pas de code, on parle de votre m\u00e9tier, vos clients et vos objectifs. C&rsquo;est [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-182","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/pages\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":1,"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions\/183"}],"wp:attachment":[{"href":"https:\/\/digital25.fr\/index.php\/wp-json\/wp\/v2\/media?parent=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}