{"id":1769,"date":"2026-03-22T18:10:53","date_gmt":"2026-03-22T18:10:53","guid":{"rendered":"https:\/\/khalilboucenna.com\/?page_id=1769"},"modified":"2026-03-23T15:44:28","modified_gmt":"2026-03-23T15:44:28","slug":"invitation","status":"publish","type":"page","link":"https:\/\/khalilboucenna.com\/de_ch\/invitation\/","title":{"rendered":"invitation"},"content":{"rendered":"<!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<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;700&#038;family=Playfair+Display:ital,wght@0,400;1,700&#038;family=Montserrat:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n    --gold: #b38e44;\n    --white: #ffffff;\n    --curtain: #8b0000;\n    --dark-bg: #1a1a1a;\n}\n\n\/* Reset + body *\/\n* { box-sizing: border-box; margin:0; padding:0; }\nbody, html {\n    width:100%; height:100%; font-family:'Montserrat', sans-serif;\n    background: linear-gradient(135deg, #fdf6e3, #ffe7c4);\n    overflow-x: hidden;\n    color: var(--dark-bg);\n}\n\n\/* --- RIDEAUX CIN\u00c9MATIQUE --- *\/\n#gate-container {\n    position: fixed; top:0; left:0;\n    width:100%; height:100vh;\n    display:flex;\n    perspective:2500px;\n    cursor:pointer;\n    z-index: 9999;\n    overflow: hidden;\n}\n\n.curtain {\n    position: absolute;\n    top:0;\n    width:50.5%; height:100%;\n    background: linear-gradient(160deg, #a30000, #8b0000 40%, #700000);\n    box-shadow: inset 0 0 100px rgba(0,0,0,0.5), 0 0 50px rgba(255,215,0,0.2);\n    transition: transform 2s cubic-bezier(0.68,-0.55,0.27,1.55);\n    display:flex; align-items:center;\n    overflow:hidden;\n}\n\n.curtain::before {\n    content:\"\"; position:absolute; width:100%; height:100%;\n    background: repeating-linear-gradient(45deg, rgba(255,215,0,0.1), rgba(255,215,0,0.1) 2px, transparent 2px, transparent 6px);\n    pointer-events:none;\n}\n\n.curtain-left { \n    left:0; border-right:4px solid var(--gold); transform-origin:left; justify-content:flex-end;\n    box-shadow: inset -10px 0 50px rgba(0,0,0,0.5);\n}\n.curtain-right { \n    right:0; border-left:4px solid var(--gold); transform-origin:right; justify-content:flex-start;\n    box-shadow: inset 10px 0 50px rgba(0,0,0,0.5);\n}\n\n.gate-label {\n    position:absolute; top:50%; left:50%;\n    transform:translate(-50%,-50%);\n    background: var(--white);\n    padding:40px;\n    border-radius:50%;\n    border:2px solid var(--gold);\n    text-align:center;\n    z-index:10;\n    box-shadow: 0 0 50px rgba(0,0,0,0.3);\n    transition: all 0.7s ease;\n    pointer-events:none;\n}\n.gate-label:hover { transform: translate(-50%,-50%) scale(1.08); }\n\n\/* OUVERTURE CIN\u00c9MATIQUE *\/\n.is-open .curtain-left { transform: rotateY(-115deg) translateX(-30%) translateZ(-20px); }\n.is-open .curtain-right { transform: rotateY(115deg) translateX(30%) translateZ(-20px); }\n.is-open .gate-label { opacity:0; transform: translate(-50%, -50%) scale(0.3); }\n.is-open#gate-container { pointer-events:none; }\n\n\/* --- CONTENU --- *\/\n.invite-body {\n    padding-top:120px;\n    display:flex; flex-direction:column;\n    align-items:center; text-align:center;\n    min-height:100vh;\n}\n.card {\n    width:90%; max-width:450px;\n    background:var(--white);\n    margin-bottom:50px;\n    padding:40px 25px;\n    border-radius:20px;\n    box-shadow: 0 15px 40px rgba(0,0,0,0.1);\n    border:1px solid #eee;\n    transition: transform 0.5s ease, box-shadow 0.5s ease;\n}\n.card:hover { transform: translateY(-10px); box-shadow:0 25px 60px rgba(0,0,0,0.2); }\n\nh1 { font-family:'Playfair Display', serif; font-size:3rem; margin:15px 0; }\nh3 { font-family:'Cinzel', serif; font-size:1.5rem; margin:10px 0; }\n\n.gold-txt { color: var(--gold); font-family:'Cinzel', serif; letter-spacing:4px; font-size:0.8rem; }\n\n\/* --- GRATTAGE --- *\/\n.scratch-area {\n    position:relative; width:300px; height:160px;\n    margin:25px auto;\n    border-radius:15px;\n    overflow:hidden;\n    border:2px solid var(--gold);\n}\n.date-hidden {\n    position:absolute; width:100%; height:100%;\n    display:flex; flex-direction:column; justify-content:center; align-items:center;\n    background:#fff; font-family:'Cinzel', serif;\n}\ncanvas { position:absolute; top:0; left:0; touch-action:none; }\n\n\/* --- BOUTON --- *\/\n.btn-rsvp {\n    display:inline-block;\n    background:var(--dark-bg);\n    color:var(--white);\n    padding:18px 40px;\n    font-family:'Cinzel', serif;\n    letter-spacing:2px;\n    border-radius:12px;\n    text-decoration:none;\n    margin-top:25px;\n    transition: all 0.3s ease;\n    box-shadow:0 0 15px rgba(0,0,0,0.2);\n}\n.btn-rsvp:hover { transform: translateY(-3px); box-shadow:0 0 35px var(--gold); background: linear-gradient(45deg, #222, #444); }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"gate-container\" onclick=\"openMagic()\">\n    <div class=\"curtain curtain-left\"><\/div>\n    <div class=\"gate-label\">\n        <span class=\"gold-txt\">INVITATION<\/span>\n        <h2 style=\"margin:8px 0;font-family:'Playfair Display';\">K &#038; M<\/h2>\n        <p style=\"font-size:0.6rem;color:#999;\">TOUCHEZ POUR OUVRIR<\/p>\n    <\/div>\n    <div class=\"curtain curtain-right\"><\/div>\n<\/div>\n\n<div class=\"invite-body\">\n    <div class=\"card\">\n        <span class=\"gold-txt\">Save the Date<\/span>\n        <h1>Khalil &#038; Marwa<\/h1>\n        <p style=\"font-weight:300;font-size:0.95rem;line-height:1.9;\">Nous avons l&rsquo;honneur de vous inviter \u00e0 notre mariage.<\/p>\n    <\/div>\n\n    <div class=\"card\">\n        <span class=\"gold-txt\">Date \u00e0 Gratter<\/span>\n        <div class=\"scratch-area\">\n            <div class=\"date-hidden\">\n                <span style=\"font-size:1.3rem;color:var(--gold);\">25 SEPTEMBRE 2026<\/span>\n                <span style=\"font-size:0.85rem;\">MARRAKECH<\/span>\n            <\/div>\n            <canvas id=\"scratch-canvas\" width=\"300\" height=\"160\"><\/canvas>\n        <\/div>\n    <\/div>\n\n    <div class=\"card\">\n        <span class=\"gold-txt\">Lieu<\/span>\n        <h3>Dar Soltan<\/h3>\n        <p>Oran, Alg\u00e9rie<\/p>\n        <a href=\"https:\/\/wa.me\/VOTRE_NUMERO\" class=\"btn-rsvp\">CONFIRMER RSVP<\/a>\n    <\/div>\n<\/div>\n\n<script>\nfunction openMagic() {\n    document.getElementById('gate-container').classList.add('is-open');\n}\n\n\/\/ --- Scratch Card ---\nconst canvas = document.getElementById('scratch-canvas');\nconst ctx = canvas.getContext('2d');\nlet isDrawing = false;\n\n\/\/ Overlay Or dynamique\nconst grad = ctx.createLinearGradient(0,0,300,160);\ngrad.addColorStop(0,'#b38e44'); grad.addColorStop(0.5,'#f1d592'); grad.addColorStop(1,'#b38e44');\nctx.fillStyle = grad; ctx.fillRect(0,0,300,160);\nctx.fillStyle = \"#FFF\"; ctx.font = \"bold 14px Montserrat\"; ctx.textAlign = \"center\";\nctx.fillText(\"GRATTEZ ICI\", 150, 80);\n\nfunction scratch(e){\n    if(!isDrawing) return;\n    const rect = canvas.getBoundingClientRect();\n    const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;\n    const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;\n    ctx.globalCompositeOperation = 'destination-out';\n    ctx.beginPath(); ctx.arc(x,y,22,0,Math.PI*2); ctx.fill();\n}\n\ncanvas.addEventListener('mousedown',()=>isDrawing=true);\nwindow.addEventListener('mouseup',()=>isDrawing=false);\ncanvas.addEventListener('mousemove',scratch);\ncanvas.addEventListener('touchstart',e=>{isDrawing=true;e.preventDefault();});\ncanvas.addEventListener('touchmove',e=>{scratch(e);e.preventDefault();});\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>INVITATION K &#038; M TOUCHEZ POUR OUVRIR Save the Date Khalil &#038; Marwa Nous avons l&rsquo;honneur de vous inviter \u00e0<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1769","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.9 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>invitation - khalil boucenna<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/khalilboucenna.com\/de_ch\/invitation\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"invitation\" \/>\n<meta property=\"og:description\" content=\"INVITATION K &#038; M TOUCHEZ POUR OUVRIR Save the Date Khalil &#038; Marwa Nous avons l&rsquo;honneur de vous inviter \u00e0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/khalilboucenna.com\/de_ch\/invitation\/\" \/>\n<meta property=\"og:site_name\" content=\"khalil boucenna\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-23T15:44:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/khalilboucenna.com\\\/invitation\\\/\",\"url\":\"https:\\\/\\\/khalilboucenna.com\\\/invitation\\\/\",\"name\":\"invitation - khalil boucenna\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/khalilboucenna.com\\\/#website\"},\"datePublished\":\"2026-03-22T18:10:53+00:00\",\"dateModified\":\"2026-03-23T15:44:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/khalilboucenna.com\\\/invitation\\\/#breadcrumb\"},\"inLanguage\":\"de-CH\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/khalilboucenna.com\\\/invitation\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/khalilboucenna.com\\\/invitation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/khalilboucenna.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"invitation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/khalilboucenna.com\\\/#website\",\"url\":\"https:\\\/\\\/khalilboucenna.com\\\/\",\"name\":\"khalil boucenna\",\"description\":\"Votre vision, notre design web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/khalilboucenna.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-CH\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"invitation - khalil boucenna","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/khalilboucenna.com\/de_ch\/invitation\/","og_locale":"de_DE","og_type":"article","og_title":"invitation","og_description":"INVITATION K &#038; M TOUCHEZ POUR OUVRIR Save the Date Khalil &#038; Marwa Nous avons l&rsquo;honneur de vous inviter \u00e0","og_url":"https:\/\/khalilboucenna.com\/de_ch\/invitation\/","og_site_name":"khalil boucenna","article_modified_time":"2026-03-23T15:44:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/khalilboucenna.com\/invitation\/","url":"https:\/\/khalilboucenna.com\/invitation\/","name":"invitation - khalil boucenna","isPartOf":{"@id":"https:\/\/khalilboucenna.com\/#website"},"datePublished":"2026-03-22T18:10:53+00:00","dateModified":"2026-03-23T15:44:28+00:00","breadcrumb":{"@id":"https:\/\/khalilboucenna.com\/invitation\/#breadcrumb"},"inLanguage":"de-CH","potentialAction":[{"@type":"ReadAction","target":["https:\/\/khalilboucenna.com\/invitation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/khalilboucenna.com\/invitation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/khalilboucenna.com\/"},{"@type":"ListItem","position":2,"name":"invitation"}]},{"@type":"WebSite","@id":"https:\/\/khalilboucenna.com\/#website","url":"https:\/\/khalilboucenna.com\/","name":"khalil boucenna","description":"Votre vision, notre design web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/khalilboucenna.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-CH"}]}},"_links":{"self":[{"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/pages\/1769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/comments?post=1769"}],"version-history":[{"count":18,"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/pages\/1769\/revisions"}],"predecessor-version":[{"id":1790,"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/pages\/1769\/revisions\/1790"}],"wp:attachment":[{"href":"https:\/\/khalilboucenna.com\/de_ch\/wp-json\/wp\/v2\/media?parent=1769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}