/* Theme Name: Hello Elementor Child AI
Theme URI: https://dev.crealab.shop/
Description: Miroir éditable via AI Engine (MCP) du thème hello-child. Clone fidèle piloté par Claude pour itérer sur le code thème sans déploiement FTP manuel. NON activé par défaut — hello-child reste le thème de production.
Author: Crealab / Jocelyn Bouget
Author URI: https://dev.crealab.shop/
Template: hello-elementor
Version: 2.1.1
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. FONTS === */
/* (vide — fonts gérées via Elementor / Theme Style) */


/* === 2. VARIABLES CSS === */
:root {
    --crealab-paint-scale: 0.32rem;
    --crealab-paint-max-w: 70rem;
    --crealab-menu-z: 100;
}


/* === 3. RESET === */
:focus, :focus-visible {outline: none;}
[type=button], [type=submit], button {border: none; padding: inherit;}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {background-color: inherit;}
button.burger {padding: 0 !important;}
p, li {line-height: 1.5rem;}


/* === 4. DEV TOOLS === */
/* (vide — placeholder pour outillage temporaire de debug) */


/* === 5. LAYOUT & THEMES === */
/* --- 5.1 Header & Footer (squelette) --- */
header {width: 100rem;}
.home footer {position: fixed; width: 100%; bottom: 0; z-index: 100; backdrop-filter: blur(10px);}
footer {z-index: 100000 !important; position: relative;}
footer .e-con-inner {backdrop-filter: blur(10px); width: 100%; filter: blur(0px); transition: all 0.8s;}

/* --- 5.2 Background stack (Home) --- */
.background-stack {position: fixed; top: 0; left: 0; width: 100%; height: 100%; 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;}
#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');}
body.home #bg-default {backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}

/* --- 5.3 Particules (Home) --- */
#pous1, #pous3, #pous4 {filter: blur(2px); scale: 1; transition: all 0.8s;}
#pous2 {filter: blur(0px); scale: 1; transition: all 0.8s;}

/* --- 5.4 États body : SCROLL / FOCUS / CHANGFOCUS --- */
.scroll #logo {position: fixed; top: 1rem; height: 3rem !important; opacity: 0.5;}
.scroll #logo:hover, .scroll #logo:hover svg {opacity: 1;}
.scroll #logo svg {height: 3rem !important;}
.scroll #signature {position: fixed; top: 6rem; opacity: 0.5; left: 9.5rem;}
.scroll #signature svg {height: 1.5rem !important;}
.scroll #ensembleLogo {margin-top: 0; width: 10rem; justify-self: left;}
.scroll #burger {width: 3rem;}
.scroll #blockHead {width: 10rem;}
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;}
body.changFocus #blockHead {filter: blur(10px);}
body.changFocus #titresFlow {scale: 1.05; transition: all 0.8s;}
body.changFocus #content:hover #bg-default {filter: blur(0px); transition: all 0.8s;}
body.changFocus #pous1 {filter: blur(0px); scale: 1.2; transition: all 0.8s;}
body.changFocus #pous2 {filter: blur(2px); scale: 1.1; transition: all 0.8s;}
body.changFocus #pous3 {filter: blur(1px); scale: 0.5; transition: all 0.8s;}
body.changFocus #pous4 {filter: blur(0px); scale: 0.8; transition: all 0.8s;}
body.changFocus #navHome {filter: blur(10px) !important; scale: 0.95; transition: all 0.8s;}
body.changFocus #titresociaux, body.changFocus #liensociaux {filter: blur(2px); scale: 1.3; transition: all 0.8s;}
body.changFocus footer .e-con-inner {filter: blur(2px); scale: 1.3; transition: all 0.8s;}

/* --- 5.5 Body z-index ajustement --- */
body::after {z-index: 1 !important;}


/* === 6. COMPOSANTS UI === */

/* --- 6.1 Loader & animations utilitaires --- */
.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);}}
@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;}
.afficheApresChargement {opacity: 0;}
.afficheApresChargement.est-charge {opacity: 1; transition: opacity .5s ease-out;}

