{"id":11,"date":"2026-02-11T20:44:13","date_gmt":"2026-02-11T20:44:13","guid":{"rendered":"https:\/\/gren-ad.com\/?page_id=11"},"modified":"2026-02-21T22:40:26","modified_gmt":"2026-02-21T22:40:26","slug":"accueil","status":"publish","type":"page","link":"https:\/\/gren-ad.com\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38ad9fa e-con-full e-flex e-con e-parent\" data-id=\"38ad9fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c660443 elementor-widget__width-inherit elementor-widget elementor-widget-image\" data-id=\"c660443\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/gren-ad.com\/wp-content\/uploads\/2026\/02\/09-1024x585.jpg\" class=\"attachment-large size-large wp-image-42\" alt=\"\" srcset=\"https:\/\/gren-ad.com\/wp-content\/uploads\/2026\/02\/09-1024x585.jpg 1024w, https:\/\/gren-ad.com\/wp-content\/uploads\/2026\/02\/09-300x171.jpg 300w, https:\/\/gren-ad.com\/wp-content\/uploads\/2026\/02\/09-768x438.jpg 768w, https:\/\/gren-ad.com\/wp-content\/uploads\/2026\/02\/09.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab75225 e-con-full e-flex e-con e-parent\" data-id=\"ab75225\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d453c40 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"d453c40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2112058 e-con-full e-flex e-con e-parent\" data-id=\"2112058\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62e38e5 elementor-widget elementor-widget-html\" data-id=\"62e38e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<style>\n\/* 1. Grid Layout & Entrance Animation Settings *\/\n.id-grid-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    width: 100%;\n    margin: 0 auto;\n    \n    \/* Entrance Animation Initial State *\/\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(30px);\n    \/* Using your specific cubic-bezier and 1s duration *\/\n    transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), \n                transform 1s cubic-bezier(0.5, 0, 0, 1);\n}\n\n\/* This class is triggered by the JS at the bottom *\/\n.id-grid-container.is-visible {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n\n\/* 2. Card Styling with your 10px padding *\/\n.id-card {\n    position: relative;\n    overflow: hidden;\n    display: block;\n    aspect-ratio: 1 \/ 1; \n    text-decoration: none;\n    background-color: #ffffff;\n    padding: 0 10px; \/* Your requested padding *\/\n    box-sizing: border-box;\n}\n\n\/* 3. Image & Zoom Effect *\/\n.id-img-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n\n.id-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.8s cubic-bezier(0.5, 0, 0, 1);\n}\n\n\/* 4. Solid Colored Plus Icons *\/\n.id-center-plus {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 55px;\n    height: 55px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff;\n    font-size: 22px;\n    z-index: 2;\n    transition: opacity 0.4s ease, transform 0.4s ease;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n}\n\n\/* 5. The Hover Overlay (Covering only the image area) *\/\n.id-overlay {\n    position: absolute;\n    top: 0;\n    left: 10px;   \/* Matches card padding *\/\n    right: 10px;  \/* Matches card padding *\/\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 10% 15%;\n    box-sizing: border-box;\n    opacity: 0;\n    z-index: 3;\n    transition: opacity 0.5s ease;\n    text-align: center;\n}\n\n\/* --- INDIVIDUAL COLORS PER CARD --- *\/\n\/* Card 1: Pink\/Purple (#C06C9C) *\/\n.id-card:nth-child(1) .id-overlay { background-color: rgba(192, 108, 156, 0.95); }\n.id-card:nth-child(1) .id-center-plus { background-color: #C06C9C; }\n\n\/* Card 2: Blue (#36B0E4) *\/\n.id-card:nth-child(2) .id-overlay { background-color: rgba(54, 176, 228, 0.95); }\n.id-card:nth-child(2) .id-center-plus { background-color: #36B0E4; }\n\n\/* Card 3: Orange\/Red (#E25D38) *\/\n.id-card:nth-child(3) .id-overlay { background-color: rgba(226, 93, 56, 0.95); }\n.id-card:nth-child(3) .id-center-plus { background-color: #E25D38; }\n\n\/* Card 4: Lime Green (#B6CA19) *\/\n.id-card:nth-child(4) .id-overlay { background-color: rgba(182, 202, 25, 0.95); }\n.id-card:nth-child(4) .id-center-plus { background-color: #B6CA19; }\n\n\/* 6. Text Content Styles *\/\n.id-content {\n    color: #ffffff;\n    transform: translateY(30px);\n    transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);\n}\n\n.id-title {\n    font-size: 1.5rem;\n    font-weight: 800;\n    margin-bottom: 5px;\n    text-transform: uppercase;\n    font-family: sans-serif;\n}\n\n.id-subtitle {\n    font-size: 0.9rem;\n    font-weight: 300;\n    margin-bottom: 15px;\n    font-style: italic;\n    opacity: 0.9;\n}\n\n.id-description {\n    font-size: 0.8rem;\n    line-height: 1.4;\n    margin-bottom: 20px;\n}\n\n.id-btn-plus {\n    display: inline-block;\n    border: 1px solid #ffffff;\n    padding: 8px 18px;\n    font-size: 11px;\n    text-transform: uppercase;\n    transition: all 0.3s ease;\n}\n\n\/* 7. Hover Interactions *\/\n.id-card:hover img { transform: scale(1.1); }\n.id-card:hover .id-overlay { opacity: 1; }\n.id-card:hover .id-content { transform: translateY(0); }\n\n\/* Hide Plus Icon on Hover *\/\n.id-card:hover .id-center-plus {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n}\n\n\/* Button Hover State *\/\n.id-card:nth-child(1) .id-btn-plus:hover { background: #fff; color: #C06C9C; }\n.id-card:nth-child(2) .id-btn-plus:hover { background: #fff; color: #36B0E4; }\n.id-card:nth-child(3) .id-btn-plus:hover { background: #fff; color: #E25D38; }\n.id-card:nth-child(4) .id-btn-plus:hover { background: #fff; color: #B6CA19; }\n\n\/* 8. Responsiveness *\/\n@media (max-width: 1024px) {\n    .id-grid-container { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 600px) {\n    .id-grid-container { grid-template-columns: 1fr; }\n    .id-card { padding: 10px 0; } \/* Switch to vertical padding on mobile *\/\n    .id-overlay { left: 0; right: 0; }\n}\n<\/style>\n\n<div class=\"id-grid-container\" id=\"animatedGrid\">\n    \n    <a  href=\"\/index.php\/creation\/\" class=\"id-card\">\n        <div class=\"id-img-wrapper\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/02\/fashion-designer-working-design-scaled.jpg\" alt=\"Cr\u00e9ation\">\n            <div class=\"id-center-plus\"><i class=\"fas fa-plus\"><\/i><\/div>\n        <\/div>\n        <div class=\"id-overlay\">\n            <div class=\"id-content\">\n                <div class=\"id-title\">Cr\u00e9ation<\/div>\n                <hr style=\"background-color:#fff!important;height:2px;margin-bottom:5px\">\n                <div class=\"id-description\">Studio de cr\u00e9ation graphique, cr\u00e9ation de logo, refonte ...<\/div>\n                <div class=\"id-btn-plus\">En savoir +<\/div>\n            <\/div>\n        <\/div>\n    <\/a>\n\n    <a  href=\"\/index.php\/impremerie\/\" class=\"id-card\">\n        <div class=\"id-img-wrapper\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/02\/Impression-scaled.jpg\" alt=\"Impression\">\n            <div class=\"id-center-plus\"><i class=\"fas fa-plus\"><\/i><\/div>\n        <\/div>\n        <div class=\"id-overlay\">\n            <div class=\"id-content\">\n                <div class=\"id-title\">Impression<\/div>\n                 <hr style=\"background-color:#fff!important;height:2px;margin-bottom:5px\">\n                <div class=\"id-description\">Impression offset et num\u00e9rique de vos documents de communication ...<\/div>\n                <div class=\"id-btn-plus\">En savoir +<\/div>\n            <\/div>\n        <\/div>\n    <\/a>\n\n    <a  href=\"\/index.php\/enseigne\/\" class=\"id-card\">\n        <div class=\"id-img-wrapper\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/02\/Enseigne.png\" alt=\"Enseigne\">\n            <div class=\"id-center-plus\"><i class=\"fas fa-plus\"><\/i><\/div>\n        <\/div>\n        <div class=\"id-overlay\">\n            <div class=\"id-content\">\n                <div class=\"id-title\">Enseigne<\/div>\n                <hr style=\"background-color:#fff!important;height:2px;margin-bottom:5px\">\n                <div class=\"id-description\">Panneau enseigne publicitaire, enseigne publicitaire en ligne, fabrication d'enseigne...<\/div>\n                <div class=\"id-btn-plus\">En savoir +<\/div>\n            <\/div>\n        <\/div>\n    <\/a>\n\n    <a  href=\"\/index.php\/creation-de-site\/\" class=\"id-card\">\n        <div class=\"id-img-wrapper\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/02\/web-design-internet-website-responsive-software-concept-scaled.jpg\" alt=\"Marquage\">\n            <div class=\"id-center-plus\"><i class=\"fas fa-plus\"><\/i><\/div>\n        <\/div>\n        <div class=\"id-overlay\">\n            <div class=\"id-content\">\n                <div class=\"id-title\">Cr\u00e9ation de site<\/div>\n                 <hr style=\"background-color:#fff!important;height:2px;margin-bottom:5px\">\n                <div class=\"id-description\">devis rapide en ligne, site vitrine, site e-commerce, r\u00e9f\u00e9rencement...<\/div>\n                <div class=\"id-btn-plus\">En savoir +<\/div>\n            <\/div>\n        <\/div>\n    <\/a>\n\n<\/div>\n\n<script>\n\/* Trigger entrance animation after a slight delay *\/\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    setTimeout(function() {\n        document.getElementById('animatedGrid').classList.add('is-visible');\n    }, 200);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9ation Studio de cr\u00e9ation graphique, cr\u00e9ation de logo, refonte &#8230; En savoir + Impression Impression offset et num\u00e9rique de vos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","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-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":148,"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":1413,"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/1413"}],"wp:attachment":[{"href":"https:\/\/gren-ad.com\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}