{"id":563,"date":"2026-09-07T12:15:46","date_gmt":"2026-09-07T12:15:46","guid":{"rendered":"https:\/\/poposafe.com\/?page_id=563"},"modified":"2026-09-08T19:28:48","modified_gmt":"2026-09-08T19:28:48","slug":"contact","status":"publish","type":"page","link":"https:\/\/poposafe.com\/index.php\/contact\/","title":{"rendered":"contact-2"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* =========================================================\n   CONTACT NADIR IA\n   ========================================================= *\/\n\n.contact-page,\n.contact-page *,\n.contact-page *::before,\n.contact-page *::after {\n  box-sizing: border-box;\n  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;\n}\n\n.contact-page {\n  position: relative;\n  background: #0a0a0a;\n  color: #48494e;\n  -webkit-font-smoothing: antialiased;\n  isolation: isolate;\n}\n\n.contact-page ::selection {\n  background: rgba(255,255,255,.25);\n}\n\n\n\/* =========================================================\n   BACKGROUND ANIM\u00c9\n   ========================================================= *\/\n\n.contact-media {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  z-index: 0;\n  overflow: hidden;\n  background: #0a0a0a;\n  pointer-events: none;\n}\n\n@supports (height: 100svh) {\n  .contact-media {\n    height: 100svh;\n  }\n}\n\n.contact-media img.poster,\n.contact-media video,\n.contact-media canvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: opacity .5s linear;\n}\n\n.contact-media canvas {\n  opacity: 0;\n}\n\n.contact-media.frames-ready canvas {\n  opacity: 1;\n}\n\n.contact-media.frames-ready video {\n  opacity: 0;\n}\n\n.contact-media.poster-hidden img.poster {\n  opacity: 0;\n}\n\n\n\/* =========================================================\n   CONTENU PAR-DESSUS LE BACKGROUND\n   ========================================================= *\/\n\n.contact-overlay {\n  position: relative;\n  z-index: 10;\n  margin-top: -100vh;\n}\n\n@supports (height: 100svh) {\n  .contact-overlay {\n    margin-top: -100svh;\n  }\n}\n\n\n\/* =========================================================\n   BANDEAU\n   ========================================================= *\/\n\n.contact-nav {\n  position: sticky;\n  top: 0;\n  z-index: 50;\n  border-bottom: 1px solid rgba(255,255,255,.1);\n  background: rgba(10,10,10,.85);\n  -webkit-backdrop-filter: blur(12px);\n  backdrop-filter: blur(12px);\n}\n\n.contact-nav-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.25rem;\n}\n\n@media (min-width: 768px) {\n  .contact-nav-row {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n    padding: 1rem 3rem;\n  }\n}\n\n@media (min-width: 640px) and (max-width: 767px) {\n  .contact-nav-row {\n    padding: 1rem 2rem;\n  }\n}\n\n\n\/* =========================================================\n   LOGO\n   ========================================================= *\/\n\n.contact-logo {\n  display: flex;\n  align-items: center;\n  gap: .5rem;\n  font-size: 1.125rem;\n  font-weight: 500;\n  letter-spacing: -.01em;\n  justify-self: start;\n}\n\n.contact-logo a {\n  color: #fff;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  gap: .5rem;\n}\n\n@media (min-width: 640px) {\n  .contact-logo {\n    font-size: 1.25rem;\n  }\n}\n\n\n\/* =========================================================\n   LIENS\n   ========================================================= *\/\n\n.contact-links {\n  display: none;\n  align-items: center;\n  gap: 2rem;\n  justify-self: center;\n}\n\n@media (min-width: 768px) {\n  .contact-links {\n    display: flex;\n  }\n}\n\n@media (min-width: 1024px) {\n  .contact-links {\n    gap: 2.5rem;\n  }\n}\n\n.contact-links a {\n  font-size: .875rem;\n  color: #fff;\n  text-decoration: none;\n  transition: opacity .3s;\n  white-space: nowrap;\n  opacity: .9;\n}\n\n.contact-links a:hover {\n  opacity: 1;\n}\n\n\n\/* =========================================================\n   CTA BANDEAU\n   ========================================================= *\/\n\n.contact-nav-cta-wrapper {\n  justify-self: end;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.contact-nav-cta {\n  border-radius: .375rem;\n  border: 1px solid rgba(255,255,255,.2);\n  background: rgba(255,255,255,.1);\n  -webkit-backdrop-filter: blur(12px);\n  backdrop-filter: blur(12px);\n  padding: .5rem 1rem;\n  font-size: .75rem;\n  text-decoration: none;\n  color: #fff;\n  transition: background .3s;\n  display: inline-block;\n  white-space: nowrap;\n}\n\n@media (min-width: 640px) {\n  .contact-nav-cta {\n    padding: .5rem 1.25rem;\n    font-size: .875rem;\n  }\n}\n\n.contact-nav-cta:hover {\n  background: rgba(255,255,255,.2);\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n   ========================================================= *\/\n\n.contact-reveal {\n  transition: all .7s ease-out;\n  transform: translateY(2rem);\n  opacity: 0;\n  will-change: transform;\n}\n\n.contact-reveal.is-visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n\n\/* =========================================================\n   SECTION CONTACT\n   ========================================================= *\/\n\n.contact-section {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 6rem 1.25rem 4rem;\n}\n\n@supports (height: 100svh) {\n  .contact-section {\n    min-height: 100svh;\n  }\n}\n\n@media (min-width: 640px) {\n  .contact-section {\n    padding-left: 2rem;\n    padding-right: 2rem;\n    padding-top: 7rem;\n  }\n}\n\n@media (min-width: 768px) {\n  .contact-section {\n    padding-left: 3rem;\n    padding-right: 3rem;\n    padding-bottom: 4rem;\n  }\n}\n\n\n\/* =========================================================\n   PARTIE HAUTE\n   ========================================================= *\/\n\n.contact-top {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n@media (min-width: 640px) {\n  .contact-top {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n}\n\n\n\/* =========================================================\n   LABELS\n   ========================================================= *\/\n\n.contact-label {\n  display: flex;\n  flex-direction: column;\n  gap: .5rem;\n}\n\n.contact-label span {\n  font-size: .75rem;\n  text-transform: uppercase;\n  letter-spacing: .15em;\n  color: #48494e;\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));\n}\n\n\n\/* =========================================================\n   INTRO\n   ========================================================= *\/\n\n.contact-intro {\n  max-width: 25rem;\n}\n\n@media (min-width: 640px) {\n  .contact-intro {\n    text-align: right;\n  }\n}\n\n.contact-intro p {\n  font-size: 1.125rem;\n  line-height: 1.75;\n  color: #48494e;\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));\n  margin: 0;\n}\n\n@media (min-width: 640px) {\n  .contact-intro p {\n    font-size: 1.25rem;\n  }\n}\n\n\n\/* =========================================================\n   TITRE\n   ========================================================= *\/\n\n.contact-title-area {\n  margin-top: 5rem;\n}\n\n.contact-badge {\n  display: inline-block;\n  border-left: 2px solid #48494e;\n  border-top: 1px solid rgba(255,255,255,.5);\n  border-right: 1px solid rgba(255,255,255,.5);\n  border-bottom: 1px solid rgba(255,255,255,.5);\n  background: rgba(255,255,255,.65);\n  padding: .375rem .75rem;\n  -webkit-backdrop-filter: blur(16px);\n  backdrop-filter: blur(16px);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .15em;\n  margin-bottom: 1.25rem;\n  color: #48494e;\n}\n\n.contact-title {\n  font-size: 3rem;\n  font-weight: 400;\n  line-height: 1.05;\n  letter-spacing: -.02em;\n  color: #48494e;\n  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));\n  margin: 0;\n}\n\n@media (min-width: 640px) {\n  .contact-title {\n    font-size: 3.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .contact-title {\n    font-size: 4.5rem;\n  }\n}\n\n\n\/* =========================================================\n   ZONE CONTACT\n   ========================================================= *\/\n\n.contact-content {\n  margin-top: 5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 3rem;\n}\n\n\n\/*\n   IMPORTANT :\n   Les deux colonnes commencent maintenant\n   exactement au m\u00eame niveau.\n*\/\n\n@media (min-width: 768px) {\n  .contact-content {\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 4rem;\n  }\n}\n\n\n\/* =========================================================\n   COLONNE GAUCHE\n   ========================================================= *\/\n\n.contact-left {\n  width: 100%;\n  max-width: 36rem;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n\n\/* =========================================================\n   PARAGRAPHE\n   ========================================================= *\/\n\n.contact-text {\n  width: 100%;\n  font-size: .95rem;\n  line-height: 1.7;\n  color: #48494e;\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));\n  margin: 0;\n}\n\n@media (min-width: 640px) {\n  .contact-text {\n    font-size: 1rem;\n  }\n}\n\n\n\/* =========================================================\n   BOUTONS\n   JUSTE SOUS LE PARAGRAPHE\n   ========================================================= *\/\n\n.contact-buttons {\n  margin-top: 1.5rem;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: .75rem;\n}\n\n\n\/* =========================================================\n   WHATSAPP\n   ========================================================= *\/\n\n.contact-whatsapp {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  padding: .7rem 1.25rem;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,.15);\n  background: rgba(30,30,32,.45);\n  color: #fff;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 600;\n  -webkit-backdrop-filter: blur(24px) saturate(180%);\n  backdrop-filter: blur(24px) saturate(180%);\n  transition: all .25s ease;\n}\n\n.contact-whatsapp:hover {\n  background: rgba(45,45,48,.65);\n  transform: translateY(-1px);\n}\n\n.whatsapp-icon {\n  width: 20px;\n  height: 20px;\n  flex: none;\n  display: block;\n}\n\n.whatsapp-arrow {\n  margin-left: 2px;\n  transition: transform .2s ease;\n}\n\n.contact-whatsapp:hover .whatsapp-arrow {\n  transform: translateX(3px);\n}\n\n\n\/* =========================================================\n   EMAIL\n   ========================================================= *\/\n\n.contact-email {\n  display: inline-flex;\n  align-items: center;\n  gap: .25rem;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,.5);\n  background: rgba(255,255,255,.65);\n  -webkit-backdrop-filter: blur(16px);\n  backdrop-filter: blur(16px);\n  padding: .625rem 1.25rem;\n  font-size: .875rem;\n  color: #48494e;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background .3s;\n}\n\n.contact-email:hover {\n  background: rgba(255,255,255,.8);\n}\n\n\n\/* =========================================================\n   FORMULAIRE\n   ========================================================= *\/\n\n.contact-form-card {\n  width: 100%;\n  max-width: 30rem;\n  border-radius: 1rem;\n  border: 1px solid rgba(255,255,255,.5);\n  background: rgba(255,255,255,.65);\n  -webkit-backdrop-filter: blur(20px);\n  backdrop-filter: blur(20px);\n  padding: 1.5rem;\n}\n\n@media (min-width: 640px) {\n  .contact-form-card {\n    padding: 1.75rem;\n  }\n}\n\n\n\/* =========================================================\n   TITRE FORMULAIRE\n   ========================================================= *\/\n\n.contact-form-title {\n  margin: 0 0 .4rem;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: #48494e;\n}\n\n\n\/* =========================================================\n   DESCRIPTION FORMULAIRE\n   ========================================================= *\/\n\n.contact-form-description {\n  margin: 0 0 1.25rem;\n  font-size: .8rem;\n  line-height: 1.6;\n  color: #48494e;\n  opacity: .85;\n}\n\n\n\/* =========================================================\n   GROUPES\n   ========================================================= *\/\n\n.contact-form-group {\n  margin-bottom: 12px;\n}\n\n\n\/* =========================================================\n   LABELS FORMULAIRE\n   ========================================================= *\/\n\n.contact-form label {\n  display: block;\n  margin-bottom: 5px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #48494e;\n}\n\n\n\/* =========================================================\n   INPUTS\n   ========================================================= *\/\n\n.contact-form input,\n.contact-form textarea {\n  width: 100%;\n  padding: 10px 12px;\n  border-radius: 8px;\n  border: 1px solid rgba(72,73,78,.25);\n  background: rgba(255,255,255,.85);\n  color: #222;\n  font-size: 13px;\n  outline: none;\n  transition: border-color .2s, box-shadow .2s;\n}\n\n.contact-form input:focus,\n.contact-form textarea:focus {\n  border-color: rgba(72,73,78,.6);\n  box-shadow: 0 0 0 3px rgba(72,73,78,.08);\n}\n\n.contact-form textarea {\n  min-height: 100px;\n  resize: vertical;\n}\n\n\n\/* =========================================================\n   BOUTON FORMULAIRE\n   ========================================================= *\/\n\n.contact-form button {\n  width: 100%;\n  padding: 12px;\n  margin-top: .25rem;\n  border: 1px solid rgba(72,73,78,.4);\n  border-radius: 999px;\n  background: #48494e;\n  color: #fff;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all .2s;\n}\n\n.contact-form button:hover {\n  background: #2a2b2e;\n  transform: translateY(-1px);\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .contact-section {\n    padding-top: 5rem;\n    padding-bottom: 3rem;\n  }\n\n  .contact-title-area {\n    margin-top: 3rem;\n  }\n\n  .contact-title {\n    font-size: 2.7rem;\n  }\n\n  .contact-content {\n    margin-top: 3rem;\n    gap: 2.5rem;\n  }\n\n  .contact-form-card {\n    max-width: 100%;\n  }\n\n  .contact-buttons {\n    width: 100%;\n  }\n\n  .contact-whatsapp,\n  .contact-email {\n    max-width: 100%;\n  }\n\n}\n\n\n\/* =========================================================\n   TR\u00c8S PETITS \u00c9CRANS\n   ========================================================= *\/\n\n@media (max-width: 480px) {\n\n  .contact-buttons {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .contact-whatsapp,\n  .contact-email {\n    width: auto;\n  }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     PAGE\n     ========================================================= -->\n\n<div class=\"contact-page\">\n\n\n  <!-- =======================================================\n       BACKGROUND\n       ======================================================= -->\n\n  <div class=\"contact-media\" id=\"contactMedia\">\n\n    <img decoding=\"async\" class=\"poster\" src=\"\/hero-poster.jpg\" alt=\"\">\n\n    <video id=\"contactVideo\" muted=\"\" autoplay=\"\" playsinline=\"\" preload=\"auto\" src=\"https:\/\/d8j0ntlcm91z4.cloudfront.net\/user_38xzZboKViGWJOttwIXH07lWA1P\/hf_20260603_132049_036591b8-6e92-4760-b94c-a7ea6eef315c.mp4\"><\/video>\n\n    <canvas id=\"contactCanvas\"><\/canvas>\n\n  <\/div>\n\n\n  <!-- =======================================================\n       CONTENU\n       ======================================================= -->\n\n  <div class=\"contact-overlay\">\n\n\n    <!-- =====================================================\n         BANDEAU\n         ===================================================== -->\n\n    <header class=\"contact-nav\">\n\n      <div class=\"contact-nav-row\">\n\n\n        <!-- LOGO -->\n\n        <div class=\"contact-reveal contact-logo\" data-delay=\"0\">\n\n          <a href=\"https:\/\/poposafe.com\/index.php\/454-2\/\" aria-label=\"Retour \u00e0 l'accueil\">\n\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n\n              <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"><\/path>\n\n            <\/svg>\n\n            <span>NADIR <\/span>\n\n          <\/a>\n\n        <\/div>\n\n\n        <!-- MENU -->\n\n        <nav class=\"contact-links\" aria-label=\"Navigation principale\">\n\n          <span class=\"contact-reveal\" data-delay=\"100\">\n\n            <a href=\"https:\/\/poposafe.com\/#projet\">\n              \n            <\/a>\n\n          <\/span>\n\n\n          <span class=\"contact-reveal\" data-delay=\"200\">\n\n            <a href=\"https:\/\/poposafe.com\/index.php\/441-2\/\">\n              Nos mod\u00e8les\n            <\/a>\n\n          <\/span>\n\n\n          <span class=\"contact-reveal\" data-delay=\"300\">\n\n            <a href=\"https:\/\/poposafe.com\/index.php\/about-us\/\">\n              Qui sommes-nous ?\n            <\/a>\n\n          <\/span>\n\n\n          <span class=\"contact-reveal\" data-delay=\"400\">\n\n            <a href=\"https:\/\/poposafe.com\/index.php\/contact\/\">\n              Contact\n            <\/a>\n\n          <\/span>\n\n        <\/nav>\n\n\n        <!-- CTA -->\n\n        <div class=\"contact-reveal contact-nav-cta-wrapper\" data-delay=\"500\">\n\n          <a href=\"https:\/\/wa.me\/33786416871\" class=\"contact-nav-cta\">\n            Discutons de votre projet\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/header>\n\n\n    <!-- =====================================================\n         SECTION CONTACT\n         ===================================================== -->\n\n    <main>\n\n      <section class=\"contact-section\">\n\n\n        <!-- =================================================\n             PARTIE HAUTE\n             ================================================= -->\n\n        <div class=\"contact-top\">\n\n\n          <!-- LABELS -->\n\n          <div class=\"contact-label\">\n\n            <span class=\"contact-reveal\" data-delay=\"150\">\n              \/ Contact\n            <\/span>\n\n            <span class=\"contact-reveal\" data-delay=\"270\">\n              \/ Cr\u00e9ation web\n            <\/span>\n\n            <span class=\"contact-reveal\" data-delay=\"390\">\n              \/ SEO &amp; Formation\n            <\/span>\n\n          <\/div>\n\n\n          <!-- INTRO -->\n\n          <div class=\"contact-reveal contact-intro\" data-delay=\"300\">\n\n            <p>\n              Une question, un projet ou besoin d&rsquo;un accompagnement ?\n              \u00c9changeons directement avec notre \u00e9quipe.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             TITRE\n             ================================================= -->\n\n        <div class=\"contact-title-area\">\n\n\n          <div class=\"contact-reveal contact-badge\" data-delay=\"150\">\n            R\u00e9ponse sous 24h\n          <\/div>\n\n\n          <h1 class=\"contact-reveal contact-title\" data-delay=\"280\">\n\n            Parlons de<br>\n            votre projet.\n\n          <\/h1>\n\n        <\/div>\n\n\n        <!-- =================================================\n             CONTACT + FORMULAIRE\n             ================================================= -->\n\n        <div class=\"contact-content\">\n\n\n          <!-- =================================================\n               GAUCHE\n               ================================================= -->\n\n          <article class=\"contact-left\">\n\n\n            <!-- PARAGRAPHE -->\n\n            <p class=\"contact-reveal contact-text\" data-delay=\"320\">\n\n              Appelez-nous ou \u00e9crivez-nous. Nous vous r\u00e9pondons\n              rapidement pour discuter de votre projet, de votre site\n              internet, de votre r\u00e9f\u00e9rencement ou de vos besoins\n              en formation.\n\n            <\/p>\n\n\n            <!-- =================================================\n                 BOUTONS JUSTE SOUS LE PARAGRAPHE\n                 ================================================= -->\n\n            <div class=\"contact-reveal contact-buttons\" data-delay=\"420\">\n\n\n              <!-- WHATSAPP -->\n\n              <a href=\"https:\/\/wa.me\/33786416871\" class=\"contact-whatsapp\" target=\"_blank\" rel=\"noopener\">\n\n                <svg class=\"whatsapp-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n\n                  <path fill=\"#25D366\" d=\"M20.52 3.48A11.86 11.86 0 0 0 12.08 0C5.52 0 .18 5.34.18 11.9c0 2.1.55 4.15 1.6 5.96L.07 24l6.28-1.65a11.9 11.9 0 0 0 5.72 1.46h.01c6.55 0 11.89-5.34 11.89-11.9 0-3.18-1.24-6.17-3.45-8.43Z\"><\/path>\n\n\n                  <path fill=\"#fff\" d=\"M17.47 14.28c-.3-.15-1.77-.87-2.05-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.47-1.76-1.64-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.64-.93-2.24-.24-.59-.49-.51-.68-.52h-.58c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.5s1.07 2.9 1.22 3.1c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.35.2 1.86.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35Z\"><\/path>\n\n                <\/svg>\n\n\n                <span>\n                  Appeler via WhatsApp\n                <\/span>\n\n\n                <span class=\"whatsapp-arrow\">\n                  \u2192\n                <\/span>\n\n              <\/a>\n\n\n              <!-- EMAIL -->\n\n              <a href=\"mailto:nadir.iacreation@gmail.com\" class=\"contact-email\">\n                Nous \u00e9crire par email \u2192\n              <\/a>\n\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- =================================================\n               FORMULAIRE\n               ================================================= -->\n\n          <div class=\"contact-reveal contact-form-card\" data-delay=\"500\">\n\n\n            <h2 class=\"contact-form-title\">\n              Contactez-nous\n            <\/h2>\n\n\n            <p class=\"contact-form-description\">\n              D\u00e9crivez-nous votre projet et nous vous r\u00e9pondrons\n              rapidement.\n            <\/p>\n\n\n            <form action=\"https:\/\/formspree.io\/f\/xzebaynv\" method=\"POST\" class=\"contact-form\">\n\n\n              <!-- NOM -->\n\n              <div class=\"contact-form-group\">\n\n                <label for=\"contact-name\">\n                  Nom \/ Entreprise\n                <\/label>\n\n                <input type=\"text\" id=\"contact-name\" name=\"name\" required=\"\" placeholder=\"Votre nom\">\n\n              <\/div>\n\n\n              <!-- EMAIL -->\n\n              <div class=\"contact-form-group\">\n\n                <label for=\"contact-email\">\n                  Votre Email\n                <\/label>\n\n                <input type=\"email\" id=\"contact-email\" name=\"email\" required=\"\" placeholder=\"nom@exemple.com\">\n\n              <\/div>\n\n\n              <!-- MESSAGE -->\n\n              <div class=\"contact-form-group\">\n\n                <label for=\"contact-message\">\n                  Message\n                <\/label>\n\n                <textarea id=\"contact-message\" name=\"message\" rows=\"4\" required=\"\" placeholder=\"D\u00e9crivez votre projet...\"><\/textarea>\n\n              <\/div>\n\n\n              <!-- ENVOYER -->\n\n              <button type=\"submit\">\n                Envoyer le message \u2192\n              <\/button>\n\n\n            <\/form>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/section>\n\n    <\/main>\n\n  <\/div>\n\n<\/div>\n\n\n<script>\n\n(function(){\n\n  \"use strict\";\n\n\n  \/* =========================================================\n     VARIABLES\n     ========================================================= *\/\n\n  var VIDEO_URL =\n    \"https:\/\/d8j0ntlcm91z4.cloudfront.net\/user_38xzZboKViGWJOttwIXH07lWA1P\/hf_20260603_132049_036591b8-6e92-4760-b94c-a7ea6eef315c.mp4\";\n\n  var MAX_FRAMES = 90;\n  var MIN_FRAMES = 24;\n  var FRAME_MAX_WIDTH = 1920;\n\n  var LERP = 0.12;\n  var SEEK_EPS = 0.04;\n  var IDLE_EPS = 0.001;\n\n\n  \/* =========================================================\n     \u00c9L\u00c9MENTS\n     ========================================================= *\/\n\n  var wrapper =\n    document.querySelector('.contact-page');\n\n  var mediaEl =\n    document.getElementById('contactMedia');\n\n  var video =\n    document.getElementById('contactVideo');\n\n  var canvas =\n    document.getElementById('contactCanvas');\n\n\n  if (\n    !wrapper ||\n    !mediaEl ||\n    !video ||\n    !canvas\n  ) {\n    return;\n  }\n\n\n  \/* =========================================================\n     VARIABLES ANIMATION\n     ========================================================= *\/\n\n  var frames = [];\n  var framesReady = false;\n\n  var smoothed = 0;\n  var target = 0;\n\n  var rafId = null;\n  var isTicking = false;\n\n\n  \/* =========================================================\n     VIDEO\n     ========================================================= *\/\n\n  video.addEventListener(\n    'loadeddata',\n    function(){\n\n      mediaEl.classList.add(\n        'poster-hidden'\n      );\n\n    }\n  );\n\n\n  function primeVideo(v){\n\n    var p = v.play();\n\n    if (\n      p &&\n      typeof p.catch === 'function'\n    ){\n\n      p.then(\n        function(){\n\n          v.pause();\n\n        }\n      ).catch(\n        function(){}\n      );\n\n    }\n\n  }\n\n\n  primeVideo(video);\n\n\n  \/* =========================================================\n     REVEAL\n     ========================================================= *\/\n\n  var revealEls =\n    wrapper.querySelectorAll(\n      '.contact-reveal'\n    );\n\n\n  var io =\n    new IntersectionObserver(\n      function(entries){\n\n        entries.forEach(\n          function(entry){\n\n            if(\n              entry.isIntersecting\n            ){\n\n              entry.target.classList.add(\n                'is-visible'\n              );\n\n              io.unobserve(\n                entry.target\n              );\n\n            }\n\n          }\n        );\n\n      },\n      {\n        threshold: .15\n      }\n    );\n\n\n  revealEls.forEach(\n    function(el){\n\n      var delay =\n        el.getAttribute(\n          'data-delay'\n        ) || '0';\n\n      el.style.transitionDelay =\n        delay + 'ms';\n\n      io.observe(el);\n\n    }\n  );\n\n\n  \/* =========================================================\n     EXTRACTION DES FRAMES\n     ========================================================= *\/\n\n  (function extractFrames(){\n\n    function afterVideoData(cb){\n\n      if(\n        video.readyState >= 2\n      ){\n\n        return cb();\n\n      }\n\n\n      video.addEventListener(\n        'loadeddata',\n        function once(){\n\n          video.removeEventListener(\n            'loadeddata',\n            once\n          );\n\n          cb();\n\n        }\n      );\n\n    }\n\n\n    afterVideoData(\n      function(){\n\n        setTimeout(\n          function(){\n\n            var off =\n              document.createElement(\n                'video'\n              );\n\n            off.src =\n              VIDEO_URL;\n\n            off.crossOrigin =\n              'anonymous';\n\n            off.muted = true;\n\n            off.playsInline = true;\n\n            off.preload = 'auto';\n\n\n            off.setAttribute(\n              'muted',\n              ''\n            );\n\n            off.setAttribute(\n              'playsinline',\n              ''\n            );\n\n\n            off.style.cssText =\n              'position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;';\n\n\n            document.body.appendChild(\n              off\n            );\n\n\n            primeVideo(off);\n\n\n            off.addEventListener(\n              'loadedmetadata',\n              function(){\n\n                var duration =\n                  off.duration;\n\n\n                if(\n                  !duration ||\n                  !isFinite(duration)\n                ){\n\n                  return;\n\n                }\n\n\n                var frameCount =\n                  Math.max(\n                    MIN_FRAMES,\n                    Math.min(\n                      MAX_FRAMES,\n                      Math.round(\n                        duration * 12\n                      )\n                    )\n                  );\n\n\n                var srcW =\n                  off.videoWidth ||\n                  FRAME_MAX_WIDTH;\n\n\n                var srcH =\n                  off.videoHeight ||\n                  Math.round(\n                    FRAME_MAX_WIDTH *\n                    9 \/\n                    16\n                  );\n\n\n                var scale =\n                  Math.min(\n                    1,\n                    FRAME_MAX_WIDTH \/\n                    srcW\n                  );\n\n\n                var w =\n                  Math.round(\n                    srcW * scale\n                  );\n\n\n                var h =\n                  Math.round(\n                    srcH * scale\n                  );\n\n\n                var offCanvas =\n                  document.createElement(\n                    'canvas'\n                  );\n\n\n                offCanvas.width =\n                  w;\n\n                offCanvas.height =\n                  h;\n\n\n                var octx =\n                  offCanvas.getContext(\n                    '2d'\n                  );\n\n\n                if(!octx){\n                  return;\n                }\n\n\n                var i = 0;\n\n\n                function nextFrame(){\n\n                  if(\n                    i >= frameCount\n                  ){\n\n                    if(\n                      frames.length > 0\n                    ){\n\n                      framesReady = true;\n\n                      mediaEl.classList.add(\n                        'frames-ready'\n                      );\n\n                      requestTick();\n\n                    }\n\n\n                    if(\n                      off.parentNode\n                    ){\n\n                      off.parentNode.removeChild(\n                        off\n                      );\n\n                    }\n\n                    return;\n\n                  }\n\n\n                  var t =\n                    (\n                      i \/\n                      (frameCount - 1)\n                    ) *\n                    Math.max(\n                      0,\n                      duration - .05\n                    );\n\n\n                  function onSeeked(){\n\n                    off.removeEventListener(\n                      'seeked',\n                      onSeeked\n                    );\n\n\n                    octx.drawImage(\n                      off,\n                      0,\n                      0,\n                      w,\n                      h\n                    );\n\n\n                    try{\n\n                      if(\n                        window.createImageBitmap\n                      ){\n\n                        createImageBitmap(\n                          offCanvas\n                        )\n                        .then(\n                          function(bmp){\n\n                            frames.push(\n                              bmp\n                            );\n\n                            i++;\n\n                            nextFrame();\n\n                          }\n                        )\n                        .catch(\n                          function(){\n\n                            i++;\n\n                            nextFrame();\n\n                          }\n                        );\n\n                      } else {\n\n                        var img =\n                          new Image();\n\n                        img.src =\n                          offCanvas.toDataURL();\n\n                        frames.push(\n                          img\n                        );\n\n                        i++;\n\n                        nextFrame();\n\n                      }\n\n                    } catch(e){\n\n                      i++;\n\n                      nextFrame();\n\n                    }\n\n                  }\n\n\n                  off.addEventListener(\n                    'seeked',\n                    onSeeked\n                  );\n\n\n                  off.currentTime =\n                    t;\n\n                }\n\n\n                nextFrame();\n\n              },\n              {\n                once: true\n              }\n            );\n\n          },\n          300\n        );\n\n      }\n    );\n\n  })();\n\n\n  \/* =========================================================\n     DRAW COVER\n     ========================================================= *\/\n\n  function drawCover(\n    source,\n    srcW,\n    srcH\n  ){\n\n    var dpr =\n      Math.min(\n        window.devicePixelRatio || 1,\n        2\n      );\n\n\n    var rect =\n      canvas.getBoundingClientRect();\n\n\n    var cw =\n      rect.width ||\n      window.innerWidth;\n\n\n    var ch =\n      rect.height ||\n      window.innerHeight;\n\n\n    var tw =\n      Math.round(\n        cw * dpr\n      );\n\n\n    var th =\n      Math.round(\n        ch * dpr\n      );\n\n\n    if(\n      canvas.width !== tw ||\n      canvas.height !== th\n    ){\n\n      canvas.width =\n        tw;\n\n      canvas.height =\n        th;\n\n    }\n\n\n    var ctx =\n      canvas.getContext(\n        '2d'\n      );\n\n\n    if(!ctx){\n      return;\n    }\n\n\n    ctx.setTransform(\n      dpr,\n      0,\n      0,\n      dpr,\n      0,\n      0\n    );\n\n\n    ctx.clearRect(\n      0,\n      0,\n      cw,\n      ch\n    );\n\n\n    var scale =\n      Math.max(\n        cw \/ srcW,\n        ch \/ srcH\n      );\n\n\n    var dw =\n      srcW * scale;\n\n\n    var dh =\n      srcH * scale;\n\n\n    var dx =\n      (cw - dw) \/ 2;\n\n\n    var dy =\n      (ch - dh) \/ 2;\n\n\n    ctx.drawImage(\n      source,\n      dx,\n      dy,\n      dw,\n      dh\n    );\n\n  }\n\n\n  \/* =========================================================\n     DRAW FRAME\n     ========================================================= *\/\n\n  function drawFrame(progress){\n\n    if(\n      framesReady &&\n      frames.length > 0\n    ){\n\n      var idx =\n        Math.min(\n          frames.length - 1,\n          Math.max(\n            0,\n            Math.round(\n              progress *\n              (frames.length - 1)\n            )\n          )\n        );\n\n\n      var f =\n        frames[idx];\n\n\n      drawCover(\n        f,\n        f.width,\n        f.height\n      );\n\n\n    } else {\n\n      if(\n        !video.duration ||\n        !isFinite(\n          video.duration\n        )\n      ){\n\n        return;\n\n      }\n\n\n      var tt =\n        progress *\n        Math.max(\n          0,\n          video.duration - .05\n        );\n\n\n      if(\n        Math.abs(\n          video.currentTime - tt\n        ) > SEEK_EPS\n      ){\n\n        video.currentTime =\n          tt;\n\n      }\n\n    }\n\n  }\n\n\n  \/* =========================================================\n     SCROLL\n     ========================================================= *\/\n\n  function updateTarget(){\n\n    var rect =\n      wrapper.getBoundingClientRect();\n\n\n    var scrollRange =\n      wrapper.offsetHeight -\n      window.innerHeight;\n\n\n    target =\n      scrollRange > 0\n        ? Math.min(\n            1,\n            Math.max(\n              0,\n              -rect.top \/\n              scrollRange\n            )\n          )\n        : 0;\n\n\n    requestTick();\n\n  }\n\n\n  \/* =========================================================\n     ANIMATION\n     ========================================================= *\/\n\n  function requestTick(){\n\n    if(!isTicking){\n\n      isTicking = true;\n\n      rafId =\n        requestAnimationFrame(\n          tick\n        );\n\n    }\n\n  }\n\n\n  function tick(){\n\n    isTicking = false;\n\n\n    smoothed +=\n      (\n        target -\n        smoothed\n      ) *\n      LERP;\n\n\n    drawFrame(\n      smoothed\n    );\n\n\n    if(\n      Math.abs(\n        target -\n        smoothed\n      ) > IDLE_EPS\n    ){\n\n      requestTick();\n\n    }\n\n  }\n\n\n  \/* =========================================================\n     \u00c9V\u00c9NEMENTS\n     ========================================================= *\/\n\n  window.addEventListener(\n    'scroll',\n    updateTarget,\n    {\n      passive: true\n    }\n  );\n\n\n  window.addEventListener(\n    'resize',\n    updateTarget\n  );\n\n\n  \/* =========================================================\n     PREMIER DESSIN\n     ========================================================= *\/\n\n  updateTarget();\n\n\n})();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>NADIR Nos mod\u00e8les Qui sommes-nous ? Contact Discutons de votre projet \/ Contact \/ Cr\u00e9ation web \/ SEO &amp; Formation Une question, un projet ou besoin d&rsquo;un accompagnement ? \u00c9changeons directement avec notre \u00e9quipe. R\u00e9ponse sous 24h Parlons de votre projet. Appelez-nous ou \u00e9crivez-nous. Nous vous r\u00e9pondons rapidement pour discuter de votre projet, de votre&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"narrow","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-563","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/pages\/563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/comments?post=563"}],"version-history":[{"count":18,"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/pages\/563\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/pages\/563\/revisions\/644"}],"wp:attachment":[{"href":"https:\/\/poposafe.com\/index.php\/wp-json\/wp\/v2\/media?parent=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}