{"id":29,"date":"2026-07-17T15:09:31","date_gmt":"2026-07-17T13:09:31","guid":{"rendered":"https:\/\/amourallabah.com\/?page_id=29"},"modified":"2026-07-23T19:46:22","modified_gmt":"2026-07-23T17:46:22","slug":"contact","status":"publish","type":"page","link":"https:\/\/amourallabah.com\/index.php\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n\r\n \r\n\r\n Contact | [NOM DE L\u2019ENTREPRISE]<\/title>\r\n\r\n <meta\r\n name=\"description\"\r\n content=\"Contactez [NOM DE L\u2019ENTREPRISE] pour vos projets de photographie, vid\u00e9ographie, montage vid\u00e9o et motion design. Pr\u00e9sentez-nous votre besoin et recevez une proposition personnalis\u00e9e.\"\r\n >\r\n\r\n <style>\r\n \/* ==================================================\r\n R\u00c9INITIALISATION\r\n ================================================== *\/\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n :root {\r\n --black: #111111;\r\n --black-soft: #1b1b1b;\r\n --black-light: #272727;\r\n\r\n --red: #d60000;\r\n --red-light: #e00000;\r\n --red-dark: #990000;\r\n --red-deep: #420000;\r\n\r\n --white: #ffffff;\r\n\r\n --gray-50: #eeecea;\r\n --gray-100: #f4f3f0;\r\n --gray-200: #e0dfd9;\r\n --gray-300: #cac8c1;\r\n --gray-400: #9a9890;\r\n --gray-600: #66645f;\r\n --gray-700: #444340;\r\n\r\n --success: #178a43;\r\n --error: #b00020;\r\n\r\n --shadow:\r\n 0 20px 50px rgba(0, 0, 0, 0.08);\r\n\r\n --shadow-hover:\r\n 0 24px 60px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n body {\r\n overflow-x: hidden;\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: var(--gray-50);\r\n color: var(--black);\r\n }\r\n\r\n img {\r\n width: 100%;\r\n max-width: 100%;\r\n display: block;\r\n }\r\n\r\n a {\r\n color: inherit;\r\n }\r\n\r\n button,\r\n input,\r\n textarea,\r\n select {\r\n font: inherit;\r\n }\r\n\r\n button {\r\n cursor: pointer;\r\n }\r\n\r\n \/* ==================================================\r\n \u00c9L\u00c9MENTS G\u00c9N\u00c9RAUX\r\n ================================================== *\/\r\n\r\n .section-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding-right: 48px;\r\n padding-left: 48px;\r\n }\r\n\r\n .section-heading {\r\n max-width: 760px;\r\n margin-bottom: 42px;\r\n }\r\n\r\n .section-eyebrow {\r\n margin-bottom: 14px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .section-eyebrow-line {\r\n width: 34px;\r\n height: 2px;\r\n flex-shrink: 0;\r\n background: var(--red);\r\n }\r\n\r\n .section-eyebrow-text {\r\n font-size: 11px;\r\n font-weight: 800;\r\n letter-spacing: 2.8px;\r\n text-transform: uppercase;\r\n color: var(--red);\r\n }\r\n\r\n .section-title {\r\n margin-bottom: 16px;\r\n font-size: clamp(30px, 4vw, 48px);\r\n font-weight: 900;\r\n line-height: 1.08;\r\n letter-spacing: -1.5px;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n }\r\n\r\n .section-title span {\r\n color: var(--red);\r\n }\r\n\r\n .section-description {\r\n max-width: 690px;\r\n font-size: 17px;\r\n line-height: 1.8;\r\n color: var(--gray-600);\r\n }\r\n\r\n .button {\r\n min-height: 50px;\r\n padding: 14px 24px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n border: 2px solid transparent;\r\n border-radius: 5px;\r\n font-size: 12px;\r\n font-weight: 800;\r\n letter-spacing: 1px;\r\n text-decoration: none !important;\r\n text-transform: uppercase;\r\n transition:\r\n transform 0.2s ease,\r\n background 0.2s ease,\r\n border-color 0.2s ease,\r\n color 0.2s ease;\r\n }\r\n\r\n .button:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .button-primary {\r\n border-color: var(--red);\r\n background: var(--red);\r\n color: var(--white);\r\n }\r\n\r\n .button-primary:hover {\r\n border-color: var(--red-dark);\r\n background: var(--red-dark);\r\n }\r\n\r\n .button-secondary {\r\n border-color: rgba(255, 255, 255, 0.28);\r\n background: rgba(255, 255, 255, 0.06);\r\n color: var(--white);\r\n }\r\n\r\n .button-secondary:hover {\r\n border-color: var(--red);\r\n background: var(--red);\r\n }\r\n\r\n .button svg {\r\n width: 17px;\r\n height: 17px;\r\n flex-shrink: 0;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n \/* ==================================================\r\n HERO\r\n ================================================== *\/\r\n\r\n .contact-hero {\r\n width: 100vw;\r\n min-height: 570px;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -50vw;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n background:\r\n radial-gradient(\r\n circle at 84% 42%,\r\n rgba(214, 0, 0, 0.25) 0%,\r\n rgba(214, 0, 0, 0.07) 28%,\r\n transparent 54%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #080808 0%,\r\n #151515 43%,\r\n #240000 72%,\r\n #080808 100%\r\n );\r\n }\r\n\r\n .contact-hero::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0.16;\r\n background-image:\r\n linear-gradient(\r\n rgba(255, 255, 255, 0.03) 1px,\r\n transparent 1px\r\n ),\r\n linear-gradient(\r\n 90deg,\r\n rgba(255, 255, 255, 0.03) 1px,\r\n transparent 1px\r\n );\r\n background-size: 42px 42px;\r\n pointer-events: none;\r\n }\r\n\r\n .contact-hero::after {\r\n content: \"\";\r\n width: 430px;\r\n height: 430px;\r\n position: absolute;\r\n top: 50%;\r\n right: -130px;\r\n transform: translateY(-50%);\r\n border: 1px solid rgba(214, 0, 0, 0.2);\r\n border-radius: 50%;\r\n box-shadow:\r\n 0 0 0 55px rgba(214, 0, 0, 0.035),\r\n 0 0 0 110px rgba(214, 0, 0, 0.02);\r\n pointer-events: none;\r\n }\r\n\r\n .contact-hero-inner {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 82px 80px 76px;\r\n position: relative;\r\n z-index: 2;\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .hero-eyebrow {\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .hero-eyebrow-line {\r\n width: 34px;\r\n height: 2px;\r\n background: var(--red);\r\n }\r\n\r\n .hero-eyebrow-text {\r\n font-size: 11px;\r\n font-weight: 800;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--red);\r\n }\r\n\r\n .hero-title {\r\n max-width: 760px;\r\n margin-bottom: 22px;\r\n font-size: clamp(44px, 6vw, 74px);\r\n font-weight: 900;\r\n line-height: 0.98;\r\n letter-spacing: -3px;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .hero-title span {\r\n display: block;\r\n color: var(--red);\r\n }\r\n\r\n .hero-description {\r\n max-width: 680px;\r\n font-size: 17px;\r\n line-height: 1.8;\r\n color: rgba(255, 255, 255, 0.7);\r\n }\r\n\r\n .hero-actions {\r\n margin-top: 32px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 14px;\r\n }\r\n\r\n .hero-contact-card {\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid rgba(214, 0, 0, 0.35);\r\n border-top: 3px solid var(--red);\r\n border-radius: 8px;\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n rgba(255, 255, 255, 0.09),\r\n rgba(255, 255, 255, 0.025)\r\n );\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .hero-contact-card::before {\r\n content: \"\";\r\n width: 120px;\r\n height: 120px;\r\n position: absolute;\r\n top: -55px;\r\n right: -45px;\r\n border-radius: 50%;\r\n background: rgba(214, 0, 0, 0.15);\r\n }\r\n\r\n .hero-card-head {\r\n padding: 26px 26px 20px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.09);\r\n }\r\n\r\n .hero-card-kicker {\r\n margin-bottom: 8px;\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--red);\r\n }\r\n\r\n .hero-card-title {\r\n font-size: 22px;\r\n font-weight: 800;\r\n line-height: 1.25;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .hero-contact-list {\r\n padding: 12px 26px 26px;\r\n list-style: none;\r\n }\r\n\r\n .hero-contact-list li {\r\n padding: 15px 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 13px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.07);\r\n }\r\n\r\n .hero-contact-list li:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .hero-contact-icon {\r\n width: 36px;\r\n height: 36px;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: rgba(214, 0, 0, 0.16);\r\n color: var(--red);\r\n }\r\n\r\n .hero-contact-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .hero-contact-label {\r\n margin-bottom: 3px;\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 1.2px;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.42);\r\n }\r\n\r\n .hero-contact-value {\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 1.45;\r\n text-decoration: none;\r\n color: rgba(255, 255, 255, 0.86);\r\n }\r\n\r\n .hero-contact-value:hover {\r\n color: var(--red);\r\n }\r\n\r\n \/* ==================================================\r\n BARRE D\u2019INFORMATIONS\r\n ================================================== *\/\r\n\r\n .contact-bar {\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -50vw;\r\n border-bottom: 3px solid var(--red-deep);\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #120000 0%,\r\n #3a0000 20%,\r\n #7a0000 50%,\r\n #420000 80%,\r\n #120000 100%\r\n );\r\n }\r\n\r\n .contact-bar-inner {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 80px;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n\r\n .contact-bar-item {\r\n min-width: 0;\r\n padding: 20px 26px;\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n border-right: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .contact-bar-item:first-child {\r\n padding-left: 0;\r\n }\r\n\r\n .contact-bar-item:last-child {\r\n padding-right: 0;\r\n border-right: none;\r\n }\r\n\r\n .contact-bar-icon {\r\n width: 40px;\r\n height: 40px;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: rgba(0, 0, 0, 0.24);\r\n color: var(--white);\r\n }\r\n\r\n .contact-bar-icon svg {\r\n width: 19px;\r\n height: 19px;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .contact-bar-title {\r\n font-size: 11px;\r\n font-weight: 800;\r\n letter-spacing: 0.7px;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .contact-bar-text {\r\n margin-top: 3px;\r\n font-size: 11px;\r\n line-height: 1.4;\r\n color: rgba(255, 255, 255, 0.72);\r\n }\r\n\r\n \/* ==================================================\r\n FORMULAIRE ET INFORMATIONS\r\n ================================================== *\/\r\n\r\n .contact-main {\r\n padding: 95px 0 100px;\r\n }\r\n\r\n .contact-layout {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);\r\n gap: 34px;\r\n align-items: start;\r\n }\r\n\r\n .contact-form-card,\r\n .contact-info-card {\r\n min-width: 0;\r\n overflow: hidden;\r\n border: 1px solid var(--gray-200);\r\n border-top: 3px solid var(--red);\r\n border-radius: 10px;\r\n background: var(--white);\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .contact-form-head {\r\n padding: 34px 36px 28px;\r\n border-bottom: 1px solid var(--gray-100);\r\n background:\r\n radial-gradient(\r\n circle at 90% 15%,\r\n rgba(214, 0, 0, 0.14),\r\n transparent 34%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #0b0b0b 0%,\r\n #1b1b1b 68%,\r\n #290000 100%\r\n );\r\n }\r\n\r\n .contact-form-kicker {\r\n margin-bottom: 10px;\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--red);\r\n }\r\n\r\n .contact-form-title {\r\n margin-bottom: 10px;\r\n font-size: clamp(25px, 3vw, 36px);\r\n font-weight: 900;\r\n line-height: 1.12;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .contact-form-description {\r\n max-width: 700px;\r\n font-size: 14px;\r\n line-height: 1.7;\r\n color: rgba(255, 255, 255, 0.65);\r\n }\r\n\r\n .contact-form {\r\n padding: 34px 36px 38px;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 21px;\r\n }\r\n\r\n .form-group {\r\n min-width: 0;\r\n }\r\n\r\n .form-group-full {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .form-label {\r\n margin-bottom: 9px;\r\n display: block;\r\n font-size: 11px;\r\n font-weight: 800;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n }\r\n\r\n .form-label span {\r\n color: var(--red);\r\n }\r\n\r\n .form-control {\r\n width: 100%;\r\n min-height: 52px;\r\n padding: 13px 15px;\r\n border: 1px solid var(--gray-300);\r\n border-radius: 5px;\r\n outline: none;\r\n background: var(--gray-100);\r\n font-size: 14px;\r\n color: var(--black);\r\n transition:\r\n border-color 0.2s ease,\r\n background 0.2s ease,\r\n box-shadow 0.2s ease;\r\n }\r\n\r\n textarea.form-control {\r\n min-height: 165px;\r\n resize: vertical;\r\n line-height: 1.65;\r\n }\r\n\r\n .form-control::placeholder {\r\n color: var(--gray-400);\r\n }\r\n\r\n .form-control:focus {\r\n border-color: var(--red);\r\n background: var(--white);\r\n box-shadow: 0 0 0 3px rgba(214, 0, 0, 0.09);\r\n }\r\n\r\n .form-control.is-invalid {\r\n border-color: var(--error);\r\n box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.08);\r\n }\r\n\r\n .form-help {\r\n margin-top: 7px;\r\n font-size: 11px;\r\n line-height: 1.5;\r\n color: var(--gray-400);\r\n }\r\n\r\n .form-error {\r\n margin-top: 7px;\r\n display: none;\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: var(--error);\r\n }\r\n\r\n .form-control.is-invalid + .form-error {\r\n display: block;\r\n }\r\n\r\n .checkbox-row {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 11px;\r\n }\r\n\r\n .checkbox-row input {\r\n width: 17px;\r\n height: 17px;\r\n margin-top: 2px;\r\n flex-shrink: 0;\r\n accent-color: var(--red);\r\n }\r\n\r\n .checkbox-text {\r\n font-size: 12px;\r\n line-height: 1.6;\r\n color: var(--gray-600);\r\n }\r\n\r\n .checkbox-text a {\r\n font-weight: 700;\r\n color: var(--red);\r\n }\r\n\r\n .form-footer {\r\n margin-top: 26px;\r\n padding-top: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n border-top: 1px solid var(--gray-100);\r\n }\r\n\r\n .form-note {\r\n max-width: 430px;\r\n font-size: 11px;\r\n line-height: 1.55;\r\n color: var(--gray-400);\r\n }\r\n\r\n .submit-button {\r\n min-width: 210px;\r\n }\r\n\r\n .form-message {\r\n margin-top: 18px;\r\n padding: 14px 16px;\r\n display: none;\r\n border-radius: 5px;\r\n font-size: 13px;\r\n font-weight: 700;\r\n line-height: 1.55;\r\n }\r\n\r\n .form-message.is-success {\r\n display: block;\r\n border: 1px solid rgba(23, 138, 67, 0.25);\r\n background: rgba(23, 138, 67, 0.08);\r\n color: var(--success);\r\n }\r\n\r\n .form-message.is-error {\r\n display: block;\r\n border: 1px solid rgba(176, 0, 32, 0.25);\r\n background: rgba(176, 0, 32, 0.08);\r\n color: var(--error);\r\n }\r\n\r\n \/* ==================================================\r\n COLONNE INFORMATIONS\r\n ================================================== *\/\r\n\r\n .contact-side {\r\n display: grid;\r\n gap: 22px;\r\n }\r\n\r\n .contact-info-head {\r\n padding: 26px 26px 21px;\r\n background:\r\n radial-gradient(\r\n circle at 88% 10%,\r\n rgba(214, 0, 0, 0.2),\r\n transparent 36%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #0b0b0b,\r\n #1c1c1c 68%,\r\n #2d0000\r\n );\r\n }\r\n\r\n .contact-info-kicker {\r\n margin-bottom: 7px;\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 1.8px;\r\n text-transform: uppercase;\r\n color: var(--red);\r\n }\r\n\r\n .contact-info-title {\r\n font-size: 23px;\r\n font-weight: 900;\r\n line-height: 1.18;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .contact-info-list {\r\n padding: 10px 25px 25px;\r\n list-style: none;\r\n }\r\n\r\n .contact-info-item {\r\n padding: 18px 0;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 14px;\r\n border-bottom: 1px solid var(--gray-100);\r\n }\r\n\r\n .contact-info-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .contact-info-icon {\r\n width: 42px;\r\n height: 42px;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: var(--black);\r\n color: var(--red);\r\n }\r\n\r\n .contact-info-icon svg {\r\n width: 19px;\r\n height: 19px;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .contact-info-label {\r\n margin-bottom: 5px;\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n color: var(--gray-400);\r\n }\r\n\r\n .contact-info-value {\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 1.55;\r\n text-decoration: none;\r\n color: var(--black);\r\n }\r\n\r\n .contact-info-value:hover {\r\n color: var(--red);\r\n }\r\n\r\n .availability-card {\r\n padding: 28px;\r\n position: relative;\r\n overflow: hidden;\r\n border-top: 3px solid var(--red);\r\n border-radius: 9px;\r\n background:\r\n radial-gradient(\r\n circle at 95% 15%,\r\n rgba(214, 0, 0, 0.22),\r\n transparent 34%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #090909 0%,\r\n #1b1b1b 65%,\r\n #2e0000 100%\r\n );\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .availability-card::after {\r\n content: \"\";\r\n width: 120px;\r\n height: 120px;\r\n position: absolute;\r\n right: -55px;\r\n bottom: -58px;\r\n border: 1px solid rgba(214, 0, 0, 0.25);\r\n border-radius: 50%;\r\n }\r\n\r\n .availability-status {\r\n margin-bottom: 15px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 9px;\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 1.6px;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .availability-dot {\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--red);\r\n box-shadow: 0 0 0 5px rgba(214, 0, 0, 0.13);\r\n }\r\n\r\n .availability-title {\r\n margin-bottom: 10px;\r\n font-size: 23px;\r\n font-weight: 900;\r\n line-height: 1.18;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .availability-text {\r\n margin-bottom: 20px;\r\n font-size: 13px;\r\n line-height: 1.7;\r\n color: rgba(255, 255, 255, 0.64);\r\n }\r\n\r\n .availability-card .button {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* ==================================================\r\n R\u00c9SEAUX SOCIAUX\r\n ================================================== *\/\r\n\r\n .social-section {\r\n padding: 0 0 100px;\r\n }\r\n\r\n .social-box {\r\n overflow: hidden;\r\n display: grid;\r\n grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);\r\n border: 1px solid var(--gray-200);\r\n border-top: 3px solid var(--red);\r\n border-radius: 10px;\r\n background: var(--white);\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .social-intro {\r\n padding: 48px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n background:\r\n radial-gradient(\r\n circle at 20% 20%,\r\n rgba(214, 0, 0, 0.18),\r\n transparent 36%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #0b0b0b,\r\n #1b1b1b 65%,\r\n #2d0000\r\n );\r\n }\r\n\r\n .social-intro .section-title {\r\n color: var(--white);\r\n }\r\n\r\n .social-intro .section-description {\r\n color: rgba(255, 255, 255, 0.65);\r\n }\r\n\r\n .social-grid {\r\n padding: 42px;\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 15px;\r\n }\r\n\r\n .social-link {\r\n min-width: 0;\r\n padding: 19px;\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n border: 1px solid var(--gray-200);\r\n border-radius: 7px;\r\n background: var(--gray-50);\r\n text-decoration: none;\r\n transition:\r\n transform 0.2s ease,\r\n border-color 0.2s ease,\r\n box-shadow 0.2s ease;\r\n }\r\n\r\n .social-link:hover {\r\n transform: translateY(-3px);\r\n border-color: rgba(214, 0, 0, 0.42);\r\n box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .social-icon {\r\n width: 42px;\r\n height: 42px;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: var(--black);\r\n color: var(--red);\r\n }\r\n\r\n .social-icon svg {\r\n width: 19px;\r\n height: 19px;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .social-title {\r\n margin-bottom: 4px;\r\n font-size: 13px;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n }\r\n\r\n .social-text {\r\n font-size: 12px;\r\n line-height: 1.45;\r\n color: var(--gray-400);\r\n }\r\n\r\n \/* ==================================================\r\n FAQ\r\n ================================================== *\/\r\n\r\n .faq-section {\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -50vw;\r\n padding: 96px 0;\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #0a0a0a 0%,\r\n #181818 50%,\r\n #250000 100%\r\n );\r\n }\r\n\r\n .faq-section .section-title {\r\n color: var(--white);\r\n }\r\n\r\n .faq-section .section-description {\r\n color: rgba(255, 255, 255, 0.65);\r\n }\r\n\r\n .faq-list {\r\n max-width: 920px;\r\n display: grid;\r\n gap: 13px;\r\n }\r\n\r\n .faq-item {\r\n overflow: hidden;\r\n border: 1px solid rgba(255, 255, 255, 0.11);\r\n border-left: 3px solid var(--red);\r\n border-radius: 7px;\r\n background: rgba(255, 255, 255, 0.055);\r\n }\r\n\r\n .faq-question {\r\n width: 100%;\r\n padding: 20px 22px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n border: none;\r\n background: transparent;\r\n text-align: left;\r\n font-size: 14px;\r\n font-weight: 800;\r\n line-height: 1.45;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .faq-plus {\r\n width: 28px;\r\n height: 28px;\r\n position: relative;\r\n flex-shrink: 0;\r\n border: 1px solid rgba(214, 0, 0, 0.45);\r\n border-radius: 50%;\r\n background: rgba(214, 0, 0, 0.1);\r\n }\r\n\r\n .faq-plus::before,\r\n .faq-plus::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n background: var(--red);\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .faq-plus::before {\r\n width: 11px;\r\n height: 2px;\r\n }\r\n\r\n .faq-plus::after {\r\n width: 2px;\r\n height: 11px;\r\n }\r\n\r\n .faq-item.is-open .faq-plus::after {\r\n transform: translate(-50%, -50%) rotate(90deg);\r\n }\r\n\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease;\r\n }\r\n\r\n .faq-answer-inner {\r\n padding: 0 22px 20px;\r\n font-size: 14px;\r\n line-height: 1.75;\r\n color: rgba(255, 255, 255, 0.65);\r\n }\r\n\r\n \/* ==================================================\r\n APPEL \u00c0 L\u2019ACTION\r\n ================================================== *\/\r\n\r\n .cta-section {\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -50vw;\r\n overflow: hidden;\r\n background:\r\n radial-gradient(\r\n circle at 90% 30%,\r\n rgba(214, 0, 0, 0.3),\r\n transparent 32%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #090909 0%,\r\n #1a1a1a 55%,\r\n #320000 100%\r\n );\r\n }\r\n\r\n .cta-section::before {\r\n content: \"\";\r\n width: 320px;\r\n height: 320px;\r\n position: absolute;\r\n top: -150px;\r\n left: -120px;\r\n border: 1px solid rgba(214, 0, 0, 0.22);\r\n border-radius: 50%;\r\n }\r\n\r\n .cta-inner {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 78px 80px;\r\n position: relative;\r\n z-index: 2;\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n gap: 50px;\r\n align-items: center;\r\n }\r\n\r\n .cta-kicker {\r\n margin-bottom: 12px;\r\n font-size: 11px;\r\n font-weight: 800;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: var(--red);\r\n }\r\n\r\n .cta-title {\r\n max-width: 780px;\r\n margin-bottom: 14px;\r\n font-size: clamp(32px, 4.5vw, 54px);\r\n font-weight: 900;\r\n line-height: 1.05;\r\n letter-spacing: -1.5px;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .cta-title span {\r\n color: var(--red);\r\n }\r\n\r\n .cta-description {\r\n max-width: 720px;\r\n font-size: 16px;\r\n line-height: 1.75;\r\n color: rgba(255, 255, 255, 0.65);\r\n }\r\n\r\n .cta-actions {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n \/* ==================================================\r\n RESPONSIVE \u2014 TABLETTE\r\n ================================================== *\/\r\n\r\n @media (max-width: 1080px) {\r\n .contact-hero-inner {\r\n padding-right: 48px;\r\n padding-left: 48px;\r\n grid-template-columns: minmax(0, 1fr) 320px;\r\n gap: 42px;\r\n }\r\n\r\n .contact-bar-inner {\r\n padding-right: 48px;\r\n padding-left: 48px;\r\n }\r\n\r\n .contact-bar-item {\r\n padding-right: 18px;\r\n padding-left: 18px;\r\n }\r\n\r\n .cta-inner {\r\n padding-right: 48px;\r\n padding-left: 48px;\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .contact-hero {\r\n min-height: auto;\r\n }\r\n\r\n .contact-hero-inner {\r\n padding-top: 66px;\r\n padding-bottom: 66px;\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .hero-contact-card {\r\n max-width: 620px;\r\n }\r\n\r\n .contact-bar-inner {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .contact-bar-item {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .contact-bar-item:nth-child(2) {\r\n border-right: none;\r\n }\r\n\r\n .contact-bar-item:nth-child(3),\r\n .contact-bar-item:nth-child(4) {\r\n border-bottom: none;\r\n }\r\n\r\n .contact-bar-item:first-child {\r\n padding-left: 18px;\r\n }\r\n\r\n .contact-bar-item:last-child {\r\n padding-right: 18px;\r\n }\r\n\r\n .contact-layout {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .social-box {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .cta-inner {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .cta-actions {\r\n max-width: 280px;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n \/* ==================================================\r\n RESPONSIVE \u2014 MOBILE\r\n ================================================== *\/\r\n\r\n @media (max-width: 640px) {\r\n \/* Masque la carte \u00ab Contact direct \u00bb uniquement sur mobile *\/\r\n .hero-contact-card {\r\n display: none;\r\n }\r\n\r\n .section-container {\r\n padding-right: 12px;\r\n padding-left: 12px;\r\n }\r\n\r\n .section-heading {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .section-title {\r\n font-size: 29px;\r\n letter-spacing: -0.8px;\r\n }\r\n\r\n .section-description {\r\n font-size: 15px;\r\n line-height: 1.75;\r\n }\r\n\r\n .contact-hero-inner {\r\n padding: 48px 20px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 41px;\r\n letter-spacing: -1.8px;\r\n }\r\n\r\n .hero-description {\r\n font-size: 15px;\r\n line-height: 1.75;\r\n }\r\n\r\n .hero-actions {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n .hero-actions .button {\r\n width: 100%;\r\n }\r\n\r\n .hero-card-head,\r\n .hero-contact-list {\r\n padding-right: 20px;\r\n padding-left: 20px;\r\n }\r\n\r\n .contact-bar-inner {\r\n padding: 0;\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .contact-bar-item,\r\n .contact-bar-item:first-child,\r\n .contact-bar-item:last-child {\r\n padding: 16px 20px;\r\n border-right: none;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .contact-bar-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .contact-main {\r\n padding: 68px 0 75px;\r\n }\r\n\r\n .contact-form-head {\r\n padding: 28px 20px 24px;\r\n }\r\n\r\n .contact-form {\r\n padding: 25px 20px 28px;\r\n }\r\n\r\n .form-grid {\r\n grid-template-columns: 1fr;\r\n gap: 18px;\r\n }\r\n\r\n .form-group-full {\r\n grid-column: auto;\r\n }\r\n\r\n .form-footer {\r\n align-items: stretch;\r\n flex-direction: column;\r\n }\r\n\r\n .submit-button {\r\n width: 100%;\r\n min-width: 0;\r\n }\r\n\r\n .contact-info-list {\r\n padding-right: 20px;\r\n padding-left: 20px;\r\n }\r\n\r\n .availability-card {\r\n padding: 25px 20px;\r\n }\r\n\r\n .social-section {\r\n padding-bottom: 75px;\r\n }\r\n\r\n .social-intro {\r\n padding: 36px 22px;\r\n }\r\n\r\n .social-grid {\r\n padding: 22px 16px;\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .faq-section {\r\n padding: 72px 0;\r\n }\r\n\r\n .faq-question {\r\n padding: 18px;\r\n font-size: 13px;\r\n }\r\n\r\n .faq-answer-inner {\r\n padding: 0 18px 18px;\r\n }\r\n\r\n .cta-inner {\r\n padding: 60px 20px;\r\n }\r\n\r\n .cta-title {\r\n font-size: 33px;\r\n }\r\n\r\n .cta-actions {\r\n width: 100%;\r\n max-width: none;\r\n flex-direction: column;\r\n }\r\n\r\n .cta-actions .button {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- ==================================================\r\n HERO\r\n ================================================== -->\r\n\r\n <section class=\"contact-hero\">\r\n\r\n <div class=\"contact-hero-inner\">\r\n\r\n <div>\r\n\r\n <div class=\"hero-eyebrow\">\r\n <span class=\"hero-eyebrow-line\"><\/span>\r\n\r\n <span class=\"hero-eyebrow-text\">\r\n Parlons de votre projet\r\n <\/span>\r\n <\/div>\r\n\r\n <h1 class=\"hero-title\">\r\n Cr\u00e9ons ensemble\r\n <span>des images m\u00e9morables<\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-description\">\r\n Vous avez besoin d\u2019un photographe, d\u2019un vid\u00e9aste, d\u2019un monteur ou\r\n d\u2019un motion designer ? Pr\u00e9sentez-nous votre projet, vos objectifs et\r\n vos d\u00e9lais. Nous vous r\u00e9pondrons avec une solution claire, cr\u00e9ative\r\n et adapt\u00e9e \u00e0 votre budget.\r\n <\/p>\r\n\r\n <div class=\"hero-actions\">\r\n\r\n <a class=\"button button-primary\" href=\"#formulaire-contact\">\r\n Pr\u00e9senter mon projet\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a class=\"button button-secondary\" href=\"tel:[VOTRE-NUMERO]\">\r\n Nous appeler\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <aside class=\"hero-contact-card\">\r\n\r\n <div class=\"hero-card-head\">\r\n\r\n <div class=\"hero-card-kicker\">\r\n Contact direct\r\n <\/div>\r\n\r\n <h2 class=\"hero-card-title\">\r\n Une question ou une demande urgente ?\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <ul class=\"hero-contact-list\">\r\n\r\n <li>\r\n\r\n <span class=\"hero-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M4 4h16v16H4z\"><\/path>\r\n <path d=\"M4 6l8 6 8-6\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"hero-contact-label\">E-mail<\/div>\r\n\r\n <a class=\"hero-contact-value\" href=\"mailto:[VOTRE-EMAIL]\">\r\n [VOTRE-EMAIL]\r\n <\/a>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <li>\r\n\r\n <span class=\"hero-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.74a16 16 0 0 0 6 6l1.28-1.28a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"hero-contact-label\">T\u00e9l\u00e9phone<\/div>\r\n\r\n <a class=\"hero-contact-value\" href=\"tel:[VOTRE-NUMERO]\">\r\n [VOTRE-NUMERO]\r\n <\/a>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <li>\r\n\r\n <span class=\"hero-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 1 1 18 0z\"><\/path>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"hero-contact-label\">Zone d\u2019intervention<\/div>\r\n\r\n <div class=\"hero-contact-value\">\r\n [VILLE] et d\u00e9placements selon le projet\r\n <\/div>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <li>\r\n\r\n <span class=\"hero-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n <path d=\"M12 7v5l3 2\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"hero-contact-label\">R\u00e9ponse habituelle<\/div>\r\n\r\n <div class=\"hero-contact-value\">\r\n Sous 24 \u00e0 48 heures ouvr\u00e9es\r\n <\/div>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <\/ul>\r\n\r\n <\/aside>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n BARRE D\u2019INFORMATIONS\r\n ================================================== -->\r\n\r\n <div class=\"contact-bar\">\r\n\r\n <div class=\"contact-bar-inner\">\r\n\r\n <div class=\"contact-bar-item\">\r\n\r\n <span class=\"contact-bar-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M14.5 4h-5L7.5 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.5z\"><\/path>\r\n <circle cx=\"12\" cy=\"13\" r=\"3\"><\/circle>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-bar-title\">Photographie<\/div>\r\n <div class=\"contact-bar-text\">Portrait, \u00e9v\u00e9nement, produit et corporate<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"contact-bar-item\">\r\n\r\n <span class=\"contact-bar-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <polygon points=\"23 7 16 12 23 17 23 7\"><\/polygon>\r\n <rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\"><\/rect>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-bar-title\">Vid\u00e9ographie<\/div>\r\n <div class=\"contact-bar-text\">Captation, publicit\u00e9, interview et \u00e9v\u00e9nement<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"contact-bar-item\">\r\n\r\n <span class=\"contact-bar-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M4 6h16\"><\/path>\r\n <path d=\"M4 12h10\"><\/path>\r\n <path d=\"M4 18h7\"><\/path>\r\n <path d=\"M17 15l4 3-4 3z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-bar-title\">Montage vid\u00e9o<\/div>\r\n <div class=\"contact-bar-text\">D\u00e9rushage, montage, son et \u00e9talonnage<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"contact-bar-item\">\r\n\r\n <span class=\"contact-bar-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n <path d=\"M12 7v5l3 2\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-bar-title\">Motion design<\/div>\r\n <div class=\"contact-bar-text\">Logo anim\u00e9, habillage et contenus sociaux<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ==================================================\r\n FORMULAIRE ET INFORMATIONS\r\n ================================================== -->\r\n\r\n <main class=\"contact-main\" id=\"formulaire-contact\">\r\n\r\n <div class=\"section-container\">\r\n\r\n <div class=\"section-heading\">\r\n\r\n <div class=\"section-eyebrow\">\r\n <span class=\"section-eyebrow-line\"><\/span>\r\n\r\n <span class=\"section-eyebrow-text\">\r\n Demande de devis\r\n <\/span>\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">\r\n Parlez-nous de\r\n <span>votre projet<\/span>\r\n <\/h2>\r\n\r\n <p class=\"section-description\">\r\n Plus votre demande est pr\u00e9cise, plus nous pourrons vous proposer une\r\n r\u00e9ponse adapt\u00e9e \u00e0 vos besoins, \u00e0 vos d\u00e9lais et \u00e0 votre budget.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"contact-layout\">\r\n\r\n <section class=\"contact-form-card\">\r\n\r\n <div class=\"contact-form-head\">\r\n\r\n <div class=\"contact-form-kicker\">\r\n Formulaire de contact\r\n <\/div>\r\n\r\n <h3 class=\"contact-form-title\">\r\n Recevez une proposition personnalis\u00e9e\r\n <\/h3>\r\n\r\n <p class=\"contact-form-description\">\r\n Remplissez les informations ci-dessous. Les champs marqu\u00e9s d\u2019un\r\n ast\u00e9risque sont obligatoires.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <!--\r\n IMPORTANT :\r\n Remplacez [URL-TRAITEMENT-FORMULAIRE] par l\u2019URL de votre outil\r\n de formulaire, de votre plugin WordPress ou de votre script serveur.\r\n -->\r\n\r\n <form\r\n class=\"contact-form\"\r\n id=\"project-contact-form\"\r\n action=\"[URL-TRAITEMENT-FORMULAIRE]\"\r\n method=\"post\"\r\n novalidate\r\n >\r\n\r\n <div class=\"form-grid\">\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-name\">\r\n Nom complet <span>*<\/span>\r\n <\/label>\r\n\r\n <input\r\n class=\"form-control\"\r\n id=\"contact-name\"\r\n name=\"nom\"\r\n type=\"text\"\r\n autocomplete=\"name\"\r\n placeholder=\"Votre nom et pr\u00e9nom\"\r\n required\r\n >\r\n\r\n <div class=\"form-error\">\r\n Veuillez indiquer votre nom.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-company\">\r\n Entreprise ou organisation\r\n <\/label>\r\n\r\n <input\r\n class=\"form-control\"\r\n id=\"contact-company\"\r\n name=\"entreprise\"\r\n type=\"text\"\r\n autocomplete=\"organization\"\r\n placeholder=\"Nom de votre entreprise\"\r\n >\r\n\r\n <div class=\"form-error\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-email\">\r\n Adresse e-mail <span>*<\/span>\r\n <\/label>\r\n\r\n <input\r\n class=\"form-control\"\r\n id=\"contact-email\"\r\n name=\"email\"\r\n type=\"email\"\r\n autocomplete=\"email\"\r\n placeholder=\"exemple@entreprise.com\"\r\n required\r\n >\r\n\r\n <div class=\"form-error\">\r\n Veuillez saisir une adresse e-mail valide.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-phone\">\r\n T\u00e9l\u00e9phone\r\n <\/label>\r\n\r\n <input\r\n class=\"form-control\"\r\n id=\"contact-phone\"\r\n name=\"telephone\"\r\n type=\"tel\"\r\n autocomplete=\"tel\"\r\n placeholder=\"+229 XX XX XX XX\"\r\n >\r\n\r\n <div class=\"form-error\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-service\">\r\n Service recherch\u00e9 <span>*<\/span>\r\n <\/label>\r\n\r\n <select\r\n class=\"form-control\"\r\n id=\"contact-service\"\r\n name=\"service\"\r\n required\r\n >\r\n <option value=\"\">S\u00e9lectionnez un service<\/option>\r\n <option value=\"photographie\">Photographie<\/option>\r\n <option value=\"videographie\">Vid\u00e9ographie<\/option>\r\n <option value=\"montage-video\">Montage vid\u00e9o<\/option>\r\n <option value=\"motion-design\">Motion design<\/option>\r\n <option value=\"offre-complete\">Offre compl\u00e8te<\/option>\r\n <option value=\"autre\">Autre demande<\/option>\r\n <\/select>\r\n\r\n <div class=\"form-error\">\r\n Veuillez s\u00e9lectionner un service.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-budget\">\r\n Budget estimatif\r\n <\/label>\r\n\r\n <select\r\n class=\"form-control\"\r\n id=\"contact-budget\"\r\n name=\"budget\"\r\n >\r\n <option value=\"\">S\u00e9lectionnez une fourchette<\/option>\r\n <option value=\"a-definir\">\u00c0 d\u00e9finir ensemble<\/option>\r\n <option value=\"moins-500\">Moins de 500 \u20ac<\/option>\r\n <option value=\"500-1000\">500 \u20ac \u00e0 1 000 \u20ac<\/option>\r\n <option value=\"1000-2500\">1 000 \u20ac \u00e0 2 500 \u20ac<\/option>\r\n <option value=\"2500-5000\">2 500 \u20ac \u00e0 5 000 \u20ac<\/option>\r\n <option value=\"plus-5000\">Plus de 5 000 \u20ac<\/option>\r\n <\/select>\r\n\r\n <div class=\"form-error\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-date\">\r\n Date ou p\u00e9riode souhait\u00e9e\r\n <\/label>\r\n\r\n <input\r\n class=\"form-control\"\r\n id=\"contact-date\"\r\n name=\"date_souhaitee\"\r\n type=\"text\"\r\n placeholder=\"Ex. : septembre 2026\"\r\n >\r\n\r\n <div class=\"form-error\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n\r\n <label class=\"form-label\" for=\"contact-location\">\r\n Lieu du projet\r\n <\/label>\r\n\r\n <input\r\n class=\"form-control\"\r\n id=\"contact-location\"\r\n name=\"lieu\"\r\n type=\"text\"\r\n placeholder=\"Ville, pays ou \u00e0 distance\"\r\n >\r\n\r\n <div class=\"form-error\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group form-group-full\">\r\n\r\n <label class=\"form-label\" for=\"contact-message\">\r\n Pr\u00e9sentation du projet <span>*<\/span>\r\n <\/label>\r\n\r\n <textarea\r\n class=\"form-control\"\r\n id=\"contact-message\"\r\n name=\"message\"\r\n placeholder=\"D\u00e9crivez votre projet, vos objectifs, le nombre de contenus souhait\u00e9s, les supports de diffusion et vos contraintes particuli\u00e8res.\"\r\n required\r\n ><\/textarea>\r\n\r\n <div class=\"form-error\">\r\n Veuillez d\u00e9crire votre projet.\r\n <\/div>\r\n\r\n <div class=\"form-help\">\r\n Vous pouvez \u00e9galement pr\u00e9ciser vos r\u00e9f\u00e9rences visuelles,\r\n votre public cible et le d\u00e9lai de livraison souhait\u00e9.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-group form-group-full\">\r\n\r\n <div class=\"checkbox-row\">\r\n\r\n <input\r\n id=\"contact-consent\"\r\n name=\"consentement\"\r\n type=\"checkbox\"\r\n value=\"oui\"\r\n required\r\n >\r\n\r\n <label class=\"checkbox-text\" for=\"contact-consent\">\r\n J\u2019accepte que mes informations soient utilis\u00e9es pour\r\n r\u00e9pondre \u00e0 ma demande conform\u00e9ment \u00e0 la\r\n <a href=\"[LIEN-POLITIQUE-CONFIDENTIALITE]\">\r\n politique de confidentialit\u00e9\r\n <\/a>.\r\n <\/label>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-error\" id=\"consent-error\">\r\n Vous devez accepter le traitement de vos informations.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-footer\">\r\n\r\n <p class=\"form-note\">\r\n Vos informations restent confidentielles et ne sont utilis\u00e9es\r\n que pour traiter votre demande.\r\n <\/p>\r\n\r\n <button\r\n class=\"button button-primary submit-button\"\r\n type=\"submit\"\r\n >\r\n Envoyer ma demande\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line>\r\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon>\r\n <\/svg>\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <div\r\n class=\"form-message\"\r\n id=\"form-message\"\r\n role=\"status\"\r\n aria-live=\"polite\"\r\n ><\/div>\r\n\r\n <\/form>\r\n\r\n <\/section>\r\n\r\n <aside class=\"contact-side\">\r\n\r\n <section class=\"contact-info-card\">\r\n\r\n <div class=\"contact-info-head\">\r\n\r\n <div class=\"contact-info-kicker\">\r\n Coordonn\u00e9es\r\n <\/div>\r\n\r\n <h3 class=\"contact-info-title\">\r\n Contactez-nous directement\r\n <\/h3>\r\n\r\n <\/div>\r\n\r\n <ul class=\"contact-info-list\">\r\n\r\n <li class=\"contact-info-item\">\r\n\r\n <span class=\"contact-info-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M4 4h16v16H4z\"><\/path>\r\n <path d=\"M4 6l8 6 8-6\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-info-label\">E-mail<\/div>\r\n\r\n <a class=\"contact-info-value\" href=\"mailto:[VOTRE-EMAIL]\">\r\n [VOTRE-EMAIL]\r\n <\/a>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <li class=\"contact-info-item\">\r\n\r\n <span class=\"contact-info-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.74a16 16 0 0 0 6 6l1.28-1.28a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-info-label\">T\u00e9l\u00e9phone<\/div>\r\n\r\n <a class=\"contact-info-value\" href=\"tel:[VOTRE-NUMERO]\">\r\n [VOTRE-NUMERO]\r\n <\/a>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <li class=\"contact-info-item\">\r\n\r\n <span class=\"contact-info-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 1 1 18 0z\"><\/path>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-info-label\">Adresse<\/div>\r\n\r\n <div class=\"contact-info-value\">\r\n [VOTRE-ADRESSE]<br>\r\n [CODE-POSTAL] [VILLE], [PAYS]\r\n <\/div>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <li class=\"contact-info-item\">\r\n\r\n <span class=\"contact-info-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n <path d=\"M12 7v5l3 2\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"contact-info-label\">Horaires<\/div>\r\n\r\n <div class=\"contact-info-value\">\r\n Lundi au vendredi : 9h00 \u2013 18h00<br>\r\n Samedi : sur rendez-vous\r\n <\/div>\r\n <\/div>\r\n\r\n <\/li>\r\n\r\n <\/ul>\r\n\r\n <\/section>\r\n\r\n <section class=\"availability-card\">\r\n\r\n <div class=\"availability-status\">\r\n <span class=\"availability-dot\"><\/span>\r\n Disponibilit\u00e9s ouvertes\r\n <\/div>\r\n\r\n <h3 class=\"availability-title\">\r\n Besoin d\u2019un \u00e9change rapide ?\r\n <\/h3>\r\n\r\n <p class=\"availability-text\">\r\n R\u00e9servez un appel pour pr\u00e9senter votre projet, poser vos\r\n questions et d\u00e9finir les prochaines \u00e9tapes.\r\n <\/p>\r\n\r\n <a\r\n class=\"button button-primary\"\r\n href=\"[LIEN-PRISE-DE-RENDEZ-VOUS]\"\r\n >\r\n R\u00e9server un appel\r\n <\/a>\r\n\r\n <\/section>\r\n\r\n <\/aside>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <!-- ==================================================\r\n R\u00c9SEAUX SOCIAUX\r\n ================================================== -->\r\n\r\n <section class=\"social-section\">\r\n\r\n <div class=\"section-container\">\r\n\r\n <div class=\"social-box\">\r\n\r\n <div class=\"social-intro\">\r\n\r\n <div class=\"section-eyebrow\">\r\n <span class=\"section-eyebrow-line\"><\/span>\r\n\r\n <span class=\"section-eyebrow-text\">\r\n Suivez notre travail\r\n <\/span>\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">\r\n D\u00e9couvrez nos\r\n <span>derni\u00e8res cr\u00e9ations<\/span>\r\n <\/h2>\r\n\r\n <p class=\"section-description\">\r\n Retrouvez nos projets r\u00e9cents, les coulisses des tournages et nos\r\n contenus cr\u00e9atifs sur les r\u00e9seaux sociaux.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"social-grid\">\r\n\r\n <a class=\"social-link\" href=\"[LIEN-INSTAGRAM]\" target=\"_blank\" rel=\"noopener\">\r\n\r\n <span class=\"social-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"><\/rect>\r\n <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle>\r\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\"><\/circle>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"social-title\">Instagram<\/div>\r\n <div class=\"social-text\">Photos, vid\u00e9os et coulisses de production.<\/div>\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"[LIEN-FACEBOOK]\" target=\"_blank\" rel=\"noopener\">\r\n\r\n <span class=\"social-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M14 8h3V4h-3c-3 0-5 2-5 5v3H6v4h3v6h4v-6h3l1-4h-4V9c0-.7.3-1 1-1z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"social-title\">Facebook<\/div>\r\n <div class=\"social-text\">Actualit\u00e9s, \u00e9v\u00e9nements et nouveaux projets.<\/div>\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"[LIEN-YOUTUBE]\" target=\"_blank\" rel=\"noopener\">\r\n\r\n <span class=\"social-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M22 12s0-4-1-6c-.5-1-1.5-1.5-2.5-1.7C16.5 4 12 4 12 4s-4.5 0-6.5.3C4.5 4.5 3.5 5 3 6c-1 2-1 6-1 6s0 4 1 6c.5 1 1.5 1.5 2.5 1.7C7.5 20 12 20 12 20s4.5 0 6.5-.3c1-.2 2-.7 2.5-1.7 1-2 1-6 1-6z\"><\/path>\r\n <polygon points=\"10 9 16 12 10 15 10 9\"><\/polygon>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"social-title\">YouTube<\/div>\r\n <div class=\"social-text\">Films, interviews et r\u00e9alisations audiovisuelles.<\/div>\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"[LIEN-LINKEDIN]\" target=\"_blank\" rel=\"noopener\">\r\n\r\n <span class=\"social-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <rect x=\"3\" y=\"9\" width=\"4\" height=\"12\"><\/rect>\r\n <circle cx=\"5\" cy=\"5\" r=\"2\"><\/circle>\r\n <path d=\"M11 21V9h4v2c1-1.5 2.5-2.5 4.5-2.5 2.5 0 4.5 2 4.5 5V21h-4v-6.5c0-1.5-.8-2.5-2.3-2.5-1.6 0-2.7 1.1-2.7 3V21z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n\r\n <div>\r\n <div class=\"social-title\">LinkedIn<\/div>\r\n <div class=\"social-text\">Projets corporate et communication professionnelle.<\/div>\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n QUESTIONS FR\u00c9QUENTES\r\n ================================================== -->\r\n\r\n <section class=\"faq-section\">\r\n\r\n <div class=\"section-container\">\r\n\r\n <div class=\"section-heading\">\r\n\r\n <div class=\"section-eyebrow\">\r\n <span class=\"section-eyebrow-line\"><\/span>\r\n\r\n <span class=\"section-eyebrow-text\">\r\n Questions fr\u00e9quentes\r\n <\/span>\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">\r\n Avant de nous\r\n <span>contacter<\/span>\r\n <\/h2>\r\n\r\n <p class=\"section-description\">\r\n Voici les r\u00e9ponses aux questions les plus courantes concernant les\r\n devis, les d\u00e9lais et l\u2019organisation des prestations.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"faq-list\">\r\n\r\n <article class=\"faq-item\">\r\n\r\n <button class=\"faq-question\" type=\"button\" aria-expanded=\"false\">\r\n Combien de temps faut-il pour recevoir un devis ?\r\n <span class=\"faq-plus\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n Une premi\u00e8re r\u00e9ponse est g\u00e9n\u00e9ralement envoy\u00e9e sous 24 \u00e0 48 heures\r\n ouvr\u00e9es. Pour les projets complexes, un \u00e9change pr\u00e9alable peut\r\n \u00eatre n\u00e9cessaire avant l\u2019envoi d\u2019une proposition d\u00e9taill\u00e9e.\r\n <\/div>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <article class=\"faq-item\">\r\n\r\n <button class=\"faq-question\" type=\"button\" aria-expanded=\"false\">\r\n Vous d\u00e9placez-vous pour les tournages et s\u00e9ances photo ?\r\n <span class=\"faq-plus\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n Oui. Les d\u00e9placements sont possibles selon le lieu, la dur\u00e9e et\r\n les besoins du projet. Les \u00e9ventuels frais de d\u00e9placement sont\r\n indiqu\u00e9s clairement dans le devis.\r\n <\/div>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <article class=\"faq-item\">\r\n\r\n <button class=\"faq-question\" type=\"button\" aria-expanded=\"false\">\r\n Puis-je vous confier uniquement le montage de mes vid\u00e9os ?\r\n <span class=\"faq-plus\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n Oui. Vous pouvez nous transmettre vos propres fichiers pour le\r\n d\u00e9rushage, le montage, l\u2019\u00e9talonnage, le traitement sonore,\r\n l\u2019ajout de sous-titres et l\u2019export final.\r\n <\/div>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <article class=\"faq-item\">\r\n\r\n <button class=\"faq-question\" type=\"button\" aria-expanded=\"false\">\r\n Quels \u00e9l\u00e9ments faut-il fournir pour d\u00e9marrer un projet ?\r\n <span class=\"faq-plus\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n Il est utile de fournir votre objectif, votre public cible, vos\r\n r\u00e9f\u00e9rences visuelles, votre charte graphique, les formats\r\n souhait\u00e9s, la date de diffusion et votre budget estimatif.\r\n <\/div>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n APPEL \u00c0 L\u2019ACTION\r\n ================================================== -->\r\n\r\n <section class=\"cta-section\">\r\n\r\n <div class=\"cta-inner\">\r\n\r\n <div>\r\n\r\n <div class=\"cta-kicker\">\r\n Une id\u00e9e \u00e0 concr\u00e9tiser ?\r\n <\/div>\r\n\r\n <h2 class=\"cta-title\">\r\n Transformons votre projet en\r\n <span>contenu remarquable<\/span>\r\n <\/h2>\r\n\r\n <p class=\"cta-description\">\r\n Photographie, vid\u00e9o, montage ou animation : \u00e9changeons sur votre\r\n besoin et construisons une solution coh\u00e9rente avec votre identit\u00e9.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"cta-actions\">\r\n\r\n <a class=\"button button-primary\" href=\"#formulaire-contact\">\r\n Demander un devis\r\n\r\n <svg viewBox=\"0 0 24 24\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a class=\"button button-secondary\" href=\"mailto:[VOTRE-EMAIL]\">\r\n Envoyer un e-mail\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <script>\r\n \/* ==================================================\r\n ACCORD\u00c9ON FAQ\r\n ================================================== *\/\r\n\r\n document.querySelectorAll(\".faq-question\").forEach(function (button) {\r\n button.addEventListener(\"click\", function () {\r\n const item = button.closest(\".faq-item\");\r\n const answer = item.querySelector(\".faq-answer\");\r\n const isOpen = item.classList.contains(\"is-open\");\r\n\r\n document.querySelectorAll(\".faq-item.is-open\").forEach(function (openItem) {\r\n if (openItem !== item) {\r\n openItem.classList.remove(\"is-open\");\r\n openItem.querySelector(\".faq-question\").setAttribute(\"aria-expanded\", \"false\");\r\n openItem.querySelector(\".faq-answer\").style.maxHeight = null;\r\n }\r\n });\r\n\r\n item.classList.toggle(\"is-open\");\r\n button.setAttribute(\"aria-expanded\", String(!isOpen));\r\n answer.style.maxHeight = isOpen ? null : answer.scrollHeight + \"px\";\r\n });\r\n });\r\n\r\n \/* ==================================================\r\n VALIDATION DU FORMULAIRE\r\n ================================================== *\/\r\n\r\n const contactForm = document.getElementById(\"project-contact-form\");\r\n const formMessage = document.getElementById(\"form-message\");\r\n const consentInput = document.getElementById(\"contact-consent\");\r\n const consentError = document.getElementById(\"consent-error\");\r\n\r\n function isValidEmail(email) {\r\n return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n }\r\n\r\n function setFieldState(field, isValid) {\r\n field.classList.toggle(\"is-invalid\", !isValid);\r\n }\r\n\r\n contactForm.addEventListener(\"submit\", function (event) {\r\n const nameField = document.getElementById(\"contact-name\");\r\n const emailField = document.getElementById(\"contact-email\");\r\n const serviceField = document.getElementById(\"contact-service\");\r\n const messageField = document.getElementById(\"contact-message\");\r\n\r\n let formIsValid = true;\r\n\r\n const nameIsValid = nameField.value.trim().length >= 2;\r\n const emailIsValid = isValidEmail(emailField.value.trim());\r\n const serviceIsValid = serviceField.value !== \"\";\r\n const messageIsValid = messageField.value.trim().length >= 10;\r\n const consentIsValid = consentInput.checked;\r\n\r\n setFieldState(nameField, nameIsValid);\r\n setFieldState(emailField, emailIsValid);\r\n setFieldState(serviceField, serviceIsValid);\r\n setFieldState(messageField, messageIsValid);\r\n\r\n consentError.style.display = consentIsValid ? \"none\" : \"block\";\r\n\r\n formIsValid =\r\n nameIsValid &&\r\n emailIsValid &&\r\n serviceIsValid &&\r\n messageIsValid &&\r\n consentIsValid;\r\n\r\n if (!formIsValid) {\r\n event.preventDefault();\r\n\r\n formMessage.className = \"form-message is-error\";\r\n formMessage.textContent =\r\n \"Veuillez v\u00e9rifier les champs obligatoires avant d\u2019envoyer votre demande.\";\r\n\r\n const firstInvalidField = contactForm.querySelector(\".is-invalid\");\r\n\r\n if (firstInvalidField) {\r\n firstInvalidField.focus();\r\n }\r\n\r\n return;\r\n }\r\n\r\n \/*\r\n Lorsque [URL-TRAITEMENT-FORMULAIRE] est remplac\u00e9e par une v\u00e9ritable\r\n adresse de traitement, le formulaire est envoy\u00e9 normalement.\r\n\r\n Le message ci-dessous ne bloque pas l\u2019envoi. Il informe simplement\r\n l\u2019utilisateur que les informations sont en cours de transmission.\r\n *\/\r\n\r\n formMessage.className = \"form-message is-success\";\r\n formMessage.textContent = \"Votre demande est en cours d\u2019envoi.\";\r\n });\r\n\r\n contactForm.querySelectorAll(\".form-control\").forEach(function (field) {\r\n field.addEventListener(\"input\", function () {\r\n field.classList.remove(\"is-invalid\");\r\n });\r\n\r\n field.addEventListener(\"change\", function () {\r\n field.classList.remove(\"is-invalid\");\r\n });\r\n });\r\n\r\n consentInput.addEventListener(\"change\", function () {\r\n if (consentInput.checked) {\r\n consentError.style.display = \"none\";\r\n }\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Contact | [NOM DE L\u2019ENTREPRISE] Parlons de votre projet Cr\u00e9ons ensemble des images m\u00e9morables Vous avez besoin d\u2019un photographe, d\u2019un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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-29","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Contact -<\/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:\/\/amourallabah.com\/index.php\/contact\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Contact -\" \/>\n<meta property=\"og:description\" content=\"Contact | [NOM DE L\u2019ENTREPRISE] Parlons de votre projet Cr\u00e9ons ensemble des images m\u00e9morables Vous avez besoin d\u2019un photographe, d\u2019un […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amourallabah.com\/index.php\/contact\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-23T17:46:22+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/index.php\\\/contact\\\/\",\"url\":\"https:\\\/\\\/amourallabah.com\\\/index.php\\\/contact\\\/\",\"name\":\"Contact -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#website\"},\"datePublished\":\"2026-07-17T13:09:31+00:00\",\"dateModified\":\"2026-07-23T17:46:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/amourallabah.com\\\/index.php\\\/contact\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/amourallabah.com\\\/index.php\\\/contact\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/index.php\\\/contact\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/amourallabah.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Contact\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#website\",\"url\":\"https:\\\/\\\/amourallabah.com\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/amourallabah.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Contact -","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:\/\/amourallabah.com\/index.php\/contact\/","og_locale":"en_US","og_type":"article","og_title":"Contact -","og_description":"Contact | [NOM DE L\u2019ENTREPRISE] Parlons de votre projet Cr\u00e9ons ensemble des images m\u00e9morables Vous avez besoin d\u2019un photographe, d\u2019un […]","og_url":"https:\/\/amourallabah.com\/index.php\/contact\/","article_modified_time":"2026-07-23T17:46:22+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amourallabah.com\/index.php\/contact\/","url":"https:\/\/amourallabah.com\/index.php\/contact\/","name":"Contact -","isPartOf":{"@id":"https:\/\/amourallabah.com\/#website"},"datePublished":"2026-07-17T13:09:31+00:00","dateModified":"2026-07-23T17:46:22+00:00","breadcrumb":{"@id":"https:\/\/amourallabah.com\/index.php\/contact\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amourallabah.com\/index.php\/contact\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/amourallabah.com\/index.php\/contact\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/amourallabah.com\/"},{"@type":"ListItem","position":2,"name":"Contact"}]},{"@type":"WebSite","@id":"https:\/\/amourallabah.com\/#website","url":"https:\/\/amourallabah.com\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/amourallabah.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":7,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/394"}],"wp:attachment":[{"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}