/* Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. GÉNÉRAL & UTILITAIRES
   ========================================================================== */

/* Gestion du focus et outline */
:focus, :focus-visible { 
    outline: none; 
}

/* Loader personnalisé (Model Viewer) */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animations Zoom In/Out (Modales & 3D) */
@keyframes zoomInFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes zoomOutFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}
.zoomIn { animation: zoomInFadeIn 0.3s ease-out forwards; }
.zoomOut { animation: zoomOutFadeOut 0.3s ease-in forwards; }

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */

header { 
    width: 100vw; 
}

/* Logo */
#logo { opacity: 0.7; transition: all 0.3s; }
#logo:hover { opacity: 1 !important; }

/* Désactivation du lien logo sur la Home */
body.home #logo a {
    pointer-events: none;
    cursor: default;
    opacity: 1;
}

/* Navigation Home (#navHome) */
#navHome { filter: blur(0px); scale: 1; transition: all 0.8s; }
#navHome .elementor-nav-menu--main .elementor-nav-menu ul {
    display: flex !important; position: relative; flex-direction: column; margin: 0 !important; padding: 0 !important; width: 100%;
}
#navHome .elementor-nav-menu--main .elementor-nav-menu ul li {
    display: flex; justify-content: right; margin: 0 !important; list-style: none; padding: 0 !important; line-height: 2 !important;
}
#navHome .elementor-nav-menu--main .elementor-nav-menu ul li a {
    text-align: right !important; align-self: flex-end; padding: 0; line-height: 1 !important;
}
#navHome > nav > ul > li > a { margin-top: 1vw; opacity: 0.5; }
#navHome > nav > ul > li > a span { display: none; }

/* Navigation Menu Général (#navMenu) */
#navMenu .elementor-nav-menu--main .elementor-nav-menu ul {
    display: flex !important; position: relative; flex-direction: column; margin: 0 !important; padding: 0 !important; width: 100%;
}
#navMenu .elementor-nav-menu--main .elementor-nav-menu ul li {
    display: flex; justify-content: center; margin: 0 !important; list-style: none; padding: 0 !important; line-height: 2 !important;
}
#navMenu .elementor-nav-menu--main .elementor-nav-menu ul li a {
    text-align: right !important; align-self: flex-end; padding: 0; line-height: 1 !important;
}
#navMenu > nav > ul > li > a { margin-top: 1vw; opacity: 0.5; justify-content: center; }
#navMenu > nav > ul > li.current-menu-item > a { margin-top: 1vw; opacity: 1; justify-content: center; }
#navMenu > nav > ul > li > a span { display: none; }

/* Burger & Socials */
.home #burger { opacity: 0; margin: 0; width: 2vw; }
#titresociaux, #liensociaux { filter: blur(0px); scale: 1; transition: all 0.8s; }

/* Header Elements Divers */
#blockHead { filter: blur(0px); transition: all 0.8s; width: 100% !important; --width: 100% !important; }
#ensembleLogo { width: 39%; margin-right: 100% !important; }
#signature { left: 10vw !important; }
#icoContact { position: fixed; right: 0; }

/* --- État SCROLL (Header réduit) --- */
.scroll #logo { position: fixed; top: 1vw; height: 3vw !important; opacity: 0.5; }
.scroll #logo:hover, .scroll #logo:hover svg { opacity: 1; }
.scroll #logo svg { height: 3vw !important; }
.scroll #signature { position: fixed; top: 6vw; opacity: 0.5; left: 9.5vw; }
.scroll #signature svg { height: 1.5vw !important; }
.scroll #ensembleLogo { margin-top: 0; width: 10vw; justify-self: left; }
.scroll #burger { width: 3vw; }
.scroll #blockHead { width: 10vw; }


/* ==========================================================================
   3. BACKGROUNDS & HOME FX
   ========================================================================== */

.background-stack { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background-color: transparent; }
.background-stack .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.8s ease-in-out; }
.background-stack #bg-default { opacity: 1; }