/* --- 6.2 Logo & Signature --- */
#logo {opacity: 0.7; transition: all 0.3s;}
#logo:hover {opacity: 1 !important;}
body.home #logo a {pointer-events: none; cursor: default; opacity: 1;}
#signature {left: 10rem !important;}
#ensembleLogo {width: 39%; margin-right: 100% !important;}
#blockHead {filter: blur(0px); transition: all 0.8s; width: 100% !important; --width: 100% !important;}
#icoContact {position: fixed; right: 0;}

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

/* --- 6.4 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: 1rem; opacity: 0.5;}
#navHome > nav > ul > li > a span {display: none;}

/* --- 6.5 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: right; 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: 1rem; opacity: 0.5; justify-content: right;}
#navMenu > nav > ul > li > a:hover {color: var(--e-global-color-a21ebec) !important; opacity: 1;}
#navMenu > nav > ul > li.current-menu-item > a {margin-top: 1rem; opacity: 1; justify-content: right;}
#navMenu > nav > ul > li > a span {display: none;}
.current-product_cat-ancestor > a {font-weight: 600; color: var(--e-global-color-a21ebec) !important;}

/* --- 6.6 Effet Titre Flow (Organic Blur Ball) --- */
#titresFlow {width: max-content; align-content: flex-start; align-items: flex-start; display: flex; position: fixed; left: 3rem; bottom: 20%; transform: translateY(-50%); flex-wrap: wrap; scale: 1; transition: all 0.8s;}
#titreFlow1 h1 {font-size: 4rem; text-align: left; width: max-content;}
#titreFlow2 h2 {font-size: 3rem; 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: 8rem 8rem; mask-size: 8rem 8rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; z-index: 2; 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;}}

/* --- 6.7 Boutique : Liste Peintures (grid) --- */
/* Container flex wrap (pas de masonry — désactivé côté Elementor le 2026-05-10) */
.listePeinture .elementor-loop-container {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
/* Item : largeur proportionnelle à la dimension réelle du tableau via --paint-w injecté par 06-paintings.php */
.listePeinture .e-loop-item {width: calc(var(--paint-w, 60) * var(--crealab-paint-scale)); max-width: var(--crealab-paint-max-w, 50rem); height: max-content; box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.5); transition: transform 0.3s ease-out; transform: rotate(2deg);}
/* Wrapper image : aspect-ratio + position relative pour le pseudo LQIP. Place réservée AVANT décodage img (anti-CLS) */
.listePeinture .e-loop-item .elementor-widget-theme-post-featured-image {aspect-ratio: var(--paint-w, 60) / var(--paint-h, 90); background-color: #1a1a1a; overflow: hidden; position: relative;}
.listePeinture .e-loop-item .elementor-widget-theme-post-featured-image > .elementor-widget-container, .listePeinture .e-loop-item .elementor-widget-theme-post-featured-image a {width: 100%; height: 100%; display: block;}
/* LQIP "blur-up" : vignette floue (--paint-lqip injecté par 15-paintings-lqip.php) en pseudo ::before, fade-out via .is-loaded posée au load image (JS du même module) */
.listePeinture .e-loop-item .elementor-widget-theme-post-featured-image::before {content: ''; position: absolute; inset: 0; background-image: var(--paint-lqip, none); background-size: cover; background-position: center; filter: blur(15px); transform: scale(1.15); z-index: 1; pointer-events: none; opacity: 1; transition: opacity 0.6s ease-out;}
.listePeinture .e-loop-item .elementor-widget-theme-post-featured-image.is-loaded::before {opacity: 0;}
/* Image : remplit le wrapper en cover, aspect-ratio doublé en sécurité (cas où le wrapper Elementor change de classe) */
.listePeinture .e-loop-item img {width: 100%; height: 100%; aspect-ratio: var(--paint-w, 60) / var(--paint-h, 90); object-fit: cover; 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: 1.28rem;}
.listePeinture .e-loop-item h4 span.small {display: block; text-align: right; font-weight: 100;}
.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 0.625rem 1.875rem rgba(0, 0, 0, 0.4);}
.modalListeProduit {opacity: 0; transition: all 0.3s;}

/* --- 6.8 Étiquette "NOT AI" (désactivée — :after non rendus) --- */
.cat-peintures:after, .cat-sculptures:after, .single .cat-sculptures:after {display: none;}

