.elementor-kit-8{--e-global-color-primary:#FF7A2B;--e-global-color-secondary:#0C0502;--e-global-color-text:#FFFCFA;--e-global-color-accent:#F7F4F2;--e-global-color-0dc44ee:#FF5E2B;--e-global-color-3e8d233:#FF8F2B;--e-global-color-025165f:#190A04;--e-global-color-3352a2d:#3F322D;--e-global-color-cf779e5:#FF640A;--e-global-color-ebe8b9e:#FF8B47;--e-global-color-404b3b3:#B2ABA8;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:55px;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-size:26px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:26px;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:200;--e-global-typography-text-line-height:24px;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:24px;--e-global-typography-cd9ee61-font-family:"Outfit";--e-global-typography-cd9ee61-font-size:100px;--e-global-typography-cd9ee61-font-weight:700;--e-global-typography-cd9ee61-line-height:90px;--e-global-typography-2a0456e-font-family:"Outfit";--e-global-typography-2a0456e-font-size:20px;--e-global-typography-2a0456e-font-weight:500;--e-global-typography-2a0456e-text-decoration:none;--e-global-typography-2a0456e-line-height:20px;--e-global-typography-89d66b0-font-family:"Outfit";--e-global-typography-89d66b0-font-size:18px;--e-global-typography-89d66b0-font-weight:200;--e-global-typography-89d66b0-line-height:22px;background-color:var( --e-global-color-text );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:40px;--e-global-typography-primary-line-height:35px;--e-global-typography-secondary-font-size:24px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:18px;--e-global-typography-cd9ee61-font-size:60px;--e-global-typography-cd9ee61-line-height:50px;--e-global-typography-2a0456e-font-size:18px;--e-global-typography-2a0456e-line-height:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:40px;--e-global-typography-primary-line-height:35px;--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-line-height:22px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:18px;--e-global-typography-cd9ee61-font-size:50px;--e-global-typography-cd9ee61-line-height:40px;--e-global-typography-2a0456e-font-size:18px;--e-global-typography-2a0456e-line-height:18px;--e-global-typography-89d66b0-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --size-50px:50px; --size-25px:25px; --size-10px:10px; --size-150px:150px; --size-100px:100px; --orange:#ff7a2b; --noir:#0c0502; --blanc:#fffcfa; --Noir-2:#190a04; --Noir-3:#3f322d; --Transparent:#ffffff00; --Outfit:Outfit; } /* Start custom CSS *//*BG-ECRAN-ANIMATION*/ /* ========================================================= ACTIV'360 — BACKGROUND ANIMÉ Container Elementor : 7147435 ========================================================= */ /* ========================================================= 1. VARIABLES ANIMABLES DES GRADIENTS ========================================================= */ @property --x1 { syntax: ''; inherits: false; initial-value: 0%; } @property --y1 { syntax: ''; inherits: false; initial-value: 0%; } @property --x2 { syntax: ''; inherits: false; initial-value: 100%; } @property --y2 { syntax: ''; inherits: false; initial-value: 100%; } @property --x3 { syntax: ''; inherits: false; initial-value: 50%; } @property --y3 { syntax: ''; inherits: false; initial-value: 50%; } /* ========================================================= 2. BACKGROUND PRINCIPAL ========================================================= */ #bg-ecran-animation { position: relative; overflow: hidden; isolation: isolate; /* Positions initiales */ --x1: 0%; --y1: 0%; --x2: 100%; --y2: 100%; --x3: 50%; --y3: 50%; background-color: #080201; background-image: /* ================================================= HALO ORANGE — HAUT GAUCHE ================================================= */ radial-gradient( ellipse 115% 150% at var(--x1) var(--y1), rgba(255, 105, 0, 1) 0%, rgba(235, 75, 0, 0.90) 12%, rgba(200, 52, 0, 0.72) 25%, rgba(155, 35, 0, 0.52) 38%, rgba(105, 21, 0, 0.34) 52%, rgba(65, 12, 0, 0.20) 65%, rgba(35, 6, 0, 0.11) 76%, rgba(18, 3, 0, 0.05) 87%, transparent 100% ), /* ================================================= HALO ORANGE — BAS DROITE ================================================= */ radial-gradient( ellipse 115% 115% at var(--x2) var(--y2), rgba(255, 92, 0, 1) 0%, rgba(240, 70, 0, 0.90) 12%, rgba(205, 50, 0, 0.72) 25%, rgba(160, 34, 0, 0.52) 38%, rgba(110, 21, 0, 0.34) 52%, rgba(65, 12, 0, 0.20) 65%, rgba(35, 6, 0, 0.11) 76%, rgba(18, 3, 0, 0.05) 87%, transparent 100% ), /* ================================================= AMBIANCE CENTRALE TRÈS DISCRÈTE ================================================= */ radial-gradient( ellipse 65% 65% at var(--x3) var(--y3), rgba(175, 45, 0, 0.24) 0%, rgba(135, 30, 0, 0.20) 25%, rgba(95, 18, 0, 0.15) 48%, rgba(55, 9, 0, 0.09) 70%, rgba(25, 4, 0, 0.04) 85%, transparent 100% ); /* * IMPORTANT : * * Aucun background-size * Aucun background-position * Aucun background-repeat * * Les gradients couvrent directement * toute la surface du container. */ animation: activ360-gradients 8s cubic-bezier(.45, 0, .55, 1) infinite; } /* ========================================================= 3. SCANLINES ========================================================= */ #bg-ecran-animation::before { content: ""; position: absolute; width: 160%; height: 160%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; background-image: /* LIGNES HORIZONTALES */ repeating-linear-gradient( to bottom, transparent 0px, transparent 4px, rgba(255, 91, 20, 0.18) 5px, rgba(255, 91, 20, 0.18) 6px, transparent 7px, transparent 8px ), /* VARIATION LUMINEUSE HORIZONTALE */ repeating-linear-gradient( 90deg, rgba(255, 80, 10, 0) 0px, rgba(255, 80, 10, 0.08) 80px, rgba(255, 80, 10, 0) 180px ); background-size: 100% 8px, 360px 100%; background-repeat: repeat, repeat; background-blend-mode: screen; animation: activ360-lines-horizontal 4s linear infinite; } /* ========================================================= 4. GRAIN ========================================================= */ #bg-ecran-animation::after { content: ""; position: absolute; width: 150%; height: 150%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; background-image: radial-gradient( rgba(255, 255, 255, 0.12) 1px, transparent 0.8px ), radial-gradient( rgba(0, 0, 0, 0.18) 1px, transparent 0.8px ); background-size: 4px 4px, 5px 5px; opacity: 0.8; animation: activ360-grain 0.2s steps(2) infinite; } /* ========================================================= 5. CONTENU ELEMENTOR ========================================================= */ #bg-ecran-animation > * { position: relative; z-index: 5; } /* ========================================================= 6. ANIMATION DES GRADIENTS — DESKTOP ========================================================= */ /* * Ici on ne déplace PLUS une image de background. * * On déplace directement le CENTRE * des radial-gradient. */ @keyframes activ360-gradients { 0% { /*HAUT GAUCHE*/ --x1: -5%; --y1: -8%; /*BAS DROITE*/ --x2: 105%; --y2: 108%; /*CENTRE*/ --x3: 48%; --y3: 48%; } 20% { --x1: 3%; --y1: -2%; --x2: 101%; --y2: 99%; --x3: 52%; --y3: 46%; } 40% { --x1: 8%; --y1: 6%; --x2: 94%; --y2: 93%; --x3: 56%; --y3: 51%; } 60% { --x1: 2%; --y1: 10%; --x2: 89%; --y2: 101%; --x3: 52%; --y3: 55%; } 80% { --x1: -3%; --y1: 3%; --x2: 97%; --y2: 110%; --x3: 47%; --y3: 52%; } 100% { --x1: -5%; --y1: -8%; --x2: 105%; --y2: 108%; --x3: 48%; --y3: 48%; } } /* ========================================================= 7. ANIMATION HORIZONTALE DES LIGNES ========================================================= */ @keyframes activ360-lines-horizontal { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 360px 0; } } /* ========================================================= 8. ANIMATION DU GRAIN ========================================================= */ @keyframes activ360-grain { 0% { background-position: 0 0, 2px 2px; } 25% { background-position: 2px -1px, 0 3px; } 50% { background-position: -1px 2px, 3px 0; } 75% { background-position: 1px 1px, -1px 2px; } 100% { background-position: 0 0, 2px 2px; } } /* ========================================================= 9. MOBILE ========================================================= */ @media (max-width: 767px) { } /*BG-ECRAN-ANIMATION-LIGHT*/ /* ========================================================= ACTIV'360 — BACKGROUND ANIMÉ Container Elementor : 7147435 ========================================================= */ /* ========================================================= 2. BACKGROUND PRINCIPAL ========================================================= */ #bg-ecran-light { position: relative; overflow: hidden; isolation: isolate; /* Positions initiales */ --x1: 0%; --y1: 0%; --x2: 100%; --y2: 100%; --x3: 50%; --y3: 50%; background-color: #080201; background-image: /* ================================================= HALO ORANGE — HAUT GAUCHE ================================================= */ radial-gradient( ellipse 115% 150% at var(--x1) var(--y1), rgba(255, 105, 0, 1) 0%, rgba(235, 75, 0, 0.90) 12%, rgba(200, 52, 0, 0.72) 25%, rgba(155, 35, 0, 0.52) 38%, rgba(105, 21, 0, 0.34) 52%, rgba(65, 12, 0, 0.20) 65%, rgba(35, 6, 0, 0.11) 76%, rgba(18, 3, 0, 0.05) 87%, transparent 100% ), /* ================================================= HALO ORANGE — BAS DROITE ================================================= */ radial-gradient( ellipse 115% 115% at var(--x2) var(--y2), rgba(255, 92, 0, 1) 0%, rgba(240, 70, 0, 0.90) 12%, rgba(205, 50, 0, 0.72) 25%, rgba(160, 34, 0, 0.52) 38%, rgba(110, 21, 0, 0.34) 52%, rgba(65, 12, 0, 0.20) 65%, rgba(35, 6, 0, 0.11) 76%, rgba(18, 3, 0, 0.05) 87%, transparent 100% ), /* ================================================= AMBIANCE CENTRALE TRÈS DISCRÈTE ================================================= */ radial-gradient( ellipse 65% 65% at var(--x3) var(--y3), rgba(175, 45, 0, 0.24) 0%, rgba(135, 30, 0, 0.20) 25%, rgba(95, 18, 0, 0.15) 48%, rgba(55, 9, 0, 0.09) 70%, rgba(25, 4, 0, 0.04) 85%, transparent 100% ); /* * IMPORTANT : * * Aucun background-size * Aucun background-position * Aucun background-repeat * * Les gradients couvrent directement * toute la surface du container. */ } /* ========================================================= 3. SCANLINES ========================================================= */ #bg-ecran-light::before { content: ""; position: absolute; width: 160%; height: 160%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; background-image: /* LIGNES HORIZONTALES */ repeating-linear-gradient( to bottom, transparent 0px, transparent 4px, rgba(255, 91, 20, 0.18) 5px, rgba(255, 91, 20, 0.18) 6px, transparent 7px, transparent 8px ), /* VARIATION LUMINEUSE HORIZONTALE */ repeating-linear-gradient( 90deg, rgba(255, 80, 10, 0) 0px, rgba(255, 80, 10, 0.08) 80px, rgba(255, 80, 10, 0) 180px ); background-size: 100% 8px, 360px 100%; background-repeat: repeat, repeat; background-blend-mode: screen; } /* ========================================================= 4. GRAIN ========================================================= */ #bg-ecran-light::after { content: ""; position: absolute; width: 150%; height: 150%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; background-image: radial-gradient( rgba(255, 255, 255, 0.12) 1px, transparent 0.8px ), radial-gradient( rgba(0, 0, 0, 0.18) 1px, transparent 0.8px ); background-size: 4px 4px, 5px 5px; opacity: 0.4; } /* ========================================================= 5. CONTENU ELEMENTOR ========================================================= */ #bg-ecran-light > * { position: relative; z-index: 5; }/* End custom CSS */