/* Images de fond */
#bg-default { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundbase-scaled.jpg'); filter: blur(10px); transition: all 0.8s; }
#bg-peinture { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundtableaux3-scaled.jpg'); }
#bg-bijoux { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundbijoux3-scaled.jpg'); }
#bg-3d { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/background3D-scaled.jpg'); }
#bg-sketch { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundsetch-scaled.jpg'); }
#bg-web { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundweb-scaled.jpg'); }
#bg-AI { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundIA-scaled.jpg'); }
#bg-about { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundquisuisje-scaled.jpg'); }
#bg-sculpture { background-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/backgroundsculpture2-scaled.jpg'); }

/* Effets de flou sur Home */
body.home #bg-default { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Éléments animés (Poussières/Particules) */
#pous1, #pous3, #pous4 { filter: blur(2px); scale: 1; transition: all 0.8s; }
#pous2 { filter: blur(0px); scale: 1; transition: all 0.8s; }

/* --- État FOCUS (Survol Menu) --- */
body.focus #blockHead, 
body.focus #titresociaux, 
body.focus #liensociaux, 
body.focus footer .e-con-inner, 
body.focus #titresFlow {
    filter: blur(10px); transition: all 0.8s;
}

/* --- État CHANGFOCUS (Survol Titre Flow) --- */

body.changFocus {
    #blockHead { filter: blur(10px); }
    #titresFlow { scale: 1.05; transition: all 0.8s; }
    #content:hover #bg-default { filter: blur(0px); transition: all 0.8s; }
    #pous1 { filter: blur(0px); scale: 1.2; transition: all 0.8s; }
    #pous2 { filter: blur(2px); scale: 1.1; transition: all 0.8s; }
    #pous3 { filter: blur(1px); scale: 0.5; transition: all 0.8s; }
    #pous4 { filter: blur(0px); scale: 0.8; transition: all 0.8s; }
    #navHome { filter: blur(10px) !important; scale: 0.95; transition: all 0.8s; }
    #titresociaux, #liensociaux { filter: blur(2px); scale: 1.3; transition: all 0.8s; }
    footer .e-con-inner { filter: blur(2px); scale: 1.3; transition: all 0.8s; }
    }


/* ==========================================================================
   4. EFFET TITRE FLOW (Organic Blur Ball)
   ========================================================================== */

#titresFlow { width: max-content; align-content: flex-start; align-items: flex-start; display: flex; position: fixed; left: 3vw; bottom: 20%; transform: translateY(-50%); flex-wrap: wrap; scale: 1; transition: all 0.8s; }
#titreFlow1 h1 { font-size: 4vw; text-align: left; width: max-content; }
#titreFlow2 h2 { font-size: 3vw; text-align: left; width: max-content; }
#titreFlow1, #titreFlow2 { width: max-content; align-self: flex-start; }

