.belisa-hero { position:relative; background:#F4F4F1; overflow:hidden; } /* Espace au-dessus du titre volontairement réduit (et le padding de l'éventail ci-dessous mis à 0) : l'objectif est de faire apparaître une part significative des photos/vidéos dès le premier écran plutôt qu'après un long scroll à vide — c'est un secteur où la preuve visuelle convertit mieux qu'un paragraphe de plus. */ .belisa-hero-intro { position:relative; z-index:20; text-align:center; padding:72px 24px 0; margin-bottom:-20px; } .belisa-hero-intro h1 { /* !important requis : ce stylesheet se charge avant le CSS principal d'Uncode dans le (ordre d'enqueue), qui peut sinon regagner la priorité sur des règles de même spécificité. */ font-family:'Bodoni Moda','Playfair Display',Georgia,serif !important; font-weight:500 !important; font-size:clamp(36px,5.8vw,65px) !important; line-height:1.1 !important; margin:0 !important; opacity:0; filter:blur(10px); /* Effet de lumière qui balaie les lettres en boucle — dégradé animé sur le texte via background-clip:text (même technique que la page pixel-hero), recalé en tons clairs sur fond crème pour rester lisible pendant l'entrée en fondu-flou. */ color:transparent !important; background-image:linear-gradient(100deg, #221516 0%, #221516 42%, #B8A79C 50%, #221516 58%, #221516 100%); background-size:260% auto; -webkit-background-clip:text; background-clip:text; animation:belisaBlurIn .7s ease forwards, belisaHeroShimmer 7s linear infinite 1.2s; } .belisa-hero-intro h1:nth-of-type(1) { animation-delay:.1s, 1.2s; } .belisa-hero-intro h1:nth-of-type(2) { animation-delay:.25s, 1.2s; } .belisa-hero-intro h1 em { font-style:italic; background-image:linear-gradient(100deg, #3B0510 0%, #3B0510 42%, #C99A7A 50%, #3B0510 58%, #3B0510 100%); background-size:260% auto; -webkit-background-clip:text; background-clip:text; color:transparent; } @keyframes belisaHeroShimmer { 0% { background-position:200% center; } 60%, 100% { background-position:-40% center; } } .belisa-hero-intro p { max-width:480px; margin:14px auto 0; font-size:15px; line-height:1.6; color:#5A4C48; opacity:0; filter:blur(10px); animation:belisaBlurIn .7s ease forwards; animation-delay:.55s; } .belisa-hero-cta { margin-top:22px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#221516; color:#F4F4F1 !important; border:none; border-radius:2px; padding:14px 30px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; cursor:pointer; text-decoration:none !important; transition:background .2s; opacity:0; filter:blur(10px); animation:belisaBlurIn .7s ease forwards; animation-delay:.7s; } .belisa-hero-cta:hover { background:#3B0510; } @keyframes belisaBlurIn { to { opacity:1; filter:blur(0); } } /* Halo très discret, cantonné au bas du hero (zone des cartes) — ne doit jamais passer sous le texte : opacité et flou réduits pour ne pas ternir le contraste du titre/sous-titre. */ .belisa-hero-glow { pointer-events:none; position:absolute; z-index:1; top:340px; left:0; width:100%; height:360px; background:linear-gradient(to right, #E1DBD7, #3B0510, #221516); filter:blur(80px); opacity:.1; } /* ===== Éventail de cartes (remplace l'ancienne grille) ===== Reconstruction du composant React "card-fan-carousel" (GSAP/Tailwind/shadcn, absents de la stack WP) en CSS/JS pur : 8 cartes disposées symétriquement autour d'un centre, via des propriétés --rot/--scale/--tx/--ty calculées côté PHP (même formule que l'original), animées en CSS (transition élastique) plutôt qu'avec GSAP. */ .belisa-fan { position:relative; padding:0 16px 40px; } .belisa-fan-layout { position:relative; display:flex; justify-content:center; align-items:center; max-width:1400px; margin:0 auto; height:45rem; } .belisa-fan-card { --rot: 0deg; --scale: 1; --tx: 0rem; --ty: 0rem; --mult: 1; position:absolute; left:50%; top:50%; width:21.5625rem; aspect-ratio:2/3; margin-left:-10.78125rem; margin-top:-16.171875rem; border-radius:16px; overflow:hidden; box-shadow:0 20px 44px rgba(34,21,22,0.26); background:#221516; opacity:0; transform: translate(0, 14rem) rotate(0deg) scale(0.5); transition: transform .7s cubic-bezier(.22,1.4,.36,1), opacity .5s ease; } .belisa-fan.belisa-in-view .belisa-fan-card { opacity:1; transform: translate(calc(var(--tx) * var(--mult)), calc(var(--ty) * var(--mult))) rotate(var(--rot)) scale(var(--scale)); } .belisa-fan-card img, .belisa-fan-card video { width:100%; height:100%; object-fit:cover; display:block; } @media (max-width: 1200px) { .belisa-fan-card { --mult: 0.85; width:13rem; margin-left:-6.5rem; margin-top:-9.75rem; } .belisa-fan-layout { height:28rem; } } @media (max-width: 900px) { .belisa-fan-card { --mult: 0.62; width:11rem; margin-left:-5.5rem; margin-top:-8.25rem; } .belisa-fan-layout { height:24rem; } } @media (max-width: 640px) { .belisa-fan-card { --mult: 0.42; width:9.5rem; margin-left:-4.75rem; margin-top:-7.13rem; } .belisa-fan-layout { height:20rem; } } @media (max-width: 420px) { .belisa-fan-card { --mult: 0.3; width:8rem; margin-left:-4rem; margin-top:-6rem; } .belisa-fan-layout { height:17rem; } }