.elementor-2 .elementor-element.elementor-element-14f2723{--display:flex;}.elementor-2 .elementor-element.elementor-element-b5f591e{--spacer-size:50px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-c040926{text-align:center;}.elementor-2 .elementor-element.elementor-element-c040926 .elementor-heading-title{font-family:"octuple max", Sans-serif;font-size:87px;font-weight:600;color:#B2FCE5;}.elementor-2 .elementor-element.elementor-element-bb9d4a1{margin:3px 3px calc(var(--kit-widget-spacing, 0px) + 3px) 3px;padding:0px 80px 0px 080px;text-align:center;}.elementor-2 .elementor-element.elementor-element-bb9d4a1 .elementor-heading-title{font-family:"Space Mono", Sans-serif;font-weight:600;color:#000000;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2 .elementor-element.elementor-element-03e2e3b{width:var( --container-widget-width, 100% );max-width:100%;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;top:486px;z-index:1000;}.elementor-2 .elementor-element.elementor-element-03e2e3b.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-2 .elementor-element.elementor-element-03e2e3b{left:346px;}body.rtl .elementor-2 .elementor-element.elementor-element-03e2e3b{right:346px;}.elementor-2 .elementor-element.elementor-element-03e2e3b img{width:265px;}.elementor-2 .elementor-element.elementor-element-71be29f{--spacer-size:20px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2 .elementor-element.elementor-element-2e72287 .elementor-button{background-color:#FE84E7;font-family:"Space Mono", Sans-serif;font-size:20px;font-weight:500;text-decoration:none;fill:#020202;color:#020202;}.elementor-2 .elementor-element.elementor-element-cf702c4{--spacer-size:100px;}.elementor-2 .elementor-element.elementor-element-677754b{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for heading, class: .elementor-element-c040926 *//* 1. L'ENCADRÉ (Verre Dépoli Pur) */ .elementor-2 .elementor-element.elementor-element-c040926 { display: inline-block !important; position: relative; /* Augmentation du padding global pour plus d'espace */ padding: 30px 80px 30px 60px !important; margin: 30px 0; z-index: 1; background-color: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(25px) saturate(180%) brightness(110%); -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(110%); border-radius: 40px 10px 40px 10px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1); /* Crucial : ne pas couper ce qui dépasse */ overflow: visible !important; } /* 2. LES BORDURES NÉON ANIMÉES */ .elementor-2 .elementor-element.elementor-element-c040926::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: linear-gradient(90deg, #fe84e7, #6be9ff, #b2fce5, #fff485, #fe84e7); background-size: 200% 100%; animation: borderFlow 3s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* 3. LE TITRE CHROME (Fix pour la coupure à droite) */ .elementor-2 .elementor-element.elementor-element-c040926 .elementor-heading-title { position: relative; z-index: 5; display: block !important; /* Block pour prendre toute la place nécessaire */ margin: 0 !important; /* Espace supplémentaire à droite pour l'italique et les ombres */ padding-right: 40px !important; white-space: nowrap; /* Empêche le titre de revenir à la ligne */ background: linear-gradient( 180deg, #ffffff 0%, #b2fce5 40%, #a199fb 50%, #fff485 60%, #ffffff 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-size: 200% auto; animation: chromeReflections 6s linear infinite !important; /* Ombre un peu plus douce pour éviter les coupures nettes */ filter: drop-shadow(4px 2px 6px rgba(0, 0, 0, 0.4)); } /* 4. LE TAG "COLLECTION" */ .elementor-2 .elementor-element.elementor-element-c040926::before { content: "COLLECTION // 2026"; position: absolute; top: -10px; left: 45px; background: #fe84e7; color: #fff; font-size: 12px; padding: 3px 12px; font-weight: 900; border-radius: 4px; box-shadow: 0 0 15px rgba(254, 132, 231, 0.5); z-index: 10; } /* --- ANIMATIONS --- */ @keyframes borderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes chromeReflections { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* 5. ADAPTATION MOBILE (Écrans < 768px) */ @media (max-width: 767px) { /* 1. Réduction de l'encadré */ .elementor-2 .elementor-element.elementor-element-c040926 { padding: 25px 20px 25px 20px !important; margin: 20px 10px !important; } /* 2. Autoriser le retour à la ligne du titre */ .elementor-2 .elementor-element.elementor-element-c040926 .elementor-heading-title { white-space: normal !important; /* Annule le nowrap */ padding-right: 10px !important; word-break: break-word; /* Évite qu'un mot trop long dépasse */ } /* 3. Repositionnement du petit tag "Collection" */ .elementor-2 .elementor-element.elementor-element-c040926::before { left: 20px; top: -8px; font-size: 10px; } .elementor-2 .elementor-element.elementor-element-c040926 .elementor-heading-title { font-size: clamp(24px, 8vw, 40px) !important; /* Ajuste uniquement sur mobile */ white-space: normal !important; padding-right: 10px !important; word-break: break-word; } } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-03e2e3b */body, html { overflow-x: hidden; } /* Donne un nom à l'animation et la définit */ .elementor-2 .elementor-element.elementor-element-03e2e3b { animation: y2kFloat 4s ease-in-out infinite; } /* Définit le mouvement (monte de 20px) */ @keyframes y2kFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .elementor-2 .elementor-element.elementor-element-03e2e3b { pointer-events: none; }/* End custom CSS */ /* Start custom CSS for wpforms, class: .elementor-element-393e222 *//* 1. Le Conteneur (Glassmorphism Holographique) */ .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-container { background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 100%) !important; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 30px 0px 30px 0px !important; padding: 50px !important; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.05), inset 20px 20px 50px rgba(254, 132, 231, 0.1), inset -20px -20px 50px rgba(178, 252, 229, 0.1) !important; } /* 2. Les Labels (Titres ultra lisibles et sans bug) */ .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-field-label, .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-field-sublabel { display: block !important; width: 100% !important; color: #111111 !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem !important; margin-bottom: 10px !important; background: none !important; -webkit-text-fill-color: initial !important; text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.9); } /* 3. Les Champs de texte (Effet Chrome Inset) */ .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-field input, .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-field textarea { background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-bottom: 3px solid rgba(255, 255, 255, 0.9) !important; border-radius: 15px 0px 15px 0px !important; color: #2c2c35 !important; padding: 15px 20px !important; box-shadow: inset 0 4px 10px rgba(0,0,0,0.03); transition: all 0.4s cubic-bezier(0.25, 1.5, 0.5, 1) !important; width: 100% !important; } /* 4. Champ Actif / Au clic (Éclat Néon Rose & Menthe) */ .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-field input:focus, .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-field textarea:focus { background: rgba(255, 255, 255, 0.8) !important; border-color: #fe84e7 !important; border-bottom-color: #b2fce5 !important; box-shadow: 0 10px 20px rgba(254, 132, 231, 0.15), inset 0 0 15px rgba(255,255,255,1) !important; transform: translateY(-2px); outline: none !important; } /* 5. Le Bouton d'Envoi (Liquid Chrome aux couleurs de ta charte) */ .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-submit { background: linear-gradient(90deg, #fe84e7, #fff485, #b2fce5, #fe84e7) !important; background-size: 300% auto !important; border: none !important; color: #111 !important; border-radius: 20px 0px 20px 0px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 2px; padding: 18px 40px !important; width: 100%; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: all 0.4s ease !important; cursor: pointer; animation: liquidGradient 4s linear infinite !important; /* Centrage du bouton */ text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* 6. Effet au survol du bouton */ .elementor-2 .elementor-element.elementor-element-393e222 .wpforms-submit:hover { box-shadow: 0 15px 30px rgba(254, 132, 231, 0.4), 0 0 20px rgba(178, 252, 229, 0.6) !important; transform: scale(1.03); color: #000 !important; } /* --- ANIMATION --- */ @keyframes liquidGradient { 0% { background-position: 0% center; } 100% { background-position: 300% center; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-2e72287 *//* Bouton Premium Glass Y2K */ .elementor-2 .elementor-element.elementor-element-2e72287 .elementor-button { /* Fond en dégradé pour simuler la courbure du verre */ background: linear-gradient(135deg, rgba(254, 132, 231, 0.4) 0%, rgba(254, 132, 231, 0.1) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Bordure fine "éclat de diamant" */ border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; /* Plus carré = plus pro/rétro */ font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; /* Double ombre : une portée légère et un reflet blanc interne très net */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 10px rgba(254, 132, 231, 0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; } /* Effet de brillance qui traverse le bouton au survol */ .elementor-2 .elementor-element.elementor-element-2e72287 .elementor-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: 0.5s; } .elementor-2 .elementor-element.elementor-element-2e72287 .elementor-button:hover::before { left: 100%; } /* Hover : Le bouton s'illumine sans devenir "pâteux" */ .elementor-2 .elementor-element.elementor-element-2e72287 .elementor-button:hover { background: linear-gradient(135deg, rgba(254, 132, 231, 0.6) 0%, rgba(254, 132, 231, 0.3) 100%); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(254, 132, 231, 0.3), inset 0 1px 2px rgba(255, 255, 255, 1); color: #ffffff; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'octuple max'; font-display: auto; src: url('https://003.monsitewordpress.online/wp-content/uploads/2026/04/Octuple-max-demo.ttf') format('truetype'); } /* End Custom Fonts CSS */