{"id":2,"date":"2026-02-06T06:37:30","date_gmt":"2026-02-06T05:37:30","guid":{"rendered":"https:\/\/location.obstine-sarl.com\/?page_id=2"},"modified":"2026-02-06T06:56:59","modified_gmt":"2026-02-06T05:56:59","slug":"page-d-exemple","status":"publish","type":"page","link":"https:\/\/location.obstine-sarl.com\/","title":{"rendered":"Accueil"},"content":{"rendered":"\n<div id=\"obs-launch-waouh\">\n    <div class=\"video-hero\">\n        <video autoplay muted loop playsinline class=\"bg-video-waouh\">\n            <source src=\"https:\/\/location.obstine-sarl.com\/wp-content\/uploads\/2026\/02\/obstine-vehicule.mp4\" type=\"video\/mp4\">\n        <\/video>\n        <div class=\"gradient-overlay\"><\/div>\n    <\/div>\n    \n    <div class=\"content-waouh\">\n        <div class=\"badge-container\">\n            <span class=\"launch-badge\">\n                <span class=\"dot\"><\/span> Prochainement en ligne\n            <\/span>\n        <\/div>\n\n        <h2 class=\"hero-title\">\n            <span class=\"text-red\">TRANSPORT<\/span> \n            <span class=\"ampersand\">&#038;<\/span> \n            <span class=\"text-yellow\">LOGISTIQUE<\/span>\n        <\/h2>\n        \n        <p class=\"hero-subtitle\">L&#8217;excellence de la mobilit\u00e9 et de la distribution en RDC arrive sur vos \u00e9crans.<\/p>\n\n        <div class=\"glass-countdown\">\n            <div class=\"timer-unit\">\n                <div class=\"unit-value\" id=\"d-waouh\">07<\/div>\n                <div class=\"unit-label\">Jours<\/div>\n                <div class=\"unit-line red-bg\"><\/div>\n            <\/div>\n            <div class=\"timer-unit\">\n                <div class=\"unit-value\" id=\"h-waouh\">00<\/div>\n                <div class=\"unit-label\">Heures<\/div>\n                <div class=\"unit-line yellow-bg\"><\/div>\n            <\/div>\n            <div class=\"timer-unit\">\n                <div class=\"unit-value\" id=\"m-waouh\">00<\/div>\n                <div class=\"unit-label\">Minutes<\/div>\n                <div class=\"unit-line red-bg\"><\/div>\n            <\/div>\n            <div class=\"timer-unit\">\n                <div class=\"unit-value\" id=\"s-waouh\">00<\/div>\n                <div class=\"unit-label\">Secondes<\/div>\n                <div class=\"unit-line yellow-bg\"><\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"loading-zone\">\n            <div class=\"loading-bar\">\n                <div class=\"loading-progress\"><\/div>\n            <\/div>\n            <div class=\"loading-text\">Finalisation des syst\u00e8mes logistiques&#8230; <span class=\"percent\">95%<\/span><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    const launchDate = new Date();\n    launchDate.setDate(launchDate.getDate() + 7);\n\n    function startTimer() {\n        const mtn = new Date().getTime();\n        const diff = launchDate - mtn;\n\n        const jours = Math.floor(diff \/ (1000 * 60 * 60 * 24));\n        const heures = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n        const mins = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\n        const secs = Math.floor((diff % (1000 * 60)) \/ 1000);\n\n        document.getElementById(\"d-waouh\").innerText = jours.toString().padStart(2, '0');\n        document.getElementById(\"h-waouh\").innerText = heures.toString().padStart(2, '0');\n        document.getElementById(\"m-waouh\").innerText = mins.toString().padStart(2, '0');\n        document.getElementById(\"s-waouh\").innerText = secs.toString().padStart(2, '0');\n    }\n    setInterval(startTimer, 1000);\n    startTimer();\n<\/script>\n\n<style>\n    #obs-launch-waouh {\n        position: relative;\n        min-height: 80vh;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        border-radius: 40px;\n        background: #000;\n        margin: 40px 0;\n        font-family: 'Poppins', sans-serif;\n    }\n\n    \/* Video & Overlay *\/\n    .video-hero { position: absolute; inset: 0; z-index: 1; }\n    .bg-video-waouh { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) saturate(1.2); }\n    .gradient-overlay { \n        position: absolute; inset: 0; \n        background: radial-gradient(circle at center, transparent 0%, rgba(7,11,20,0.8) 100%); \n    }\n\n    \/* Content Layout *\/\n    .content-waouh { position: relative; z-index: 2; text-align: center; color: #fff; padding: 40px; width: 100%; }\n\n    .badge-container { margin-bottom: 25px; }\n    .launch-badge {\n        background: rgba(255,255,255,0.1);\n        border: 1px solid rgba(255,255,255,0.2);\n        padding: 10px 24px;\n        border-radius: 100px;\n        font-size: 13px;\n        letter-spacing: 2px;\n        text-transform: uppercase;\n        backdrop-filter: blur(5px);\n    }\n    .dot { \n        display: inline-block; width: 8px; height: 8px; background: #e74c3c; \n        border-radius: 50%; margin-right: 10px; box-shadow: 0 0 10px #e74c3c;\n        animation: blink-red 1.5s infinite;\n    }\n\n    \/* Title Styling *\/\n    .hero-title { font-size: clamp(30px, 8vw, 70px); font-weight: 900; line-height: 1; margin: 0 0 20px; letter-spacing: -2px; }\n    .text-red { color: #e74c3c; text-shadow: 0 0 30px rgba(231, 76, 60, 0.4); }\n    .text-yellow { color: #f1c40f; text-shadow: 0 0 30px rgba(241, 196, 15, 0.4); }\n    .ampersand { font-style: italic; opacity: 0.5; font-weight: 300; }\n    .hero-subtitle { font-size: 18px; opacity: 0.8; max-width: 600px; margin: 0 auto 50px; }\n\n    \/* Glassmorphism Countdown *\/\n    .glass-countdown { \n        display: flex; gap: 20px; justify-content: center; margin-bottom: 60px; flex-wrap: wrap;\n    }\n    .timer-unit {\n        background: rgba(255,255,255,0.03);\n        backdrop-filter: blur(15px);\n        border: 1px solid rgba(255,255,255,0.1);\n        width: 130px;\n        height: 150px;\n        border-radius: 24px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n    }\n    .unit-value { font-size: 50px; font-weight: 800; line-height: 1; }\n    .unit-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; opacity: 0.6; }\n    \n    .unit-line { position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; }\n    .red-bg { background: #e74c3c; box-shadow: 0 -5px 15px rgba(231, 76, 60, 0.5); }\n    .yellow-bg { background: #f1c40f; box-shadow: 0 -5px 15px rgba(241, 196, 15, 0.5); }\n\n    \/* Progress Bar *\/\n    .loading-zone { max-width: 450px; margin: 0 auto; }\n    .loading-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 10px; margin-bottom: 12px; }\n    .loading-progress { \n        width: 95%; height: 100%; border-radius: 10px;\n        background: linear-gradient(90deg, #e74c3c, #f1c40f);\n        animation: glow-bar 2s infinite alternate;\n    }\n    .loading-text { font-size: 12px; font-weight: 500; opacity: 0.7; letter-spacing: 1px; }\n    .percent { color: #f1c40f; }\n\n    @keyframes blink-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n    @keyframes glow-bar { \n        from { box-shadow: 0 0 5px rgba(241, 196, 15, 0.2); } \n        to { box-shadow: 0 0 15px rgba(241, 196, 15, 0.6); } \n    }\n\n    @media (max-width: 600px) {\n        .timer-unit { width: 45%; height: 120px; }\n        .unit-value { font-size: 35px; }\n        #obs-launch-waouh { border-radius: 0; height: auto; padding: 60px 0; }\n    }\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Prochainement en ligne TRANSPORT &#038; LOGISTIQUE L&#8217;excellence de la mobilit\u00e9 et de la distribution en RDC arrive sur vos \u00e9crans. 07 Jours 00 Heures 00 Minutes 00 Secondes Finalisation des syst\u00e8mes logistiques&#8230; 95%<\/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-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":4,"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/location.obstine-sarl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}