.flow-title .elementor-heading-title { position: relative; color: #ffffff; z-index: 1; }

.flow-title .elementor-heading-title::after { 
    content: ''; 
    position: absolute; 
    top: -100%; left: -50%; width: 160%; height: 300%;    
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    -webkit-mask-image: radial-gradient(closest-side, black 0%, transparent 80%);
    mask-image: radial-gradient(closest-side, black 0%, transparent 80%);
    
    -webkit-mask-size: 8vw 8vw; mask-size: 8vw 8vw;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    
    pointer-events: none; z-index: 2;
}

.flow-title .elementor-heading-title::after { animation: waveMove1 20s infinite linear; }
.flow-delay .elementor-heading-title::after { animation: waveMove2 30s infinite linear; animation-delay: 0s; }

@keyframes waveMove1 {
    0% { -webkit-mask-position: -20% 50%; mask-position: -20% 50%; opacity: 0; }
    33% { filter: contrast(1); -webkit-mask-position: 30% 20%; mask-position: 30% 20%; opacity: 1; }
    66% { filter: contrast(2); -webkit-mask-position: 60% 80%; mask-position: 60% 80%; opacity: 1; }
    100% { filter: contrast(1); -webkit-mask-position: 120% 40%; mask-position: 120% 40%; opacity: 0; }
}
@keyframes waveMove2 {
    0% { -webkit-mask-position: -20% 80%; mask-position: -20% 80%; opacity: 0; }
    50% { filter: contrast(1); -webkit-mask-position: 50% 10%; mask-position: 50% 10%; opacity: 1; }
    70% { filter: contrast(2); opacity: 1; }
    100% { -webkit-mask-position: 120% 70%; mask-position: 120% 70%; opacity: 0; }
}


/* ==========================================================================
   5. BOUTIQUE & PRODUITS
   ========================================================================== */

/* Liste Peintures (Grid) */
.listePeinture .elementor-loop-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.listePeinture .e-loop-item { box-shadow: 0 0.5vw 0.5vw rgba(0, 0, 0, 0.5); height: max-content; transition: transform 0.3s ease-out; transform: rotate(2deg); }
.listePeinture .e-loop-item img { width: 100%; transition: all 0.3s; filter: brightness(1); }
.listePeinture .e-loop-item:hover img { filter: brightness(0.3); transition: all 0.3s; }
.listePeinture .e-loop-item:hover .modalListeProduit { opacity: 1; transition: all 0.3s; }
.listePeinture .e-loop-item h4 { text-align: right; }
.listePeinture .e-loop-item h4 span { display: block; text-align: right; font-weight: 100; font-size: 0.8vw; }
.listePeinture .e-loop-item h4 span.small { display: block; text-align: right; font-weight: 100; }

/* Rotation aléatoire items grille */
.listePeinture .e-loop-item:nth-child(4n+1) { transform: rotate(1deg); }
.listePeinture .e-loop-item:nth-child(4n+2) { transform: rotate(-0.5deg); }
.listePeinture .e-loop-item:nth-child(4n+3) { transform: rotate(0.5deg); }
.listePeinture .e-loop-item:nth-child(4n+4) { transform: rotate(-0.5deg); }
.listePeinture .e-loop-item:hover { transform: rotate(0) scale(1.05); z-index: 10; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }

/* Tags produits (Tailles) */
.listePeinture .product_tag-vertical90 { width: 18vw; }
.listePeinture .product_tag-vertical50 { width: 16.7vw; }
.listePeinture .product_tag-carre40 { width: 12vw; }
.listePeinture .product_tag-horizontal90 { width: 27vw; }
.listePeinture .product_tag-horizontal140 { width: 42vw; }
.listePeinture .product_tag-carre50 { width: 15vw; }
.listePeinture .product_tag-vertical150 { width: 18vw; }
.listePeinture .product_tag-horizontal80 { width: 24vw; }
.listePeinture .product_tag-horizontal150 { width: 45vw; }

/* Modal survol produit */
.modalListeProduit { opacity: 0; transition: all 0.3s; }

/* Étiquette "NOT AI" */
.cat-peintures:after, .cat-sculptures:after { 
    content: 'NOT AI'; position: absolute; bottom: -0.5vw; right: -0.5vw; 
    color: #fff; padding: 0.1vw 0.5vw; border-radius: 0.3vw; 
    font-size: 0.7vw !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.5); 
}
.single .cat-peintures:after, .single .cat-sculptures:after { bottom: 0.5vw !important; right: 0.5vw !important; }
.single #navSculptures .cat-sculptures:after { display: none !important; }

/* Swiper Sculptures (Loop) */
#loopSculptures .swiper-slide { transition: all 1s; overflow: visible; filter: blur(10px); scale: 0.8; }
#loopSculptures .swiper-slide-active { scale: 0.5; filter: blur(10px); transition: all 1s; }
#loopSculptures .swiper-slide-next + .swiper-slide { scale: 1; filter: blur(0px); transition: all 1s; }
#loopSculptures .swiper-slide-active + .swiper-slide, #loopSculptures .swiper-slide-next { scale: 0.8; filter: blur(5px); transition: all 1s; }
#loopSculptures .swiper-slide-prev { scale: 0.3; filter: blur(20px); transition: all 1s; }
#loopSculptures .swiper-wrapper { right: -12vw !important; z-index: 100; }
#loopSculptures .elementor-swiper-button-prev { left: 56%; }
#loopSculptures .elementor-swiper-button-next { right: 5%; }
#loopSculptures .elementor-swiper-button-prev, #loopSculptures .elementor-swiper-button-next { bottom: 0; margin-top: 15vw !important; }
#loopSculptures:before { content: ''; display: block; width: 60vw; height: 130%; position: absolute; z-index: 2; }
#loopSculptures:after { content: ''; display: block; width: 10vw; height: 130%; position: absolute; z-index: 1; top: 0; right: 0; }
#loopSculptures img { width: 125% !important; max-width: 125%; left: 50%; position: relative; transform: translateX(-50%); }