/* --- 6.9 Nav sculptures (visibility) --- */
#navSculptures {opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s;}
#navSculptures.is-visible {opacity: 1; visibility: visible;}
#boxsculptureHome {position: fixed; top: 0; bottom: 0; justify-content: safe center; overflow: auto; align-content: flex-start;}

/* --- 6.10 Swiper Sculptures (loop) --- */
#loopSculptures {min-height: 35rem;}
#loopSculptures .swiper-slide {transition: all 1s; filter: blur(10px); scale: 0.8; margin-right: 1.3rem !important;}
#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: -12rem !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: 15rem !important;}
#loopSculptures:before {content: ''; display: block; width: 60rem; height: 130%; position: absolute; z-index: 2;}
#loopSculptures:after {content: ''; display: block; width: 10rem; 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%);}

/* --- 6.11 Items catégorie (grid pivots) --- */
.unItemCategorie {background-size: cover !important; height: 15rem !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.5rem; margin-top: -1rem; margin-left: 0.5rem;}

/* --- 6.12 WC actions (boutons) --- */
.crealab-not-purchasable .acheter {display: none !important;}
.crealab-not-purchasable .voir {margin-inline: auto;}

/* --- 6.13 Fiche (#baseFiche) --- */
#baseFiche {position: fixed; bottom: 0; top: 0; justify-content: space-between; overflow-y: auto; isolation: isolate;}
#baseFiche > .crealab-bg-layer {position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s ease-in-out; will-change: opacity;}
#baseFiche > .crealab-bg-layer.is-active {opacity: 1;}
.crealab-viewer-open #baseFiche {-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(10px) !important;}
/* Voile flou : posé sur #baseFiche en pseudo-élément, couvre le contenu fiche derrière le viewer 3D */
body.crealab-viewer-open #baseFiche::before {content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; opacity: 1; z-index: 1;}
/* Blur de l'image mise en avant quand le viewer 3D est affiché */
body.crealab-viewer-open #imageMiseEnAvant {filter: blur(10px); transition: filter 0.4s ease;}
/* Bloque les scrollbars parasites pendant l'ouverture du viewer (3 surfaces possibles : html, body, #baseFiche) */
html:has(body.crealab-viewer-open) {overflow: hidden !important;}
body.crealab-viewer-open {overflow: hidden !important;}
body.crealab-viewer-open #baseFiche {overflow: hidden !important;}
#contenuefiche{position: fixed; top: 5rem; margin: 0; right: 6rem;  bottom: 20rem; height: stretch;}
#blockMedia{position: fixed; bottom: 6rem; right: 6rem; width: stretch; left: 6rem; margin: 0;}



/* --- 6.14 Viewer 3D plein cadre --- */
#viewerFiche {position: relative; overflow: visible;}
#viewerFiche #boxe3D {position: absolute; inset: 0; width: 100%; height: 80%; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0s linear 0.4s; margin-top: 8rem;}
#viewerFiche #boxe3D.is-open {opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s ease-out, visibility 0s linear 0s;}
#viewerFiche #boxe3D > .elementor-widget-container {width: 100%; height: 100%;}
#viewerFiche #crealab-model-viewer {width: 100%; height: 100%; --poster-color: transparent;}
#viewerFiche #close3D {position: absolute; top: 5rem; right: 1.5rem; z-index: 10; cursor: pointer;}
#viewerFiche #close3D * {pointer-events: none; fill: var(--e-global-color-a21ebec);}
#crealab-model-viewer::part(default-progress-bar) {display: none;}
.crealab-loader {position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: transparent; z-index: 9992; pointer-events: none;}
#boxe3D.is-open .crealab-loader {display: flex;}
#boxe3D.is-loaded .crealab-loader {display: none;}
.crealab-spinner {width: 5rem; height: 5rem; border: 3px solid rgba(255,255,255,0.25); border-top-color: var(--color-accent, #cdf163); border-radius: 50%; animation: crealab-spin 0.9s linear infinite;}
.crealab-spinner { position: relative; }
.crealab-loader-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--crealab-font-base, sans-serif); font-size: 0.85rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; user-select: none; line-height: 1; min-width: 3ch; text-align: center; transition: opacity 0.3s ease; z-index: 2; }
.crealab-loader-pct.is-done { opacity: 1; font-size:1.2rem;}

