{"id":9,"date":"2026-08-31T08:52:17","date_gmt":"2026-08-31T08:52:17","guid":{"rendered":"https:\/\/vibeandlive.fr\/?page_id=9"},"modified":"2026-09-20T10:12:43","modified_gmt":"2026-09-20T10:12:43","slug":"accueil","status":"publish","type":"page","link":"https:\/\/vibeandlive.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\n<style>\n\n\/* ==========================================================\n   VIBE & LIVE \u2014 PAGE D'ACCUEIL FULLSCREEN\n   Compatible Blocksy\n   ========================================================== *\/\n\n\n\/* ----------------------------------------------------------\n   CORRECTIONS BLOCKSY \/ WORDPRESS\n   ---------------------------------------------------------- *\/\n\nhtml,\nbody {\n    margin: 0;\n    padding: 0;\n    overflow-x: clip;\n}\n\n\/* Autorise notre page \u00e0 sortir du conteneur Blocksy *\/\nbody.home .site-main,\nbody.home article,\nbody.home .entry-content,\nbody.home .ct-container,\nbody.home .ct-container-full {\n    overflow: visible !important;\n}\n\n\/* Supprime les espaces WordPress autour du bloc *\/\nbody.home .entry-content {\n    margin: 0 !important;\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n}\n\n\n\/* ==========================================================\n   CONTENEUR PRINCIPAL\n   ========================================================== *\/\n\n.vl-screen {\n    --radio-cyan: #4ed9e8;\n    --radio-blue: #1469ca;\n\n    --event-gold: #ffae00;\n    --event-dark: #8a5200;\n\n    position: relative;\n\n    \/*\n       IMPORTANT :\n       on sort du conteneur central de Blocksy\n       pour prendre r\u00e9ellement toute la largeur de l'\u00e9cran.\n    *\/\n    width: 100vw !important;\n    max-width: 100vw !important;\n\n    left: 50%;\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n\n    min-height: 100vh;\n    min-height: 100dvh;\n\n    background: #02070c;\n\n    color: white;\n    overflow: hidden;\n    isolation: isolate;\n}\n\n\n\/* Si tu es connect\u00e9 \u00e0 WordPress,\n   on tient compte de la barre admin en haut *\/\nbody.admin-bar .vl-screen {\n    min-height: calc(100dvh - 32px);\n}\n\n@media (max-width: 782px) {\n    body.admin-bar .vl-screen {\n        min-height: calc(100dvh - 46px);\n    }\n}\n\n\n\/* ==========================================================\n   FOND LYS\n   ========================================================== *\/\n\n.vl-screen::before {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n\n    z-index: -3;\n\n    background:\n        linear-gradient(\n            rgba(0, 5, 10, 0.34),\n            rgba(0, 5, 10, 0.50)\n        ),\n        url(\"http:\/\/vibeandlive.fr\/wp-content\/uploads\/2026\/08\/lys.png\");\n\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-size: cover;\n}\n\n\n\/* Petit vignettage pour donner de la profondeur *\/\n\n.vl-screen::after {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n\n    z-index: -2;\n\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            ellipse at center,\n            transparent 25%,\n            rgba(0,0,0,0.18) 65%,\n            rgba(0,0,0,0.46) 100%\n        );\n}\n\n\n\/* ==========================================================\n   LES DEUX UNIVERS\n   ========================================================== *\/\n\n.vl-inner {\n    width: 100%;\n    min-height: inherit;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0, 1fr)\n        1px\n        minmax(0, 1fr);\n\n    align-items: stretch;\n}\n\n\n.vl-side {\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    min-width: 0;\n\n    overflow: hidden;\n\n    color: white !important;\n    text-decoration: none !important;\n\n    transition:\n        background 0.6s ease;\n}\n\n\n\/* ==========================================================\n   COLORATION DE TOUTE LA MOITI\u00c9 D'\u00c9CRAN AU SURVOL\n   ========================================================== *\/\n\n.vl-side::before {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n\n    z-index: 0;\n\n    opacity: 0;\n\n    transition:\n        opacity 0.65s cubic-bezier(.2,.8,.2,1);\n}\n\n\n\/* RADIO *\/\n\n.vl-radio::before {\n    background:\n\n        radial-gradient(\n            circle at center,\n            rgba(86, 231, 246, 0.25) 0%,\n            rgba(34, 137, 219, 0.15) 33%,\n            rgba(5, 57, 91, 0.09) 58%,\n            transparent 83%\n        ),\n\n        linear-gradient(\n            135deg,\n            rgba(32, 180, 211, 0.05),\n            rgba(11, 75, 153, 0.07)\n        );\n}\n\n\n\/* EVENT *\/\n\n.vl-event::before {\n    background:\n\n        radial-gradient(\n            circle at center,\n            rgba(255, 190, 51, 0.27) 0%,\n            rgba(230, 123, 0, 0.15) 34%,\n            rgba(87, 48, 0, 0.11) 60%,\n            transparent 83%\n        ),\n\n        linear-gradient(\n            135deg,\n            rgba(139, 83, 0, 0.04),\n            rgba(255, 154, 0, 0.07)\n        );\n}\n\n\n\/* ==========================================================\n   GROS HALO DERRI\u00c8RE CHAQUE LOGO\n   ========================================================== *\/\n\n.vl-glow {\n    position: absolute;\n\n    z-index: 1;\n\n    width: min(45vw, 760px);\n    aspect-ratio: 1 \/ 1;\n\n    border-radius: 50%;\n\n    pointer-events: none;\n\n    opacity: 0;\n\n    transform: scale(0.70);\n\n    filter: blur(75px);\n\n    transition:\n        opacity 0.65s ease,\n        transform 0.8s cubic-bezier(.2,.8,.2,1);\n}\n\n\n.vl-radio .vl-glow {\n    background:\n        radial-gradient(\n            circle,\n            rgba(93, 231, 246, 0.55) 0%,\n            rgba(255,255,255,0.14) 22%,\n            rgba(31, 132, 221, 0.22) 45%,\n            transparent 72%\n        );\n}\n\n\n.vl-event .vl-glow {\n    background:\n        radial-gradient(\n            circle,\n            rgba(255, 188, 48, 0.50) 0%,\n            rgba(255, 142, 0, 0.21) 32%,\n            rgba(94, 50, 0, 0.22) 52%,\n            transparent 74%\n        );\n}\n\n\n\/* ==========================================================\n   CONTENU\n   ========================================================== *\/\n\n.vl-content {\n    position: relative;\n    z-index: 3;\n\n    width: min(86%, 650px);\n\n    padding:\n        clamp(35px, 5vw, 75px)\n        clamp(20px, 4vw, 55px);\n\n    box-sizing: border-box;\n\n    text-align: center;\n\n    transition:\n        transform 0.55s cubic-bezier(.2,.8,.2,1);\n}\n\n\n\/* ==========================================================\n   LOGOS\n   ========================================================== *\/\n\n.vl-logo-wrap {\n    width: 100%;\n\n    min-height:\n        clamp(170px, 19vw, 310px);\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin-bottom: 15px;\n}\n\n\n.vl-logo {\n    display: block;\n\n    width: auto;\n    height: auto;\n\n    max-width: min(100%, 500px);\n    max-height: 280px;\n\n    object-fit: contain;\n\n    transition:\n        transform 0.6s cubic-bezier(.2,.8,.2,1),\n        filter 0.6s ease;\n}\n\n\n\/* ==========================================================\n   PETITE LIGNE DE TEXTE\n   ========================================================== *\/\n\n.vl-tag {\n    margin:\n        5px\n        0\n        14px;\n\n    font-size:\n        clamp(10px, 0.8vw, 13px);\n\n    font-weight: 600;\n\n    letter-spacing: 0.26em;\n\n    text-transform: uppercase;\n}\n\n\n.vl-radio .vl-tag {\n    color: var(--radio-cyan);\n}\n\n\n.vl-event .vl-tag {\n    color: var(--event-gold);\n}\n\n\n\/* ==========================================================\n   TITRES\n   Le !important emp\u00eache Blocksy de reprendre sa couleur\n   ========================================================== *\/\n\n.vl-screen .vl-title {\n    margin:\n        0\n        0\n        16px !important;\n\n    padding: 0 !important;\n\n    color: #ffffff !important;\n\n    font-size:\n        clamp(30px, 3vw, 55px);\n\n    font-weight: 650;\n\n    line-height: 1.08;\n\n    letter-spacing: -0.035em;\n\n    text-transform: none;\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n   ========================================================== *\/\n\n.vl-text {\n    max-width: 520px;\n\n    margin:\n        0\n        auto;\n\n    color:\n        rgba(255,255,255,0.68) !important;\n\n    font-size:\n        clamp(15px, 1.15vw, 19px);\n\n    line-height: 1.7;\n\n    font-weight: 300;\n}\n\n\n\/* ==========================================================\n   LIEN DU BAS\n   ========================================================== *\/\n\n.vl-cta {\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-top: 28px;\n\n    color: white !important;\n\n    font-size: 14px;\n\n    font-weight: 650;\n\n    text-decoration: none !important;\n\n    transition:\n        transform 0.35s ease;\n}\n\n\n.vl-arrow {\n    font-size: 18px;\n\n    transition:\n        transform 0.4s cubic-bezier(.2,.8,.2,1);\n}\n\n\n\/* ==========================================================\n   S\u00c9PARATEUR CENTRAL\n   ========================================================== *\/\n\n.vl-divider {\n    position: relative;\n\n    z-index: 6;\n\n    width: 1px;\n\n    background:\n        linear-gradient(\n            to bottom,\n\n            transparent 0%,\n\n            rgba(255,255,255,0.07) 10%,\n\n            rgba(255,255,255,0.22) 50%,\n\n            rgba(255,255,255,0.07) 90%,\n\n            transparent 100%\n        );\n}\n\n\n\/* ==========================================================\n   EFFETS SOURIS\n   ========================================================== *\/\n\n@media (hover: hover) {\n\n    .vl-side:hover::before {\n        opacity: 1;\n    }\n\n\n    .vl-side:hover .vl-glow {\n        opacity: 1;\n        transform: scale(1.12);\n    }\n\n\n    .vl-side:hover .vl-content {\n        transform: translateY(-5px);\n    }\n\n\n    .vl-side:hover .vl-logo {\n        transform: scale(1.045);\n    }\n\n\n    .vl-radio:hover .vl-logo {\n        filter:\n            drop-shadow(\n                0 0 10px\n                rgba(255,255,255,0.22)\n            )\n            drop-shadow(\n                0 0 32px\n                rgba(57,217,237,0.40)\n            );\n    }\n\n\n    .vl-event:hover .vl-logo {\n        filter:\n            drop-shadow(\n                0 0 12px\n                rgba(255,205,90,0.18)\n            )\n            drop-shadow(\n                0 0 34px\n                rgba(255,157,0,0.38)\n            );\n    }\n\n\n    .vl-side:hover .vl-cta {\n        transform: translateY(-2px);\n    }\n\n\n    .vl-side:hover .vl-arrow {\n        transform: translateX(7px);\n    }\n}\n\n\n\/* ==========================================================\n   TABLETTE \/ T\u00c9L\u00c9PHONE\n   RADIO EN HAUT\n   EVENT EN BAS\n   ========================================================== *\/\n\n@media (max-width: 900px) {\n\n    .vl-screen {\n        min-height: 100dvh;\n    }\n\n\n    .vl-inner {\n        display: grid;\n\n        grid-template-columns: 1fr;\n\n        grid-template-rows:\n            minmax(50dvh, auto)\n            1px\n            minmax(50dvh, auto);\n    }\n\n\n    .vl-side {\n        min-height: 50dvh;\n    }\n\n\n    .vl-divider {\n        width: 82%;\n        height: 1px;\n\n        justify-self: center;\n\n        background:\n            linear-gradient(\n                to right,\n\n                transparent 0%,\n\n                rgba(255,255,255,0.08) 12%,\n\n                rgba(255,255,255,0.26) 50%,\n\n                rgba(255,255,255,0.08) 88%,\n\n                transparent 100%\n            );\n    }\n\n\n    .vl-content {\n        width: min(92%, 620px);\n\n        padding:\n            35px\n            20px;\n    }\n\n\n    .vl-logo-wrap {\n        min-height: 170px;\n    }\n\n\n    .vl-logo {\n        max-width: min(90%, 390px);\n\n        max-height: 180px;\n    }\n\n\n    .vl-glow {\n        width: 85vw;\n\n        max-width: 600px;\n    }\n\n\n    .vl-screen .vl-title {\n        font-size:\n            clamp(28px, 7vw, 42px);\n    }\n\n\n    .vl-text {\n        max-width: 430px;\n    }\n}\n\n\n\/* ==========================================================\n   PETITS T\u00c9L\u00c9PHONES\n   ========================================================== *\/\n\n@media (max-width: 520px) {\n\n    .vl-content {\n        width: 94%;\n\n        padding:\n            25px\n            14px\n            32px;\n    }\n\n\n    .vl-logo-wrap {\n        min-height: 130px;\n\n        margin-bottom: 5px;\n    }\n\n\n    .vl-logo {\n        max-width: min(95%, 300px);\n\n        max-height: 135px;\n    }\n\n\n    .vl-tag {\n        font-size: 10px;\n\n        letter-spacing: 0.20em;\n    }\n\n\n    .vl-screen .vl-title {\n        font-size:\n            clamp(25px, 8vw, 35px);\n\n        margin-bottom:\n            11px !important;\n    }\n\n\n    .vl-text {\n        font-size: 14px;\n\n        line-height: 1.55;\n\n        max-width: 330px;\n    }\n\n\n    .vl-cta {\n        margin-top: 19px;\n\n        font-size: 13px;\n    }\n}\n\n\n\/* ==========================================================\n   \u00c9CRANS TACTILES :\n   pas de hover, donc on laisse un soup\u00e7on de couleur\n   ========================================================== *\/\n\n@media (hover: none) {\n\n    .vl-radio::before,\n    .vl-event::before {\n        opacity: 0.26;\n    }\n\n\n    .vl-glow {\n        opacity: 0.18;\n\n        transform: scale(1);\n    }\n}\n\n\n\/* ==========================================================\n   TR\u00c8S GRANDS \u00c9CRANS \/ TV \/ 4K\n   ========================================================== *\/\n\n@media (min-width: 1800px) {\n\n    .vl-content {\n        width: min(82%, 780px);\n    }\n\n\n    .vl-logo {\n        max-width: 580px;\n\n        max-height: 320px;\n    }\n\n\n    .vl-screen .vl-title {\n        font-size: 58px;\n    }\n\n\n    .vl-text {\n        font-size: 20px;\n\n        max-width: 580px;\n    }\n\n\n    .vl-tag {\n        font-size: 14px;\n    }\n\n\n    .vl-cta {\n        font-size: 16px;\n    }\n}\n\n<\/style>\n\n\n<div class=\"vl-screen\">\n\n    <div class=\"vl-inner\">\n\n\n        <!-- ============================================\n             RADIO\n             ============================================ -->\n\n        <a class=\"vl-side vl-radio\" href=\"https:\/\/vibeandlive.fr\/index.php\/maintenance\/\" aria-label=\"Entrer dans VIBE &amp; LIVE Radio\">\n\n    <span class=\"vl-glow\"><\/span>\n\n    <div class=\"vl-content\">\n\n        <div class=\"vl-logo-wrap\">\n\n            <img decoding=\"async\" class=\"vl-logo\" src=\"http:\/\/vibeandlive.fr\/wp-content\/uploads\/2026\/09\/VIBE-paysage-trans.png\" alt=\"VIBE &amp; LIVE Radio\" style=\"\n                    width: 100%;\n                    max-width: none;\n                    max-height: none;\n                \">\n\n        <\/div>\n\n        <div class=\"vl-tag\">\n            RADIO \u00b7 M\u00c9DIAS \u00b7 ACTU\n        <\/div>\n\n        <h2 class=\"vl-title\">\n            La radio autrement.\n        <\/h2>\n\n        <p class=\"vl-text\">\n            Des podcasts, des d\u00e9couvertes\n            et tout ce qui bouge autour de vous.\n        <\/p>\n\n        <span class=\"vl-cta\" style=\"padding-left: 28px;\">\n    Entrer dans la radio\n    <span class=\"vl-arrow\">\u2192<\/span>\n<\/span>\n\n    <\/div>\n\n<\/a>\n\n\n\n        <!-- ============================================\n             S\u00c9PARATION\n             ============================================ -->\n\n        <div class=\"vl-divider\"><\/div>\n\n\n\n        <!-- ============================================\n             EVENT\n             ============================================ -->\n\n        <a class=\"vl-side vl-event\" href=\"https:\/\/vibeandlive.fr\/index.php\/maintenance\/\" aria-label=\"Pr\u00e9parer votre \u00e9v\u00e9nement avec VIBE &amp; LIVE\">\n\n            <span class=\"vl-glow\"><\/span>\n\n\n            <div class=\"vl-content\">\n\n                <div class=\"vl-logo-wrap\">\n\n                    <img decoding=\"async\" class=\"vl-logo\" src=\"http:\/\/vibeandlive.fr\/wp-content\/uploads\/2026\/09\/Nouveau-logo-VIBE-LIVE.png\" alt=\"VIBE &amp; LIVE Event\">\n\n                <\/div>\n\n\n                <div class=\"vl-tag\">\n                    EVENT \u00b7 SON \u00b7 LUMI\u00c8RE\n                <\/div>\n\n\n                <h2 class=\"vl-title\">\n                    Une id\u00e9e en t\u00eate ?\n                <\/h2>\n\n\n               <p class=\"vl-text\">\n    Son, lumi\u00e8re, vid\u00e9o et animation.<br>\n    Votre id\u00e9e, notre expertise\n<\/p>\n\n\n                <span class=\"vl-cta\" style=\"padding-left: 28px;\">\n\n                    Pr\u00e9parer mon \u00e9v\u00e9nement\n\n                    <span class=\"vl-arrow\">\n                        \u2192\n                    <\/span>\n\n                <\/span>\n\n            <\/div>\n\n        <\/a>\n\n\n    <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>RADIO \u00b7 M\u00c9DIAS \u00b7 ACTU La radio autrement. Des podcasts, des d\u00e9couvertes et tout ce qui bouge autour de vous. Entrer dans la radio \u2192 EVENT \u00b7 SON \u00b7 LUMI\u00c8RE Une id\u00e9e en t\u00eate ? Son, lumi\u00e8re, vid\u00e9o et animation. Votre id\u00e9e, notre expertise Pr\u00e9parer mon \u00e9v\u00e9nement \u2192<\/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-9","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":19,"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/vibeandlive.fr\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}