R\u00e9alistiC | Photographie & Vid\u00e9o<\/title>\r\n\r\n <style>\r\n\r\n \/* ==================================================\r\n RESET\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 body {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #000000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n HERO\r\n ================================================== *\/\r\n\r\n .realistic-hero {\r\n position: relative;\r\n\r\n width: 100vw;\r\n max-width: none;\r\n\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n\r\n height: calc(max(55vh, 412.5px) + 255px);\r\n min-height: 0;\r\n\r\n overflow: hidden;\r\n\r\n background: #000000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n IMAGE HERO\r\n ================================================== *\/\r\n\r\n .realistic-hero__image {\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: max(100vh, 750px);\r\n\r\n max-width: none;\r\n\r\n display: block;\r\n\r\n margin: 0;\r\n padding: 0;\r\n\r\n border: 0;\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n\r\n filter: none;\r\n\r\n transform: translateZ(0);\r\n\r\n image-rendering: auto;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n D\u00c9GRAD\u00c9 HERO\r\n ================================================== *\/\r\n\r\n .realistic-hero::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 1;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n linear-gradient(\r\n to bottom,\r\n rgba(0, 0, 0, 0) 0%,\r\n rgba(0, 0, 0, 0.03) 48%,\r\n rgba(0, 0, 0, 0.28) 100%\r\n );\r\n }\r\n\r\n\r\n \/* ==================================================\r\n SLOGAN\r\n ================================================== *\/\r\n\r\n .realistic-hero__slogan {\r\n position: absolute;\r\n\r\n top: max(19vh, 142.5px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 11px;\r\n font-weight: 500;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: 2.2px;\r\n\r\n text-transform: uppercase;\r\n\r\n white-space: nowrap;\r\n\r\n text-shadow:\r\n 0 1px 5px rgba(0, 0, 0, 0.55);\r\n }\r\n\r\n\r\n .realistic-hero__slogan .red-dot {\r\n color: #d60000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n GRAND TITRE\r\n ================================================== *\/\r\n\r\n .realistic-hero__headline {\r\n position: absolute;\r\n\r\n top: max(24vh, 180px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n\r\n font-size: clamp(38px, 4.8vw, 76px);\r\n font-weight: 800;\r\n\r\n line-height: 0.95;\r\n\r\n letter-spacing: -1.5px;\r\n\r\n text-transform: uppercase;\r\n\r\n white-space: nowrap;\r\n\r\n text-shadow:\r\n 0 3px 15px rgba(0, 0, 0, 0.40);\r\n }\r\n\r\n\r\n .realistic-hero__headline-white {\r\n display: block;\r\n color: #ffffff;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n display: block;\r\n\r\n margin-top: 8px;\r\n\r\n color: #d60000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n DESCRIPTION\r\n ================================================== *\/\r\n\r\n .realistic-hero__description {\r\n position: absolute;\r\n\r\n top: max(43vh, 322.5px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n color: #ffffff;\r\n\r\n text-shadow:\r\n 0 2px 10px rgba(0, 0, 0, 0.55);\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n display: block;\r\n\r\n margin-bottom: 8px;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 17px;\r\n font-weight: 500;\r\n\r\n line-height: 1.3;\r\n\r\n letter-spacing: 0.15px;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n display: block;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 16px;\r\n font-weight: 400;\r\n\r\n line-height: 1.4;\r\n\r\n letter-spacing: 0.1px;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n LISTE DES SERVICES\r\n ================================================== *\/\r\n\r\n .realistic-hero__service-list {\r\n position: absolute;\r\n\r\n top: max(55vh, 412.5px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n\r\n gap: 15px;\r\n\r\n width: min(520px, 47vw);\r\n }\r\n\r\n\r\n .realistic-service {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 15px;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n flex: 0 0 auto;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n border: 1.5px solid #e00000;\r\n border-radius: 50%;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n color: #ffffff;\r\n\r\n background: rgba(0, 0, 0, 0.18);\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 24px;\r\n height: 24px;\r\n\r\n display: block;\r\n\r\n fill: none;\r\n\r\n stroke: currentColor;\r\n\r\n stroke-width: 1.5;\r\n\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n\r\n .realistic-service__text {\r\n display: flex;\r\n\r\n min-width: 0;\r\n\r\n flex-direction: column;\r\n\r\n justify-content: center;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n color: #ffffff;\r\n\r\n font-size: 16px;\r\n font-weight: 700;\r\n\r\n line-height: 1.15;\r\n\r\n letter-spacing: 0.5px;\r\n\r\n text-transform: uppercase;\r\n\r\n text-shadow:\r\n 0 1px 5px rgba(0, 0, 0, 0.65);\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n margin-top: 3px;\r\n\r\n color: rgba(255, 255, 255, 0.78);\r\n\r\n font-size: 13px;\r\n font-weight: 400;\r\n\r\n line-height: 1.3;\r\n\r\n text-shadow:\r\n 0 1px 5px rgba(0, 0, 0, 0.65);\r\n }\r\n\r\n\r\n \/* ==================================================\r\n BOUTON DEVIS\r\n ================================================== *\/\r\n\r\n .realistic-hero__content {\r\n position: absolute;\r\n\r\n top: max(50vh, 375px);\r\n right: 10%;\r\n\r\n z-index: 4;\r\n\r\n transform: translateY(-50%);\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n\r\n .realistic-hero__button,\r\n .realistic-hero__button:link,\r\n .realistic-hero__button:visited {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n min-width: 185px;\r\n\r\n padding: 16px 30px;\r\n\r\n background: #ffffff;\r\n\r\n border: 1px solid #ffffff;\r\n border-radius: 4px;\r\n\r\n color: #d60000;\r\n\r\n font-size: 14px;\r\n font-weight: 700;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: 1.3px;\r\n\r\n text-decoration: none !important;\r\n text-transform: uppercase;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n background 0.25s ease,\r\n color 0.25s ease,\r\n border-color 0.25s ease,\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n\r\n .realistic-hero__button:hover,\r\n .realistic-hero__button:focus {\r\n background: #d60000;\r\n\r\n color: #ffffff;\r\n\r\n border-color: #d60000;\r\n\r\n text-decoration: none !important;\r\n\r\n transform: translateY(-3px);\r\n\r\n box-shadow:\r\n 0 10px 30px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n\r\n .realistic-hero__button:active {\r\n background: #b90000;\r\n\r\n color: #ffffff;\r\n\r\n border-color: #b90000;\r\n\r\n text-decoration: none !important;\r\n\r\n transform: translateY(0);\r\n }\r\n\r\n\r\n \/* ==================================================\r\n SECTION DE CONFIANCE\r\n ================================================== *\/\r\n\r\n .realistic-trust {\r\n position: relative;\r\n\r\n width: 100vw;\r\n max-width: none;\r\n\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n\r\n padding: 22px 4%;\r\n\r\n background:\r\n linear-gradient(\r\n 120deg,\r\n #750000 0%,\r\n #a80000 28%,\r\n #d60000 58%,\r\n #9d0000 82%,\r\n #680000 100%\r\n );\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .realistic-trust::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: -120px;\r\n left: 30%;\r\n\r\n width: 500px;\r\n height: 250px;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(255, 255, 255, 0.13) 0%,\r\n rgba(255, 255, 255, 0.04) 40%,\r\n transparent 70%\r\n );\r\n\r\n pointer-events: none;\r\n }\r\n\r\n\r\n .realistic-trust__inner {\r\n position: relative;\r\n\r\n z-index: 2;\r\n\r\n width: 100%;\r\n max-width: 1500px;\r\n\r\n margin: 0 auto;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: repeat(4, 1fr);\r\n\r\n align-items: center;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n position: relative;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n min-height: 80px;\r\n\r\n padding: 0 28px;\r\n\r\n gap: 16px;\r\n }\r\n\r\n\r\n .realistic-trust__item:first-child {\r\n padding-left: 0;\r\n }\r\n\r\n\r\n .realistic-trust__item:last-child {\r\n padding-right: 0;\r\n }\r\n\r\n\r\n .realistic-trust__item:not(:last-child)::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 12px;\r\n right: 0;\r\n\r\n width: 1px;\r\n height: calc(100% - 24px);\r\n\r\n background: rgba(255, 255, 255, 0.27);\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n flex: 0 0 auto;\r\n\r\n width: 58px;\r\n height: 58px;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border: 1px solid rgba(255, 255, 255, 0.40);\r\n border-radius: 17px;\r\n\r\n background: rgba(255, 255, 255, 0.10);\r\n\r\n color: #ffffff;\r\n\r\n backdrop-filter: blur(3px);\r\n -webkit-backdrop-filter: blur(3px);\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 28px;\r\n height: 28px;\r\n\r\n fill: none;\r\n\r\n stroke: currentColor;\r\n\r\n stroke-width: 1.8;\r\n\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n\r\n .realistic-trust__text {\r\n min-width: 0;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n color: #ffffff;\r\n\r\n font-size: 18px;\r\n font-weight: 800;\r\n\r\n line-height: 1.15;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n margin-top: 6px;\r\n\r\n color: rgba(255, 255, 255, 0.87);\r\n\r\n font-size: 13px;\r\n font-weight: 400;\r\n\r\n line-height: 1.3;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n ELEMENTOR \/ ASTRA\r\n ================================================== *\/\r\n\r\n .elementor-widget-html,\r\n .elementor-widget-html > .elementor-widget-container {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n\r\n .elementor-widget-html .realistic-hero,\r\n .elementor-widget-html .realistic-trust {\r\n width: 100vw;\r\n max-width: none;\r\n }\r\n\r\n\r\n .realistic-hero img {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n TABLETTE\r\n ================================================== *\/\r\n\r\n @media (max-width: 1024px) {\r\n\r\n .realistic-hero {\r\n height: calc(max(45.05vh, 365.7px) + 235px);\r\n min-height: 0;\r\n }\r\n\r\n\r\n .realistic-hero__image {\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: max(85vh, 690px);\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n\r\n .realistic-hero__slogan {\r\n top: max(16.15vh, 131.1px);\r\n left: 3%;\r\n\r\n font-size: 9px;\r\n\r\n letter-spacing: 1.8px;\r\n }\r\n\r\n\r\n .realistic-hero__headline {\r\n top: max(19.55vh, 158.7px);\r\n left: 3%;\r\n\r\n font-size: clamp(34px, 5.5vw, 58px);\r\n\r\n letter-spacing: -1px;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n margin-top: 6px;\r\n }\r\n\r\n\r\n .realistic-hero__description {\r\n top: max(34.85vh, 282.9px);\r\n left: 3%;\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n font-size: 15px;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .realistic-hero__service-list {\r\n top: max(45.05vh, 365.7px);\r\n left: 3%;\r\n\r\n gap: 13px;\r\n\r\n width: 55vw;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 22px;\r\n height: 22px;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n font-size: 12px;\r\n }\r\n\r\n\r\n .realistic-hero__content {\r\n top: max(42.5vh, 345px);\r\n right: 8%;\r\n\r\n transform: translateY(-50%);\r\n }\r\n\r\n\r\n .realistic-hero__button,\r\n .realistic-hero__button:link,\r\n .realistic-hero__button:visited {\r\n min-width: 165px;\r\n\r\n padding: 14px 24px;\r\n\r\n font-size: 12px;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .realistic-trust {\r\n padding: 19px 3%;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n min-height: 76px;\r\n\r\n padding: 0 14px;\r\n\r\n gap: 11px;\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n width: 48px;\r\n height: 48px;\r\n\r\n border-radius: 14px;\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n margin-top: 4px;\r\n\r\n font-size: 11px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* ==================================================\r\n MOBILE\r\n ================================================== *\/\r\n\r\n @media (max-width: 767px) {\r\n\r\n .realistic-hero {\r\n width: 100vw;\r\n\r\n height: 300px;\r\n min-height: 300px;\r\n }\r\n\r\n\r\n .realistic-hero__image {\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 440px;\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n\r\n .realistic-hero__slogan {\r\n top: 44px;\r\n left: 3%;\r\n\r\n font-size: 5px;\r\n font-weight: 500;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: 0.9px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-hero__headline {\r\n top: 66px;\r\n left: 3%;\r\n\r\n font-size: clamp(27px, 8.5vw, 39px);\r\n\r\n line-height: 0.95;\r\n\r\n letter-spacing: -0.7px;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n margin-top: 4px;\r\n }\r\n\r\n\r\n .realistic-hero__description {\r\n top: 132px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n margin-bottom: 7px;\r\n\r\n font-size: 10px;\r\n font-weight: 500;\r\n\r\n line-height: 1.3;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n font-size: 9px;\r\n\r\n line-height: 1.4;\r\n }\r\n\r\n\r\n .realistic-hero__service-list {\r\n top: 190px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n column-gap: 16px;\r\n row-gap: 18px;\r\n }\r\n\r\n\r\n .realistic-service {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 8px;\r\n\r\n width: 100%;\r\n\r\n min-width: 0;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n width: 38px;\r\n height: 38px;\r\n\r\n border-width: 1.2px;\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n\r\n .realistic-service__text {\r\n min-width: 0;\r\n\r\n flex: 1;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n font-size: 10px;\r\n\r\n line-height: 1.15;\r\n\r\n letter-spacing: 0.1px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n margin-top: 3px;\r\n\r\n font-size: 7.5px;\r\n\r\n line-height: 1.25;\r\n }\r\n\r\n\r\n .realistic-hero__content {\r\n display: none;\r\n }\r\n\r\n\r\n .realistic-trust {\r\n padding: 18px 4%;\r\n }\r\n\r\n\r\n .realistic-trust__inner {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n column-gap: 0;\r\n row-gap: 0;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n min-height: 78px;\r\n\r\n padding: 10px 9px;\r\n\r\n gap: 8px;\r\n }\r\n\r\n\r\n .realistic-trust__item:first-child {\r\n padding-left: 9px;\r\n }\r\n\r\n\r\n .realistic-trust__item:last-child {\r\n padding-right: 9px;\r\n }\r\n\r\n\r\n .realistic-trust__item:not(:last-child)::after {\r\n display: none;\r\n }\r\n\r\n\r\n .realistic-trust__item:nth-child(odd) {\r\n border-right: 1px solid rgba(255, 255, 255, 0.22);\r\n }\r\n\r\n\r\n .realistic-trust__item:nth-child(1),\r\n .realistic-trust__item:nth-child(2) {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.22);\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n width: 38px;\r\n height: 38px;\r\n\r\n border-radius: 11px;\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 19px;\r\n height: 19px;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n font-size: 10px;\r\n\r\n line-height: 1.15;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n margin-top: 3px;\r\n\r\n font-size: 7.5px;\r\n\r\n line-height: 1.25;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* ==================================================\r\n PETITS MOBILES\r\n ================================================== *\/\r\n\r\n @media (max-width: 480px) {\r\n\r\n .realistic-hero {\r\n height: 280px;\r\n min-height: 280px;\r\n }\r\n\r\n\r\n .realistic-hero__image {\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 405px;\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n\r\n .realistic-hero__slogan {\r\n top: 37px;\r\n left: 3%;\r\n\r\n font-size: 4.5px;\r\n\r\n letter-spacing: 0.7px;\r\n }\r\n\r\n\r\n .realistic-hero__headline {\r\n top: 57px;\r\n left: 3%;\r\n\r\n font-size: 27px;\r\n\r\n line-height: 0.95;\r\n\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n margin-top: 4px;\r\n }\r\n\r\n\r\n .realistic-hero__description {\r\n top: 119px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n margin-bottom: 6px;\r\n\r\n font-size: 8.5px;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n font-size: 8.5px;\r\n\r\n line-height: 1.4;\r\n }\r\n\r\n\r\n .realistic-hero__service-list {\r\n top: 173px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n column-gap: 12px;\r\n row-gap: 16px;\r\n }\r\n\r\n\r\n .realistic-service {\r\n gap: 7px;\r\n\r\n min-width: 0;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n width: 34px;\r\n height: 34px;\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n font-size: 9px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n margin-top: 2px;\r\n\r\n font-size: 6.8px;\r\n\r\n line-height: 1.25;\r\n }\r\n\r\n\r\n .realistic-hero__content {\r\n display: none;\r\n }\r\n\r\n\r\n .realistic-trust {\r\n padding: 14px 3%;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n min-height: 70px;\r\n\r\n padding: 8px 6px;\r\n\r\n gap: 7px;\r\n }\r\n\r\n\r\n .realistic-trust__item:first-child {\r\n padding-left: 6px;\r\n }\r\n\r\n\r\n .realistic-trust__item:last-child {\r\n padding-right: 6px;\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n width: 34px;\r\n height: 34px;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n font-size: 8.5px;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n font-size: 6.8px;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n \r\n\r\n <section class=\"realistic-hero\">\r\n\r\n\r\n <img\r\n class=\"realistic-hero__image\"\r\n \r\n alt=\"R\u00e9alistiC - Photographie, vid\u00e9ographie, montage vid\u00e9o et motion design\"\r\n decoding=\"async\"\r\n fetchpriority=\"high\"\r\n loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/amourallabah.com\/wp-content\/uploads\/2026\/07\/cool.png\">\r\n\r\n\r\n <div class=\"realistic-hero__slogan\">\r\n\r\n CREER<span class=\"red-dot\">.<\/span>\r\n CAPTURER<span class=\"red-dot\">.<\/span>\r\n SUBLIMER<span class=\"red-dot\">.<\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-hero__headline\">\r\n\r\n <span class=\"realistic-hero__headline-white\">\r\n DONNONS VIE\r\n <\/span>\r\n\r\n <span class=\"realistic-hero__headline-red\">\r\n A VOS ID\u00c9ES\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-hero__description\">\r\n\r\n <span class=\"realistic-hero__services-title\">\r\n Photographie, Vid\u00e9aste, Montage & Motion Design\r\n <\/span>\r\n\r\n <span class=\"realistic-hero__description-line\">\r\n Des contenus visuels puissants pour marquer\r\n <\/span>\r\n\r\n <span class=\"realistic-hero__description-line\">\r\n les esprits et sublimer votre image.\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-hero__service-list\">\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M4 7h3l1.5-2h7L17 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z\"><\/path>\r\n\r\n <circle cx=\"12\" cy=\"13\" r=\"4\"><\/circle>\r\n\r\n <path d=\"M18.5 9.5h.01\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n PHOTOGRAPHIE\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Des images fortes, esth\u00e9tiques et authentiques.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <rect\r\n x=\"2.5\"\r\n y=\"6\"\r\n width=\"13\"\r\n height=\"12\"\r\n rx=\"2\"\r\n ><\/rect>\r\n\r\n <path d=\"m15.5 10 6-3v10l-6-3Z\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n VID\u00c9ASTE\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Des vid\u00e9os immersives et percutantes.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <rect\r\n x=\"3\"\r\n y=\"3\"\r\n width=\"18\"\r\n height=\"18\"\r\n rx=\"1\"\r\n ><\/rect>\r\n\r\n <path d=\"M7 3v4\"><\/path>\r\n <path d=\"M12 3v4\"><\/path>\r\n <path d=\"M17 3v4\"><\/path>\r\n\r\n <path d=\"M7 17v4\"><\/path>\r\n <path d=\"M12 17v4\"><\/path>\r\n <path d=\"M17 17v4\"><\/path>\r\n\r\n <path d=\"M3 8h4\"><\/path>\r\n <path d=\"M3 13h4\"><\/path>\r\n\r\n <path d=\"M17 8h4\"><\/path>\r\n <path d=\"M17 13h4\"><\/path>\r\n\r\n <path d=\"m10 9 5 3-5 3Z\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n MONTAGE VID\u00c9O\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Rythme, storytelling et impact visuel.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M14.5 3.5 20.5 9.5 9 21l-6 1 1-6Z\"><\/path>\r\n\r\n <path d=\"M13 5 19 11\"><\/path>\r\n\r\n <path d=\"m4 16 4 4\"><\/path>\r\n\r\n <path d=\"M10.5 8.5 15.5 13.5\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n MOTION DESIGN\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Animations cr\u00e9atives et design en mouvement.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"realistic-hero__content\">\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/contact\/\"\r\n class=\"realistic-hero__button\"\r\n >\r\n Demander un devis\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section class=\"realistic-trust\">\r\n\r\n <div class=\"realistic-trust__inner\">\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M12 2l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4-3.9-3.8 5.4-.8Z\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n Qualit\u00e9 professionnelle\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n Une exigence \u00e9lev\u00e9e pour chaque cr\u00e9ation\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M12 3v18\"><\/path>\r\n\r\n <path d=\"M3 12h18\"><\/path>\r\n\r\n <circle cx=\"12\" cy=\"12\" r=\"8\"><\/circle>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n Cr\u00e9ation sur mesure\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n Une identit\u00e9 visuelle pens\u00e9e pour votre projet\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n\r\n <path d=\"M12 7v5l3 2\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n R\u00e9activit\u00e9\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n Des \u00e9changes rapides et un suivi efficace\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M8 11V7a4 4 0 0 1 8 0v4\"><\/path>\r\n\r\n <rect\r\n x=\"5\"\r\n y=\"11\"\r\n width=\"14\"\r\n height=\"10\"\r\n rx=\"2\"\r\n ><\/rect>\r\n\r\n <path d=\"M9 16l2 2 4-4\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n Accompagnement\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n \u00c0 vos c\u00f4t\u00e9s de l'id\u00e9e \u00e0 la r\u00e9alisation\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-434c14e e-con e-atomic-element e-flexbox-base e-67172d7 \" data-id=\"434c14e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"434c14e\">\n \t\t<div class=\"elementor-element elementor-element-5cbeb1b elementor-widget elementor-widget-html\" data-id=\"5cbeb1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n\r\n <meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1.0\"\r\n >\r\n\r\n <title>Mes Services | R\u00e9alistiC<\/title>\r\n\r\n <style>\r\n\r\n \/* =========================================================\r\n RESET\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 body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #151515;\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SECTION MES SERVICES\r\n ========================================================= *\/\r\n\r\n .services-section {\r\n width: 100%;\r\n padding: 85px 24px 105px;\r\n background: #ffffff;\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENEUR\r\n ========================================================= *\/\r\n\r\n .services-container {\r\n width: 100%;\r\n max-width: 1380px;\r\n margin: 0 auto;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE SUP\u00c9RIEURE : MES SERVICES\r\n ========================================================= *\/\r\n\r\n .services-top-band {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n width: 100%;\r\n\r\n margin-bottom: 18px;\r\n padding: 20px 25px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #ffffff 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 8px 25px\r\n rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n\r\n .services-top-band::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 50%;\r\n\r\n width: 68px;\r\n height: 3px;\r\n\r\n transform: translateX(-50%);\r\n\r\n background: #d50000;\r\n\r\n border-radius: 0 0 5px 5px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE DE LA BANDE\r\n ========================================================= *\/\r\n\r\n .services-top-title {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n color: #111111;\r\n\r\n font-size: 14px;\r\n font-weight: 900;\r\n\r\n letter-spacing: 4px;\r\n\r\n text-align: center;\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n .services-top-title::before,\r\n .services-top-title::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 1px;\r\n\r\n background: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE PRINCIPALE\r\n ========================================================= *\/\r\n\r\n .services-header {\r\n position: relative;\r\n\r\n display: flex;\r\n\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n\r\n gap: 50px;\r\n\r\n margin-bottom: 42px;\r\n\r\n padding: 55px 58px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 24px;\r\n\r\n box-shadow:\r\n 0 12px 40px\r\n rgba(0, 0, 0, 0.045);\r\n }\r\n\r\n\r\n .services-header::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 58px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 0 0 4px 4px;\r\n }\r\n\r\n\r\n .services-header-left {\r\n max-width: 880px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE PRINCIPAL\r\n ========================================================= *\/\r\n\r\n .services-title {\r\n margin-bottom: 24px;\r\n\r\n font-size: clamp(38px, 5vw, 70px);\r\n\r\n line-height: 0.98;\r\n\r\n letter-spacing: -3px;\r\n\r\n font-weight: 900;\r\n\r\n color: #111111;\r\n }\r\n\r\n\r\n .services-title span {\r\n color: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n DESCRIPTION\r\n ========================================================= *\/\r\n\r\n .services-description {\r\n max-width: 760px;\r\n\r\n font-size: 17px;\r\n\r\n line-height: 1.75;\r\n\r\n color: #676767;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n NUM\u00c9RO\r\n ========================================================= *\/\r\n\r\n .services-number {\r\n flex-shrink: 0;\r\n\r\n padding-bottom: 8px;\r\n\r\n font-size: 15px;\r\n font-weight: 700;\r\n\r\n color: #999999;\r\n }\r\n\r\n\r\n .services-number strong {\r\n color: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRILLE\r\n ========================================================= *\/\r\n\r\n .services-grid {\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(\r\n 12,\r\n minmax(0, 1fr)\r\n );\r\n\r\n gap: 18px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CARTES SERVICES\r\n ========================================================= *\/\r\n\r\n .service-item {\r\n position: relative;\r\n\r\n min-height: 430px;\r\n\r\n overflow: hidden;\r\n\r\n border-radius: 12px;\r\n\r\n background: #eeeeee;\r\n\r\n cursor: pointer;\r\n\r\n isolation: isolate;\r\n\r\n text-decoration: none;\r\n\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n\r\n .service-item:nth-child(1),\r\n .service-item:nth-child(2),\r\n .service-item:nth-child(3),\r\n .service-item:nth-child(4) {\r\n grid-column: span 6;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n IMAGES\r\n ========================================================= *\/\r\n\r\n .service-item img {\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n object-fit: cover;\r\n\r\n transition:\r\n transform 0.8s cubic-bezier(.2,.6,.2,1),\r\n filter 0.5s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n OVERLAY\r\n ========================================================= *\/\r\n\r\n .service-item::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 1;\r\n\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.88) 0%,\r\n rgba(0,0,0,0.34) 43%,\r\n rgba(0,0,0,0.03) 75%\r\n );\r\n\r\n transition: background 0.4s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n NUM\u00c9RO DE CARTE\r\n ========================================================= *\/\r\n\r\n .service-index {\r\n position: absolute;\r\n\r\n top: 24px;\r\n left: 25px;\r\n\r\n z-index: 4;\r\n\r\n width: 42px;\r\n height: 42px;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 50%;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n border:\r\n 1px solid\r\n rgba(255,255,255,0.35);\r\n\r\n background:\r\n rgba(0,0,0,0.22);\r\n\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n FL\u00c8CHE\r\n ========================================================= *\/\r\n\r\n .service-arrow {\r\n position: absolute;\r\n\r\n top: 22px;\r\n right: 22px;\r\n\r\n z-index: 4;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n border-radius: 50%;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n color: #111111;\r\n\r\n background: #ffffff;\r\n\r\n transform: rotate(-45deg);\r\n\r\n transition:\r\n background 0.3s ease,\r\n color 0.3s ease,\r\n transform 0.4s ease;\r\n }\r\n\r\n\r\n .service-arrow svg {\r\n width: 19px;\r\n height: 19px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENU\r\n ========================================================= *\/\r\n\r\n .service-content {\r\n position: absolute;\r\n\r\n left: 27px;\r\n right: 27px;\r\n bottom: 27px;\r\n\r\n z-index: 4;\r\n }\r\n\r\n\r\n .service-category {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 8px;\r\n\r\n margin-bottom: 10px;\r\n\r\n color:\r\n rgba(255,255,255,0.76);\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n letter-spacing: 1.8px;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n .service-category::before {\r\n content: \"\";\r\n\r\n width: 17px;\r\n height: 2px;\r\n\r\n background: #e00000;\r\n }\r\n\r\n\r\n .service-item-title {\r\n max-width: 650px;\r\n\r\n margin-bottom: 8px;\r\n\r\n font-size: clamp(24px, 3vw, 38px);\r\n\r\n line-height: 1.05;\r\n\r\n font-weight: 800;\r\n\r\n color: #ffffff;\r\n\r\n letter-spacing: -1px;\r\n }\r\n\r\n\r\n .service-item-description {\r\n max-width: 620px;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.55;\r\n\r\n color:\r\n rgba(255,255,255,0.74);\r\n\r\n transform: translateY(8px);\r\n\r\n opacity: 0;\r\n\r\n transition:\r\n transform 0.4s ease,\r\n opacity 0.4s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SURVOL CARTES\r\n ========================================================= *\/\r\n\r\n .service-item:hover img {\r\n transform: scale(1.065);\r\n }\r\n\r\n\r\n .service-item:hover::after {\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.93) 0%,\r\n rgba(0,0,0,0.40) 52%,\r\n rgba(0,0,0,0.08) 100%\r\n );\r\n }\r\n\r\n\r\n .service-item:hover .service-arrow {\r\n color: #ffffff;\r\n\r\n background: #d50000;\r\n\r\n transform: rotate(0deg);\r\n }\r\n\r\n\r\n .service-item:hover .service-item-description {\r\n transform: translateY(0);\r\n\r\n opacity: 1;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BAS DE SECTION\r\n ========================================================= *\/\r\n\r\n .services-footer {\r\n display: flex;\r\n\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n gap: 25px;\r\n\r\n margin-top: 38px;\r\n\r\n padding-top: 28px;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n }\r\n\r\n\r\n .services-footer-text {\r\n color: #707070;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.6;\r\n }\r\n\r\n\r\n .services-footer-text strong {\r\n color: #111111;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTON D\u00c9COUVRIR MES SERVICES\r\n ========================================================= *\/\r\n\r\n .services-button {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n min-height: 50px;\r\n\r\n padding: 0 25px;\r\n\r\n border-radius: 6px;\r\n\r\n background: #111111;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 13px;\r\n font-weight: 800;\r\n\r\n \/*\r\n * Aucun soulignement\r\n *\/\r\n text-decoration: none !important;\r\n\r\n white-space: nowrap;\r\n\r\n transition:\r\n background 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n\r\n \/*\r\n * Emp\u00eache WordPress \/ Astra \/ Elementor\r\n * de souligner le bouton dans tous ses \u00e9tats\r\n *\/\r\n\r\n .services-button:link,\r\n .services-button:visited,\r\n .services-button:hover,\r\n .services-button:focus,\r\n .services-button:active {\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .services-button:hover {\r\n background: #d50000;\r\n\r\n color: #ffffff;\r\n\r\n transform: translateY(-2px);\r\n }\r\n\r\n\r\n .services-button:visited {\r\n color: #ffffff;\r\n }\r\n\r\n\r\n .services-button svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TABLETTE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1000px) {\r\n\r\n .services-section {\r\n padding:\r\n 70px\r\n 22px\r\n 85px;\r\n }\r\n\r\n\r\n .services-header {\r\n align-items: flex-start;\r\n\r\n flex-direction: column;\r\n\r\n gap: 15px;\r\n\r\n padding:\r\n 45px\r\n 42px;\r\n }\r\n\r\n\r\n .services-header::after {\r\n left: 42px;\r\n }\r\n\r\n\r\n .services-number {\r\n display: none;\r\n }\r\n\r\n\r\n .services-grid {\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0,1fr)\r\n );\r\n }\r\n\r\n\r\n .service-item,\r\n .service-item:nth-child(1),\r\n .service-item:nth-child(2),\r\n .service-item:nth-child(3),\r\n .service-item:nth-child(4) {\r\n grid-column: auto;\r\n\r\n min-height: 410px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 650px) {\r\n\r\n\r\n .services-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 45px\r\n 0\r\n 60px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .services-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE MES SERVICES\r\n ====================================================== *\/\r\n\r\n .services-top-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 12px;\r\n\r\n padding:\r\n 17px\r\n 12px;\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n .services-top-band::before {\r\n width: 52px;\r\n }\r\n\r\n\r\n .services-top-title {\r\n gap: 9px;\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: 3px;\r\n }\r\n\r\n\r\n .services-top-title::before,\r\n .services-top-title::after {\r\n width: 25px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE PRINCIPALE\r\n ====================================================== *\/\r\n\r\n .services-header {\r\n width: 94%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 30px;\r\n\r\n padding:\r\n 32px\r\n 16px\r\n 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(0,0,0,0.05);\r\n }\r\n\r\n\r\n .services-header::after {\r\n left: 16px;\r\n\r\n width: 52px;\r\n }\r\n\r\n\r\n .services-header-left {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n\r\n .services-title {\r\n margin-bottom: 18px;\r\n\r\n font-size: 39px;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n\r\n .services-description {\r\n width: 100%;\r\n max-width: none;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.65;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARROUSEL MOBILE\r\n ====================================================== *\/\r\n\r\n .services-grid {\r\n display: flex;\r\n\r\n grid-template-columns: none;\r\n\r\n gap: 14px;\r\n\r\n width: 100%;\r\n max-width: none;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n padding:\r\n 0\r\n 12px\r\n 8px;\r\n\r\n margin: 0;\r\n\r\n scroll-snap-type:\r\n x mandatory;\r\n\r\n scroll-behavior:\r\n smooth;\r\n\r\n scrollbar-width: none;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n }\r\n\r\n\r\n .services-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n .service-item,\r\n .service-item:nth-child(1),\r\n .service-item:nth-child(2),\r\n .service-item:nth-child(3),\r\n .service-item:nth-child(4) {\r\n\r\n flex:\r\n 0 0\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n width:\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n min-width:\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n max-width:\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n height: 430px;\r\n min-height: 430px;\r\n\r\n grid-column: auto;\r\n\r\n scroll-snap-align:\r\n center;\r\n\r\n scroll-snap-stop:\r\n always;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTES MOBILE\r\n ====================================================== *\/\r\n\r\n .service-index {\r\n top: 17px;\r\n left: 17px;\r\n\r\n width: 37px;\r\n height: 37px;\r\n }\r\n\r\n\r\n .service-arrow {\r\n top: 17px;\r\n right: 17px;\r\n\r\n width: 43px;\r\n height: 43px;\r\n }\r\n\r\n\r\n .service-content {\r\n left: 20px;\r\n right: 20px;\r\n bottom: 22px;\r\n }\r\n\r\n\r\n .service-item-title {\r\n font-size: 27px;\r\n }\r\n\r\n\r\n .service-item-description {\r\n margin-top: 4px;\r\n\r\n font-size: 13px;\r\n\r\n opacity: 1;\r\n\r\n transform: none;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BAS SECTION\r\n ====================================================== *\/\r\n\r\n .services-footer {\r\n width: 100%;\r\n\r\n align-items: flex-start;\r\n\r\n flex-direction: column;\r\n\r\n gap: 18px;\r\n\r\n margin:\r\n 28px\r\n 0\r\n 0;\r\n\r\n padding:\r\n 22px\r\n 12px\r\n 0;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n }\r\n\r\n\r\n .services-footer-text {\r\n width: 100%;\r\n }\r\n\r\n\r\n .services-button {\r\n width: 100%;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .services-button:link,\r\n .services-button:visited,\r\n .services-button:hover,\r\n .services-button:focus,\r\n .services-button:active {\r\n text-decoration: none !important;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section\r\n class=\"services-section\"\r\n id=\"services\"\r\n>\r\n\r\n <div class=\"services-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"services-top-band\">\r\n\r\n <div class=\"services-top-title\">\r\n Mes services\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <header class=\"services-header\">\r\n\r\n <div class=\"services-header-left\">\r\n\r\n\r\n <h2 class=\"services-title\">\r\n\r\n Une vision.<br>\r\n\r\n <span>\r\n Une expertise.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p class=\"services-description\">\r\n\r\n De la prise de vue \u00e0 la post-production,\r\n je vous accompagne dans la cr\u00e9ation de contenus\r\n visuels professionnels en photographie,\r\n vid\u00e9ographie, montage vid\u00e9o et motion design.\r\n\r\n <\/p>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"services-number\">\r\n\r\n <strong>02<\/strong>\r\n \/ Expertise\r\n\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"services-grid\"\r\n id=\"servicesSlider\"\r\n >\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service photographie\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 01\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Cr\u00e9ation visuelle\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Photographie\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Portraits, \u00e9v\u00e9nements, corporate,\r\n lifestyle et cr\u00e9ations photographiques\r\n con\u00e7ues pour mettre en valeur votre image.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service vid\u00e9ographie\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 02\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Production vid\u00e9o\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Vid\u00e9ographie\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Films promotionnels, \u00e9v\u00e9nements,\r\n interviews et contenus digitaux\r\n r\u00e9alis\u00e9s pour raconter votre histoire.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service montage vid\u00e9o\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 03\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Post-production\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Montage vid\u00e9o\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Storytelling, rythme, transitions,\r\n colorim\u00e9trie et post-production\r\n pour transformer vos images\r\n en contenus impactants.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service motion design\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 04\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Animation graphique\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Motion Design\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Logos anim\u00e9s, typographies,\r\n habillages vid\u00e9o et animations graphiques\r\n pour donner du mouvement\r\n \u00e0 votre identit\u00e9 visuelle.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div class=\"services-footer\">\r\n\r\n\r\n <p class=\"services-footer-text\">\r\n\r\n <strong>\r\n Un accompagnement complet pour vos projets visuels\r\n <\/strong>\r\n\r\n <br>\r\n\r\n De la conception \u00e0 la livraison finale,\r\n chaque r\u00e9alisation est adapt\u00e9e\r\n \u00e0 votre identit\u00e9 et \u00e0 vos objectifs.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"services-button\"\r\n >\r\n\r\n D\u00e9couvrir mes services\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n \"DOMContentLoaded\",\r\n function () {\r\n\r\n const slider =\r\n document.getElementById(\r\n \"servicesSlider\"\r\n );\r\n\r\n\r\n if (!slider) {\r\n return;\r\n }\r\n\r\n\r\n let autoScrollTimer = null;\r\n let restartTimer = null;\r\n\r\n\r\n function getCards() {\r\n\r\n return Array.from(\r\n slider.querySelectorAll(\r\n \".service-item\"\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function goToNextCard() {\r\n\r\n if (\r\n window.innerWidth > 650\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const cards = getCards();\r\n\r\n\r\n if (\r\n cards.length <= 1\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const sliderRect =\r\n slider.getBoundingClientRect();\r\n\r\n\r\n let currentIndex = 0;\r\n let smallestDistance = Infinity;\r\n\r\n\r\n cards.forEach(\r\n function (\r\n card,\r\n index\r\n ) {\r\n\r\n const cardRect =\r\n card.getBoundingClientRect();\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n cardRect.left -\r\n sliderRect.left -\r\n 12\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n smallestDistance\r\n ) {\r\n\r\n smallestDistance =\r\n distance;\r\n\r\n currentIndex =\r\n index;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n let nextIndex =\r\n currentIndex + 1;\r\n\r\n\r\n if (\r\n nextIndex >=\r\n cards.length\r\n ) {\r\n\r\n nextIndex = 0;\r\n\r\n }\r\n\r\n\r\n const nextCard =\r\n cards[nextIndex];\r\n\r\n\r\n slider.scrollTo({\r\n\r\n left:\r\n nextCard.offsetLeft -\r\n 12,\r\n\r\n behavior:\r\n \"smooth\"\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n function startAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n autoScrollTimer =\r\n setInterval(\r\n goToNextCard,\r\n 3200\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function stopAutoScroll() {\r\n\r\n if (\r\n autoScrollTimer\r\n ) {\r\n\r\n clearInterval(\r\n autoScrollTimer\r\n );\r\n\r\n autoScrollTimer =\r\n null;\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function restartAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n restartTimer\r\n ) {\r\n\r\n clearTimeout(\r\n restartTimer\r\n );\r\n\r\n }\r\n\r\n\r\n restartTimer =\r\n setTimeout(\r\n startAutoScroll,\r\n 3500\r\n );\r\n\r\n }\r\n\r\n\r\n slider.addEventListener(\r\n \"touchstart\",\r\n function () {\r\n\r\n stopAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"touchend\",\r\n function () {\r\n\r\n restartAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerdown\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n stopAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerup\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n restartAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n \"resize\",\r\n function () {\r\n\r\n startAutoScroll();\r\n\r\n }\r\n );\r\n\r\n\r\n startAutoScroll();\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-33bcce6 e-con e-atomic-element e-flexbox-base e-7c3a34e \" data-id=\"33bcce6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"33bcce6\">\n \t\t<div class=\"elementor-element elementor-element-baf9a17 elementor-widget elementor-widget-html\" data-id=\"baf9a17\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<title>Portfolio | R\u00e9alistiC<\/title>\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n RESET\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\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nbody {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #151515;\r\n overflow-x: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SECTION PORTFOLIO\r\n========================================================= *\/\r\n\r\n.portfolio-section {\r\n width: 100%;\r\n background: #ffffff;\r\n padding: 95px 24px 105px;\r\n overflow: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CONTENEUR\r\n========================================================= *\/\r\n\r\n.portfolio-container {\r\n width: 100%;\r\n max-width: 1380px;\r\n margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BANDE TITRE PORTFOLIO\r\n========================================================= *\/\r\n\r\n.portfolio-title-band {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n margin-bottom: 18px;\r\n\r\n padding: 18px 25px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n box-shadow:\r\n 0 8px 24px rgba(0,0,0,0.035);\r\n}\r\n\r\n\r\n.portfolio-title-band h2 {\r\n position: relative;\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 14px;\r\n\r\n margin: 0;\r\n\r\n color: #111111;\r\n\r\n font-size: 22px;\r\n line-height: 1;\r\n\r\n font-weight: 900;\r\n\r\n letter-spacing: 2px;\r\n\r\n text-align: center;\r\n text-transform: uppercase;\r\n}\r\n\r\n\r\n.portfolio-title-band h2::before,\r\n.portfolio-title-band h2::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 2px;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 10px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BANDE INTRODUCTION\r\n========================================================= *\/\r\n\r\n.portfolio-header {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n\r\n gap: 50px;\r\n\r\n margin-bottom: 42px;\r\n\r\n padding: 55px 58px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 24px;\r\n\r\n box-shadow:\r\n 0 12px 40px rgba(0, 0, 0, 0.045);\r\n\r\n overflow: hidden;\r\n}\r\n\r\n\r\n.portfolio-header::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 58px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 0 0 4px 4px;\r\n}\r\n\r\n\r\n.portfolio-header-left {\r\n max-width: 820px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TITRE PRINCIPAL\r\n========================================================= *\/\r\n\r\n.portfolio-title {\r\n margin-bottom: 24px;\r\n\r\n font-size: clamp(38px, 5vw, 70px);\r\n\r\n line-height: 0.98;\r\n\r\n letter-spacing: -3px;\r\n\r\n font-weight: 900;\r\n\r\n color: #111111;\r\n}\r\n\r\n\r\n.portfolio-title span {\r\n color: #d50000;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n DESCRIPTION\r\n========================================================= *\/\r\n\r\n.portfolio-description {\r\n max-width: 720px;\r\n\r\n font-size: 17px;\r\n line-height: 1.75;\r\n\r\n color: #676767;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n NUM\u00c9RO\r\n========================================================= *\/\r\n\r\n.portfolio-number {\r\n flex-shrink: 0;\r\n\r\n padding-bottom: 8px;\r\n\r\n font-size: 15px;\r\n font-weight: 700;\r\n\r\n color: #999999;\r\n}\r\n\r\n\r\n.portfolio-number strong {\r\n color: #d50000;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FILTRES\r\n========================================================= *\/\r\n\r\n.portfolio-filters {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n\r\n gap: 10px;\r\n\r\n margin-bottom: 35px;\r\n}\r\n\r\n\r\n.portfolio-filter {\r\n appearance: none;\r\n\r\n border: 1px solid #e1e1e1;\r\n\r\n background: #ffffff;\r\n\r\n color: #555555;\r\n\r\n padding: 12px 21px;\r\n\r\n border-radius: 50px;\r\n\r\n font-size: 13px;\r\n font-weight: 700;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n background 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease,\r\n transform 0.3s ease;\r\n}\r\n\r\n\r\n.portfolio-filter:hover {\r\n color: #111111;\r\n\r\n border-color: #bcbcbc;\r\n\r\n transform: translateY(-2px);\r\n}\r\n\r\n\r\n.portfolio-filter.active {\r\n color: #ffffff;\r\n\r\n border-color: #d50000;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #ee0000,\r\n #a80000\r\n );\r\n\r\n box-shadow:\r\n 0 8px 20px rgba(190, 0, 0, 0.17);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n GRILLE\r\n========================================================= *\/\r\n\r\n.portfolio-grid {\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(12, minmax(0, 1fr));\r\n\r\n gap: 18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-item {\r\n position: relative;\r\n\r\n min-height: 410px;\r\n\r\n overflow: hidden;\r\n\r\n border-radius: 10px;\r\n\r\n background: #eeeeee;\r\n\r\n cursor: pointer;\r\n\r\n isolation: isolate;\r\n\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease;\r\n}\r\n\r\n\r\n.portfolio-item:nth-child(1) {\r\n grid-column: span 7;\r\n}\r\n\r\n.portfolio-item:nth-child(2) {\r\n grid-column: span 5;\r\n}\r\n\r\n.portfolio-item:nth-child(3) {\r\n grid-column: span 4;\r\n}\r\n\r\n.portfolio-item:nth-child(4) {\r\n grid-column: span 8;\r\n}\r\n\r\n.portfolio-item:nth-child(5) {\r\n grid-column: span 7;\r\n}\r\n\r\n.portfolio-item:nth-child(6) {\r\n grid-column: span 5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n LIEN CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-card-link {\r\n position: absolute;\r\n inset: 0;\r\n\r\n z-index: 5;\r\n\r\n display: block;\r\n\r\n text-decoration: none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n IMAGE\r\n========================================================= *\/\r\n\r\n.portfolio-item img {\r\n position: absolute;\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n object-fit: cover;\r\n\r\n transition:\r\n transform 0.8s cubic-bezier(.2,.6,.2,1),\r\n filter 0.5s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n OVERLAY\r\n========================================================= *\/\r\n\r\n.portfolio-item::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n inset: 0;\r\n\r\n z-index: 1;\r\n\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.86) 0%,\r\n rgba(0,0,0,0.32) 43%,\r\n rgba(0,0,0,0.03) 75%\r\n );\r\n\r\n transition:\r\n background 0.4s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n NUM\u00c9RO CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-index {\r\n position: absolute;\r\n\r\n top: 24px;\r\n left: 25px;\r\n\r\n z-index: 4;\r\n\r\n width: 42px;\r\n height: 42px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 50%;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n border:\r\n 1px solid rgba(255,255,255,0.35);\r\n\r\n background:\r\n rgba(0,0,0,0.22);\r\n\r\n backdrop-filter:\r\n blur(8px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FL\u00c8CHE\r\n========================================================= *\/\r\n\r\n.portfolio-arrow {\r\n position: absolute;\r\n\r\n top: 22px;\r\n right: 22px;\r\n\r\n z-index: 4;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n border-radius: 50%;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n color: #111111;\r\n\r\n background: #ffffff;\r\n\r\n transform:\r\n rotate(-45deg);\r\n\r\n transition:\r\n background 0.3s ease,\r\n color 0.3s ease,\r\n transform 0.4s ease;\r\n}\r\n\r\n\r\n.portfolio-arrow svg {\r\n width: 19px;\r\n height: 19px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CONTENU CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-content {\r\n position: absolute;\r\n\r\n left: 27px;\r\n right: 27px;\r\n bottom: 27px;\r\n\r\n z-index: 4;\r\n}\r\n\r\n\r\n.portfolio-category {\r\n display: flex;\r\n align-items: center;\r\n\r\n gap: 8px;\r\n\r\n margin-bottom: 10px;\r\n\r\n color:\r\n rgba(255,255,255,0.76);\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n letter-spacing: 1.8px;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n\r\n.portfolio-category::before {\r\n content: \"\";\r\n\r\n width: 17px;\r\n height: 2px;\r\n\r\n background: #e00000;\r\n}\r\n\r\n\r\n.portfolio-item-title {\r\n max-width: 650px;\r\n\r\n margin-bottom: 8px;\r\n\r\n font-size:\r\n clamp(24px, 3vw, 38px);\r\n\r\n line-height: 1.05;\r\n\r\n font-weight: 800;\r\n\r\n color: #ffffff;\r\n\r\n letter-spacing: -1px;\r\n}\r\n\r\n\r\n.portfolio-item-description {\r\n max-width: 620px;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.55;\r\n\r\n color:\r\n rgba(255,255,255,0.74);\r\n\r\n transform:\r\n translateY(8px);\r\n\r\n opacity: 0;\r\n\r\n transition:\r\n transform 0.4s ease,\r\n opacity 0.4s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SURVOL\r\n========================================================= *\/\r\n\r\n.portfolio-item:hover img {\r\n transform:\r\n scale(1.065);\r\n}\r\n\r\n\r\n.portfolio-item:hover::after {\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.92) 0%,\r\n rgba(0,0,0,0.39) 52%,\r\n rgba(0,0,0,0.08) 100%\r\n );\r\n}\r\n\r\n\r\n.portfolio-item:hover\r\n.portfolio-arrow {\r\n color: #ffffff;\r\n\r\n background: #d50000;\r\n\r\n transform:\r\n rotate(0deg);\r\n}\r\n\r\n\r\n.portfolio-item:hover\r\n.portfolio-item-description {\r\n transform:\r\n translateY(0);\r\n\r\n opacity: 1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FILTRE\r\n========================================================= *\/\r\n\r\n.portfolio-item.hide {\r\n display: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BAS DE SECTION\r\n========================================================= *\/\r\n\r\n.portfolio-footer {\r\n display: flex;\r\n\r\n justify-content:\r\n space-between;\r\n\r\n align-items: center;\r\n\r\n gap: 25px;\r\n\r\n margin-top: 38px;\r\n\r\n padding-top: 28px;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n}\r\n\r\n\r\n.portfolio-footer-text {\r\n color: #707070;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.6;\r\n}\r\n\r\n\r\n.portfolio-footer-text strong {\r\n color: #111111;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BOUTON\r\n========================================================= *\/\r\n\r\n.portfolio-button {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n min-height: 50px;\r\n\r\n padding:\r\n 0 25px;\r\n\r\n border-radius: 6px;\r\n\r\n background: #111111;\r\n\r\n color: #ffffff !important;\r\n\r\n font-size: 13px;\r\n\r\n font-weight: 800;\r\n\r\n text-decoration: none !important;\r\n\r\n white-space: nowrap;\r\n\r\n transition:\r\n background 0.3s ease,\r\n transform 0.3s ease;\r\n}\r\n\r\n\r\n.portfolio-button:link,\r\n.portfolio-button:visited,\r\n.portfolio-button:hover,\r\n.portfolio-button:focus,\r\n.portfolio-button:active {\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n}\r\n\r\n\r\n.portfolio-button:hover,\r\n.portfolio-button:focus {\r\n background: #d50000;\r\n\r\n transform:\r\n translateY(-2px);\r\n}\r\n\r\n\r\n.portfolio-button svg {\r\n width: 17px;\r\n height: 17px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TABLETTE\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n .portfolio-section {\r\n padding:\r\n 75px 22px 85px;\r\n }\r\n\r\n\r\n .portfolio-title-band {\r\n padding:\r\n 17px 22px;\r\n\r\n margin-bottom: 16px;\r\n }\r\n\r\n\r\n .portfolio-title-band h2 {\r\n font-size: 20px;\r\n }\r\n\r\n\r\n .portfolio-header {\r\n align-items:\r\n flex-start;\r\n\r\n flex-direction:\r\n column;\r\n\r\n gap: 15px;\r\n\r\n padding:\r\n 45px 42px;\r\n }\r\n\r\n\r\n .portfolio-header::after {\r\n left: 42px;\r\n }\r\n\r\n\r\n .portfolio-number {\r\n display: none;\r\n }\r\n\r\n\r\n .portfolio-grid {\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0,1fr)\r\n );\r\n }\r\n\r\n\r\n .portfolio-item,\r\n .portfolio-item:nth-child(1),\r\n .portfolio-item:nth-child(2),\r\n .portfolio-item:nth-child(3),\r\n .portfolio-item:nth-child(4),\r\n .portfolio-item:nth-child(5),\r\n .portfolio-item:nth-child(6) {\r\n\r\n grid-column: auto;\r\n\r\n min-height: 410px;\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 650px) {\r\n\r\n .portfolio-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 52px 0 60px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .portfolio-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE TITRE PORTFOLIO\r\n ====================================================== *\/\r\n\r\n .portfolio-title-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0 auto 14px;\r\n\r\n padding:\r\n 16px 12px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 7px 20px\r\n rgba(0,0,0,0.035);\r\n }\r\n\r\n\r\n .portfolio-title-band h2 {\r\n gap: 10px;\r\n\r\n font-size: 17px;\r\n\r\n letter-spacing: 1.8px;\r\n }\r\n\r\n\r\n .portfolio-title-band h2::before,\r\n .portfolio-title-band h2::after {\r\n width: 25px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE INTRODUCTION\r\n ====================================================== *\/\r\n\r\n .portfolio-header {\r\n width: 94%;\r\n\r\n margin:\r\n 0 auto 30px;\r\n\r\n padding:\r\n 32px 16px 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(0,0,0,0.05);\r\n }\r\n\r\n\r\n .portfolio-header::after {\r\n left: 16px;\r\n\r\n width: 52px;\r\n }\r\n\r\n\r\n .portfolio-header-left {\r\n width: 100%;\r\n\r\n max-width: none;\r\n }\r\n\r\n\r\n .portfolio-title {\r\n margin-bottom: 18px;\r\n\r\n font-size: 39px;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n\r\n .portfolio-description {\r\n width: 100%;\r\n\r\n max-width: none;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.65;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n FILTRES\r\n ====================================================== *\/\r\n\r\n .portfolio-filters {\r\n display: flex;\r\n\r\n flex-wrap: nowrap;\r\n\r\n width: 100%;\r\n\r\n max-width: none;\r\n\r\n overflow-x: auto;\r\n\r\n padding:\r\n 0 12px 6px;\r\n\r\n margin:\r\n 0 0 23px;\r\n\r\n scrollbar-width: none;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n }\r\n\r\n\r\n .portfolio-filters::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n .portfolio-filter {\r\n flex:\r\n 0 0 auto;\r\n\r\n padding:\r\n 11px 18px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARROUSEL\r\n ====================================================== *\/\r\n\r\n .portfolio-grid {\r\n display: flex;\r\n\r\n grid-template-columns:\r\n none;\r\n\r\n gap: 14px;\r\n\r\n width: 100%;\r\n\r\n max-width: none;\r\n\r\n overflow-x: auto;\r\n\r\n overflow-y: hidden;\r\n\r\n padding:\r\n 0 12px 8px;\r\n\r\n margin: 0;\r\n\r\n scroll-snap-type:\r\n x mandatory;\r\n\r\n scroll-behavior:\r\n smooth;\r\n\r\n scrollbar-width:\r\n none;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n }\r\n\r\n\r\n .portfolio-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n .portfolio-item,\r\n .portfolio-item:nth-child(1),\r\n .portfolio-item:nth-child(2),\r\n .portfolio-item:nth-child(3),\r\n .portfolio-item:nth-child(4),\r\n .portfolio-item:nth-child(5),\r\n .portfolio-item:nth-child(6) {\r\n\r\n flex:\r\n 0 0 calc(90vw - 24px);\r\n\r\n width:\r\n calc(90vw - 24px);\r\n\r\n min-width:\r\n calc(90vw - 24px);\r\n\r\n max-width:\r\n calc(90vw - 24px);\r\n\r\n height: 430px;\r\n\r\n min-height: 430px;\r\n\r\n grid-column: auto;\r\n\r\n scroll-snap-align:\r\n center;\r\n\r\n scroll-snap-stop:\r\n always;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTE MOBILE\r\n ====================================================== *\/\r\n\r\n .portfolio-index {\r\n top: 17px;\r\n\r\n left: 17px;\r\n\r\n width: 37px;\r\n\r\n height: 37px;\r\n }\r\n\r\n\r\n .portfolio-arrow {\r\n top: 17px;\r\n\r\n right: 17px;\r\n\r\n width: 43px;\r\n\r\n height: 43px;\r\n }\r\n\r\n\r\n .portfolio-content {\r\n left: 20px;\r\n\r\n right: 20px;\r\n\r\n bottom: 22px;\r\n }\r\n\r\n\r\n .portfolio-item-title {\r\n font-size: 27px;\r\n }\r\n\r\n\r\n .portfolio-item-description {\r\n margin-top: 4px;\r\n\r\n font-size: 13px;\r\n\r\n opacity: 1;\r\n\r\n transform: none;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BAS PORTFOLIO\r\n ====================================================== *\/\r\n\r\n .portfolio-footer {\r\n width: 100%;\r\n\r\n align-items:\r\n flex-start;\r\n\r\n flex-direction:\r\n column;\r\n\r\n gap: 18px;\r\n\r\n margin:\r\n 28px 0 0;\r\n\r\n padding:\r\n 22px 12px 0;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n }\r\n\r\n\r\n .portfolio-footer-text {\r\n width: 100%;\r\n }\r\n\r\n\r\n .portfolio-button {\r\n width: 100%;\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section\r\n class=\"portfolio-section\"\r\n id=\"portfolio\"\r\n>\r\n\r\n<div class=\"portfolio-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"portfolio-title-band\">\r\n\r\n <h2>\r\n Portfolio\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <header class=\"portfolio-header\">\r\n\r\n <div class=\"portfolio-header-left\">\r\n\r\n <h2 class=\"portfolio-title\">\r\n\r\n Des images qui<br>\r\n\r\n <span>\r\n racontent.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p class=\"portfolio-description\">\r\n\r\n D\u00e9couvrez une s\u00e9lection de projets en photographie,\r\n vid\u00e9ographie, montage vid\u00e9o et motion design.\r\n Chaque r\u00e9alisation est pens\u00e9e pour cr\u00e9er une identit\u00e9\r\n visuelle forte et donner vie \u00e0 votre histoire.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-number\">\r\n\r\n <strong>\r\n 01\r\n <\/strong>\r\n\r\n \/ R\u00e9alisations\r\n\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n\r\n \r\n\r\n <div class=\"portfolio-filters\">\r\n\r\n\r\n <button\r\n class=\"portfolio-filter active\"\r\n data-filter=\"all\"\r\n type=\"button\"\r\n >\r\n Tous les projets\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"photo\"\r\n type=\"button\"\r\n >\r\n Photographie\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"video\"\r\n type=\"button\"\r\n >\r\n Vid\u00e9ographie\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"montage\"\r\n type=\"button\"\r\n >\r\n Montage vid\u00e9o\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"motion\"\r\n type=\"button\"\r\n >\r\n Motion Design\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"portfolio-grid\"\r\n id=\"portfolioSlider\"\r\n >\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"photo\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Portrait et Lifestyle\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Projet de photographie portrait\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 01\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Photographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Portrait & Lifestyle\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Direction artistique et photographie pour\r\n une s\u00e9rie de portraits \u00e0 l'identit\u00e9 moderne\r\n et authentique.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"video\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Production cin\u00e9matographique\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1400&q=85\"\r\n alt=\"Production vid\u00e9o cin\u00e9matographique\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 02\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Vid\u00e9ographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Production cin\u00e9matographique\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Cr\u00e9ation d'un univers visuel immersif\r\n pour une production vid\u00e9o \u00e0 destination\r\n du digital.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"photo\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Image Corporate\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=1200&q=85\"\r\n alt=\"Photographie corporate\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 03\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Photographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Image Corporate\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Des portraits professionnels con\u00e7us pour\r\n renforcer l'image et la personnalit\u00e9\r\n d'une marque.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"montage\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Storytelling et Editing\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Projet de montage vid\u00e9o\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 04\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Montage vid\u00e9o\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Storytelling & Editing\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Montage dynamique, rythme, colorim\u00e9trie\r\n et narration pour transformer des images\r\n en une v\u00e9ritable histoire.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"motion\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Identit\u00e9 en mouvement\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Cr\u00e9ation Motion Design\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 05\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Motion Design\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Identit\u00e9 en mouvement\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Animation graphique et cr\u00e9ation visuelle\r\n pour donner du mouvement et du caract\u00e8re\r\n aux identit\u00e9s de marque.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"video\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Film \u00e9v\u00e9nementiel\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1524250502761-1ac6f2e30d43?auto=format&fit=crop&w=1400&q=85\"\r\n alt=\"Film \u00e9v\u00e9nementiel\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 06\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Vid\u00e9ographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Film \u00e9v\u00e9nementiel\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Captation et r\u00e9alisation vid\u00e9o pour\r\n conserver l'intensit\u00e9 et l'\u00e9motion\r\n d'un \u00e9v\u00e9nement unique.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"portfolio-footer\">\r\n\r\n\r\n <p class=\"portfolio-footer-text\">\r\n\r\n <strong>\r\n D\u00e9couvrez l\u2019ensemble de mes r\u00e9alisations\r\n <\/strong>\r\n\r\n <br>\r\n\r\n Explorez davantage de projets en photographie,\r\n vid\u00e9o, montage et motion design.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-button\"\r\n >\r\n\r\n Voir tout le portfolio\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n \"DOMContentLoaded\",\r\n function () {\r\n\r\n const filters =\r\n document.querySelectorAll(\r\n \".portfolio-filter\"\r\n );\r\n\r\n const items =\r\n document.querySelectorAll(\r\n \".portfolio-item\"\r\n );\r\n\r\n const slider =\r\n document.getElementById(\r\n \"portfolioSlider\"\r\n );\r\n\r\n\r\n \/* =========================================================\r\n FILTRES\r\n ========================================================= *\/\r\n\r\n filters.forEach(\r\n function (button) {\r\n\r\n button.addEventListener(\r\n \"click\",\r\n function () {\r\n\r\n const category =\r\n this.getAttribute(\r\n \"data-filter\"\r\n );\r\n\r\n\r\n filters.forEach(\r\n function (filter) {\r\n\r\n filter.classList.remove(\r\n \"active\"\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n this.classList.add(\r\n \"active\"\r\n );\r\n\r\n\r\n items.forEach(\r\n function (item) {\r\n\r\n const itemCategory =\r\n item.getAttribute(\r\n \"data-category\"\r\n );\r\n\r\n\r\n if (\r\n category === \"all\" ||\r\n category === itemCategory\r\n ) {\r\n\r\n item.classList.remove(\r\n \"hide\"\r\n );\r\n\r\n } else {\r\n\r\n item.classList.add(\r\n \"hide\"\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n slider.scrollTo({\r\n left: 0,\r\n behavior: \"smooth\"\r\n });\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =========================================================\r\n D\u00c9FILEMENT AUTOMATIQUE MOBILE\r\n ========================================================= *\/\r\n\r\n let autoScrollTimer = null;\r\n\r\n let restartTimer = null;\r\n\r\n\r\n function getVisibleCards() {\r\n\r\n return Array.from(\r\n slider.querySelectorAll(\r\n \".portfolio-item:not(.hide)\"\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function goToNextCard() {\r\n\r\n if (\r\n window.innerWidth > 650\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const cards =\r\n getVisibleCards();\r\n\r\n\r\n if (\r\n cards.length <= 1\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const sliderRect =\r\n slider.getBoundingClientRect();\r\n\r\n\r\n let currentIndex = 0;\r\n\r\n let smallestDistance =\r\n Infinity;\r\n\r\n\r\n cards.forEach(\r\n function (card, index) {\r\n\r\n const cardRect =\r\n card.getBoundingClientRect();\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n cardRect.left -\r\n sliderRect.left -\r\n 12\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n smallestDistance\r\n ) {\r\n\r\n smallestDistance =\r\n distance;\r\n\r\n currentIndex =\r\n index;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n let nextIndex =\r\n currentIndex + 1;\r\n\r\n\r\n if (\r\n nextIndex >=\r\n cards.length\r\n ) {\r\n\r\n nextIndex = 0;\r\n\r\n }\r\n\r\n\r\n const nextCard =\r\n cards[nextIndex];\r\n\r\n\r\n slider.scrollTo({\r\n\r\n left:\r\n nextCard.offsetLeft - 12,\r\n\r\n behavior:\r\n \"smooth\"\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n function startAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n autoScrollTimer =\r\n setInterval(\r\n goToNextCard,\r\n 3200\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function stopAutoScroll() {\r\n\r\n if (\r\n autoScrollTimer\r\n ) {\r\n\r\n clearInterval(\r\n autoScrollTimer\r\n );\r\n\r\n autoScrollTimer =\r\n null;\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function restartAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n restartTimer\r\n ) {\r\n\r\n clearTimeout(\r\n restartTimer\r\n );\r\n\r\n }\r\n\r\n\r\n restartTimer =\r\n setTimeout(\r\n startAutoScroll,\r\n 3500\r\n );\r\n\r\n }\r\n\r\n\r\n slider.addEventListener(\r\n \"touchstart\",\r\n function () {\r\n\r\n stopAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"touchend\",\r\n function () {\r\n\r\n restartAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerdown\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n stopAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerup\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n restartAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n \"resize\",\r\n function () {\r\n\r\n startAutoScroll();\r\n\r\n }\r\n );\r\n\r\n\r\n startAutoScroll();\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cc29375 e-con e-atomic-element e-flexbox-base e-036fdd2 \" data-id=\"cc29375\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cc29375\">\n \t\t<div class=\"elementor-element elementor-element-cecfc75 elementor-widget elementor-widget-html\" data-id=\"cecfc75\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n <title>Pourquoi travailler avec moi ?<\/title>\r\n\r\n <style>\r\n\r\n \/* =====================================================\r\n RESET\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 width: 100%;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n width: 100%;\r\n min-width: 100%;\r\n\r\n font-family: Arial, Helvetica, sans-serif;\r\n\r\n background: #ffffff;\r\n color: #111111;\r\n\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n SECTION PLEINE LARGEUR\r\n ===================================================== *\/\r\n\r\n .why-section {\r\n position: relative;\r\n\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding:\r\n 56px\r\n 22px\r\n 58px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CONTENEUR GLOBAL\r\n ===================================================== *\/\r\n\r\n .why-wrapper {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE DU TITRE EN HAUT\r\n ===================================================== *\/\r\n\r\n .why-title-band {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n margin-bottom: 18px;\r\n\r\n padding:\r\n 18px\r\n 25px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n box-shadow:\r\n 0 8px 24px\r\n rgba(0, 0, 0, 0.035);\r\n }\r\n\r\n\r\n .why-title-band h2 {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 14px;\r\n\r\n margin: 0;\r\n\r\n color: #111111;\r\n\r\n font-size: 22px;\r\n\r\n line-height: 1.2;\r\n\r\n font-weight: 900;\r\n\r\n letter-spacing: 2px;\r\n\r\n text-align: center;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n \/* TRAIT ROUGE GAUCHE *\/\r\n\r\n .why-title-band h2::before {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 2px;\r\n\r\n flex-shrink: 0;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n \/* TRAIT ROUGE DROITE *\/\r\n\r\n .why-title-band h2::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 2px;\r\n\r\n flex-shrink: 0;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CONTENU SOUS LE TITRE\r\n ===================================================== *\/\r\n\r\n .why-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(0, 38%)\r\n minmax(0, 62%);\r\n\r\n gap: 32px;\r\n\r\n align-items: stretch;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE TEXTE GAUCHE\r\n ===================================================== *\/\r\n\r\n .why-content {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n padding:\r\n 48px\r\n 42px\r\n 45px;\r\n\r\n display: flex;\r\n\r\n flex-direction: column;\r\n\r\n justify-content: center;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 20px;\r\n\r\n box-shadow:\r\n 0 12px 35px\r\n rgba(0, 0, 0, 0.045);\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* PETIT ACCENT ROUGE *\/\r\n\r\n .why-content::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 42px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius:\r\n 0 0 4px 4px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n GRAND TITRE\r\n ===================================================== *\/\r\n\r\n .why-main-title {\r\n width: 100%;\r\n max-width: 620px;\r\n\r\n margin-bottom: 35px;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(\r\n 52px,\r\n 4.5vw,\r\n 78px\r\n );\r\n\r\n font-weight: 400;\r\n\r\n line-height: 1.01;\r\n\r\n letter-spacing: -2px;\r\n\r\n color: #111111;\r\n }\r\n\r\n\r\n .why-main-title .red {\r\n display: inline;\r\n\r\n color: #d50000;\r\n\r\n font-style: italic;\r\n\r\n font-weight: 400;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n DESCRIPTION\r\n ===================================================== *\/\r\n\r\n .why-description {\r\n width: 100%;\r\n\r\n max-width: 650px;\r\n\r\n font-size: 20px;\r\n\r\n line-height: 1.7;\r\n\r\n color: #555555;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTES\r\n ===================================================== *\/\r\n\r\n .why-cards {\r\n width: 100%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0, 1fr)\r\n );\r\n\r\n gap: 20px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTE\r\n ===================================================== *\/\r\n\r\n .why-card {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n min-width: 0;\r\n\r\n min-height: 285px;\r\n\r\n padding:\r\n 60px\r\n 42px\r\n 42px;\r\n\r\n border:\r\n 1px solid #dedede;\r\n\r\n border-radius: 20px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #ffffff 0%,\r\n #fafafa 55%,\r\n #f6f6f6 100%\r\n );\r\n\r\n box-shadow:\r\n 0 16px 38px\r\n rgba(0, 0, 0, 0.07);\r\n\r\n overflow: hidden;\r\n\r\n transition:\r\n transform 0.25s ease,\r\n border-color 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n\r\n \/* ACCENT ROUGE CARTE *\/\r\n\r\n .why-card::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n right: 0;\r\n\r\n width: 90px;\r\n height: 4px;\r\n\r\n background: #ed2134;\r\n }\r\n\r\n\r\n .why-card:hover {\r\n transform:\r\n translateY(-4px);\r\n\r\n border-color:\r\n rgba(230, 31, 49, 0.45);\r\n\r\n box-shadow:\r\n 0 22px 45px\r\n rgba(0, 0, 0, 0.11);\r\n }\r\n\r\n\r\n \/* =====================================================\r\n IC\u00d4NES\r\n ===================================================== *\/\r\n\r\n .why-icon {\r\n width: 38px;\r\n height: 38px;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: flex-start;\r\n\r\n margin-bottom: 37px;\r\n\r\n color: #e82031;\r\n }\r\n\r\n\r\n .why-icon svg {\r\n width: 35px;\r\n height: 35px;\r\n\r\n stroke: currentColor;\r\n\r\n fill: none;\r\n\r\n stroke-width: 2;\r\n\r\n stroke-linecap: round;\r\n\r\n stroke-linejoin: round;\r\n }\r\n\r\n\r\n .why-icon.star svg {\r\n fill: #e82031;\r\n\r\n stroke: #e82031;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TEXTE CARTES\r\n ===================================================== *\/\r\n\r\n .why-card-title {\r\n margin-bottom: 15px;\r\n\r\n font-size: 36px;\r\n\r\n line-height: 1.15;\r\n\r\n font-weight: 700;\r\n\r\n color: #111111;\r\n }\r\n\r\n\r\n .why-card-text {\r\n max-width: 510px;\r\n\r\n font-size: 20px;\r\n\r\n line-height: 1.55;\r\n\r\n color: #555555;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TABLETTE\r\n ===================================================== *\/\r\n\r\n @media (max-width: 1200px) {\r\n\r\n .why-section {\r\n padding:\r\n 55px\r\n 30px;\r\n }\r\n\r\n\r\n .why-container {\r\n grid-template-columns: 1fr;\r\n\r\n gap: 30px;\r\n }\r\n\r\n\r\n .why-content {\r\n padding:\r\n 45px\r\n 40px;\r\n }\r\n\r\n\r\n .why-content::after {\r\n left: 40px;\r\n }\r\n\r\n\r\n .why-main-title {\r\n max-width: 760px;\r\n }\r\n\r\n\r\n .why-description {\r\n max-width: 800px;\r\n }\r\n\r\n\r\n .why-card {\r\n min-height: 270px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =====================================================\r\n MOBILE\r\n ===================================================== *\/\r\n\r\n @media (max-width: 767px) {\r\n\r\n\r\n \/* ===================================================\r\n SECTION PLEINE LARGEUR\r\n =================================================== *\/\r\n\r\n .why-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 45px\r\n 0\r\n 50px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .why-wrapper {\r\n width: 100%;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n BANDE TITRE MOBILE\r\n =================================================== *\/\r\n\r\n .why-title-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0 auto 14px;\r\n\r\n padding:\r\n 16px\r\n 10px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 7px 20px\r\n rgba(0, 0, 0, 0.035);\r\n }\r\n\r\n\r\n .why-title-band h2 {\r\n gap: 9px;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.3;\r\n\r\n letter-spacing: 1.3px;\r\n }\r\n\r\n\r\n .why-title-band h2::before,\r\n .why-title-band h2::after {\r\n width: 22px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n CONTENU\r\n =================================================== *\/\r\n\r\n .why-container {\r\n width: 100%;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 30px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n BANDE TEXTE MOBILE\r\n =================================================== *\/\r\n\r\n .why-content {\r\n width: 94%;\r\n\r\n margin: 0 auto;\r\n\r\n padding:\r\n 32px\r\n 16px\r\n 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n\r\n .why-content::after {\r\n left: 16px;\r\n\r\n width: 52px;\r\n\r\n height: 3px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n TITRE PRINCIPAL MOBILE\r\n =================================================== *\/\r\n\r\n .why-main-title {\r\n width: 100%;\r\n\r\n max-width: 100%;\r\n\r\n margin-bottom: 25px;\r\n\r\n font-size:\r\n clamp(\r\n 42px,\r\n 13vw,\r\n 57px\r\n );\r\n\r\n line-height: 0.99;\r\n\r\n letter-spacing: -1.6px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n DESCRIPTION MOBILE\r\n =================================================== *\/\r\n\r\n .why-description {\r\n width: 100%;\r\n\r\n max-width: 100%;\r\n\r\n font-size: 16px;\r\n\r\n line-height: 1.65;\r\n\r\n color: #555555;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n CARTES MOBILE\r\n =================================================== *\/\r\n\r\n .why-cards {\r\n width: 100%;\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 14px;\r\n\r\n padding:\r\n 0\r\n 12px;\r\n }\r\n\r\n\r\n .why-card {\r\n width: 100%;\r\n\r\n min-height: 220px;\r\n\r\n padding:\r\n 35px\r\n 25px\r\n 30px;\r\n\r\n border-radius: 16px;\r\n }\r\n\r\n\r\n .why-card::before {\r\n width: 70px;\r\n\r\n height: 3px;\r\n }\r\n\r\n\r\n .why-icon {\r\n margin-bottom: 26px;\r\n }\r\n\r\n\r\n .why-icon svg {\r\n width: 30px;\r\n\r\n height: 30px;\r\n }\r\n\r\n\r\n .why-card-title {\r\n margin-bottom: 12px;\r\n\r\n font-size: 27px;\r\n }\r\n\r\n\r\n .why-card-text {\r\n max-width: 100%;\r\n\r\n font-size: 16px;\r\n\r\n line-height: 1.5;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TR\u00c8S PETITS MOBILES\r\n ===================================================== *\/\r\n\r\n @media (max-width: 380px) {\r\n\r\n .why-title-band {\r\n width: 94%;\r\n\r\n padding:\r\n 15px\r\n 8px;\r\n }\r\n\r\n\r\n .why-title-band h2 {\r\n gap: 7px;\r\n\r\n font-size: 13px;\r\n\r\n letter-spacing: 1px;\r\n }\r\n\r\n\r\n .why-title-band h2::before,\r\n .why-title-band h2::after {\r\n width: 17px;\r\n }\r\n\r\n\r\n .why-content {\r\n width: 94%;\r\n\r\n padding:\r\n 29px\r\n 14px\r\n 27px;\r\n }\r\n\r\n\r\n .why-content::after {\r\n left: 14px;\r\n }\r\n\r\n\r\n .why-main-title {\r\n font-size: 39px;\r\n }\r\n\r\n\r\n .why-card {\r\n padding-left: 21px;\r\n\r\n padding-right: 21px;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section\r\n class=\"why-section\"\r\n id=\"pourquoi-moi\"\r\n>\r\n\r\n\r\n <div class=\"why-wrapper\">\r\n\r\n\r\n \r\n\r\n <div class=\"why-title-band\">\r\n\r\n <h2>\r\n Pourquoi travailler avec moi ?\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"why-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"why-content\">\r\n\r\n\r\n <h2 class=\"why-main-title\">\r\n\r\n Plus qu\u2019un<br>\r\n\r\n prestataire,\r\n\r\n <span class=\"red\">\r\n\r\n un<br>\r\n\r\n partenaire<br>\r\n\r\n cr\u00e9atif.\r\n\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p class=\"why-description\">\r\n\r\n Je vous accompagne de la conception jusqu\u2019\u00e0 la livraison\r\n pour cr\u00e9er des contenus qui marquent les esprits.\r\n\r\n <\/p>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"why-cards\">\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon star\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <path\r\n d=\"M12 2\r\n C12.7 7.1 16.9 11.3 22 12\r\n C16.9 12.7 12.7 16.9 12 22\r\n C11.3 16.9 7.1 12.7 2 12\r\n C7.1 11.3 11.3 7.1 12 2Z\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n Cr\u00e9ativit\u00e9\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Des concepts originaux adapt\u00e9s \u00e0 votre identit\u00e9.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <path\r\n d=\"M12 3L21 12L12 21L3 12Z\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n Qualit\u00e9 premium\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Du mat\u00e9riel professionnel et une finition soign\u00e9e.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n \/>\r\n\r\n\r\n <path\r\n d=\"M12 3V12H20\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n R\u00e9activit\u00e9\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Une communication fluide et des d\u00e9lais respect\u00e9s.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <path\r\n d=\"M20.8 4.6\r\n C18.7 2.5 15.3 2.5 13.2 4.6\r\n L12 5.8\r\n L10.8 4.6\r\n C8.7 2.5 5.3 2.5 3.2 4.6\r\n C1.1 6.7 1.1 10.1 3.2 12.2\r\n L12 21\r\n L20.8 12.2\r\n C22.9 10.1 22.9 6.7 20.8 4.6Z\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n Passion\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Chaque projet devient une histoire unique \u00e0 raconter.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cac8ae5 e-con e-atomic-element e-flexbox-base e-090de2c \" data-id=\"cac8ae5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cac8ae5\">\n \t\t<div class=\"elementor-element elementor-element-77c301c elementor-widget elementor-widget-html\" data-id=\"77c301c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n\r\n <meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1.0\"\r\n >\r\n\r\n <title>Avis clients<\/title>\r\n\r\n <style>\r\n\r\n \/* =========================================================\r\n RESET LOCAL\r\n ========================================================= *\/\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n html,\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #111111;\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SECTION AVIS \u2014 PLEINE LARGEUR\r\n ========================================================= *\/\r\n\r\n .avis-section {\r\n position: relative;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n\r\n padding:\r\n 30px\r\n 0\r\n 75px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENEUR\r\n ========================================================= *\/\r\n\r\n .avis-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE 1 : AVIS CLIENTS\r\n LARGEUR R\u00c9DUITE\r\n ========================================================= *\/\r\n\r\n .avis-top-band {\r\n width: 92%;\r\n max-width: 1500px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n margin:\r\n 0\r\n auto\r\n 18px;\r\n\r\n padding:\r\n 16px\r\n 30px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #ffffff 0%,\r\n #fafafa 50%,\r\n #f4f4f4 100%\r\n );\r\n\r\n border-left: 2px solid #e51d2a;\r\n border-right: 2px solid #e51d2a;\r\n\r\n border-top: 1px solid #ededed;\r\n border-bottom: 1px solid #ededed;\r\n\r\n border-radius: 10px;\r\n\r\n box-shadow:\r\n 0 6px 20px\r\n rgba(0, 0, 0, 0.03);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE AVIS CLIENTS\r\n ========================================================= *\/\r\n\r\n .avis-label {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 13px;\r\n\r\n color: #111111;\r\n\r\n font-size: 14px;\r\n font-weight: 800;\r\n\r\n letter-spacing: 5px;\r\n\r\n text-transform: uppercase;\r\n\r\n text-align: center;\r\n }\r\n\r\n\r\n \/* Traits rouges *\/\r\n\r\n .avis-label::before,\r\n .avis-label::after {\r\n content: \"\";\r\n\r\n width: 40px;\r\n height: 3px;\r\n\r\n flex-shrink: 0;\r\n\r\n background: #e51d2a;\r\n\r\n border-radius: 20px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE 2 : ILS PARLENT DE MON TRAVAIL\r\n LARGEUR R\u00c9DUITE\r\n ========================================================= *\/\r\n\r\n .avis-heading-band {\r\n width: 92%;\r\n max-width: 1500px;\r\n\r\n margin:\r\n 0\r\n auto\r\n 45px;\r\n\r\n padding:\r\n 27px\r\n 34px\r\n 32px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #ffffff 0%,\r\n #fafafa 48%,\r\n #f5f5f5 100%\r\n );\r\n\r\n border-left: 2px solid #e51d2a;\r\n border-right: 2px solid #e51d2a;\r\n\r\n border-top: 1px solid #eeeeee;\r\n border-bottom: 1px solid #eeeeee;\r\n\r\n border-radius: 12px;\r\n\r\n box-shadow:\r\n 0 10px 30px\r\n rgba(0, 0, 0, 0.035);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRAND TITRE\r\n ========================================================= *\/\r\n\r\n .avis-title {\r\n margin: 0;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(\r\n 46px,\r\n 5vw,\r\n 80px\r\n );\r\n\r\n font-weight: 700;\r\n\r\n line-height: 1.04;\r\n\r\n color: #111111;\r\n }\r\n\r\n .avis-title span {\r\n color: #e51d2a;\r\n\r\n font-style: italic;\r\n\r\n font-weight: 500;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n ZONE DES AVIS\r\n ========================================================= *\/\r\n\r\n .avis-grid-wrapper {\r\n width: 100%;\r\n\r\n padding:\r\n 0\r\n 5%;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRILLE DES AVIS\r\n ========================================================= *\/\r\n\r\n .avis-grid {\r\n width: 100%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(\r\n 3,\r\n minmax(0, 1fr)\r\n );\r\n\r\n gap: 20px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CARTE AVIS\r\n ========================================================= *\/\r\n\r\n .avis-card {\r\n position: relative;\r\n\r\n min-width: 0;\r\n min-height: 380px;\r\n\r\n padding:\r\n 38px\r\n 35px\r\n 34px;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n\r\n color: #ffffff;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 15% 10%,\r\n rgba(255, 255, 255, 0.055),\r\n transparent 42%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #1b1b1b 0%,\r\n #111111 52%,\r\n #080808 100%\r\n );\r\n\r\n border:\r\n 1px\r\n solid\r\n #303030;\r\n\r\n border-radius: 20px;\r\n\r\n overflow: hidden;\r\n\r\n box-shadow:\r\n 0 20px 45px\r\n rgba(0, 0, 0, 0.10);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TRAIT ROUGE EN HAUT\r\n ========================================================= *\/\r\n\r\n .avis-card::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 5px;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n #ed1c2b 0%,\r\n #d61525 32%,\r\n #70131b 70%,\r\n transparent 100%\r\n );\r\n }\r\n\r\n\r\n \/* =========================================================\r\n \u00c9TOILES\r\n ========================================================= *\/\r\n\r\n .avis-stars {\r\n margin-bottom: 25px;\r\n\r\n color: #ed1c2b;\r\n\r\n font-size: 20px;\r\n\r\n letter-spacing: 2px;\r\n\r\n line-height: 1;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE DU TEXTE AVIS\r\n ========================================================= *\/\r\n\r\n .avis-text-band {\r\n width: 100%;\r\n\r\n padding:\r\n 23px\r\n 23px\r\n 24px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(255, 255, 255, 0.075) 0%,\r\n rgba(255, 255, 255, 0.035) 50%,\r\n rgba(255, 255, 255, 0.018) 100%\r\n );\r\n\r\n border-left: 1px solid #ed1c2b;\r\n border-right: 1px solid #ed1c2b;\r\n\r\n border-top:\r\n 1px solid\r\n rgba(255, 255, 255, 0.10);\r\n\r\n border-bottom:\r\n 1px solid\r\n rgba(255, 255, 255, 0.10);\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TEXTE AVIS\r\n ========================================================= *\/\r\n\r\n .avis-text {\r\n width: 100%;\r\n\r\n margin: 0;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size: 21px;\r\n\r\n font-style: italic;\r\n\r\n line-height: 1.65;\r\n\r\n color: #ffffff;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CLIENT\r\n ========================================================= *\/\r\n\r\n .avis-client {\r\n margin-top: auto;\r\n\r\n padding-top: 35px;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n gap: 17px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n AVATAR\r\n ========================================================= *\/\r\n\r\n .avis-avatar {\r\n width: 59px;\r\n height: 59px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n flex-shrink: 0;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #f02938 0%,\r\n #db101f 100%\r\n );\r\n\r\n color: #ffffff;\r\n\r\n font-size: 14px;\r\n\r\n font-weight: 800;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n INFORMATIONS CLIENT\r\n ========================================================= *\/\r\n\r\n .avis-client-info {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n gap: 8px;\r\n }\r\n\r\n .avis-name {\r\n color: #ffffff;\r\n\r\n font-size: 16px;\r\n\r\n font-weight: 800;\r\n }\r\n\r\n .avis-category {\r\n color: #bbbbbb;\r\n\r\n font-size: 14px;\r\n\r\n font-weight: 400;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TABLETTE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1100px) {\r\n\r\n .avis-top-band,\r\n .avis-heading-band {\r\n width: 94%;\r\n }\r\n\r\n .avis-heading-band {\r\n padding:\r\n 25px\r\n 28px\r\n 29px;\r\n }\r\n\r\n .avis-grid-wrapper {\r\n padding:\r\n 0\r\n 35px;\r\n }\r\n\r\n .avis-grid {\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0, 1fr)\r\n );\r\n }\r\n\r\n .avis-card {\r\n min-height: 390px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 700px) {\r\n\r\n .avis-section {\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n padding:\r\n 18px\r\n 0\r\n 50px;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n BANDE AVIS CLIENTS\r\n ======================================================= *\/\r\n\r\n .avis-top-band {\r\n width: 96%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 12px;\r\n\r\n padding:\r\n 14px\r\n 15px;\r\n\r\n border-left:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-right:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-radius: 8px;\r\n }\r\n\r\n .avis-label {\r\n gap: 9px;\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: 3px;\r\n }\r\n\r\n .avis-label::before,\r\n .avis-label::after {\r\n width: 27px;\r\n height: 2px;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n BANDE GRAND TITRE\r\n ======================================================= *\/\r\n\r\n .avis-heading-band {\r\n width: 96%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 32px;\r\n\r\n padding:\r\n 21px\r\n 20px\r\n 24px;\r\n\r\n border-left:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-right:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n .avis-title {\r\n font-size: 43px;\r\n\r\n line-height: 1.04;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n ZONE AVIS\r\n ======================================================= *\/\r\n\r\n .avis-grid-wrapper {\r\n width: 100%;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n D\u00c9FILEMENT HORIZONTAL\r\n ======================================================= *\/\r\n\r\n .avis-grid {\r\n display: flex;\r\n\r\n width: 100%;\r\n\r\n gap: 14px;\r\n\r\n padding:\r\n 0\r\n 15px\r\n 15px;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n scroll-snap-type:\r\n x mandatory;\r\n\r\n scroll-behavior: smooth;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n\r\n scrollbar-width: none;\r\n }\r\n\r\n .avis-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n CARTE MOBILE\r\n ======================================================= *\/\r\n\r\n .avis-card {\r\n flex:\r\n 0\r\n 0\r\n 90%;\r\n\r\n min-height: 390px;\r\n\r\n padding:\r\n 32px\r\n 25px\r\n 28px;\r\n\r\n border-radius: 18px;\r\n\r\n scroll-snap-align: center;\r\n }\r\n\r\n .avis-stars {\r\n margin-bottom: 24px;\r\n\r\n font-size: 18px;\r\n }\r\n\r\n\r\n \/* Bande t\u00e9moignage *\/\r\n\r\n .avis-text-band {\r\n padding:\r\n 20px\r\n 19px\r\n 21px;\r\n\r\n border-radius: 9px;\r\n }\r\n\r\n\r\n \/* Texte *\/\r\n\r\n .avis-text {\r\n font-size: 19px;\r\n\r\n line-height: 1.58;\r\n }\r\n\r\n\r\n \/* Client *\/\r\n\r\n .avis-client {\r\n padding-top: 30px;\r\n }\r\n\r\n .avis-avatar {\r\n width: 55px;\r\n height: 55px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n PETITS MOBILES\r\n ========================================================= *\/\r\n\r\n @media (max-width: 420px) {\r\n\r\n .avis-top-band,\r\n .avis-heading-band {\r\n width: 96%;\r\n }\r\n\r\n .avis-label {\r\n font-size: 10px;\r\n\r\n letter-spacing: 2.7px;\r\n }\r\n\r\n .avis-label::before,\r\n .avis-label::after {\r\n width: 23px;\r\n }\r\n\r\n .avis-heading-band {\r\n padding:\r\n 20px\r\n 15px\r\n 23px;\r\n }\r\n\r\n .avis-title {\r\n font-size: 39px;\r\n }\r\n\r\n .avis-grid {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n }\r\n\r\n .avis-card {\r\n flex-basis: 92%;\r\n\r\n min-height: 380px;\r\n\r\n padding:\r\n 29px\r\n 22px\r\n 26px;\r\n }\r\n\r\n .avis-text-band {\r\n padding:\r\n 19px\r\n 18px\r\n 20px;\r\n }\r\n\r\n .avis-text {\r\n font-size: 18px;\r\n\r\n line-height: 1.58;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n \r\n\r\n <section class=\"avis-section\">\r\n\r\n <div class=\"avis-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"avis-top-band\">\r\n\r\n <div class=\"avis-label\">\r\n Avis clients\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"avis-heading-band\">\r\n\r\n <h2 class=\"avis-title\">\r\n Ils parlent\r\n <span>de mon travail.<\/span>\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"avis-grid-wrapper\">\r\n\r\n <div class=\"avis-grid\">\r\n\r\n\r\n \r\n\r\n <article class=\"avis-card\">\r\n\r\n <div class=\"avis-stars\">\r\n \u2605\u2605\u2605\u2605\u2605\r\n <\/div>\r\n\r\n <div class=\"avis-text-band\">\r\n\r\n <p class=\"avis-text\">\r\n \u00ab Un travail remarquable. Les photos et la vid\u00e9o\r\n de notre \u00e9v\u00e9nement \u00e9taient magnifiques,\r\n professionnelles et naturelles. \u00bb\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"avis-client\">\r\n\r\n <div class=\"avis-avatar\">\r\n SL\r\n <\/div>\r\n\r\n <div class=\"avis-client-info\">\r\n\r\n <div class=\"avis-name\">\r\n Sophie L.\r\n <\/div>\r\n\r\n <div class=\"avis-category\">\r\n Mariage\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"avis-card\">\r\n\r\n <div class=\"avis-stars\">\r\n \u2605\u2605\u2605\u2605\u2605\r\n <\/div>\r\n\r\n <div class=\"avis-text-band\">\r\n\r\n <p class=\"avis-text\">\r\n \u00ab Tr\u00e8s professionnel, cr\u00e9atif et disponible.\r\n Le rendu final d\u00e9passe largement nos attentes. \u00bb\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"avis-client\">\r\n\r\n <div class=\"avis-avatar\">\r\n TB\r\n <\/div>\r\n\r\n <div class=\"avis-client-info\">\r\n\r\n <div class=\"avis-name\">\r\n Thomas B.\r\n <\/div>\r\n\r\n <div class=\"avis-category\">\r\n Entreprise\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"avis-card\">\r\n\r\n <div class=\"avis-stars\">\r\n \u2605\u2605\u2605\u2605\u2605\r\n <\/div>\r\n\r\n <div class=\"avis-text-band\">\r\n\r\n <p class=\"avis-text\">\r\n \u00ab Une vraie vision artistique, une excellente\r\n communication et un montage vid\u00e9o tr\u00e8s dynamique. \u00bb\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"avis-client\">\r\n\r\n <div class=\"avis-avatar\">\r\n IM\r\n <\/div>\r\n\r\n <div class=\"avis-client-info\">\r\n\r\n <div class=\"avis-name\">\r\n In\u00e8s M.\r\n <\/div>\r\n\r\n <div class=\"avis-category\">\r\n Artiste\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\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<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6450f6a e-con e-atomic-element e-flexbox-base e-1c1c203 \" data-id=\"6450f6a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6450f6a\">\n \t\t<div class=\"elementor-element elementor-element-a023cff elementor-widget elementor-widget-html\" data-id=\"a023cff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n\r\n <meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1.0\"\r\n >\r\n\r\n <title>Un projet en t\u00eate ? | R\u00e9alistiC<\/title>\r\n\r\n <style>\r\n\r\n \/* =========================================================\r\n RESET\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 body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #151515;\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SECTION UN PROJET EN T\u00caTE\r\n ========================================================= *\/\r\n\r\n .project-section {\r\n width: 100%;\r\n\r\n padding:\r\n 85px\r\n 24px\r\n 105px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENEUR\r\n ========================================================= *\/\r\n\r\n .project-container {\r\n width: 100%;\r\n max-width: 1380px;\r\n\r\n margin: 0 auto;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE SUP\u00c9RIEURE\r\n ========================================================= *\/\r\n\r\n .project-top-band {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n width: 100%;\r\n\r\n margin-bottom: 18px;\r\n\r\n padding:\r\n 20px\r\n 25px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #ffffff 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 8px 25px\r\n rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n\r\n \/* Accent rouge centr\u00e9 *\/\r\n\r\n .project-top-band::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 50%;\r\n\r\n width: 68px;\r\n height: 3px;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n background: #d50000;\r\n\r\n border-radius:\r\n 0\r\n 0\r\n 5px\r\n 5px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE BANDE SUP\u00c9RIEURE\r\n ========================================================= *\/\r\n\r\n .project-top-title {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n color: #111111;\r\n\r\n font-size: 14px;\r\n font-weight: 900;\r\n\r\n letter-spacing: 4px;\r\n\r\n text-align: center;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n .project-top-title::before,\r\n .project-top-title::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 1px;\r\n\r\n background: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE PRINCIPALE\r\n ========================================================= *\/\r\n\r\n .project-main-band {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n min-height: 390px;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n padding:\r\n 55px\r\n 58px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 88% 40%,\r\n rgba(213, 0, 0, 0.085) 0%,\r\n rgba(213, 0, 0, 0.035) 30%,\r\n transparent 60%\r\n ),\r\n\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 24px;\r\n\r\n box-shadow:\r\n 0 12px 40px\r\n rgba(0, 0, 0, 0.045);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n ACCENT ROUGE\r\n ========================================================= *\/\r\n\r\n .project-main-band::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 58px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius:\r\n 0\r\n 0\r\n 4px\r\n 4px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENU INTERNE\r\n ========================================================= *\/\r\n\r\n .project-inner {\r\n position: relative;\r\n z-index: 2;\r\n\r\n width: 100%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(0, 1fr)\r\n auto;\r\n\r\n align-items: center;\r\n\r\n gap: 55px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n PARTIE TEXTE\r\n ========================================================= *\/\r\n\r\n .project-content {\r\n width: 100%;\r\n max-width: 720px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRAND TITRE\r\n ========================================================= *\/\r\n\r\n .project-title {\r\n margin-bottom: 24px;\r\n\r\n color: #111111;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(\r\n 46px,\r\n 5vw,\r\n 74px\r\n );\r\n\r\n font-weight: 400;\r\n\r\n line-height: 0.98;\r\n\r\n letter-spacing: -3px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n DESCRIPTION\r\n ========================================================= *\/\r\n\r\n .project-description {\r\n max-width: 690px;\r\n\r\n color: #676767;\r\n\r\n font-size: 17px;\r\n\r\n line-height: 1.75;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTONS\r\n ========================================================= *\/\r\n\r\n .project-actions {\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: flex-end;\r\n\r\n gap: 16px;\r\n\r\n flex-shrink: 0;\r\n }\r\n\r\n\r\n .project-button {\r\n min-height: 76px;\r\n\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n gap: 28px;\r\n\r\n padding:\r\n 0\r\n 32px;\r\n\r\n border-radius: 100px;\r\n\r\n font-size: 16px;\r\n font-weight: 800;\r\n\r\n text-decoration: none !important;\r\n text-decoration-line: none !important;\r\n text-decoration-color: transparent !important;\r\n\r\n white-space: nowrap;\r\n\r\n transition:\r\n transform 0.3s ease,\r\n background 0.3s ease,\r\n color 0.3s ease,\r\n border-color 0.3s ease,\r\n box-shadow 0.3s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SUPPRESSION DU SOULIGNEMENT\r\n DANS TOUS LES \u00c9TATS\r\n ========================================================= *\/\r\n\r\n .project-button,\r\n .project-button:link,\r\n .project-button:visited,\r\n .project-button:hover,\r\n .project-button:focus,\r\n .project-button:focus-visible,\r\n .project-button:active {\r\n text-decoration: none !important;\r\n text-decoration-line: none !important;\r\n text-decoration-thickness: 0 !important;\r\n text-underline-offset: 0 !important;\r\n }\r\n\r\n\r\n .project-button span {\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .project-button:hover {\r\n transform:\r\n translateY(-2px);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTON DEVIS\r\n ========================================================= *\/\r\n\r\n .project-button-primary,\r\n .project-button-primary:link,\r\n .project-button-primary:visited {\r\n min-width: 285px;\r\n\r\n color: #ffffff !important;\r\n\r\n background: #d50000;\r\n\r\n border:\r\n 2px solid #d50000;\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(213, 0, 0, 0.15);\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .project-button-primary:hover,\r\n .project-button-primary:focus,\r\n .project-button-primary:active {\r\n color: #ffffff !important;\r\n\r\n background: #b80000;\r\n\r\n border-color: #b80000;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTON WHATSAPP\r\n ========================================================= *\/\r\n\r\n .project-button-secondary,\r\n .project-button-secondary:link,\r\n .project-button-secondary:visited {\r\n min-width: 300px;\r\n\r\n color: #111111 !important;\r\n\r\n background: #ffffff;\r\n\r\n border:\r\n 2px solid #111111;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .project-button-secondary:hover,\r\n .project-button-secondary:focus,\r\n .project-button-secondary:active {\r\n color: #ffffff !important;\r\n\r\n background: #111111;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n FL\u00c8CHE\r\n ========================================================= *\/\r\n\r\n .project-arrow {\r\n font-size: 22px;\r\n\r\n line-height: 1;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TABLETTE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1000px) {\r\n\r\n .project-section {\r\n padding:\r\n 70px\r\n 22px\r\n 85px;\r\n }\r\n\r\n\r\n .project-main-band {\r\n min-height: auto;\r\n\r\n padding:\r\n 45px\r\n 42px;\r\n }\r\n\r\n\r\n .project-main-band::before {\r\n left: 42px;\r\n }\r\n\r\n\r\n .project-inner {\r\n grid-template-columns: 1fr;\r\n\r\n gap: 38px;\r\n }\r\n\r\n\r\n .project-content {\r\n max-width: 780px;\r\n }\r\n\r\n\r\n .project-actions {\r\n justify-content: flex-start;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 650px) {\r\n\r\n .project-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 45px\r\n 0\r\n 60px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .project-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE UN PROJET EN T\u00caTE\r\n ====================================================== *\/\r\n\r\n .project-top-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 12px;\r\n\r\n padding:\r\n 17px\r\n 12px;\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n .project-top-band::before {\r\n width: 52px;\r\n }\r\n\r\n\r\n .project-top-title {\r\n gap: 9px;\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: 3px;\r\n }\r\n\r\n\r\n .project-top-title::before,\r\n .project-top-title::after {\r\n width: 25px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE PRINCIPALE\r\n ====================================================== *\/\r\n\r\n .project-main-band {\r\n width: 94%;\r\n\r\n min-height: auto;\r\n\r\n margin:\r\n 0\r\n auto;\r\n\r\n padding:\r\n 32px\r\n 16px\r\n 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 100% 20%,\r\n rgba(213, 0, 0, 0.08),\r\n transparent 55%\r\n ),\r\n\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0\r\n 10px\r\n 28px\r\n rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n\r\n .project-main-band::before {\r\n left: 16px;\r\n\r\n width: 52px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CONTENU\r\n ====================================================== *\/\r\n\r\n .project-inner {\r\n display: flex;\r\n\r\n flex-direction: column;\r\n\r\n align-items: stretch;\r\n\r\n gap: 30px;\r\n }\r\n\r\n\r\n .project-content {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TITRE\r\n ====================================================== *\/\r\n\r\n .project-title {\r\n margin-bottom: 18px;\r\n\r\n font-size: 39px;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n DESCRIPTION\r\n ====================================================== *\/\r\n\r\n .project-description {\r\n width: 100%;\r\n max-width: none;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.65;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BOUTONS\r\n ====================================================== *\/\r\n\r\n .project-actions {\r\n width: 100%;\r\n\r\n flex-direction: column;\r\n\r\n align-items: stretch;\r\n\r\n gap: 12px;\r\n }\r\n\r\n\r\n .project-button {\r\n width: 100%;\r\n\r\n min-width: 0;\r\n min-height: 62px;\r\n\r\n padding:\r\n 0\r\n 22px;\r\n\r\n font-size: 14px;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n PETITS MOBILES\r\n ========================================================= *\/\r\n\r\n @media (max-width: 380px) {\r\n\r\n .project-top-title {\r\n gap: 7px;\r\n\r\n font-size: 10px;\r\n\r\n letter-spacing: 2px;\r\n }\r\n\r\n\r\n .project-top-title::before,\r\n .project-top-title::after {\r\n width: 18px;\r\n }\r\n\r\n\r\n .project-title {\r\n font-size: 36px;\r\n }\r\n\r\n\r\n .project-description {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .project-button {\r\n padding:\r\n 0\r\n 18px;\r\n\r\n font-size: 13px;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section\r\n class=\"project-section\"\r\n id=\"project\"\r\n>\r\n\r\n <div class=\"project-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"project-top-band\">\r\n\r\n <div class=\"project-top-title\">\r\n Un projet en t\u00eate ?\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"project-main-band\">\r\n\r\n <div class=\"project-inner\">\r\n\r\n\r\n \r\n\r\n <div class=\"project-content\">\r\n\r\n <h2 class=\"project-title\">\r\n Discutons-en d\u00e8s<br>\r\n maintenant.\r\n <\/h2>\r\n\r\n\r\n <p class=\"project-description\">\r\n Pr\u00e9sentez-moi votre projet et recevez\r\n une r\u00e9ponse personnalis\u00e9e.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"project-actions\">\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/contact\/\"\r\n class=\"project-button project-button-primary\"\r\n >\r\n\r\n <span>\r\n Demander un devis\r\n <\/span>\r\n\r\n <span class=\"project-arrow\">\r\n \u2192\r\n <\/span>\r\n\r\n <\/a>\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/wa.me\/+2290166891486\"\r\n class=\"project-button project-button-secondary\"\r\n >\r\n\r\n <span>\r\n \u00c9crire sur WhatsApp\r\n <\/span>\r\n\r\n <span class=\"project-arrow\">\r\n \u2192\r\n <\/span>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\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<\/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>R\u00e9alistiC | Photographie & Vid\u00e9o CREER. CAPTURER. SUBLIMER. DONNONS VIE A VOS ID\u00c9ES Photographie, Vid\u00e9aste, Montage & Motion Design Des […]<\/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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","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-9","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Accueil -<\/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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accueil -\" \/>\n<meta property=\"og:description\" content=\"R\u00e9alistiC | Photographie & Vid\u00e9o CREER. CAPTURER. SUBLIMER. DONNONS VIE A VOS ID\u00c9ES Photographie, Vid\u00e9aste, Montage & Motion Design Des […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amourallabah.com\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T08:45:47+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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/\",\"url\":\"https:\\\/\\\/amourallabah.com\\\/\",\"name\":\"Accueil -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#website\"},\"datePublished\":\"2026-07-17T09:09:29+00:00\",\"dateModified\":\"2026-07-30T08:45:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/amourallabah.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/amourallabah.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accueil\"}]},{\"@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_head_json":{"title":"Accueil -","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\/","og_locale":"en_US","og_type":"article","og_title":"Accueil -","og_description":"R\u00e9alistiC | Photographie & Vid\u00e9o CREER. CAPTURER. SUBLIMER. DONNONS VIE A VOS ID\u00c9ES Photographie, Vid\u00e9aste, Montage & Motion Design Des […]","og_url":"https:\/\/amourallabah.com\/","article_modified_time":"2026-07-30T08:45:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amourallabah.com\/","url":"https:\/\/amourallabah.com\/","name":"Accueil -","isPartOf":{"@id":"https:\/\/amourallabah.com\/#website"},"datePublished":"2026-07-17T09:09:29+00:00","dateModified":"2026-07-30T08:45:47+00:00","breadcrumb":{"@id":"https:\/\/amourallabah.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amourallabah.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/amourallabah.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/amourallabah.com\/"},{"@type":"ListItem","position":2,"name":"Accueil"}]},{"@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\/9","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=9"}],"version-history":[{"count":613,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 R\u00e9alistiC | Photographie & Vid\u00e9o<\/title>\r\n\r\n <style>\r\n\r\n \/* ==================================================\r\n RESET\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 body {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #000000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n HERO\r\n ================================================== *\/\r\n\r\n .realistic-hero {\r\n position: relative;\r\n\r\n width: 100vw;\r\n max-width: none;\r\n\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n\r\n height: calc(max(55vh, 412.5px) + 255px);\r\n min-height: 0;\r\n\r\n overflow: hidden;\r\n\r\n background: #000000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n IMAGE HERO\r\n ================================================== *\/\r\n\r\n .realistic-hero__image {\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: max(100vh, 750px);\r\n\r\n max-width: none;\r\n\r\n display: block;\r\n\r\n margin: 0;\r\n padding: 0;\r\n\r\n border: 0;\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n\r\n filter: none;\r\n\r\n transform: translateZ(0);\r\n\r\n image-rendering: auto;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n D\u00c9GRAD\u00c9 HERO\r\n ================================================== *\/\r\n\r\n .realistic-hero::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 1;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n linear-gradient(\r\n to bottom,\r\n rgba(0, 0, 0, 0) 0%,\r\n rgba(0, 0, 0, 0.03) 48%,\r\n rgba(0, 0, 0, 0.28) 100%\r\n );\r\n }\r\n\r\n\r\n \/* ==================================================\r\n SLOGAN\r\n ================================================== *\/\r\n\r\n .realistic-hero__slogan {\r\n position: absolute;\r\n\r\n top: max(19vh, 142.5px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 11px;\r\n font-weight: 500;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: 2.2px;\r\n\r\n text-transform: uppercase;\r\n\r\n white-space: nowrap;\r\n\r\n text-shadow:\r\n 0 1px 5px rgba(0, 0, 0, 0.55);\r\n }\r\n\r\n\r\n .realistic-hero__slogan .red-dot {\r\n color: #d60000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n GRAND TITRE\r\n ================================================== *\/\r\n\r\n .realistic-hero__headline {\r\n position: absolute;\r\n\r\n top: max(24vh, 180px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n\r\n font-size: clamp(38px, 4.8vw, 76px);\r\n font-weight: 800;\r\n\r\n line-height: 0.95;\r\n\r\n letter-spacing: -1.5px;\r\n\r\n text-transform: uppercase;\r\n\r\n white-space: nowrap;\r\n\r\n text-shadow:\r\n 0 3px 15px rgba(0, 0, 0, 0.40);\r\n }\r\n\r\n\r\n .realistic-hero__headline-white {\r\n display: block;\r\n color: #ffffff;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n display: block;\r\n\r\n margin-top: 8px;\r\n\r\n color: #d60000;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n DESCRIPTION\r\n ================================================== *\/\r\n\r\n .realistic-hero__description {\r\n position: absolute;\r\n\r\n top: max(43vh, 322.5px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n color: #ffffff;\r\n\r\n text-shadow:\r\n 0 2px 10px rgba(0, 0, 0, 0.55);\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n display: block;\r\n\r\n margin-bottom: 8px;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 17px;\r\n font-weight: 500;\r\n\r\n line-height: 1.3;\r\n\r\n letter-spacing: 0.15px;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n display: block;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 16px;\r\n font-weight: 400;\r\n\r\n line-height: 1.4;\r\n\r\n letter-spacing: 0.1px;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n LISTE DES SERVICES\r\n ================================================== *\/\r\n\r\n .realistic-hero__service-list {\r\n position: absolute;\r\n\r\n top: max(55vh, 412.5px);\r\n left: 4%;\r\n\r\n z-index: 3;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n\r\n gap: 15px;\r\n\r\n width: min(520px, 47vw);\r\n }\r\n\r\n\r\n .realistic-service {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 15px;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n flex: 0 0 auto;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n border: 1.5px solid #e00000;\r\n border-radius: 50%;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n color: #ffffff;\r\n\r\n background: rgba(0, 0, 0, 0.18);\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 24px;\r\n height: 24px;\r\n\r\n display: block;\r\n\r\n fill: none;\r\n\r\n stroke: currentColor;\r\n\r\n stroke-width: 1.5;\r\n\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n\r\n .realistic-service__text {\r\n display: flex;\r\n\r\n min-width: 0;\r\n\r\n flex-direction: column;\r\n\r\n justify-content: center;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n color: #ffffff;\r\n\r\n font-size: 16px;\r\n font-weight: 700;\r\n\r\n line-height: 1.15;\r\n\r\n letter-spacing: 0.5px;\r\n\r\n text-transform: uppercase;\r\n\r\n text-shadow:\r\n 0 1px 5px rgba(0, 0, 0, 0.65);\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n margin-top: 3px;\r\n\r\n color: rgba(255, 255, 255, 0.78);\r\n\r\n font-size: 13px;\r\n font-weight: 400;\r\n\r\n line-height: 1.3;\r\n\r\n text-shadow:\r\n 0 1px 5px rgba(0, 0, 0, 0.65);\r\n }\r\n\r\n\r\n \/* ==================================================\r\n BOUTON DEVIS\r\n ================================================== *\/\r\n\r\n .realistic-hero__content {\r\n position: absolute;\r\n\r\n top: max(50vh, 375px);\r\n right: 10%;\r\n\r\n z-index: 4;\r\n\r\n transform: translateY(-50%);\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n\r\n .realistic-hero__button,\r\n .realistic-hero__button:link,\r\n .realistic-hero__button:visited {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n min-width: 185px;\r\n\r\n padding: 16px 30px;\r\n\r\n background: #ffffff;\r\n\r\n border: 1px solid #ffffff;\r\n border-radius: 4px;\r\n\r\n color: #d60000;\r\n\r\n font-size: 14px;\r\n font-weight: 700;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: 1.3px;\r\n\r\n text-decoration: none !important;\r\n text-transform: uppercase;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n background 0.25s ease,\r\n color 0.25s ease,\r\n border-color 0.25s ease,\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n\r\n .realistic-hero__button:hover,\r\n .realistic-hero__button:focus {\r\n background: #d60000;\r\n\r\n color: #ffffff;\r\n\r\n border-color: #d60000;\r\n\r\n text-decoration: none !important;\r\n\r\n transform: translateY(-3px);\r\n\r\n box-shadow:\r\n 0 10px 30px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n\r\n .realistic-hero__button:active {\r\n background: #b90000;\r\n\r\n color: #ffffff;\r\n\r\n border-color: #b90000;\r\n\r\n text-decoration: none !important;\r\n\r\n transform: translateY(0);\r\n }\r\n\r\n\r\n \/* ==================================================\r\n SECTION DE CONFIANCE\r\n ================================================== *\/\r\n\r\n .realistic-trust {\r\n position: relative;\r\n\r\n width: 100vw;\r\n max-width: none;\r\n\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n\r\n padding: 22px 4%;\r\n\r\n background:\r\n linear-gradient(\r\n 120deg,\r\n #750000 0%,\r\n #a80000 28%,\r\n #d60000 58%,\r\n #9d0000 82%,\r\n #680000 100%\r\n );\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .realistic-trust::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: -120px;\r\n left: 30%;\r\n\r\n width: 500px;\r\n height: 250px;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(255, 255, 255, 0.13) 0%,\r\n rgba(255, 255, 255, 0.04) 40%,\r\n transparent 70%\r\n );\r\n\r\n pointer-events: none;\r\n }\r\n\r\n\r\n .realistic-trust__inner {\r\n position: relative;\r\n\r\n z-index: 2;\r\n\r\n width: 100%;\r\n max-width: 1500px;\r\n\r\n margin: 0 auto;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: repeat(4, 1fr);\r\n\r\n align-items: center;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n position: relative;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n min-height: 80px;\r\n\r\n padding: 0 28px;\r\n\r\n gap: 16px;\r\n }\r\n\r\n\r\n .realistic-trust__item:first-child {\r\n padding-left: 0;\r\n }\r\n\r\n\r\n .realistic-trust__item:last-child {\r\n padding-right: 0;\r\n }\r\n\r\n\r\n .realistic-trust__item:not(:last-child)::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 12px;\r\n right: 0;\r\n\r\n width: 1px;\r\n height: calc(100% - 24px);\r\n\r\n background: rgba(255, 255, 255, 0.27);\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n flex: 0 0 auto;\r\n\r\n width: 58px;\r\n height: 58px;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border: 1px solid rgba(255, 255, 255, 0.40);\r\n border-radius: 17px;\r\n\r\n background: rgba(255, 255, 255, 0.10);\r\n\r\n color: #ffffff;\r\n\r\n backdrop-filter: blur(3px);\r\n -webkit-backdrop-filter: blur(3px);\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 28px;\r\n height: 28px;\r\n\r\n fill: none;\r\n\r\n stroke: currentColor;\r\n\r\n stroke-width: 1.8;\r\n\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n\r\n .realistic-trust__text {\r\n min-width: 0;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n color: #ffffff;\r\n\r\n font-size: 18px;\r\n font-weight: 800;\r\n\r\n line-height: 1.15;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n margin-top: 6px;\r\n\r\n color: rgba(255, 255, 255, 0.87);\r\n\r\n font-size: 13px;\r\n font-weight: 400;\r\n\r\n line-height: 1.3;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n ELEMENTOR \/ ASTRA\r\n ================================================== *\/\r\n\r\n .elementor-widget-html,\r\n .elementor-widget-html > .elementor-widget-container {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n\r\n .elementor-widget-html .realistic-hero,\r\n .elementor-widget-html .realistic-trust {\r\n width: 100vw;\r\n max-width: none;\r\n }\r\n\r\n\r\n .realistic-hero img {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* ==================================================\r\n TABLETTE\r\n ================================================== *\/\r\n\r\n @media (max-width: 1024px) {\r\n\r\n .realistic-hero {\r\n height: calc(max(45.05vh, 365.7px) + 235px);\r\n min-height: 0;\r\n }\r\n\r\n\r\n .realistic-hero__image {\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: max(85vh, 690px);\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n\r\n .realistic-hero__slogan {\r\n top: max(16.15vh, 131.1px);\r\n left: 3%;\r\n\r\n font-size: 9px;\r\n\r\n letter-spacing: 1.8px;\r\n }\r\n\r\n\r\n .realistic-hero__headline {\r\n top: max(19.55vh, 158.7px);\r\n left: 3%;\r\n\r\n font-size: clamp(34px, 5.5vw, 58px);\r\n\r\n letter-spacing: -1px;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n margin-top: 6px;\r\n }\r\n\r\n\r\n .realistic-hero__description {\r\n top: max(34.85vh, 282.9px);\r\n left: 3%;\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n font-size: 15px;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .realistic-hero__service-list {\r\n top: max(45.05vh, 365.7px);\r\n left: 3%;\r\n\r\n gap: 13px;\r\n\r\n width: 55vw;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 22px;\r\n height: 22px;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n font-size: 12px;\r\n }\r\n\r\n\r\n .realistic-hero__content {\r\n top: max(42.5vh, 345px);\r\n right: 8%;\r\n\r\n transform: translateY(-50%);\r\n }\r\n\r\n\r\n .realistic-hero__button,\r\n .realistic-hero__button:link,\r\n .realistic-hero__button:visited {\r\n min-width: 165px;\r\n\r\n padding: 14px 24px;\r\n\r\n font-size: 12px;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .realistic-trust {\r\n padding: 19px 3%;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n min-height: 76px;\r\n\r\n padding: 0 14px;\r\n\r\n gap: 11px;\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n width: 48px;\r\n height: 48px;\r\n\r\n border-radius: 14px;\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n margin-top: 4px;\r\n\r\n font-size: 11px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* ==================================================\r\n MOBILE\r\n ================================================== *\/\r\n\r\n @media (max-width: 767px) {\r\n\r\n .realistic-hero {\r\n width: 100vw;\r\n\r\n height: 300px;\r\n min-height: 300px;\r\n }\r\n\r\n\r\n .realistic-hero__image {\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 440px;\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n\r\n .realistic-hero__slogan {\r\n top: 44px;\r\n left: 3%;\r\n\r\n font-size: 5px;\r\n font-weight: 500;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: 0.9px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-hero__headline {\r\n top: 66px;\r\n left: 3%;\r\n\r\n font-size: clamp(27px, 8.5vw, 39px);\r\n\r\n line-height: 0.95;\r\n\r\n letter-spacing: -0.7px;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n margin-top: 4px;\r\n }\r\n\r\n\r\n .realistic-hero__description {\r\n top: 132px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n margin-bottom: 7px;\r\n\r\n font-size: 10px;\r\n font-weight: 500;\r\n\r\n line-height: 1.3;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n font-size: 9px;\r\n\r\n line-height: 1.4;\r\n }\r\n\r\n\r\n .realistic-hero__service-list {\r\n top: 190px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n column-gap: 16px;\r\n row-gap: 18px;\r\n }\r\n\r\n\r\n .realistic-service {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 8px;\r\n\r\n width: 100%;\r\n\r\n min-width: 0;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n width: 38px;\r\n height: 38px;\r\n\r\n border-width: 1.2px;\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n\r\n .realistic-service__text {\r\n min-width: 0;\r\n\r\n flex: 1;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n font-size: 10px;\r\n\r\n line-height: 1.15;\r\n\r\n letter-spacing: 0.1px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n margin-top: 3px;\r\n\r\n font-size: 7.5px;\r\n\r\n line-height: 1.25;\r\n }\r\n\r\n\r\n .realistic-hero__content {\r\n display: none;\r\n }\r\n\r\n\r\n .realistic-trust {\r\n padding: 18px 4%;\r\n }\r\n\r\n\r\n .realistic-trust__inner {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n column-gap: 0;\r\n row-gap: 0;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n min-height: 78px;\r\n\r\n padding: 10px 9px;\r\n\r\n gap: 8px;\r\n }\r\n\r\n\r\n .realistic-trust__item:first-child {\r\n padding-left: 9px;\r\n }\r\n\r\n\r\n .realistic-trust__item:last-child {\r\n padding-right: 9px;\r\n }\r\n\r\n\r\n .realistic-trust__item:not(:last-child)::after {\r\n display: none;\r\n }\r\n\r\n\r\n .realistic-trust__item:nth-child(odd) {\r\n border-right: 1px solid rgba(255, 255, 255, 0.22);\r\n }\r\n\r\n\r\n .realistic-trust__item:nth-child(1),\r\n .realistic-trust__item:nth-child(2) {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.22);\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n width: 38px;\r\n height: 38px;\r\n\r\n border-radius: 11px;\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 19px;\r\n height: 19px;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n font-size: 10px;\r\n\r\n line-height: 1.15;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n margin-top: 3px;\r\n\r\n font-size: 7.5px;\r\n\r\n line-height: 1.25;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* ==================================================\r\n PETITS MOBILES\r\n ================================================== *\/\r\n\r\n @media (max-width: 480px) {\r\n\r\n .realistic-hero {\r\n height: 280px;\r\n min-height: 280px;\r\n }\r\n\r\n\r\n .realistic-hero__image {\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 405px;\r\n\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n\r\n .realistic-hero__slogan {\r\n top: 37px;\r\n left: 3%;\r\n\r\n font-size: 4.5px;\r\n\r\n letter-spacing: 0.7px;\r\n }\r\n\r\n\r\n .realistic-hero__headline {\r\n top: 57px;\r\n left: 3%;\r\n\r\n font-size: 27px;\r\n\r\n line-height: 0.95;\r\n\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n\r\n .realistic-hero__headline-red {\r\n margin-top: 4px;\r\n }\r\n\r\n\r\n .realistic-hero__description {\r\n top: 119px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n }\r\n\r\n\r\n .realistic-hero__services-title {\r\n margin-bottom: 6px;\r\n\r\n font-size: 8.5px;\r\n }\r\n\r\n\r\n .realistic-hero__description-line {\r\n font-size: 8.5px;\r\n\r\n line-height: 1.4;\r\n }\r\n\r\n\r\n .realistic-hero__service-list {\r\n top: 173px;\r\n left: 3%;\r\n\r\n width: 94%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n column-gap: 12px;\r\n row-gap: 16px;\r\n }\r\n\r\n\r\n .realistic-service {\r\n gap: 7px;\r\n\r\n min-width: 0;\r\n }\r\n\r\n\r\n .realistic-service__icon {\r\n width: 34px;\r\n height: 34px;\r\n }\r\n\r\n\r\n .realistic-service__icon svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n\r\n .realistic-service__title {\r\n font-size: 9px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n\r\n .realistic-service__description {\r\n margin-top: 2px;\r\n\r\n font-size: 6.8px;\r\n\r\n line-height: 1.25;\r\n }\r\n\r\n\r\n .realistic-hero__content {\r\n display: none;\r\n }\r\n\r\n\r\n .realistic-trust {\r\n padding: 14px 3%;\r\n }\r\n\r\n\r\n .realistic-trust__item {\r\n min-height: 70px;\r\n\r\n padding: 8px 6px;\r\n\r\n gap: 7px;\r\n }\r\n\r\n\r\n .realistic-trust__item:first-child {\r\n padding-left: 6px;\r\n }\r\n\r\n\r\n .realistic-trust__item:last-child {\r\n padding-right: 6px;\r\n }\r\n\r\n\r\n .realistic-trust__icon {\r\n width: 34px;\r\n height: 34px;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n .realistic-trust__icon svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n\r\n .realistic-trust__title {\r\n font-size: 8.5px;\r\n }\r\n\r\n\r\n .realistic-trust__description {\r\n font-size: 6.8px;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n \r\n\r\n <section class=\"realistic-hero\">\r\n\r\n\r\n <img\r\n class=\"realistic-hero__image\"\r\n \r\n alt=\"R\u00e9alistiC - Photographie, vid\u00e9ographie, montage vid\u00e9o et motion design\"\r\n decoding=\"async\"\r\n fetchpriority=\"high\"\r\n loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/amourallabah.com\/wp-content\/uploads\/2026\/07\/cool.png\">\r\n\r\n\r\n <div class=\"realistic-hero__slogan\">\r\n\r\n CREER<span class=\"red-dot\">.<\/span>\r\n CAPTURER<span class=\"red-dot\">.<\/span>\r\n SUBLIMER<span class=\"red-dot\">.<\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-hero__headline\">\r\n\r\n <span class=\"realistic-hero__headline-white\">\r\n DONNONS VIE\r\n <\/span>\r\n\r\n <span class=\"realistic-hero__headline-red\">\r\n A VOS ID\u00c9ES\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-hero__description\">\r\n\r\n <span class=\"realistic-hero__services-title\">\r\n Photographie, Vid\u00e9aste, Montage & Motion Design\r\n <\/span>\r\n\r\n <span class=\"realistic-hero__description-line\">\r\n Des contenus visuels puissants pour marquer\r\n <\/span>\r\n\r\n <span class=\"realistic-hero__description-line\">\r\n les esprits et sublimer votre image.\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-hero__service-list\">\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M4 7h3l1.5-2h7L17 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z\"><\/path>\r\n\r\n <circle cx=\"12\" cy=\"13\" r=\"4\"><\/circle>\r\n\r\n <path d=\"M18.5 9.5h.01\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n PHOTOGRAPHIE\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Des images fortes, esth\u00e9tiques et authentiques.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <rect\r\n x=\"2.5\"\r\n y=\"6\"\r\n width=\"13\"\r\n height=\"12\"\r\n rx=\"2\"\r\n ><\/rect>\r\n\r\n <path d=\"m15.5 10 6-3v10l-6-3Z\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n VID\u00c9ASTE\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Des vid\u00e9os immersives et percutantes.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <rect\r\n x=\"3\"\r\n y=\"3\"\r\n width=\"18\"\r\n height=\"18\"\r\n rx=\"1\"\r\n ><\/rect>\r\n\r\n <path d=\"M7 3v4\"><\/path>\r\n <path d=\"M12 3v4\"><\/path>\r\n <path d=\"M17 3v4\"><\/path>\r\n\r\n <path d=\"M7 17v4\"><\/path>\r\n <path d=\"M12 17v4\"><\/path>\r\n <path d=\"M17 17v4\"><\/path>\r\n\r\n <path d=\"M3 8h4\"><\/path>\r\n <path d=\"M3 13h4\"><\/path>\r\n\r\n <path d=\"M17 8h4\"><\/path>\r\n <path d=\"M17 13h4\"><\/path>\r\n\r\n <path d=\"m10 9 5 3-5 3Z\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n MONTAGE VID\u00c9O\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Rythme, storytelling et impact visuel.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service\">\r\n\r\n <div class=\"realistic-service__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M14.5 3.5 20.5 9.5 9 21l-6 1 1-6Z\"><\/path>\r\n\r\n <path d=\"M13 5 19 11\"><\/path>\r\n\r\n <path d=\"m4 16 4 4\"><\/path>\r\n\r\n <path d=\"M10.5 8.5 15.5 13.5\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-service__text\">\r\n\r\n <div class=\"realistic-service__title\">\r\n MOTION DESIGN\r\n <\/div>\r\n\r\n <div class=\"realistic-service__description\">\r\n Animations cr\u00e9atives et design en mouvement.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"realistic-hero__content\">\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/contact\/\"\r\n class=\"realistic-hero__button\"\r\n >\r\n Demander un devis\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n\r\n <\/section>\r\n\r\n\r\n \r\n\r\n <section class=\"realistic-trust\">\r\n\r\n <div class=\"realistic-trust__inner\">\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M12 2l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4-3.9-3.8 5.4-.8Z\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n Qualit\u00e9 professionnelle\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n Une exigence \u00e9lev\u00e9e pour chaque cr\u00e9ation\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M12 3v18\"><\/path>\r\n\r\n <path d=\"M3 12h18\"><\/path>\r\n\r\n <circle cx=\"12\" cy=\"12\" r=\"8\"><\/circle>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n Cr\u00e9ation sur mesure\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n Une identit\u00e9 visuelle pens\u00e9e pour votre projet\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n\r\n <path d=\"M12 7v5l3 2\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n R\u00e9activit\u00e9\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n Des \u00e9changes rapides et un suivi efficace\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__item\">\r\n\r\n <div class=\"realistic-trust__icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n <path d=\"M8 11V7a4 4 0 0 1 8 0v4\"><\/path>\r\n\r\n <rect\r\n x=\"5\"\r\n y=\"11\"\r\n width=\"14\"\r\n height=\"10\"\r\n rx=\"2\"\r\n ><\/rect>\r\n\r\n <path d=\"M9 16l2 2 4-4\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"realistic-trust__text\">\r\n\r\n <div class=\"realistic-trust__title\">\r\n Accompagnement\r\n <\/div>\r\n\r\n <div class=\"realistic-trust__description\">\r\n \u00c0 vos c\u00f4t\u00e9s de l'id\u00e9e \u00e0 la r\u00e9alisation\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-434c14e e-con e-atomic-element e-flexbox-base e-67172d7 \" data-id=\"434c14e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"434c14e\">\n \t\t<div class=\"elementor-element elementor-element-5cbeb1b elementor-widget elementor-widget-html\" data-id=\"5cbeb1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n\r\n <meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1.0\"\r\n >\r\n\r\n <title>Mes Services | R\u00e9alistiC<\/title>\r\n\r\n <style>\r\n\r\n \/* =========================================================\r\n RESET\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 body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #151515;\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SECTION MES SERVICES\r\n ========================================================= *\/\r\n\r\n .services-section {\r\n width: 100%;\r\n padding: 85px 24px 105px;\r\n background: #ffffff;\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENEUR\r\n ========================================================= *\/\r\n\r\n .services-container {\r\n width: 100%;\r\n max-width: 1380px;\r\n margin: 0 auto;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE SUP\u00c9RIEURE : MES SERVICES\r\n ========================================================= *\/\r\n\r\n .services-top-band {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n width: 100%;\r\n\r\n margin-bottom: 18px;\r\n padding: 20px 25px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #ffffff 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 8px 25px\r\n rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n\r\n .services-top-band::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 50%;\r\n\r\n width: 68px;\r\n height: 3px;\r\n\r\n transform: translateX(-50%);\r\n\r\n background: #d50000;\r\n\r\n border-radius: 0 0 5px 5px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE DE LA BANDE\r\n ========================================================= *\/\r\n\r\n .services-top-title {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n color: #111111;\r\n\r\n font-size: 14px;\r\n font-weight: 900;\r\n\r\n letter-spacing: 4px;\r\n\r\n text-align: center;\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n .services-top-title::before,\r\n .services-top-title::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 1px;\r\n\r\n background: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE PRINCIPALE\r\n ========================================================= *\/\r\n\r\n .services-header {\r\n position: relative;\r\n\r\n display: flex;\r\n\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n\r\n gap: 50px;\r\n\r\n margin-bottom: 42px;\r\n\r\n padding: 55px 58px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 24px;\r\n\r\n box-shadow:\r\n 0 12px 40px\r\n rgba(0, 0, 0, 0.045);\r\n }\r\n\r\n\r\n .services-header::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 58px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 0 0 4px 4px;\r\n }\r\n\r\n\r\n .services-header-left {\r\n max-width: 880px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE PRINCIPAL\r\n ========================================================= *\/\r\n\r\n .services-title {\r\n margin-bottom: 24px;\r\n\r\n font-size: clamp(38px, 5vw, 70px);\r\n\r\n line-height: 0.98;\r\n\r\n letter-spacing: -3px;\r\n\r\n font-weight: 900;\r\n\r\n color: #111111;\r\n }\r\n\r\n\r\n .services-title span {\r\n color: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n DESCRIPTION\r\n ========================================================= *\/\r\n\r\n .services-description {\r\n max-width: 760px;\r\n\r\n font-size: 17px;\r\n\r\n line-height: 1.75;\r\n\r\n color: #676767;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n NUM\u00c9RO\r\n ========================================================= *\/\r\n\r\n .services-number {\r\n flex-shrink: 0;\r\n\r\n padding-bottom: 8px;\r\n\r\n font-size: 15px;\r\n font-weight: 700;\r\n\r\n color: #999999;\r\n }\r\n\r\n\r\n .services-number strong {\r\n color: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRILLE\r\n ========================================================= *\/\r\n\r\n .services-grid {\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(\r\n 12,\r\n minmax(0, 1fr)\r\n );\r\n\r\n gap: 18px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CARTES SERVICES\r\n ========================================================= *\/\r\n\r\n .service-item {\r\n position: relative;\r\n\r\n min-height: 430px;\r\n\r\n overflow: hidden;\r\n\r\n border-radius: 12px;\r\n\r\n background: #eeeeee;\r\n\r\n cursor: pointer;\r\n\r\n isolation: isolate;\r\n\r\n text-decoration: none;\r\n\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n\r\n .service-item:nth-child(1),\r\n .service-item:nth-child(2),\r\n .service-item:nth-child(3),\r\n .service-item:nth-child(4) {\r\n grid-column: span 6;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n IMAGES\r\n ========================================================= *\/\r\n\r\n .service-item img {\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n object-fit: cover;\r\n\r\n transition:\r\n transform 0.8s cubic-bezier(.2,.6,.2,1),\r\n filter 0.5s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n OVERLAY\r\n ========================================================= *\/\r\n\r\n .service-item::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 1;\r\n\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.88) 0%,\r\n rgba(0,0,0,0.34) 43%,\r\n rgba(0,0,0,0.03) 75%\r\n );\r\n\r\n transition: background 0.4s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n NUM\u00c9RO DE CARTE\r\n ========================================================= *\/\r\n\r\n .service-index {\r\n position: absolute;\r\n\r\n top: 24px;\r\n left: 25px;\r\n\r\n z-index: 4;\r\n\r\n width: 42px;\r\n height: 42px;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 50%;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n border:\r\n 1px solid\r\n rgba(255,255,255,0.35);\r\n\r\n background:\r\n rgba(0,0,0,0.22);\r\n\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n FL\u00c8CHE\r\n ========================================================= *\/\r\n\r\n .service-arrow {\r\n position: absolute;\r\n\r\n top: 22px;\r\n right: 22px;\r\n\r\n z-index: 4;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n border-radius: 50%;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n color: #111111;\r\n\r\n background: #ffffff;\r\n\r\n transform: rotate(-45deg);\r\n\r\n transition:\r\n background 0.3s ease,\r\n color 0.3s ease,\r\n transform 0.4s ease;\r\n }\r\n\r\n\r\n .service-arrow svg {\r\n width: 19px;\r\n height: 19px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENU\r\n ========================================================= *\/\r\n\r\n .service-content {\r\n position: absolute;\r\n\r\n left: 27px;\r\n right: 27px;\r\n bottom: 27px;\r\n\r\n z-index: 4;\r\n }\r\n\r\n\r\n .service-category {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 8px;\r\n\r\n margin-bottom: 10px;\r\n\r\n color:\r\n rgba(255,255,255,0.76);\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n letter-spacing: 1.8px;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n .service-category::before {\r\n content: \"\";\r\n\r\n width: 17px;\r\n height: 2px;\r\n\r\n background: #e00000;\r\n }\r\n\r\n\r\n .service-item-title {\r\n max-width: 650px;\r\n\r\n margin-bottom: 8px;\r\n\r\n font-size: clamp(24px, 3vw, 38px);\r\n\r\n line-height: 1.05;\r\n\r\n font-weight: 800;\r\n\r\n color: #ffffff;\r\n\r\n letter-spacing: -1px;\r\n }\r\n\r\n\r\n .service-item-description {\r\n max-width: 620px;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.55;\r\n\r\n color:\r\n rgba(255,255,255,0.74);\r\n\r\n transform: translateY(8px);\r\n\r\n opacity: 0;\r\n\r\n transition:\r\n transform 0.4s ease,\r\n opacity 0.4s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SURVOL CARTES\r\n ========================================================= *\/\r\n\r\n .service-item:hover img {\r\n transform: scale(1.065);\r\n }\r\n\r\n\r\n .service-item:hover::after {\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.93) 0%,\r\n rgba(0,0,0,0.40) 52%,\r\n rgba(0,0,0,0.08) 100%\r\n );\r\n }\r\n\r\n\r\n .service-item:hover .service-arrow {\r\n color: #ffffff;\r\n\r\n background: #d50000;\r\n\r\n transform: rotate(0deg);\r\n }\r\n\r\n\r\n .service-item:hover .service-item-description {\r\n transform: translateY(0);\r\n\r\n opacity: 1;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BAS DE SECTION\r\n ========================================================= *\/\r\n\r\n .services-footer {\r\n display: flex;\r\n\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n gap: 25px;\r\n\r\n margin-top: 38px;\r\n\r\n padding-top: 28px;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n }\r\n\r\n\r\n .services-footer-text {\r\n color: #707070;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.6;\r\n }\r\n\r\n\r\n .services-footer-text strong {\r\n color: #111111;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTON D\u00c9COUVRIR MES SERVICES\r\n ========================================================= *\/\r\n\r\n .services-button {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n min-height: 50px;\r\n\r\n padding: 0 25px;\r\n\r\n border-radius: 6px;\r\n\r\n background: #111111;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 13px;\r\n font-weight: 800;\r\n\r\n \/*\r\n * Aucun soulignement\r\n *\/\r\n text-decoration: none !important;\r\n\r\n white-space: nowrap;\r\n\r\n transition:\r\n background 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n\r\n \/*\r\n * Emp\u00eache WordPress \/ Astra \/ Elementor\r\n * de souligner le bouton dans tous ses \u00e9tats\r\n *\/\r\n\r\n .services-button:link,\r\n .services-button:visited,\r\n .services-button:hover,\r\n .services-button:focus,\r\n .services-button:active {\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .services-button:hover {\r\n background: #d50000;\r\n\r\n color: #ffffff;\r\n\r\n transform: translateY(-2px);\r\n }\r\n\r\n\r\n .services-button:visited {\r\n color: #ffffff;\r\n }\r\n\r\n\r\n .services-button svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TABLETTE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1000px) {\r\n\r\n .services-section {\r\n padding:\r\n 70px\r\n 22px\r\n 85px;\r\n }\r\n\r\n\r\n .services-header {\r\n align-items: flex-start;\r\n\r\n flex-direction: column;\r\n\r\n gap: 15px;\r\n\r\n padding:\r\n 45px\r\n 42px;\r\n }\r\n\r\n\r\n .services-header::after {\r\n left: 42px;\r\n }\r\n\r\n\r\n .services-number {\r\n display: none;\r\n }\r\n\r\n\r\n .services-grid {\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0,1fr)\r\n );\r\n }\r\n\r\n\r\n .service-item,\r\n .service-item:nth-child(1),\r\n .service-item:nth-child(2),\r\n .service-item:nth-child(3),\r\n .service-item:nth-child(4) {\r\n grid-column: auto;\r\n\r\n min-height: 410px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 650px) {\r\n\r\n\r\n .services-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 45px\r\n 0\r\n 60px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .services-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE MES SERVICES\r\n ====================================================== *\/\r\n\r\n .services-top-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 12px;\r\n\r\n padding:\r\n 17px\r\n 12px;\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n .services-top-band::before {\r\n width: 52px;\r\n }\r\n\r\n\r\n .services-top-title {\r\n gap: 9px;\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: 3px;\r\n }\r\n\r\n\r\n .services-top-title::before,\r\n .services-top-title::after {\r\n width: 25px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE PRINCIPALE\r\n ====================================================== *\/\r\n\r\n .services-header {\r\n width: 94%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 30px;\r\n\r\n padding:\r\n 32px\r\n 16px\r\n 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(0,0,0,0.05);\r\n }\r\n\r\n\r\n .services-header::after {\r\n left: 16px;\r\n\r\n width: 52px;\r\n }\r\n\r\n\r\n .services-header-left {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n\r\n .services-title {\r\n margin-bottom: 18px;\r\n\r\n font-size: 39px;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n\r\n .services-description {\r\n width: 100%;\r\n max-width: none;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.65;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARROUSEL MOBILE\r\n ====================================================== *\/\r\n\r\n .services-grid {\r\n display: flex;\r\n\r\n grid-template-columns: none;\r\n\r\n gap: 14px;\r\n\r\n width: 100%;\r\n max-width: none;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n padding:\r\n 0\r\n 12px\r\n 8px;\r\n\r\n margin: 0;\r\n\r\n scroll-snap-type:\r\n x mandatory;\r\n\r\n scroll-behavior:\r\n smooth;\r\n\r\n scrollbar-width: none;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n }\r\n\r\n\r\n .services-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n .service-item,\r\n .service-item:nth-child(1),\r\n .service-item:nth-child(2),\r\n .service-item:nth-child(3),\r\n .service-item:nth-child(4) {\r\n\r\n flex:\r\n 0 0\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n width:\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n min-width:\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n max-width:\r\n calc(\r\n 90vw\r\n - 24px\r\n );\r\n\r\n height: 430px;\r\n min-height: 430px;\r\n\r\n grid-column: auto;\r\n\r\n scroll-snap-align:\r\n center;\r\n\r\n scroll-snap-stop:\r\n always;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTES MOBILE\r\n ====================================================== *\/\r\n\r\n .service-index {\r\n top: 17px;\r\n left: 17px;\r\n\r\n width: 37px;\r\n height: 37px;\r\n }\r\n\r\n\r\n .service-arrow {\r\n top: 17px;\r\n right: 17px;\r\n\r\n width: 43px;\r\n height: 43px;\r\n }\r\n\r\n\r\n .service-content {\r\n left: 20px;\r\n right: 20px;\r\n bottom: 22px;\r\n }\r\n\r\n\r\n .service-item-title {\r\n font-size: 27px;\r\n }\r\n\r\n\r\n .service-item-description {\r\n margin-top: 4px;\r\n\r\n font-size: 13px;\r\n\r\n opacity: 1;\r\n\r\n transform: none;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BAS SECTION\r\n ====================================================== *\/\r\n\r\n .services-footer {\r\n width: 100%;\r\n\r\n align-items: flex-start;\r\n\r\n flex-direction: column;\r\n\r\n gap: 18px;\r\n\r\n margin:\r\n 28px\r\n 0\r\n 0;\r\n\r\n padding:\r\n 22px\r\n 12px\r\n 0;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n }\r\n\r\n\r\n .services-footer-text {\r\n width: 100%;\r\n }\r\n\r\n\r\n .services-button {\r\n width: 100%;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .services-button:link,\r\n .services-button:visited,\r\n .services-button:hover,\r\n .services-button:focus,\r\n .services-button:active {\r\n text-decoration: none !important;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section\r\n class=\"services-section\"\r\n id=\"services\"\r\n>\r\n\r\n <div class=\"services-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"services-top-band\">\r\n\r\n <div class=\"services-top-title\">\r\n Mes services\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <header class=\"services-header\">\r\n\r\n <div class=\"services-header-left\">\r\n\r\n\r\n <h2 class=\"services-title\">\r\n\r\n Une vision.<br>\r\n\r\n <span>\r\n Une expertise.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p class=\"services-description\">\r\n\r\n De la prise de vue \u00e0 la post-production,\r\n je vous accompagne dans la cr\u00e9ation de contenus\r\n visuels professionnels en photographie,\r\n vid\u00e9ographie, montage vid\u00e9o et motion design.\r\n\r\n <\/p>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"services-number\">\r\n\r\n <strong>02<\/strong>\r\n \/ Expertise\r\n\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"services-grid\"\r\n id=\"servicesSlider\"\r\n >\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service photographie\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 01\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Cr\u00e9ation visuelle\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Photographie\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Portraits, \u00e9v\u00e9nements, corporate,\r\n lifestyle et cr\u00e9ations photographiques\r\n con\u00e7ues pour mettre en valeur votre image.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service vid\u00e9ographie\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 02\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Production vid\u00e9o\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Vid\u00e9ographie\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Films promotionnels, \u00e9v\u00e9nements,\r\n interviews et contenus digitaux\r\n r\u00e9alis\u00e9s pour raconter votre histoire.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service montage vid\u00e9o\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 03\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Post-production\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Montage vid\u00e9o\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Storytelling, rythme, transitions,\r\n colorim\u00e9trie et post-production\r\n pour transformer vos images\r\n en contenus impactants.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"service-item\"\r\n >\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Service motion design\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"service-index\">\r\n 04\r\n <\/div>\r\n\r\n\r\n <div class=\"service-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"service-content\">\r\n\r\n <div class=\"service-category\">\r\n Animation graphique\r\n <\/div>\r\n\r\n\r\n <h3 class=\"service-item-title\">\r\n Motion Design\r\n <\/h3>\r\n\r\n\r\n <p class=\"service-item-description\">\r\n\r\n Logos anim\u00e9s, typographies,\r\n habillages vid\u00e9o et animations graphiques\r\n pour donner du mouvement\r\n \u00e0 votre identit\u00e9 visuelle.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div class=\"services-footer\">\r\n\r\n\r\n <p class=\"services-footer-text\">\r\n\r\n <strong>\r\n Un accompagnement complet pour vos projets visuels\r\n <\/strong>\r\n\r\n <br>\r\n\r\n De la conception \u00e0 la livraison finale,\r\n chaque r\u00e9alisation est adapt\u00e9e\r\n \u00e0 votre identit\u00e9 et \u00e0 vos objectifs.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/nos-services\/\"\r\n class=\"services-button\"\r\n >\r\n\r\n D\u00e9couvrir mes services\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n \"DOMContentLoaded\",\r\n function () {\r\n\r\n const slider =\r\n document.getElementById(\r\n \"servicesSlider\"\r\n );\r\n\r\n\r\n if (!slider) {\r\n return;\r\n }\r\n\r\n\r\n let autoScrollTimer = null;\r\n let restartTimer = null;\r\n\r\n\r\n function getCards() {\r\n\r\n return Array.from(\r\n slider.querySelectorAll(\r\n \".service-item\"\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function goToNextCard() {\r\n\r\n if (\r\n window.innerWidth > 650\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const cards = getCards();\r\n\r\n\r\n if (\r\n cards.length <= 1\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const sliderRect =\r\n slider.getBoundingClientRect();\r\n\r\n\r\n let currentIndex = 0;\r\n let smallestDistance = Infinity;\r\n\r\n\r\n cards.forEach(\r\n function (\r\n card,\r\n index\r\n ) {\r\n\r\n const cardRect =\r\n card.getBoundingClientRect();\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n cardRect.left -\r\n sliderRect.left -\r\n 12\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n smallestDistance\r\n ) {\r\n\r\n smallestDistance =\r\n distance;\r\n\r\n currentIndex =\r\n index;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n let nextIndex =\r\n currentIndex + 1;\r\n\r\n\r\n if (\r\n nextIndex >=\r\n cards.length\r\n ) {\r\n\r\n nextIndex = 0;\r\n\r\n }\r\n\r\n\r\n const nextCard =\r\n cards[nextIndex];\r\n\r\n\r\n slider.scrollTo({\r\n\r\n left:\r\n nextCard.offsetLeft -\r\n 12,\r\n\r\n behavior:\r\n \"smooth\"\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n function startAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n autoScrollTimer =\r\n setInterval(\r\n goToNextCard,\r\n 3200\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function stopAutoScroll() {\r\n\r\n if (\r\n autoScrollTimer\r\n ) {\r\n\r\n clearInterval(\r\n autoScrollTimer\r\n );\r\n\r\n autoScrollTimer =\r\n null;\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function restartAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n restartTimer\r\n ) {\r\n\r\n clearTimeout(\r\n restartTimer\r\n );\r\n\r\n }\r\n\r\n\r\n restartTimer =\r\n setTimeout(\r\n startAutoScroll,\r\n 3500\r\n );\r\n\r\n }\r\n\r\n\r\n slider.addEventListener(\r\n \"touchstart\",\r\n function () {\r\n\r\n stopAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"touchend\",\r\n function () {\r\n\r\n restartAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerdown\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n stopAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerup\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n restartAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n \"resize\",\r\n function () {\r\n\r\n startAutoScroll();\r\n\r\n }\r\n );\r\n\r\n\r\n startAutoScroll();\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-33bcce6 e-con e-atomic-element e-flexbox-base e-7c3a34e \" data-id=\"33bcce6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"33bcce6\">\n \t\t<div class=\"elementor-element elementor-element-baf9a17 elementor-widget elementor-widget-html\" data-id=\"baf9a17\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<title>Portfolio | R\u00e9alistiC<\/title>\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n RESET\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\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nbody {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #151515;\r\n overflow-x: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SECTION PORTFOLIO\r\n========================================================= *\/\r\n\r\n.portfolio-section {\r\n width: 100%;\r\n background: #ffffff;\r\n padding: 95px 24px 105px;\r\n overflow: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CONTENEUR\r\n========================================================= *\/\r\n\r\n.portfolio-container {\r\n width: 100%;\r\n max-width: 1380px;\r\n margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BANDE TITRE PORTFOLIO\r\n========================================================= *\/\r\n\r\n.portfolio-title-band {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n margin-bottom: 18px;\r\n\r\n padding: 18px 25px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n box-shadow:\r\n 0 8px 24px rgba(0,0,0,0.035);\r\n}\r\n\r\n\r\n.portfolio-title-band h2 {\r\n position: relative;\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 14px;\r\n\r\n margin: 0;\r\n\r\n color: #111111;\r\n\r\n font-size: 22px;\r\n line-height: 1;\r\n\r\n font-weight: 900;\r\n\r\n letter-spacing: 2px;\r\n\r\n text-align: center;\r\n text-transform: uppercase;\r\n}\r\n\r\n\r\n.portfolio-title-band h2::before,\r\n.portfolio-title-band h2::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 2px;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 10px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BANDE INTRODUCTION\r\n========================================================= *\/\r\n\r\n.portfolio-header {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n\r\n gap: 50px;\r\n\r\n margin-bottom: 42px;\r\n\r\n padding: 55px 58px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top: 1px solid #ebe7e7;\r\n border-bottom: 1px solid #ebe7e7;\r\n\r\n border-left: 1px solid #d50000;\r\n border-right: 1px solid #d50000;\r\n\r\n border-radius: 24px;\r\n\r\n box-shadow:\r\n 0 12px 40px rgba(0, 0, 0, 0.045);\r\n\r\n overflow: hidden;\r\n}\r\n\r\n\r\n.portfolio-header::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 58px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 0 0 4px 4px;\r\n}\r\n\r\n\r\n.portfolio-header-left {\r\n max-width: 820px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TITRE PRINCIPAL\r\n========================================================= *\/\r\n\r\n.portfolio-title {\r\n margin-bottom: 24px;\r\n\r\n font-size: clamp(38px, 5vw, 70px);\r\n\r\n line-height: 0.98;\r\n\r\n letter-spacing: -3px;\r\n\r\n font-weight: 900;\r\n\r\n color: #111111;\r\n}\r\n\r\n\r\n.portfolio-title span {\r\n color: #d50000;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n DESCRIPTION\r\n========================================================= *\/\r\n\r\n.portfolio-description {\r\n max-width: 720px;\r\n\r\n font-size: 17px;\r\n line-height: 1.75;\r\n\r\n color: #676767;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n NUM\u00c9RO\r\n========================================================= *\/\r\n\r\n.portfolio-number {\r\n flex-shrink: 0;\r\n\r\n padding-bottom: 8px;\r\n\r\n font-size: 15px;\r\n font-weight: 700;\r\n\r\n color: #999999;\r\n}\r\n\r\n\r\n.portfolio-number strong {\r\n color: #d50000;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FILTRES\r\n========================================================= *\/\r\n\r\n.portfolio-filters {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n\r\n gap: 10px;\r\n\r\n margin-bottom: 35px;\r\n}\r\n\r\n\r\n.portfolio-filter {\r\n appearance: none;\r\n\r\n border: 1px solid #e1e1e1;\r\n\r\n background: #ffffff;\r\n\r\n color: #555555;\r\n\r\n padding: 12px 21px;\r\n\r\n border-radius: 50px;\r\n\r\n font-size: 13px;\r\n font-weight: 700;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n background 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease,\r\n transform 0.3s ease;\r\n}\r\n\r\n\r\n.portfolio-filter:hover {\r\n color: #111111;\r\n\r\n border-color: #bcbcbc;\r\n\r\n transform: translateY(-2px);\r\n}\r\n\r\n\r\n.portfolio-filter.active {\r\n color: #ffffff;\r\n\r\n border-color: #d50000;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #ee0000,\r\n #a80000\r\n );\r\n\r\n box-shadow:\r\n 0 8px 20px rgba(190, 0, 0, 0.17);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n GRILLE\r\n========================================================= *\/\r\n\r\n.portfolio-grid {\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(12, minmax(0, 1fr));\r\n\r\n gap: 18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-item {\r\n position: relative;\r\n\r\n min-height: 410px;\r\n\r\n overflow: hidden;\r\n\r\n border-radius: 10px;\r\n\r\n background: #eeeeee;\r\n\r\n cursor: pointer;\r\n\r\n isolation: isolate;\r\n\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease;\r\n}\r\n\r\n\r\n.portfolio-item:nth-child(1) {\r\n grid-column: span 7;\r\n}\r\n\r\n.portfolio-item:nth-child(2) {\r\n grid-column: span 5;\r\n}\r\n\r\n.portfolio-item:nth-child(3) {\r\n grid-column: span 4;\r\n}\r\n\r\n.portfolio-item:nth-child(4) {\r\n grid-column: span 8;\r\n}\r\n\r\n.portfolio-item:nth-child(5) {\r\n grid-column: span 7;\r\n}\r\n\r\n.portfolio-item:nth-child(6) {\r\n grid-column: span 5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n LIEN CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-card-link {\r\n position: absolute;\r\n inset: 0;\r\n\r\n z-index: 5;\r\n\r\n display: block;\r\n\r\n text-decoration: none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n IMAGE\r\n========================================================= *\/\r\n\r\n.portfolio-item img {\r\n position: absolute;\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n object-fit: cover;\r\n\r\n transition:\r\n transform 0.8s cubic-bezier(.2,.6,.2,1),\r\n filter 0.5s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n OVERLAY\r\n========================================================= *\/\r\n\r\n.portfolio-item::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n inset: 0;\r\n\r\n z-index: 1;\r\n\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.86) 0%,\r\n rgba(0,0,0,0.32) 43%,\r\n rgba(0,0,0,0.03) 75%\r\n );\r\n\r\n transition:\r\n background 0.4s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n NUM\u00c9RO CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-index {\r\n position: absolute;\r\n\r\n top: 24px;\r\n left: 25px;\r\n\r\n z-index: 4;\r\n\r\n width: 42px;\r\n height: 42px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 50%;\r\n\r\n color: #ffffff;\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n border:\r\n 1px solid rgba(255,255,255,0.35);\r\n\r\n background:\r\n rgba(0,0,0,0.22);\r\n\r\n backdrop-filter:\r\n blur(8px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FL\u00c8CHE\r\n========================================================= *\/\r\n\r\n.portfolio-arrow {\r\n position: absolute;\r\n\r\n top: 22px;\r\n right: 22px;\r\n\r\n z-index: 4;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n border-radius: 50%;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n color: #111111;\r\n\r\n background: #ffffff;\r\n\r\n transform:\r\n rotate(-45deg);\r\n\r\n transition:\r\n background 0.3s ease,\r\n color 0.3s ease,\r\n transform 0.4s ease;\r\n}\r\n\r\n\r\n.portfolio-arrow svg {\r\n width: 19px;\r\n height: 19px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CONTENU CARTE\r\n========================================================= *\/\r\n\r\n.portfolio-content {\r\n position: absolute;\r\n\r\n left: 27px;\r\n right: 27px;\r\n bottom: 27px;\r\n\r\n z-index: 4;\r\n}\r\n\r\n\r\n.portfolio-category {\r\n display: flex;\r\n align-items: center;\r\n\r\n gap: 8px;\r\n\r\n margin-bottom: 10px;\r\n\r\n color:\r\n rgba(255,255,255,0.76);\r\n\r\n font-size: 11px;\r\n font-weight: 800;\r\n\r\n letter-spacing: 1.8px;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n\r\n.portfolio-category::before {\r\n content: \"\";\r\n\r\n width: 17px;\r\n height: 2px;\r\n\r\n background: #e00000;\r\n}\r\n\r\n\r\n.portfolio-item-title {\r\n max-width: 650px;\r\n\r\n margin-bottom: 8px;\r\n\r\n font-size:\r\n clamp(24px, 3vw, 38px);\r\n\r\n line-height: 1.05;\r\n\r\n font-weight: 800;\r\n\r\n color: #ffffff;\r\n\r\n letter-spacing: -1px;\r\n}\r\n\r\n\r\n.portfolio-item-description {\r\n max-width: 620px;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.55;\r\n\r\n color:\r\n rgba(255,255,255,0.74);\r\n\r\n transform:\r\n translateY(8px);\r\n\r\n opacity: 0;\r\n\r\n transition:\r\n transform 0.4s ease,\r\n opacity 0.4s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SURVOL\r\n========================================================= *\/\r\n\r\n.portfolio-item:hover img {\r\n transform:\r\n scale(1.065);\r\n}\r\n\r\n\r\n.portfolio-item:hover::after {\r\n background:\r\n linear-gradient(\r\n to top,\r\n rgba(0,0,0,0.92) 0%,\r\n rgba(0,0,0,0.39) 52%,\r\n rgba(0,0,0,0.08) 100%\r\n );\r\n}\r\n\r\n\r\n.portfolio-item:hover\r\n.portfolio-arrow {\r\n color: #ffffff;\r\n\r\n background: #d50000;\r\n\r\n transform:\r\n rotate(0deg);\r\n}\r\n\r\n\r\n.portfolio-item:hover\r\n.portfolio-item-description {\r\n transform:\r\n translateY(0);\r\n\r\n opacity: 1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FILTRE\r\n========================================================= *\/\r\n\r\n.portfolio-item.hide {\r\n display: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BAS DE SECTION\r\n========================================================= *\/\r\n\r\n.portfolio-footer {\r\n display: flex;\r\n\r\n justify-content:\r\n space-between;\r\n\r\n align-items: center;\r\n\r\n gap: 25px;\r\n\r\n margin-top: 38px;\r\n\r\n padding-top: 28px;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n}\r\n\r\n\r\n.portfolio-footer-text {\r\n color: #707070;\r\n\r\n font-size: 14px;\r\n\r\n line-height: 1.6;\r\n}\r\n\r\n\r\n.portfolio-footer-text strong {\r\n color: #111111;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n BOUTON\r\n========================================================= *\/\r\n\r\n.portfolio-button {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n min-height: 50px;\r\n\r\n padding:\r\n 0 25px;\r\n\r\n border-radius: 6px;\r\n\r\n background: #111111;\r\n\r\n color: #ffffff !important;\r\n\r\n font-size: 13px;\r\n\r\n font-weight: 800;\r\n\r\n text-decoration: none !important;\r\n\r\n white-space: nowrap;\r\n\r\n transition:\r\n background 0.3s ease,\r\n transform 0.3s ease;\r\n}\r\n\r\n\r\n.portfolio-button:link,\r\n.portfolio-button:visited,\r\n.portfolio-button:hover,\r\n.portfolio-button:focus,\r\n.portfolio-button:active {\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n}\r\n\r\n\r\n.portfolio-button:hover,\r\n.portfolio-button:focus {\r\n background: #d50000;\r\n\r\n transform:\r\n translateY(-2px);\r\n}\r\n\r\n\r\n.portfolio-button svg {\r\n width: 17px;\r\n height: 17px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TABLETTE\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n .portfolio-section {\r\n padding:\r\n 75px 22px 85px;\r\n }\r\n\r\n\r\n .portfolio-title-band {\r\n padding:\r\n 17px 22px;\r\n\r\n margin-bottom: 16px;\r\n }\r\n\r\n\r\n .portfolio-title-band h2 {\r\n font-size: 20px;\r\n }\r\n\r\n\r\n .portfolio-header {\r\n align-items:\r\n flex-start;\r\n\r\n flex-direction:\r\n column;\r\n\r\n gap: 15px;\r\n\r\n padding:\r\n 45px 42px;\r\n }\r\n\r\n\r\n .portfolio-header::after {\r\n left: 42px;\r\n }\r\n\r\n\r\n .portfolio-number {\r\n display: none;\r\n }\r\n\r\n\r\n .portfolio-grid {\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0,1fr)\r\n );\r\n }\r\n\r\n\r\n .portfolio-item,\r\n .portfolio-item:nth-child(1),\r\n .portfolio-item:nth-child(2),\r\n .portfolio-item:nth-child(3),\r\n .portfolio-item:nth-child(4),\r\n .portfolio-item:nth-child(5),\r\n .portfolio-item:nth-child(6) {\r\n\r\n grid-column: auto;\r\n\r\n min-height: 410px;\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 650px) {\r\n\r\n .portfolio-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 52px 0 60px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .portfolio-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE TITRE PORTFOLIO\r\n ====================================================== *\/\r\n\r\n .portfolio-title-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0 auto 14px;\r\n\r\n padding:\r\n 16px 12px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 7px 20px\r\n rgba(0,0,0,0.035);\r\n }\r\n\r\n\r\n .portfolio-title-band h2 {\r\n gap: 10px;\r\n\r\n font-size: 17px;\r\n\r\n letter-spacing: 1.8px;\r\n }\r\n\r\n\r\n .portfolio-title-band h2::before,\r\n .portfolio-title-band h2::after {\r\n width: 25px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE INTRODUCTION\r\n ====================================================== *\/\r\n\r\n .portfolio-header {\r\n width: 94%;\r\n\r\n margin:\r\n 0 auto 30px;\r\n\r\n padding:\r\n 32px 16px 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(0,0,0,0.05);\r\n }\r\n\r\n\r\n .portfolio-header::after {\r\n left: 16px;\r\n\r\n width: 52px;\r\n }\r\n\r\n\r\n .portfolio-header-left {\r\n width: 100%;\r\n\r\n max-width: none;\r\n }\r\n\r\n\r\n .portfolio-title {\r\n margin-bottom: 18px;\r\n\r\n font-size: 39px;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n\r\n .portfolio-description {\r\n width: 100%;\r\n\r\n max-width: none;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.65;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n FILTRES\r\n ====================================================== *\/\r\n\r\n .portfolio-filters {\r\n display: flex;\r\n\r\n flex-wrap: nowrap;\r\n\r\n width: 100%;\r\n\r\n max-width: none;\r\n\r\n overflow-x: auto;\r\n\r\n padding:\r\n 0 12px 6px;\r\n\r\n margin:\r\n 0 0 23px;\r\n\r\n scrollbar-width: none;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n }\r\n\r\n\r\n .portfolio-filters::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n .portfolio-filter {\r\n flex:\r\n 0 0 auto;\r\n\r\n padding:\r\n 11px 18px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARROUSEL\r\n ====================================================== *\/\r\n\r\n .portfolio-grid {\r\n display: flex;\r\n\r\n grid-template-columns:\r\n none;\r\n\r\n gap: 14px;\r\n\r\n width: 100%;\r\n\r\n max-width: none;\r\n\r\n overflow-x: auto;\r\n\r\n overflow-y: hidden;\r\n\r\n padding:\r\n 0 12px 8px;\r\n\r\n margin: 0;\r\n\r\n scroll-snap-type:\r\n x mandatory;\r\n\r\n scroll-behavior:\r\n smooth;\r\n\r\n scrollbar-width:\r\n none;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n }\r\n\r\n\r\n .portfolio-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n .portfolio-item,\r\n .portfolio-item:nth-child(1),\r\n .portfolio-item:nth-child(2),\r\n .portfolio-item:nth-child(3),\r\n .portfolio-item:nth-child(4),\r\n .portfolio-item:nth-child(5),\r\n .portfolio-item:nth-child(6) {\r\n\r\n flex:\r\n 0 0 calc(90vw - 24px);\r\n\r\n width:\r\n calc(90vw - 24px);\r\n\r\n min-width:\r\n calc(90vw - 24px);\r\n\r\n max-width:\r\n calc(90vw - 24px);\r\n\r\n height: 430px;\r\n\r\n min-height: 430px;\r\n\r\n grid-column: auto;\r\n\r\n scroll-snap-align:\r\n center;\r\n\r\n scroll-snap-stop:\r\n always;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTE MOBILE\r\n ====================================================== *\/\r\n\r\n .portfolio-index {\r\n top: 17px;\r\n\r\n left: 17px;\r\n\r\n width: 37px;\r\n\r\n height: 37px;\r\n }\r\n\r\n\r\n .portfolio-arrow {\r\n top: 17px;\r\n\r\n right: 17px;\r\n\r\n width: 43px;\r\n\r\n height: 43px;\r\n }\r\n\r\n\r\n .portfolio-content {\r\n left: 20px;\r\n\r\n right: 20px;\r\n\r\n bottom: 22px;\r\n }\r\n\r\n\r\n .portfolio-item-title {\r\n font-size: 27px;\r\n }\r\n\r\n\r\n .portfolio-item-description {\r\n margin-top: 4px;\r\n\r\n font-size: 13px;\r\n\r\n opacity: 1;\r\n\r\n transform: none;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BAS PORTFOLIO\r\n ====================================================== *\/\r\n\r\n .portfolio-footer {\r\n width: 100%;\r\n\r\n align-items:\r\n flex-start;\r\n\r\n flex-direction:\r\n column;\r\n\r\n gap: 18px;\r\n\r\n margin:\r\n 28px 0 0;\r\n\r\n padding:\r\n 22px 12px 0;\r\n\r\n border-top:\r\n 1px solid #e9e9e9;\r\n }\r\n\r\n\r\n .portfolio-footer-text {\r\n width: 100%;\r\n }\r\n\r\n\r\n .portfolio-button {\r\n width: 100%;\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section\r\n class=\"portfolio-section\"\r\n id=\"portfolio\"\r\n>\r\n\r\n<div class=\"portfolio-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"portfolio-title-band\">\r\n\r\n <h2>\r\n Portfolio\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <header class=\"portfolio-header\">\r\n\r\n <div class=\"portfolio-header-left\">\r\n\r\n <h2 class=\"portfolio-title\">\r\n\r\n Des images qui<br>\r\n\r\n <span>\r\n racontent.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p class=\"portfolio-description\">\r\n\r\n D\u00e9couvrez une s\u00e9lection de projets en photographie,\r\n vid\u00e9ographie, montage vid\u00e9o et motion design.\r\n Chaque r\u00e9alisation est pens\u00e9e pour cr\u00e9er une identit\u00e9\r\n visuelle forte et donner vie \u00e0 votre histoire.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-number\">\r\n\r\n <strong>\r\n 01\r\n <\/strong>\r\n\r\n \/ R\u00e9alisations\r\n\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n\r\n \r\n\r\n <div class=\"portfolio-filters\">\r\n\r\n\r\n <button\r\n class=\"portfolio-filter active\"\r\n data-filter=\"all\"\r\n type=\"button\"\r\n >\r\n Tous les projets\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"photo\"\r\n type=\"button\"\r\n >\r\n Photographie\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"video\"\r\n type=\"button\"\r\n >\r\n Vid\u00e9ographie\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"montage\"\r\n type=\"button\"\r\n >\r\n Montage vid\u00e9o\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"portfolio-filter\"\r\n data-filter=\"motion\"\r\n type=\"button\"\r\n >\r\n Motion Design\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"portfolio-grid\"\r\n id=\"portfolioSlider\"\r\n >\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"photo\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Portrait et Lifestyle\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Projet de photographie portrait\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 01\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Photographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Portrait & Lifestyle\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Direction artistique et photographie pour\r\n une s\u00e9rie de portraits \u00e0 l'identit\u00e9 moderne\r\n et authentique.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"video\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Production cin\u00e9matographique\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1400&q=85\"\r\n alt=\"Production vid\u00e9o cin\u00e9matographique\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 02\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Vid\u00e9ographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Production cin\u00e9matographique\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Cr\u00e9ation d'un univers visuel immersif\r\n pour une production vid\u00e9o \u00e0 destination\r\n du digital.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"photo\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Image Corporate\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=1200&q=85\"\r\n alt=\"Photographie corporate\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 03\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Photographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Image Corporate\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Des portraits professionnels con\u00e7us pour\r\n renforcer l'image et la personnalit\u00e9\r\n d'une marque.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"montage\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Storytelling et Editing\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Projet de montage vid\u00e9o\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 04\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Montage vid\u00e9o\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Storytelling & Editing\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Montage dynamique, rythme, colorim\u00e9trie\r\n et narration pour transformer des images\r\n en une v\u00e9ritable histoire.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"motion\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Identit\u00e9 en mouvement\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1600&q=85\"\r\n alt=\"Cr\u00e9ation Motion Design\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 05\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Motion Design\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Identit\u00e9 en mouvement\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Animation graphique et cr\u00e9ation visuelle\r\n pour donner du mouvement et du caract\u00e8re\r\n aux identit\u00e9s de marque.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article\r\n class=\"portfolio-item\"\r\n data-category=\"video\"\r\n >\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-card-link\"\r\n aria-label=\"Voir le portfolio - Film \u00e9v\u00e9nementiel\"\r\n ><\/a>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1524250502761-1ac6f2e30d43?auto=format&fit=crop&w=1400&q=85\"\r\n alt=\"Film \u00e9v\u00e9nementiel\"\r\n loading=\"lazy\"\r\n >\r\n\r\n\r\n <div class=\"portfolio-index\">\r\n 06\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-arrow\">\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M5 12h14\"><\/path>\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"portfolio-content\">\r\n\r\n <div class=\"portfolio-category\">\r\n Vid\u00e9ographie\r\n <\/div>\r\n\r\n\r\n <h3 class=\"portfolio-item-title\">\r\n Film \u00e9v\u00e9nementiel\r\n <\/h3>\r\n\r\n\r\n <p class=\"portfolio-item-description\">\r\n Captation et r\u00e9alisation vid\u00e9o pour\r\n conserver l'intensit\u00e9 et l'\u00e9motion\r\n d'un \u00e9v\u00e9nement unique.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"portfolio-footer\">\r\n\r\n\r\n <p class=\"portfolio-footer-text\">\r\n\r\n <strong>\r\n D\u00e9couvrez l\u2019ensemble de mes r\u00e9alisations\r\n <\/strong>\r\n\r\n <br>\r\n\r\n Explorez davantage de projets en photographie,\r\n vid\u00e9o, montage et motion design.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/portfolio\/\"\r\n class=\"portfolio-button\"\r\n >\r\n\r\n Voir tout le portfolio\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n\r\n <path d=\"M5 12h14\"><\/path>\r\n\r\n <path d=\"m13 6 6 6-6 6\"><\/path>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n \"DOMContentLoaded\",\r\n function () {\r\n\r\n const filters =\r\n document.querySelectorAll(\r\n \".portfolio-filter\"\r\n );\r\n\r\n const items =\r\n document.querySelectorAll(\r\n \".portfolio-item\"\r\n );\r\n\r\n const slider =\r\n document.getElementById(\r\n \"portfolioSlider\"\r\n );\r\n\r\n\r\n \/* =========================================================\r\n FILTRES\r\n ========================================================= *\/\r\n\r\n filters.forEach(\r\n function (button) {\r\n\r\n button.addEventListener(\r\n \"click\",\r\n function () {\r\n\r\n const category =\r\n this.getAttribute(\r\n \"data-filter\"\r\n );\r\n\r\n\r\n filters.forEach(\r\n function (filter) {\r\n\r\n filter.classList.remove(\r\n \"active\"\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n this.classList.add(\r\n \"active\"\r\n );\r\n\r\n\r\n items.forEach(\r\n function (item) {\r\n\r\n const itemCategory =\r\n item.getAttribute(\r\n \"data-category\"\r\n );\r\n\r\n\r\n if (\r\n category === \"all\" ||\r\n category === itemCategory\r\n ) {\r\n\r\n item.classList.remove(\r\n \"hide\"\r\n );\r\n\r\n } else {\r\n\r\n item.classList.add(\r\n \"hide\"\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n slider.scrollTo({\r\n left: 0,\r\n behavior: \"smooth\"\r\n });\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =========================================================\r\n D\u00c9FILEMENT AUTOMATIQUE MOBILE\r\n ========================================================= *\/\r\n\r\n let autoScrollTimer = null;\r\n\r\n let restartTimer = null;\r\n\r\n\r\n function getVisibleCards() {\r\n\r\n return Array.from(\r\n slider.querySelectorAll(\r\n \".portfolio-item:not(.hide)\"\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function goToNextCard() {\r\n\r\n if (\r\n window.innerWidth > 650\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const cards =\r\n getVisibleCards();\r\n\r\n\r\n if (\r\n cards.length <= 1\r\n ) {\r\n return;\r\n }\r\n\r\n\r\n const sliderRect =\r\n slider.getBoundingClientRect();\r\n\r\n\r\n let currentIndex = 0;\r\n\r\n let smallestDistance =\r\n Infinity;\r\n\r\n\r\n cards.forEach(\r\n function (card, index) {\r\n\r\n const cardRect =\r\n card.getBoundingClientRect();\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n cardRect.left -\r\n sliderRect.left -\r\n 12\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n smallestDistance\r\n ) {\r\n\r\n smallestDistance =\r\n distance;\r\n\r\n currentIndex =\r\n index;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n let nextIndex =\r\n currentIndex + 1;\r\n\r\n\r\n if (\r\n nextIndex >=\r\n cards.length\r\n ) {\r\n\r\n nextIndex = 0;\r\n\r\n }\r\n\r\n\r\n const nextCard =\r\n cards[nextIndex];\r\n\r\n\r\n slider.scrollTo({\r\n\r\n left:\r\n nextCard.offsetLeft - 12,\r\n\r\n behavior:\r\n \"smooth\"\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n function startAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n autoScrollTimer =\r\n setInterval(\r\n goToNextCard,\r\n 3200\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function stopAutoScroll() {\r\n\r\n if (\r\n autoScrollTimer\r\n ) {\r\n\r\n clearInterval(\r\n autoScrollTimer\r\n );\r\n\r\n autoScrollTimer =\r\n null;\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function restartAutoScroll() {\r\n\r\n stopAutoScroll();\r\n\r\n\r\n if (\r\n restartTimer\r\n ) {\r\n\r\n clearTimeout(\r\n restartTimer\r\n );\r\n\r\n }\r\n\r\n\r\n restartTimer =\r\n setTimeout(\r\n startAutoScroll,\r\n 3500\r\n );\r\n\r\n }\r\n\r\n\r\n slider.addEventListener(\r\n \"touchstart\",\r\n function () {\r\n\r\n stopAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"touchend\",\r\n function () {\r\n\r\n restartAutoScroll();\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerdown\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n stopAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n slider.addEventListener(\r\n \"pointerup\",\r\n function () {\r\n\r\n if (\r\n window.innerWidth <= 650\r\n ) {\r\n\r\n restartAutoScroll();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n \"resize\",\r\n function () {\r\n\r\n startAutoScroll();\r\n\r\n }\r\n );\r\n\r\n\r\n startAutoScroll();\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cc29375 e-con e-atomic-element e-flexbox-base e-036fdd2 \" data-id=\"cc29375\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cc29375\">\n \t\t<div class=\"elementor-element elementor-element-cecfc75 elementor-widget elementor-widget-html\" data-id=\"cecfc75\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n <title>Pourquoi travailler avec moi ?<\/title>\r\n\r\n <style>\r\n\r\n \/* =====================================================\r\n RESET\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 width: 100%;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n width: 100%;\r\n min-width: 100%;\r\n\r\n font-family: Arial, Helvetica, sans-serif;\r\n\r\n background: #ffffff;\r\n color: #111111;\r\n\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n SECTION PLEINE LARGEUR\r\n ===================================================== *\/\r\n\r\n .why-section {\r\n position: relative;\r\n\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding:\r\n 56px\r\n 22px\r\n 58px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CONTENEUR GLOBAL\r\n ===================================================== *\/\r\n\r\n .why-wrapper {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE DU TITRE EN HAUT\r\n ===================================================== *\/\r\n\r\n .why-title-band {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n margin-bottom: 18px;\r\n\r\n padding:\r\n 18px\r\n 25px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n box-shadow:\r\n 0 8px 24px\r\n rgba(0, 0, 0, 0.035);\r\n }\r\n\r\n\r\n .why-title-band h2 {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 14px;\r\n\r\n margin: 0;\r\n\r\n color: #111111;\r\n\r\n font-size: 22px;\r\n\r\n line-height: 1.2;\r\n\r\n font-weight: 900;\r\n\r\n letter-spacing: 2px;\r\n\r\n text-align: center;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n \/* TRAIT ROUGE GAUCHE *\/\r\n\r\n .why-title-band h2::before {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 2px;\r\n\r\n flex-shrink: 0;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n \/* TRAIT ROUGE DROITE *\/\r\n\r\n .why-title-band h2::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 2px;\r\n\r\n flex-shrink: 0;\r\n\r\n background: #d50000;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CONTENU SOUS LE TITRE\r\n ===================================================== *\/\r\n\r\n .why-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(0, 38%)\r\n minmax(0, 62%);\r\n\r\n gap: 32px;\r\n\r\n align-items: stretch;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE TEXTE GAUCHE\r\n ===================================================== *\/\r\n\r\n .why-content {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n padding:\r\n 48px\r\n 42px\r\n 45px;\r\n\r\n display: flex;\r\n\r\n flex-direction: column;\r\n\r\n justify-content: center;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 20px;\r\n\r\n box-shadow:\r\n 0 12px 35px\r\n rgba(0, 0, 0, 0.045);\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* PETIT ACCENT ROUGE *\/\r\n\r\n .why-content::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 42px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius:\r\n 0 0 4px 4px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n GRAND TITRE\r\n ===================================================== *\/\r\n\r\n .why-main-title {\r\n width: 100%;\r\n max-width: 620px;\r\n\r\n margin-bottom: 35px;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(\r\n 52px,\r\n 4.5vw,\r\n 78px\r\n );\r\n\r\n font-weight: 400;\r\n\r\n line-height: 1.01;\r\n\r\n letter-spacing: -2px;\r\n\r\n color: #111111;\r\n }\r\n\r\n\r\n .why-main-title .red {\r\n display: inline;\r\n\r\n color: #d50000;\r\n\r\n font-style: italic;\r\n\r\n font-weight: 400;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n DESCRIPTION\r\n ===================================================== *\/\r\n\r\n .why-description {\r\n width: 100%;\r\n\r\n max-width: 650px;\r\n\r\n font-size: 20px;\r\n\r\n line-height: 1.7;\r\n\r\n color: #555555;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTES\r\n ===================================================== *\/\r\n\r\n .why-cards {\r\n width: 100%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0, 1fr)\r\n );\r\n\r\n gap: 20px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CARTE\r\n ===================================================== *\/\r\n\r\n .why-card {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n min-width: 0;\r\n\r\n min-height: 285px;\r\n\r\n padding:\r\n 60px\r\n 42px\r\n 42px;\r\n\r\n border:\r\n 1px solid #dedede;\r\n\r\n border-radius: 20px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #ffffff 0%,\r\n #fafafa 55%,\r\n #f6f6f6 100%\r\n );\r\n\r\n box-shadow:\r\n 0 16px 38px\r\n rgba(0, 0, 0, 0.07);\r\n\r\n overflow: hidden;\r\n\r\n transition:\r\n transform 0.25s ease,\r\n border-color 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n\r\n \/* ACCENT ROUGE CARTE *\/\r\n\r\n .why-card::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n right: 0;\r\n\r\n width: 90px;\r\n height: 4px;\r\n\r\n background: #ed2134;\r\n }\r\n\r\n\r\n .why-card:hover {\r\n transform:\r\n translateY(-4px);\r\n\r\n border-color:\r\n rgba(230, 31, 49, 0.45);\r\n\r\n box-shadow:\r\n 0 22px 45px\r\n rgba(0, 0, 0, 0.11);\r\n }\r\n\r\n\r\n \/* =====================================================\r\n IC\u00d4NES\r\n ===================================================== *\/\r\n\r\n .why-icon {\r\n width: 38px;\r\n height: 38px;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: flex-start;\r\n\r\n margin-bottom: 37px;\r\n\r\n color: #e82031;\r\n }\r\n\r\n\r\n .why-icon svg {\r\n width: 35px;\r\n height: 35px;\r\n\r\n stroke: currentColor;\r\n\r\n fill: none;\r\n\r\n stroke-width: 2;\r\n\r\n stroke-linecap: round;\r\n\r\n stroke-linejoin: round;\r\n }\r\n\r\n\r\n .why-icon.star svg {\r\n fill: #e82031;\r\n\r\n stroke: #e82031;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TEXTE CARTES\r\n ===================================================== *\/\r\n\r\n .why-card-title {\r\n margin-bottom: 15px;\r\n\r\n font-size: 36px;\r\n\r\n line-height: 1.15;\r\n\r\n font-weight: 700;\r\n\r\n color: #111111;\r\n }\r\n\r\n\r\n .why-card-text {\r\n max-width: 510px;\r\n\r\n font-size: 20px;\r\n\r\n line-height: 1.55;\r\n\r\n color: #555555;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TABLETTE\r\n ===================================================== *\/\r\n\r\n @media (max-width: 1200px) {\r\n\r\n .why-section {\r\n padding:\r\n 55px\r\n 30px;\r\n }\r\n\r\n\r\n .why-container {\r\n grid-template-columns: 1fr;\r\n\r\n gap: 30px;\r\n }\r\n\r\n\r\n .why-content {\r\n padding:\r\n 45px\r\n 40px;\r\n }\r\n\r\n\r\n .why-content::after {\r\n left: 40px;\r\n }\r\n\r\n\r\n .why-main-title {\r\n max-width: 760px;\r\n }\r\n\r\n\r\n .why-description {\r\n max-width: 800px;\r\n }\r\n\r\n\r\n .why-card {\r\n min-height: 270px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =====================================================\r\n MOBILE\r\n ===================================================== *\/\r\n\r\n @media (max-width: 767px) {\r\n\r\n\r\n \/* ===================================================\r\n SECTION PLEINE LARGEUR\r\n =================================================== *\/\r\n\r\n .why-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 45px\r\n 0\r\n 50px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .why-wrapper {\r\n width: 100%;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n BANDE TITRE MOBILE\r\n =================================================== *\/\r\n\r\n .why-title-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0 auto 14px;\r\n\r\n padding:\r\n 16px\r\n 10px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 7px 20px\r\n rgba(0, 0, 0, 0.035);\r\n }\r\n\r\n\r\n .why-title-band h2 {\r\n gap: 9px;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.3;\r\n\r\n letter-spacing: 1.3px;\r\n }\r\n\r\n\r\n .why-title-band h2::before,\r\n .why-title-band h2::after {\r\n width: 22px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n CONTENU\r\n =================================================== *\/\r\n\r\n .why-container {\r\n width: 100%;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 30px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n BANDE TEXTE MOBILE\r\n =================================================== *\/\r\n\r\n .why-content {\r\n width: 94%;\r\n\r\n margin: 0 auto;\r\n\r\n padding:\r\n 32px\r\n 16px\r\n 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n\r\n .why-content::after {\r\n left: 16px;\r\n\r\n width: 52px;\r\n\r\n height: 3px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n TITRE PRINCIPAL MOBILE\r\n =================================================== *\/\r\n\r\n .why-main-title {\r\n width: 100%;\r\n\r\n max-width: 100%;\r\n\r\n margin-bottom: 25px;\r\n\r\n font-size:\r\n clamp(\r\n 42px,\r\n 13vw,\r\n 57px\r\n );\r\n\r\n line-height: 0.99;\r\n\r\n letter-spacing: -1.6px;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n DESCRIPTION MOBILE\r\n =================================================== *\/\r\n\r\n .why-description {\r\n width: 100%;\r\n\r\n max-width: 100%;\r\n\r\n font-size: 16px;\r\n\r\n line-height: 1.65;\r\n\r\n color: #555555;\r\n }\r\n\r\n\r\n \/* ===================================================\r\n CARTES MOBILE\r\n =================================================== *\/\r\n\r\n .why-cards {\r\n width: 100%;\r\n\r\n grid-template-columns: 1fr;\r\n\r\n gap: 14px;\r\n\r\n padding:\r\n 0\r\n 12px;\r\n }\r\n\r\n\r\n .why-card {\r\n width: 100%;\r\n\r\n min-height: 220px;\r\n\r\n padding:\r\n 35px\r\n 25px\r\n 30px;\r\n\r\n border-radius: 16px;\r\n }\r\n\r\n\r\n .why-card::before {\r\n width: 70px;\r\n\r\n height: 3px;\r\n }\r\n\r\n\r\n .why-icon {\r\n margin-bottom: 26px;\r\n }\r\n\r\n\r\n .why-icon svg {\r\n width: 30px;\r\n\r\n height: 30px;\r\n }\r\n\r\n\r\n .why-card-title {\r\n margin-bottom: 12px;\r\n\r\n font-size: 27px;\r\n }\r\n\r\n\r\n .why-card-text {\r\n max-width: 100%;\r\n\r\n font-size: 16px;\r\n\r\n line-height: 1.5;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TR\u00c8S PETITS MOBILES\r\n ===================================================== *\/\r\n\r\n @media (max-width: 380px) {\r\n\r\n .why-title-band {\r\n width: 94%;\r\n\r\n padding:\r\n 15px\r\n 8px;\r\n }\r\n\r\n\r\n .why-title-band h2 {\r\n gap: 7px;\r\n\r\n font-size: 13px;\r\n\r\n letter-spacing: 1px;\r\n }\r\n\r\n\r\n .why-title-band h2::before,\r\n .why-title-band h2::after {\r\n width: 17px;\r\n }\r\n\r\n\r\n .why-content {\r\n width: 94%;\r\n\r\n padding:\r\n 29px\r\n 14px\r\n 27px;\r\n }\r\n\r\n\r\n .why-content::after {\r\n left: 14px;\r\n }\r\n\r\n\r\n .why-main-title {\r\n font-size: 39px;\r\n }\r\n\r\n\r\n .why-card {\r\n padding-left: 21px;\r\n\r\n padding-right: 21px;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section\r\n class=\"why-section\"\r\n id=\"pourquoi-moi\"\r\n>\r\n\r\n\r\n <div class=\"why-wrapper\">\r\n\r\n\r\n \r\n\r\n <div class=\"why-title-band\">\r\n\r\n <h2>\r\n Pourquoi travailler avec moi ?\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"why-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"why-content\">\r\n\r\n\r\n <h2 class=\"why-main-title\">\r\n\r\n Plus qu\u2019un<br>\r\n\r\n prestataire,\r\n\r\n <span class=\"red\">\r\n\r\n un<br>\r\n\r\n partenaire<br>\r\n\r\n cr\u00e9atif.\r\n\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p class=\"why-description\">\r\n\r\n Je vous accompagne de la conception jusqu\u2019\u00e0 la livraison\r\n pour cr\u00e9er des contenus qui marquent les esprits.\r\n\r\n <\/p>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"why-cards\">\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon star\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <path\r\n d=\"M12 2\r\n C12.7 7.1 16.9 11.3 22 12\r\n C16.9 12.7 12.7 16.9 12 22\r\n C11.3 16.9 7.1 12.7 2 12\r\n C7.1 11.3 11.3 7.1 12 2Z\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n Cr\u00e9ativit\u00e9\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Des concepts originaux adapt\u00e9s \u00e0 votre identit\u00e9.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <path\r\n d=\"M12 3L21 12L12 21L3 12Z\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n Qualit\u00e9 premium\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Du mat\u00e9riel professionnel et une finition soign\u00e9e.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n \/>\r\n\r\n\r\n <path\r\n d=\"M12 3V12H20\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n R\u00e9activit\u00e9\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Une communication fluide et des d\u00e9lais respect\u00e9s.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"why-card\">\r\n\r\n\r\n <div class=\"why-icon\">\r\n\r\n\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <path\r\n d=\"M20.8 4.6\r\n C18.7 2.5 15.3 2.5 13.2 4.6\r\n L12 5.8\r\n L10.8 4.6\r\n C8.7 2.5 5.3 2.5 3.2 4.6\r\n C1.1 6.7 1.1 10.1 3.2 12.2\r\n L12 21\r\n L20.8 12.2\r\n C22.9 10.1 22.9 6.7 20.8 4.6Z\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <h3 class=\"why-card-title\">\r\n Passion\r\n <\/h3>\r\n\r\n\r\n <p class=\"why-card-text\">\r\n\r\n Chaque projet devient une histoire unique \u00e0 raconter.\r\n\r\n <\/p>\r\n\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cac8ae5 e-con e-atomic-element e-flexbox-base e-090de2c \" data-id=\"cac8ae5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cac8ae5\">\n \t\t<div class=\"elementor-element elementor-element-77c301c elementor-widget elementor-widget-html\" data-id=\"77c301c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n\r\n <meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1.0\"\r\n >\r\n\r\n <title>Avis clients<\/title>\r\n\r\n <style>\r\n\r\n \/* =========================================================\r\n RESET LOCAL\r\n ========================================================= *\/\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n html,\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #111111;\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SECTION AVIS \u2014 PLEINE LARGEUR\r\n ========================================================= *\/\r\n\r\n .avis-section {\r\n position: relative;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n\r\n padding:\r\n 30px\r\n 0\r\n 75px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENEUR\r\n ========================================================= *\/\r\n\r\n .avis-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE 1 : AVIS CLIENTS\r\n LARGEUR R\u00c9DUITE\r\n ========================================================= *\/\r\n\r\n .avis-top-band {\r\n width: 92%;\r\n max-width: 1500px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n margin:\r\n 0\r\n auto\r\n 18px;\r\n\r\n padding:\r\n 16px\r\n 30px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #ffffff 0%,\r\n #fafafa 50%,\r\n #f4f4f4 100%\r\n );\r\n\r\n border-left: 2px solid #e51d2a;\r\n border-right: 2px solid #e51d2a;\r\n\r\n border-top: 1px solid #ededed;\r\n border-bottom: 1px solid #ededed;\r\n\r\n border-radius: 10px;\r\n\r\n box-shadow:\r\n 0 6px 20px\r\n rgba(0, 0, 0, 0.03);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE AVIS CLIENTS\r\n ========================================================= *\/\r\n\r\n .avis-label {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 13px;\r\n\r\n color: #111111;\r\n\r\n font-size: 14px;\r\n font-weight: 800;\r\n\r\n letter-spacing: 5px;\r\n\r\n text-transform: uppercase;\r\n\r\n text-align: center;\r\n }\r\n\r\n\r\n \/* Traits rouges *\/\r\n\r\n .avis-label::before,\r\n .avis-label::after {\r\n content: \"\";\r\n\r\n width: 40px;\r\n height: 3px;\r\n\r\n flex-shrink: 0;\r\n\r\n background: #e51d2a;\r\n\r\n border-radius: 20px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE 2 : ILS PARLENT DE MON TRAVAIL\r\n LARGEUR R\u00c9DUITE\r\n ========================================================= *\/\r\n\r\n .avis-heading-band {\r\n width: 92%;\r\n max-width: 1500px;\r\n\r\n margin:\r\n 0\r\n auto\r\n 45px;\r\n\r\n padding:\r\n 27px\r\n 34px\r\n 32px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #ffffff 0%,\r\n #fafafa 48%,\r\n #f5f5f5 100%\r\n );\r\n\r\n border-left: 2px solid #e51d2a;\r\n border-right: 2px solid #e51d2a;\r\n\r\n border-top: 1px solid #eeeeee;\r\n border-bottom: 1px solid #eeeeee;\r\n\r\n border-radius: 12px;\r\n\r\n box-shadow:\r\n 0 10px 30px\r\n rgba(0, 0, 0, 0.035);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRAND TITRE\r\n ========================================================= *\/\r\n\r\n .avis-title {\r\n margin: 0;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(\r\n 46px,\r\n 5vw,\r\n 80px\r\n );\r\n\r\n font-weight: 700;\r\n\r\n line-height: 1.04;\r\n\r\n color: #111111;\r\n }\r\n\r\n .avis-title span {\r\n color: #e51d2a;\r\n\r\n font-style: italic;\r\n\r\n font-weight: 500;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n ZONE DES AVIS\r\n ========================================================= *\/\r\n\r\n .avis-grid-wrapper {\r\n width: 100%;\r\n\r\n padding:\r\n 0\r\n 5%;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRILLE DES AVIS\r\n ========================================================= *\/\r\n\r\n .avis-grid {\r\n width: 100%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(\r\n 3,\r\n minmax(0, 1fr)\r\n );\r\n\r\n gap: 20px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CARTE AVIS\r\n ========================================================= *\/\r\n\r\n .avis-card {\r\n position: relative;\r\n\r\n min-width: 0;\r\n min-height: 380px;\r\n\r\n padding:\r\n 38px\r\n 35px\r\n 34px;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n\r\n color: #ffffff;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 15% 10%,\r\n rgba(255, 255, 255, 0.055),\r\n transparent 42%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #1b1b1b 0%,\r\n #111111 52%,\r\n #080808 100%\r\n );\r\n\r\n border:\r\n 1px\r\n solid\r\n #303030;\r\n\r\n border-radius: 20px;\r\n\r\n overflow: hidden;\r\n\r\n box-shadow:\r\n 0 20px 45px\r\n rgba(0, 0, 0, 0.10);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TRAIT ROUGE EN HAUT\r\n ========================================================= *\/\r\n\r\n .avis-card::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 5px;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n #ed1c2b 0%,\r\n #d61525 32%,\r\n #70131b 70%,\r\n transparent 100%\r\n );\r\n }\r\n\r\n\r\n \/* =========================================================\r\n \u00c9TOILES\r\n ========================================================= *\/\r\n\r\n .avis-stars {\r\n margin-bottom: 25px;\r\n\r\n color: #ed1c2b;\r\n\r\n font-size: 20px;\r\n\r\n letter-spacing: 2px;\r\n\r\n line-height: 1;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE DU TEXTE AVIS\r\n ========================================================= *\/\r\n\r\n .avis-text-band {\r\n width: 100%;\r\n\r\n padding:\r\n 23px\r\n 23px\r\n 24px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(255, 255, 255, 0.075) 0%,\r\n rgba(255, 255, 255, 0.035) 50%,\r\n rgba(255, 255, 255, 0.018) 100%\r\n );\r\n\r\n border-left: 1px solid #ed1c2b;\r\n border-right: 1px solid #ed1c2b;\r\n\r\n border-top:\r\n 1px solid\r\n rgba(255, 255, 255, 0.10);\r\n\r\n border-bottom:\r\n 1px solid\r\n rgba(255, 255, 255, 0.10);\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TEXTE AVIS\r\n ========================================================= *\/\r\n\r\n .avis-text {\r\n width: 100%;\r\n\r\n margin: 0;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size: 21px;\r\n\r\n font-style: italic;\r\n\r\n line-height: 1.65;\r\n\r\n color: #ffffff;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CLIENT\r\n ========================================================= *\/\r\n\r\n .avis-client {\r\n margin-top: auto;\r\n\r\n padding-top: 35px;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n gap: 17px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n AVATAR\r\n ========================================================= *\/\r\n\r\n .avis-avatar {\r\n width: 59px;\r\n height: 59px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n flex-shrink: 0;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #f02938 0%,\r\n #db101f 100%\r\n );\r\n\r\n color: #ffffff;\r\n\r\n font-size: 14px;\r\n\r\n font-weight: 800;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n INFORMATIONS CLIENT\r\n ========================================================= *\/\r\n\r\n .avis-client-info {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n gap: 8px;\r\n }\r\n\r\n .avis-name {\r\n color: #ffffff;\r\n\r\n font-size: 16px;\r\n\r\n font-weight: 800;\r\n }\r\n\r\n .avis-category {\r\n color: #bbbbbb;\r\n\r\n font-size: 14px;\r\n\r\n font-weight: 400;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TABLETTE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1100px) {\r\n\r\n .avis-top-band,\r\n .avis-heading-band {\r\n width: 94%;\r\n }\r\n\r\n .avis-heading-band {\r\n padding:\r\n 25px\r\n 28px\r\n 29px;\r\n }\r\n\r\n .avis-grid-wrapper {\r\n padding:\r\n 0\r\n 35px;\r\n }\r\n\r\n .avis-grid {\r\n grid-template-columns:\r\n repeat(\r\n 2,\r\n minmax(0, 1fr)\r\n );\r\n }\r\n\r\n .avis-card {\r\n min-height: 390px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 700px) {\r\n\r\n .avis-section {\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n padding:\r\n 18px\r\n 0\r\n 50px;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n BANDE AVIS CLIENTS\r\n ======================================================= *\/\r\n\r\n .avis-top-band {\r\n width: 96%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 12px;\r\n\r\n padding:\r\n 14px\r\n 15px;\r\n\r\n border-left:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-right:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-radius: 8px;\r\n }\r\n\r\n .avis-label {\r\n gap: 9px;\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: 3px;\r\n }\r\n\r\n .avis-label::before,\r\n .avis-label::after {\r\n width: 27px;\r\n height: 2px;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n BANDE GRAND TITRE\r\n ======================================================= *\/\r\n\r\n .avis-heading-band {\r\n width: 96%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 32px;\r\n\r\n padding:\r\n 21px\r\n 20px\r\n 24px;\r\n\r\n border-left:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-right:\r\n 1px solid\r\n #e51d2a;\r\n\r\n border-radius: 10px;\r\n }\r\n\r\n .avis-title {\r\n font-size: 43px;\r\n\r\n line-height: 1.04;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n ZONE AVIS\r\n ======================================================= *\/\r\n\r\n .avis-grid-wrapper {\r\n width: 100%;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n D\u00c9FILEMENT HORIZONTAL\r\n ======================================================= *\/\r\n\r\n .avis-grid {\r\n display: flex;\r\n\r\n width: 100%;\r\n\r\n gap: 14px;\r\n\r\n padding:\r\n 0\r\n 15px\r\n 15px;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n scroll-snap-type:\r\n x mandatory;\r\n\r\n scroll-behavior: smooth;\r\n\r\n -webkit-overflow-scrolling:\r\n touch;\r\n\r\n scrollbar-width: none;\r\n }\r\n\r\n .avis-grid::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n\r\n \/* =======================================================\r\n CARTE MOBILE\r\n ======================================================= *\/\r\n\r\n .avis-card {\r\n flex:\r\n 0\r\n 0\r\n 90%;\r\n\r\n min-height: 390px;\r\n\r\n padding:\r\n 32px\r\n 25px\r\n 28px;\r\n\r\n border-radius: 18px;\r\n\r\n scroll-snap-align: center;\r\n }\r\n\r\n .avis-stars {\r\n margin-bottom: 24px;\r\n\r\n font-size: 18px;\r\n }\r\n\r\n\r\n \/* Bande t\u00e9moignage *\/\r\n\r\n .avis-text-band {\r\n padding:\r\n 20px\r\n 19px\r\n 21px;\r\n\r\n border-radius: 9px;\r\n }\r\n\r\n\r\n \/* Texte *\/\r\n\r\n .avis-text {\r\n font-size: 19px;\r\n\r\n line-height: 1.58;\r\n }\r\n\r\n\r\n \/* Client *\/\r\n\r\n .avis-client {\r\n padding-top: 30px;\r\n }\r\n\r\n .avis-avatar {\r\n width: 55px;\r\n height: 55px;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n PETITS MOBILES\r\n ========================================================= *\/\r\n\r\n @media (max-width: 420px) {\r\n\r\n .avis-top-band,\r\n .avis-heading-band {\r\n width: 96%;\r\n }\r\n\r\n .avis-label {\r\n font-size: 10px;\r\n\r\n letter-spacing: 2.7px;\r\n }\r\n\r\n .avis-label::before,\r\n .avis-label::after {\r\n width: 23px;\r\n }\r\n\r\n .avis-heading-band {\r\n padding:\r\n 20px\r\n 15px\r\n 23px;\r\n }\r\n\r\n .avis-title {\r\n font-size: 39px;\r\n }\r\n\r\n .avis-grid {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n }\r\n\r\n .avis-card {\r\n flex-basis: 92%;\r\n\r\n min-height: 380px;\r\n\r\n padding:\r\n 29px\r\n 22px\r\n 26px;\r\n }\r\n\r\n .avis-text-band {\r\n padding:\r\n 19px\r\n 18px\r\n 20px;\r\n }\r\n\r\n .avis-text {\r\n font-size: 18px;\r\n\r\n line-height: 1.58;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n \r\n\r\n <section class=\"avis-section\">\r\n\r\n <div class=\"avis-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"avis-top-band\">\r\n\r\n <div class=\"avis-label\">\r\n Avis clients\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"avis-heading-band\">\r\n\r\n <h2 class=\"avis-title\">\r\n Ils parlent\r\n <span>de mon travail.<\/span>\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"avis-grid-wrapper\">\r\n\r\n <div class=\"avis-grid\">\r\n\r\n\r\n \r\n\r\n <article class=\"avis-card\">\r\n\r\n <div class=\"avis-stars\">\r\n \u2605\u2605\u2605\u2605\u2605\r\n <\/div>\r\n\r\n <div class=\"avis-text-band\">\r\n\r\n <p class=\"avis-text\">\r\n \u00ab Un travail remarquable. Les photos et la vid\u00e9o\r\n de notre \u00e9v\u00e9nement \u00e9taient magnifiques,\r\n professionnelles et naturelles. \u00bb\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"avis-client\">\r\n\r\n <div class=\"avis-avatar\">\r\n SL\r\n <\/div>\r\n\r\n <div class=\"avis-client-info\">\r\n\r\n <div class=\"avis-name\">\r\n Sophie L.\r\n <\/div>\r\n\r\n <div class=\"avis-category\">\r\n Mariage\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"avis-card\">\r\n\r\n <div class=\"avis-stars\">\r\n \u2605\u2605\u2605\u2605\u2605\r\n <\/div>\r\n\r\n <div class=\"avis-text-band\">\r\n\r\n <p class=\"avis-text\">\r\n \u00ab Tr\u00e8s professionnel, cr\u00e9atif et disponible.\r\n Le rendu final d\u00e9passe largement nos attentes. \u00bb\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"avis-client\">\r\n\r\n <div class=\"avis-avatar\">\r\n TB\r\n <\/div>\r\n\r\n <div class=\"avis-client-info\">\r\n\r\n <div class=\"avis-name\">\r\n Thomas B.\r\n <\/div>\r\n\r\n <div class=\"avis-category\">\r\n Entreprise\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n \r\n\r\n <article class=\"avis-card\">\r\n\r\n <div class=\"avis-stars\">\r\n \u2605\u2605\u2605\u2605\u2605\r\n <\/div>\r\n\r\n <div class=\"avis-text-band\">\r\n\r\n <p class=\"avis-text\">\r\n \u00ab Une vraie vision artistique, une excellente\r\n communication et un montage vid\u00e9o tr\u00e8s dynamique. \u00bb\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"avis-client\">\r\n\r\n <div class=\"avis-avatar\">\r\n IM\r\n <\/div>\r\n\r\n <div class=\"avis-client-info\">\r\n\r\n <div class=\"avis-name\">\r\n In\u00e8s M.\r\n <\/div>\r\n\r\n <div class=\"avis-category\">\r\n Artiste\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\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<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6450f6a e-con e-atomic-element e-flexbox-base e-1c1c203 \" data-id=\"6450f6a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6450f6a\">\n \t\t<div class=\"elementor-element elementor-element-a023cff elementor-widget elementor-widget-html\" data-id=\"a023cff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n\r\n <meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1.0\"\r\n >\r\n\r\n <title>Un projet en t\u00eate ? | R\u00e9alistiC<\/title>\r\n\r\n <style>\r\n\r\n \/* =========================================================\r\n RESET\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 body {\r\n font-family: Arial, Helvetica, sans-serif;\r\n background: #ffffff;\r\n color: #151515;\r\n overflow-x: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SECTION UN PROJET EN T\u00caTE\r\n ========================================================= *\/\r\n\r\n .project-section {\r\n width: 100%;\r\n\r\n padding:\r\n 85px\r\n 24px\r\n 105px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENEUR\r\n ========================================================= *\/\r\n\r\n .project-container {\r\n width: 100%;\r\n max-width: 1380px;\r\n\r\n margin: 0 auto;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE SUP\u00c9RIEURE\r\n ========================================================= *\/\r\n\r\n .project-top-band {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n width: 100%;\r\n\r\n margin-bottom: 18px;\r\n\r\n padding:\r\n 20px\r\n 25px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #ffffff 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 14px;\r\n\r\n box-shadow:\r\n 0 8px 25px\r\n rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n\r\n \/* Accent rouge centr\u00e9 *\/\r\n\r\n .project-top-band::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 50%;\r\n\r\n width: 68px;\r\n height: 3px;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n background: #d50000;\r\n\r\n border-radius:\r\n 0\r\n 0\r\n 5px\r\n 5px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TITRE BANDE SUP\u00c9RIEURE\r\n ========================================================= *\/\r\n\r\n .project-top-title {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 12px;\r\n\r\n color: #111111;\r\n\r\n font-size: 14px;\r\n font-weight: 900;\r\n\r\n letter-spacing: 4px;\r\n\r\n text-align: center;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n\r\n .project-top-title::before,\r\n .project-top-title::after {\r\n content: \"\";\r\n\r\n width: 35px;\r\n height: 1px;\r\n\r\n background: #d50000;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BANDE PRINCIPALE\r\n ========================================================= *\/\r\n\r\n .project-main-band {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n min-height: 390px;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n padding:\r\n 55px\r\n 58px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 88% 40%,\r\n rgba(213, 0, 0, 0.085) 0%,\r\n rgba(213, 0, 0, 0.035) 30%,\r\n transparent 60%\r\n ),\r\n\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd 0%,\r\n #faf8f8 100%\r\n );\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 24px;\r\n\r\n box-shadow:\r\n 0 12px 40px\r\n rgba(0, 0, 0, 0.045);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n ACCENT ROUGE\r\n ========================================================= *\/\r\n\r\n .project-main-band::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n left: 58px;\r\n\r\n width: 72px;\r\n height: 3px;\r\n\r\n background: #d50000;\r\n\r\n border-radius:\r\n 0\r\n 0\r\n 4px\r\n 4px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n CONTENU INTERNE\r\n ========================================================= *\/\r\n\r\n .project-inner {\r\n position: relative;\r\n z-index: 2;\r\n\r\n width: 100%;\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(0, 1fr)\r\n auto;\r\n\r\n align-items: center;\r\n\r\n gap: 55px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n PARTIE TEXTE\r\n ========================================================= *\/\r\n\r\n .project-content {\r\n width: 100%;\r\n max-width: 720px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n GRAND TITRE\r\n ========================================================= *\/\r\n\r\n .project-title {\r\n margin-bottom: 24px;\r\n\r\n color: #111111;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(\r\n 46px,\r\n 5vw,\r\n 74px\r\n );\r\n\r\n font-weight: 400;\r\n\r\n line-height: 0.98;\r\n\r\n letter-spacing: -3px;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n DESCRIPTION\r\n ========================================================= *\/\r\n\r\n .project-description {\r\n max-width: 690px;\r\n\r\n color: #676767;\r\n\r\n font-size: 17px;\r\n\r\n line-height: 1.75;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTONS\r\n ========================================================= *\/\r\n\r\n .project-actions {\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: flex-end;\r\n\r\n gap: 16px;\r\n\r\n flex-shrink: 0;\r\n }\r\n\r\n\r\n .project-button {\r\n min-height: 76px;\r\n\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n gap: 28px;\r\n\r\n padding:\r\n 0\r\n 32px;\r\n\r\n border-radius: 100px;\r\n\r\n font-size: 16px;\r\n font-weight: 800;\r\n\r\n text-decoration: none !important;\r\n text-decoration-line: none !important;\r\n text-decoration-color: transparent !important;\r\n\r\n white-space: nowrap;\r\n\r\n transition:\r\n transform 0.3s ease,\r\n background 0.3s ease,\r\n color 0.3s ease,\r\n border-color 0.3s ease,\r\n box-shadow 0.3s ease;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n SUPPRESSION DU SOULIGNEMENT\r\n DANS TOUS LES \u00c9TATS\r\n ========================================================= *\/\r\n\r\n .project-button,\r\n .project-button:link,\r\n .project-button:visited,\r\n .project-button:hover,\r\n .project-button:focus,\r\n .project-button:focus-visible,\r\n .project-button:active {\r\n text-decoration: none !important;\r\n text-decoration-line: none !important;\r\n text-decoration-thickness: 0 !important;\r\n text-underline-offset: 0 !important;\r\n }\r\n\r\n\r\n .project-button span {\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .project-button:hover {\r\n transform:\r\n translateY(-2px);\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTON DEVIS\r\n ========================================================= *\/\r\n\r\n .project-button-primary,\r\n .project-button-primary:link,\r\n .project-button-primary:visited {\r\n min-width: 285px;\r\n\r\n color: #ffffff !important;\r\n\r\n background: #d50000;\r\n\r\n border:\r\n 2px solid #d50000;\r\n\r\n box-shadow:\r\n 0 10px 28px\r\n rgba(213, 0, 0, 0.15);\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .project-button-primary:hover,\r\n .project-button-primary:focus,\r\n .project-button-primary:active {\r\n color: #ffffff !important;\r\n\r\n background: #b80000;\r\n\r\n border-color: #b80000;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n BOUTON WHATSAPP\r\n ========================================================= *\/\r\n\r\n .project-button-secondary,\r\n .project-button-secondary:link,\r\n .project-button-secondary:visited {\r\n min-width: 300px;\r\n\r\n color: #111111 !important;\r\n\r\n background: #ffffff;\r\n\r\n border:\r\n 2px solid #111111;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n .project-button-secondary:hover,\r\n .project-button-secondary:focus,\r\n .project-button-secondary:active {\r\n color: #ffffff !important;\r\n\r\n background: #111111;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n FL\u00c8CHE\r\n ========================================================= *\/\r\n\r\n .project-arrow {\r\n font-size: 22px;\r\n\r\n line-height: 1;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n\r\n \/* =========================================================\r\n TABLETTE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 1000px) {\r\n\r\n .project-section {\r\n padding:\r\n 70px\r\n 22px\r\n 85px;\r\n }\r\n\r\n\r\n .project-main-band {\r\n min-height: auto;\r\n\r\n padding:\r\n 45px\r\n 42px;\r\n }\r\n\r\n\r\n .project-main-band::before {\r\n left: 42px;\r\n }\r\n\r\n\r\n .project-inner {\r\n grid-template-columns: 1fr;\r\n\r\n gap: 38px;\r\n }\r\n\r\n\r\n .project-content {\r\n max-width: 780px;\r\n }\r\n\r\n\r\n .project-actions {\r\n justify-content: flex-start;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n @media (max-width: 650px) {\r\n\r\n .project-section {\r\n position: relative;\r\n\r\n left: 50%;\r\n\r\n width: 100vw;\r\n max-width: 100vw;\r\n\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n\r\n padding:\r\n 45px\r\n 0\r\n 60px;\r\n\r\n background: #ffffff;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n\r\n .project-container {\r\n width: 100%;\r\n max-width: none;\r\n\r\n margin: 0;\r\n\r\n padding: 0;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE UN PROJET EN T\u00caTE\r\n ====================================================== *\/\r\n\r\n .project-top-band {\r\n width: 94%;\r\n\r\n margin:\r\n 0\r\n auto\r\n 12px;\r\n\r\n padding:\r\n 17px\r\n 12px;\r\n\r\n border-top:\r\n 1px solid #ebe7e7;\r\n\r\n border-bottom:\r\n 1px solid #ebe7e7;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n\r\n .project-top-band::before {\r\n width: 52px;\r\n }\r\n\r\n\r\n .project-top-title {\r\n gap: 9px;\r\n\r\n font-size: 11px;\r\n\r\n letter-spacing: 3px;\r\n }\r\n\r\n\r\n .project-top-title::before,\r\n .project-top-title::after {\r\n width: 25px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BANDE PRINCIPALE\r\n ====================================================== *\/\r\n\r\n .project-main-band {\r\n width: 94%;\r\n\r\n min-height: auto;\r\n\r\n margin:\r\n 0\r\n auto;\r\n\r\n padding:\r\n 32px\r\n 16px\r\n 30px;\r\n\r\n border-top:\r\n 1px solid #e8e3e3;\r\n\r\n border-bottom:\r\n 1px solid #e8e3e3;\r\n\r\n border-left:\r\n 1px solid #d50000;\r\n\r\n border-right:\r\n 1px solid #d50000;\r\n\r\n border-radius: 16px;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 100% 20%,\r\n rgba(213, 0, 0, 0.08),\r\n transparent 55%\r\n ),\r\n\r\n linear-gradient(\r\n 145deg,\r\n #fffdfd,\r\n #faf8f8\r\n );\r\n\r\n box-shadow:\r\n 0\r\n 10px\r\n 28px\r\n rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n\r\n .project-main-band::before {\r\n left: 16px;\r\n\r\n width: 52px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n CONTENU\r\n ====================================================== *\/\r\n\r\n .project-inner {\r\n display: flex;\r\n\r\n flex-direction: column;\r\n\r\n align-items: stretch;\r\n\r\n gap: 30px;\r\n }\r\n\r\n\r\n .project-content {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n TITRE\r\n ====================================================== *\/\r\n\r\n .project-title {\r\n margin-bottom: 18px;\r\n\r\n font-size: 39px;\r\n\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n DESCRIPTION\r\n ====================================================== *\/\r\n\r\n .project-description {\r\n width: 100%;\r\n max-width: none;\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.65;\r\n }\r\n\r\n\r\n \/* =====================================================\r\n BOUTONS\r\n ====================================================== *\/\r\n\r\n .project-actions {\r\n width: 100%;\r\n\r\n flex-direction: column;\r\n\r\n align-items: stretch;\r\n\r\n gap: 12px;\r\n }\r\n\r\n\r\n .project-button {\r\n width: 100%;\r\n\r\n min-width: 0;\r\n min-height: 62px;\r\n\r\n padding:\r\n 0\r\n 22px;\r\n\r\n font-size: 14px;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n }\r\n\r\n\r\n \/* =========================================================\r\n PETITS MOBILES\r\n ========================================================= *\/\r\n\r\n @media (max-width: 380px) {\r\n\r\n .project-top-title {\r\n gap: 7px;\r\n\r\n font-size: 10px;\r\n\r\n letter-spacing: 2px;\r\n }\r\n\r\n\r\n .project-top-title::before,\r\n .project-top-title::after {\r\n width: 18px;\r\n }\r\n\r\n\r\n .project-title {\r\n font-size: 36px;\r\n }\r\n\r\n\r\n .project-description {\r\n font-size: 14px;\r\n }\r\n\r\n\r\n .project-button {\r\n padding:\r\n 0\r\n 18px;\r\n\r\n font-size: 13px;\r\n\r\n text-decoration: none !important;\r\n }\r\n\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section\r\n class=\"project-section\"\r\n id=\"project\"\r\n>\r\n\r\n <div class=\"project-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"project-top-band\">\r\n\r\n <div class=\"project-top-title\">\r\n Un projet en t\u00eate ?\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"project-main-band\">\r\n\r\n <div class=\"project-inner\">\r\n\r\n\r\n \r\n\r\n <div class=\"project-content\">\r\n\r\n <h2 class=\"project-title\">\r\n Discutons-en d\u00e8s<br>\r\n maintenant.\r\n <\/h2>\r\n\r\n\r\n <p class=\"project-description\">\r\n Pr\u00e9sentez-moi votre projet et recevez\r\n une r\u00e9ponse personnalis\u00e9e.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"project-actions\">\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/amourallabah.com\/index.php\/contact\/\"\r\n class=\"project-button project-button-primary\"\r\n >\r\n\r\n <span>\r\n Demander un devis\r\n <\/span>\r\n\r\n <span class=\"project-arrow\">\r\n \u2192\r\n <\/span>\r\n\r\n <\/a>\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"https:\/\/wa.me\/+2290166891486\"\r\n class=\"project-button project-button-secondary\"\r\n >\r\n\r\n <span>\r\n \u00c9crire sur WhatsApp\r\n <\/span>\r\n\r\n <span class=\"project-arrow\">\r\n \u2192\r\n <\/span>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\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<\/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>R\u00e9alistiC | Photographie & Vid\u00e9o CREER. CAPTURER. SUBLIMER. DONNONS VIE A VOS ID\u00c9ES Photographie, Vid\u00e9aste, Montage & Motion Design Des […]<\/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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","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-9","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Accueil -<\/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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accueil -\" \/>\n<meta property=\"og:description\" content=\"R\u00e9alistiC | Photographie & Vid\u00e9o CREER. CAPTURER. SUBLIMER. DONNONS VIE A VOS ID\u00c9ES Photographie, Vid\u00e9aste, Montage & Motion Design Des […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amourallabah.com\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T08:45:47+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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/\",\"url\":\"https:\\\/\\\/amourallabah.com\\\/\",\"name\":\"Accueil -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#website\"},\"datePublished\":\"2026-07-17T09:09:29+00:00\",\"dateModified\":\"2026-07-30T08:45:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/amourallabah.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/amourallabah.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/amourallabah.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accueil\"}]},{\"@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_head_json":{"title":"Accueil -","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\/","og_locale":"en_US","og_type":"article","og_title":"Accueil -","og_description":"R\u00e9alistiC | Photographie & Vid\u00e9o CREER. CAPTURER. SUBLIMER. DONNONS VIE A VOS ID\u00c9ES Photographie, Vid\u00e9aste, Montage & Motion Design Des […]","og_url":"https:\/\/amourallabah.com\/","article_modified_time":"2026-07-30T08:45:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amourallabah.com\/","url":"https:\/\/amourallabah.com\/","name":"Accueil -","isPartOf":{"@id":"https:\/\/amourallabah.com\/#website"},"datePublished":"2026-07-17T09:09:29+00:00","dateModified":"2026-07-30T08:45:47+00:00","breadcrumb":{"@id":"https:\/\/amourallabah.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amourallabah.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/amourallabah.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/amourallabah.com\/"},{"@type":"ListItem","position":2,"name":"Accueil"}]},{"@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\/9","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=9"}],"version-history":[{"count":613,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/amourallabah.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}