/* Correctif Bug Elementor Loop Click */
.e-loop-item-542 {
    pointer-events: auto !important; opacity: 1 !important; visibility: visible !important; aria-hidden: false !important;
}

/* Background flou sur page sculptures */
body.term-sculptures:before { content: ''; display: block; width: 100%; height: 100%; z-index: 0; position: fixed; backdrop-filter: blur(20px); opacity: 0; transition: all 0.8s; }
body.term-sculptures.focus:before { opacity: 1; transition: all 0.8s; filter: brightness(0.7); }


/* ==========================================================================
   6. 3D VIEWER & MODALES
   ========================================================================== */

#crealab-model-viewer { width: 100% !important; position: relative; left: 0; }
#crealab-model-viewer canvas { margin-left: -50vw !important; }
#boxe3D { margin-left: 0vw; position: fixed; padding-right: 40vw; width: 100vw; left: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#close3D { position: fixed; z-index: 100; right: 45vw; top: 10vw; }
#close3D svg { fill: var(--e-global-color-a21ebec); }

/* Modales Elementor */
.elementor-popup-modal.dialog-type-lightbox { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.3); }
.elementor-popup-modal .dialog-message { overflow: visible; }
.dialog-widget-content .glass-effect { overflow: hidden; backdrop-filter: none !important; }
.elementor-lightbox { backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.3); }


/* ==========================================================================
   7. FORMULAIRE CONTACT (WPForms)
   ========================================================================== */

#contactForm { overflow: hidden; max-height: 40vh; overflow-y: auto; padding: 1vw; }
#contactForm * { font-size: 1vw; height: auto; font-family: "Urbanist", sans-serif; }

/* Inputs */
div.wpforms-container-full input[type=text], 
div.wpforms-container-full input[type=email], 
div.wpforms-container-full input[type=tel], 
div.wpforms-container-full textarea,
div.wpforms-container-full select {
    padding: 0.5vw 1vw !important; border: none !important; border-radius: 0.5vw !important; background-color: rgba(255, 255, 255, 0.7) !important; text-align: center;
}

/* Scrollbar Custom */
#contactForm { scrollbar-width: thin; scrollbar-color: #666 rgba(255, 255, 255, 0.05); }
#contactForm::-webkit-scrollbar { width: 10px; }
#contactForm::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
#contactForm::-webkit-scrollbar-thumb { background-color: #666; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
#contactForm::-webkit-scrollbar-thumb:hover { background-color: #888; }

/* Labels & Legend */
fieldset { text-align: center; color: #fff !important; }
legend, label, .wpforms-field.wpforms-field-divider h3 {
    color: #fff !important; text-shadow: 0 0.2vw 0.3vw rgba(0, 0, 0, 0.3) !important; font-size: 1.5vw !important; margin: 0; font-weight: 400 !important;
}
legend { letter-spacing: -0.05vw !important; }

/* Checkbox & Radio */
div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=radio]:before {
    height: 1vw !important; width: 1vw !important;
}
div.wpforms-container-full input[type=checkbox]:checked:before, div.wpforms-container-full input[type=radio]:checked:before {
    border-color: var(--e-global-color-a21ebec) !important; box-shadow: 0 0 0 1px var(--e-global-color-a21ebec), 0px 1px 2px rgba(0,0,0,0.15) !important;
}
div.wpforms-container-full input[type=radio]:checked:after { background-color: var(--e-global-color-a21ebec) !important; }