@keyframes crealab-spin {to {transform: rotate(360deg);}}

#crealab-model-viewer {width: 50% !important; height: stretch !important; --poster-color: transparent; position: fixed; top: 5rem; bottom: 15rem; transition: opacity 0.4s ease; z-index: 9991;}
#boxe3D {z-index: 9990 !important;}
#blockMedia {z-index: 1;}
#close3D {position: fixed; z-index: 9999 !important; top: 8rem; left: 51%;}
#close3D svg {fill: var(--e-global-color-a21ebec);}
/* Force masquage : le model-viewer est en position fixed donc indépendant de #boxe3D — on toggle son visibility via la classe .is-open du parent */
#boxe3D:not(.is-open) #crealab-model-viewer {visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;}
#boxe3D.is-open #crealab-model-viewer {visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;}

/* --- 6.15 Modales Elementor & Lightbox --- */
.elementor-popup-modal.dialog-type-lightbox {backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgb(136 136 136 / 30%);}
.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);}
.elementor-lightbox .elementor-lightbox-image {box-shadow: none !important;}
.elementor-slideshow__title {display: none;}

/* --- 6.16 Formulaire Contact (WPForms) --- */
#contactForm {overflow: hidden; max-height: 40vh; overflow-y: auto; padding: 1rem; scrollbar-width: thin; scrollbar-color: #666 rgba(255, 255, 255, 0.05);}
#contactForm * {font-size: 1rem; height: auto; font-family: "Urbanist", sans-serif;}
#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;}
#contactForm button {background-color: var(--e-global-color-a21ebec); padding: 0.5rem 2rem 0.7rem 2rem; align-self: center;}
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.5rem 1rem !important; border: none !important; border-radius: 0.5rem !important; background-color: rgba(255, 255, 255, 0.7) !important; text-align: center;}
div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=radio]:before {height: 1rem !important; width: 1rem !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;}
fieldset {text-align: center; color: #fff !important;}
legend, label, .wpforms-field.wpforms-field-divider h3 {color: #fff !important; text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.3) !important; font-size: 1.5rem !important; margin: 0; font-weight: 400 !important;}
legend {letter-spacing: -0.05rem !important;}
.wpforms-submit-container {justify-content: center; display: flex;}
.grecaptcha-badge {display: none !important;}

/* --- 6.17 Glass effect & Refraction card --- */
.glass-effect {--blur-intensity: 0.5rem; --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.5rem;}
.refraction-card {padding: 2rem; border-radius: 1rem; 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;}

/* --- 6.18 iPad Mockup (LEGACY — désactivé 2026-05-10) --- */
/* La composition iPad+pencil+vidéo est désormais 100% intégrée à la shortcode [crealab_timelapse mockup="ipad" pencil="true"] (cf. inc/16-timelapse-lazy.php). Plus de dépendance à un id Elementor #videoIpad ni à des URLs absolues hardcodées. Bloc conservé en commentaire pour référence historique uniquement. */
/*
#videoIpad:before {content: ''; display: block; width: 27.7rem; height: 35.9rem; background-image: url(/wp-content/uploads/2025/11/apple-ipad-pro2.webp); opacity: 1; background-size: cover; background-repeat: no-repeat; z-index: 1; margin-left: -1.25rem; margin-top: -1.4rem; pointer-events: none;}
#videoIpad:after {content: ''; display: block; width: 27.2rem; height: 35.7rem; position: absolute; background-color: #000; margin-left: -0.9rem; margin-top: -1.2rem; z-index: -1; border-radius: 1.7rem; box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.6);}
*/

/* --- 6.19 Swiper Arrows (générique) --- */
.elementor-swiper-button-prev, .elementor-swiper-button-next {height: 5.5rem; width: 2rem; 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); height: 7rem !important; width: 9rem !important;}
.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); height: 7rem !important; width: 9rem !important;}
.elementor-swiper-button-prev:hover, .elementor-swiper-button-next:hover {transition: all 0.3s; background-color: rgb(255, 255, 255);}
.e-font-icon-svg.e-eicon-chevron-right, .e-font-icon-svg.e-eicon-chevron-left {font-size: 1rem !important; height: 1rem !important;}

/* --- 6.20 Loop grid hover (zoom image) --- */
.elementor-widget-loop-grid .e-image-link-base img {scale: 1; transition: all 0.5s;}
.elementor-widget-loop-grid .e-image-link-base:hover img {scale: 1.1; transition: all 0.5s;}

/* --- 6.21 Galerie ACF "background" (#crealab-bg-gallery) --- */
#crealab-bg-gallery {margin-left: -0.5rem !important;}
#crealab-bg-gallery img {cursor: zoom-in; transition: opacity .2s ease, outline-color .2s ease;}
#crealab-bg-gallery img:hover {opacity: .85;}
#crealab-bg-gallery .is-bg-active, #crealab-bg-gallery .is-bg-active img {outline: 2px solid var(--color-accent, #c9a86a); outline-offset: 2px;}

/* --- 6.22 Image Gallery (Elementor / WP) --- */
.elementor-image-gallery .gallery, .elementor-widget-image-gallery {display: flex !important; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: fit-content !important; max-width: 100%; margin-left: 0 !important; margin-right: 0.5rem !important; gap: 4px;}
.elementor-image-gallery .gallery .gallery-item {width: auto !important; max-width: 9rem !important; margin: 0 1rem 0 0 !important; float: none !important; padding: 0 !important; flex: 0 0 auto;}
.elementor-image-gallery .gallery br {display: none !important;}

/* --- 6.23 Panneau narratif fiche (#contenuArticle) --- */
#contenuArticle {height: auto; overflow-y: auto; overflow-x: hidden; padding-right: .75rem; scrollbar-width: thin; scrollbar-color: rgba(180,180,180,.55) transparent;}
#contenuArticle h2 {font-size: 1.5rem; padding: 0; margin: 0; font-weight: 600;}
#contenuArticle::-webkit-scrollbar {width: 6px;}
#contenuArticle::-webkit-scrollbar-track {background: transparent;}
#contenuArticle::-webkit-scrollbar-thumb {background: rgba(180,180,180,.55); border-radius: 3px; transition: background .2s ease;}
#contenuArticle::-webkit-scrollbar-thumb:hover {background: rgba(180,180,180,.9);}

/* --- 6.24 Misc layout fiche (navigation prev/next, image mise en avant, etc.) --- */
#navigation {top: 50%; transform: translateY(-50%);}
#navCatPeinture {left: 0 !important;}
#grilleTableaux {align-self: center;}
#imageMiseEnAvant {top: 50%; transform: translateY(-50%);}