/* Bouton Submit */
#contactForm button { background-color: var(--e-global-color-a21ebec); padding: 0.5vw 2vw 0.7vw 2vw; align-self: center; }
.wpforms-submit-container { justify-content: center; display: flex; }
.grecaptcha-badge { display: none !important; }


/* ==========================================================================
   8. FOOTER & DIVERS
   ========================================================================== */

.home footer { position: fixed; width: 100%; bottom: 0; z-index: 100; backdrop-filter: blur(10px); }
footer .e-con-inner { backdrop-filter: blur(10px); width: 100%; filter: blur(0px); transition: all 0.8s; }

/* Effet Glass (Générique) */
.glass-effect { 
    --blur-intensity: 0.5vw; --brightness-level: 97%;
    backdrop-filter: blur(var(--blur-intensity)) brightness(var(--brightness-level));
    -webkit-backdrop-filter: blur(var(--blur-intensity)) brightness(var(--brightness-level));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.15); 
    border-radius: 1.5vw;
}

/* Carte Réfraction (CSS only) */
.refraction-card { 
    padding: 2rem; border-radius: 1vw; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.05), 0 0 40px rgba(0, 0, 0, 0.25), 0 4px 30px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.45);
    transform: translateZ(0);
    -webkit-backdrop-filter: blur(5px) brightness(1.1) contrast(1.1);
    backdrop-filter: url(#refractionFilter);
}
.refraction-card::before { content: none !important; }
.refraction-card::after { 
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 10%, rgba(255, 255, 255, 0.02) 40%, transparent 80%); 
    pointer-events: none; mix-blend-mode: screen; z-index: 1; 
}
.refraction-card .elementor-widget-container { position: relative; z-index: 2; color: #fff; }

/* iPad Mockup */
#videoIpad:before { content: ''; display: block; width: 27.7vw; height: 35.9vw; background-image: url(https://dev.crealab.shop/wp-content/uploads/2025/11/apple-ipad-pro2.png); opacity: 1; background-size: cover; z-index: 1; margin-left: -1.25vw; margin-top: -1.4vw; }
#videoIpad:after { content: ''; display: block; width: 27.2vw; height: 35.7vw; position: absolute; background-color: #000; margin-left: -0.9vw; margin-top: -1.2vw; z-index: -1; border-radius: 1.7vw; box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.6); }

/* Swiper Arrows (Générique) */
.elementor-swiper-button-prev, .elementor-swiper-button-next { height: 5.5vw; width: 2vw; transition: all 0.3s; }
.elementor-swiper-button-prev svg, .elementor-swiper-button-next svg { display: none; }
.elementor-swiper-button-prev { background-image: none; mask-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/arrow.svg'); -webkit-mask-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/arrow.svg'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background-color: rgb(180, 205, 0); }
.elementor-swiper-button-next { background-image: none; mask-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/arrowR.svg'); -webkit-mask-image: url('https://dev.crealab.shop/wp-content/uploads/2025/11/arrowR.svg'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background-color: rgb(180, 205, 0); }
.elementor-swiper-button-prev:hover, .elementor-swiper-button-next:hover { transition: all 0.3s; background-color: rgb(255, 255, 255); }

/* Items Catégories */
.unItemCategorie { background-size: cover !important; height: 4vw !important; min-height: 0 !important; background-position: center; scale: 1; transition: all 0.3s; }
.unItemCategorie a { opacity: 0; transition: all 0.3s; }
.unItemCategorie:before { content: ''; background: #000; opacity: 0; transition: all 0.3s; }
.unItemCategorie:hover:before { content: ''; background: #000; opacity: 0.6; transition: all 0.3s; }
.unItemCategorie:hover a { opacity: 1; transition: all 0.3s; }
.unItemCategorie:hover { scale: 1.03; transition: all 0.3s; z-index: 10; }
.comptage { color: #fff; font-weight: 600; font-size: 1.5vw; margin-top: -1vw; margin-left: 0.5vw; }