/* --- 6.25 Menu nav soft BOTTOM (#menuDeNavigationSoft) — full CSS pure, hover only --- */
#menuDeNavigationSoft {position: fixed; bottom: 0 !important; margin-bottom: 0; margin-top: auto; z-index: var(--crealab-menu-z); transition: 0.3s;}
#menuDeNavigationSoft #navSculpture {max-height: 0; opacity: 0; overflow: hidden; transform: translateY(1rem); transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none;}
#menuDeNavigationSoft:hover #navSculpture {max-height: 20rem; opacity: 1; transform: translateY(0); pointer-events: auto;}
#menuDeNavigationSoft #ctaDeploy {cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;}
#menuDeNavigationSoft #ctaDeploy svg, #menuDeNavigationSoft #ctaDeploy i, #menuDeNavigationSoft #ctaDeploy .elementor-icon {display: inline-block; transform-origin: center center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
#menuDeNavigationSoft:hover #ctaDeploy svg, #menuDeNavigationSoft:hover #ctaDeploy i {transform: rotate(180deg);}
#menuDeNavigationSoft #ctaDeploy .elementor-icon-wrapper {margin-bottom: -1rem;}
body:has(#menuDeNavigationSoft:hover) #grilleTableaux {/* ← tes styles ici */}
#navSculpture {justify-self: center !important; align-self: center !important; border-radius: 1rem 1rem 0 0}
/* --- 6.26 Menu slider DROITE (#menuSliderRight + .deploiMenuSliderRight) — hover sur le menu --- */
#menuSliderRight {position: fixed; top: 0; bottom: 0; right: -26rem; left: auto; height: auto; transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: right;}
.deploiMenuSliderRight svg {width: 3.5rem !important; height: 6rem !important; transform: scaleX(1); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); fill: #fff; --blur-intensity: 0.5rem; --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:  0.5rem 0 0 0.5rem; border-right: none; padding: 0 1rem;}
#menuSliderRight:hover {right: 0;}
#menuSliderRight:hover .deploiMenuSliderRight svg {--blur-intensity: 0rem; --brightness-level: 100; backdrop-filter: none; box-shadow: none;}
/* Hook : styler la grille de boucle quand le menu slider est déployé (à remplir selon besoin) */
body:has(#menuDeNavigationSoft:hover) #ctaDeploy {--blur-intensity: 0.5rem; --brightness-level: 100%; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow:none; border-radius:0;}

/* --- 6.27 Réassurance (.crealab-reassurance) --- */
.crealab-reassurance {--crl-rea-accent: #b8c540; --crl-rea-text: #ffffff; --crl-rea-bg: rgba(255,255,255,.06); --crl-rea-border: rgba(255,255,255,.18); --crl-rea-pad: 1.4rem 1.6rem; --crl-rea-radius: 12px; --crl-rea-gap: .55rem; text-align: right; padding-right: 1.3rem; margin-top: 1rem;}
.crealab-reassurance, .crealab-reassurance * {box-sizing: border-box;}
.crealab-reassurance p {margin: 0;}
.crealab-reassurance__icon {width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: #fff; margin-top: .15rem; margin-right: 0.4rem;}
.crealab-reassurance__title {font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: #fff; display: flex; align-items: center; justify-content: end;}
.crealab-reassurance__body {font-size: 1.1rem; line-height: 1.2; color: #fff;}
.crealab-reassurance__body strong {font-weight: 600;}

/* --- 6.28 Timelapse + Mockup iPad (shortcode crealab_timelapse, module inc/16) --- */
/* Wrapper vidéo (mockup="none") : prend 100%×100% du parent, overflow hidden, fond transparent (n'écrase pas un éventuel fond derrière). */
#videoIpad{width: 40rem; position: absolute; right: 5rem}
.crealab-timelapse {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: transparent;}
.crealab-timelapse video, .crealab-timelapse iframe, .crealab-timelapse__poster {display: block; width: 100%; height: 100%; border: 0;}
.crealab-timelapse--fit-cover video, .crealab-timelapse--fit-cover iframe, .crealab-timelapse--fit-cover .crealab-timelapse__poster {object-fit: cover;}
.crealab-timelapse--fit-contain video, .crealab-timelapse--fit-contain iframe, .crealab-timelapse--fit-contain .crealab-timelapse__poster {object-fit: contain;}
.crealab-timelapse--fit-fill video, .crealab-timelapse--fit-fill iframe, .crealab-timelapse--fit-fill .crealab-timelapse__poster {object-fit: fill;}
.crealab-timelapse--fit-none video, .crealab-timelapse--fit-none iframe, .crealab-timelapse--fit-none .crealab-timelapse__poster {object-fit: none;}
.crealab-timelapse__poster {transition: opacity 0.3s ease-out;}
.crealab-timelapse.is-playing .crealab-timelapse__poster {opacity: 0; pointer-events: none;}
.crealab-timelapse__play {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem; padding: 0; background: transparent; border: 0; cursor: pointer; transition: transform 0.2s ease-out, opacity 0.3s ease-out; z-index: 2;}
.crealab-timelapse__play svg {width: 100%; height: 100%;}
.crealab-timelapse__play:hover {transform: translate(-50%, -50%) scale(1.1);}
.crealab-timelapse.is-playing .crealab-timelapse__play {opacity: 0; pointer-events: none;}
.crealab-timelapse--lazy .crealab-timelapse__play, .crealab-timelapse--false .crealab-timelapse__play {display: none;}
/* Mockup iPad (mockup="ipad") : ratio iPad Pro 12.9" via padding-bottom (insensible au contexte parent flex Elementor, là où aspect-ratio est ignoré). Inset = bordures iPad (~3.4% Y, ~4.8% X). */
.crealab-timelapse-mockup {position: relative; display: block; width: 100%; height: 0; transform: rotate(var(--crealab-mockup-rot, 9deg)); transform-origin: center center; transform: rotate(9deg);}
.crealab-timelapse-mockup--ipad {--crealab-mockup-screen-inset-y: 3.5%; --crealab-mockup-screen-inset-x: 5%; padding-bottom: 120.8%;}
.crealab-timelapse--video{width: 89.7%;}
.crealab-timelapse-mockup__bg {position: absolute; top: var(--crealab-mockup-screen-inset-y); right: var(--crealab-mockup-screen-inset-x); bottom: -2rem; left: var(--crealab-mockup-screen-inset-x); background: #000; box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.5); border-radius: 0.6rem; z-index: 0;}
.crealab-timelapse-mockup .crealab-timelapse {position: absolute; top: var(--crealab-mockup-screen-inset-y); right: var(--crealab-mockup-screen-inset-x); bottom: var(--crealab-mockup-screen-inset-y); left: var(--crealab-mockup-screen-inset-x); z-index: 1;}
.crealab-timelapse-mockup__chrome {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; user-select: none;}
.crealab-timelapse-mockup__pencil {position: absolute; right: -18%; bottom: 4%; width: 17%; height: auto; z-index: 3; pointer-events: none; user-select: none; transform: rotate(-180deg); filter: drop-shadow(0 0.5rem 0.8rem rgba(0, 0, 0, 0.4));}

.entreeCat{width: max-content; justify-self: flex-start; align-self: center; margin-bottom: 15rem; padding: 1rem; border-radius: 0.5rem}
.entreeCat { transition: all .5s ease; }
.listePeinture:hover + .entreeCat { transform: rotate(-3deg); background-color:rgba(255, 255, 255, .3); }

/* --- 6.29 Corner Link Injection (shortcode crealab_corner_link, module inc/18) --- */
/* Bloc "Découvrir l'univers" injecté en fin de fiche produit pour booster le maillage interne vers la page corner de chaque univers (peintures/sculptures/bijoux). */
.crealab-corner-link {margin: 3rem 0 1rem; padding: 1.5rem 1.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.3s ease-out, border-color 0.3s ease-out;}
.crealab-corner-link:hover {background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2);}
.crealab-corner-link__anchor {display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit;}
.crealab-corner-link__label {font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em;}
.crealab-corner-link__label::after {content: ' →'; transition: transform 0.2s ease-out; display: inline-block;}
.crealab-corner-link:hover .crealab-corner-link__label::after {transform: translateX(0.3rem);}

.crealab-corner-link__tagline {font-size: 0.95rem; opacity: 0.75; line-height: 1.4;}
.e-loop-item .sculpture-dims {color: #fff !important; text-align: center !important; width: 100% !important; font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem}
.dimension{display: flex; justify-content: center;}
#fullPage{position: fixed; top: 0; bottom: 0;}

.lienPeintureArticle{
    width:100% !important; height: fit-content !important;
    background-color: #292929;--display: flex;
    max-width: 100%;
    border-style: solid !important; 
    --border-style: solid !important;
    border-width: 0.4 0.4 0.4 0.4 !important;
    --border-top-width: 0.4 !important;
    --border-right-width: 0.4 !important;
    --border-bottom-width: 0.4 !important;
    --border-left-width: 0.4 !important;
    border-color: #202020 !important;
    --border-color: #202020 !important;
    box-shadow: 0px 12px 6px 0px rgba(0, 0, 0, 0.64) inset !important ;
    --padding-top: 1rem !important;
    --padding-bottom: 1rem !important;
    --padding-left: 1rem !important;
    --padding-right: 1rem !important;
}
.lienPeintureArticle img{padding: 0.2rem}
.boxPeinture{box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.5);height: fit-content !important; padding: 0 !important}
#menuDeNavigationSoft.presCornerPeinture:hover #navSculpture{max-height: 50rem}
#menuDeNavigationSoft.presCornerPeinture > div:first-child{width: max-content;background-color: rgba(255, 255, 255, 0); border-radius: 0.5rem 0.5rem 0 0}
#menuDeNavigationSoft.presCornerPeinture > div:last-child{background-color: rgba(0, 0, 0, 0.2);}
.ctaMenuCat1:hover .elementor-widget-icon-box *{color: var(--e-global-color-accent) !important; fill: var(--e-global-color-accent) !important;}
#sliderBijoux{position: fixed; top: 0; bottom: 0; }
#pageBijoux .glass-effect{align-self: flex-start;}
#pageBijoux .elementor-background-slideshow__slide__image{background-size: 130rem; background-position: -30% 10%; background-repeat: no-repeat; }

.home #menuSliderRight{right: 10rem}
.home .deploiMenuSliderRight svg, .home .e-ec5573c-7e8d53f{box-shadow: none; border: none; background-color: transparent; --blur-intensity: 0rem; --brightness-level: 100%;}
.home #menu-1-32cd9d7{scale: 1.3}
#menuSliderRight .deploiMenuSliderRight{width: 4rem !important}
.boxeRedactionnel{overflow-y: auto; max-height: 20rem; padding-right: 1rem}

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

.home #menuSliderRight { transition: opacity .25s ease, visibility .25s ease; }

/* Quand on hover le menu soft, on cache menuSliderRight */
body:has(#menuDeNavigationSoft:hover) #menuSliderRight {
  opacity: 0;
  visibility: hidden;       /* coupe les clics + le focus, plus propre que pointer-events */
  pointer-events: none;     /* ceinture + bretelles */
}
/* 6.30 Mobile Coming Soon : CSS déplacé inline dans inc/19-mobile-coming-soon.php (anti-FOUC, injection wp_head priorité 1). */
/* === ANAMORPHOSE BOX === */
#anamorphose-box { position: relative; width: 600px; height: 900px; margin: 0 auto; pointer-events: none; }
#anamorphose-canvas { width: 100%; height: 100%; display: block; }

/* === ANAMORPHOSE GUI === */
#anamorphose-gui { position: fixed; top: 20px; right: 20px; z-index: 99999; background: rgba(15,15,15,0.92); color: #fff; font: 11px/1.4 ui-monospace,SFMono-Regular,monospace; padding: 36px 14px 14px; border-radius: 8px; min-width: 280px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); user-select: none; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); pointer-events: auto; }
#anamorphose-gui .head { position: absolute; top: 0; left: 0; right: 0; padding: 10px 14px; cursor: move; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
#anamorphose-gui .head strong { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #4caf50; }
#anamorphose-gui .head .toggle { background: none; border: none; color: #888; font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; }
#anamorphose-gui .head .toggle:hover { color: #fff; }
#anamorphose-gui.min .body { display: none; }
#anamorphose-gui.min { padding-bottom: 0; min-width: 200px; }
#anamorphose-gui h4 { margin: 12px 0 6px; font-size: 9px; text-transform: uppercase; color: #666; letter-spacing: 1px; font-weight: 600; }
#anamorphose-gui h4:first-child { margin-top: 0; }
#anamorphose-gui label { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
#anamorphose-gui label > span:first-child { flex: 0 0 100px; font-size: 11px; color: #ccc; }
#anamorphose-gui label > span.val { flex: 0 0 50px; text-align: right; color: #4caf50; font-size: 11px; }
#anamorphose-gui input[type="range"] { flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none; background: #2a2a2a; border-radius: 2px; outline: none; }
#anamorphose-gui input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #4caf50; cursor: pointer; border: none; }
#anamorphose-gui input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #4caf50; cursor: pointer; border: none; }
#anamorphose-gui select { flex: 1; background: #1a1a1a; color: #fff; border: 1px solid #333; padding: 3px 6px; font: inherit; border-radius: 3px; }
#anamorphose-gui input[type="checkbox"] { accent-color: #4caf50; }
#anamorphose-gui .btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#anamorphose-gui button.preset, #anamorphose-gui button.action { background: #1a1a1a; color: #fff; border: 1px solid #333; padding: 5px 8px; font: 9px ui-monospace,monospace; cursor: pointer; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; min-width: 0; }
#anamorphose-gui button.preset:hover { background: #4caf50; border-color: #4caf50; }
#anamorphose-gui button.action:hover { background: #ff9800; border-color: #ff9800; }

/* === 7. RESPONSIVE === */
@media (max-width: 560px) {
    .crealab-reassurance {grid-template-columns: 1fr; padding: 1.1rem 1.25rem;}
    .crealab-reassurance__icon {grid-row: auto;}
}

/* === 8. A11Y — prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    .crealab-timelapse__poster, .crealab-timelapse__play {transition: none;}
    .crealab-corner-link, .crealab-corner-link__label::after {transition: none;}
}