.elementor-8366 .elementor-element.elementor-element-f713be3{--display:flex;--min-height:100vh;--justify-content:space-around;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-8366 .elementor-element.elementor-element-f713be3:not(.elementor-motion-effects-element-type-background), .elementor-8366 .elementor-element.elementor-element-f713be3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://cynopsy.com/wp-content/uploads/2026/02/fondCC-copie-scaled.jpg");background-position:center center;background-size:cover;}/* Start custom CSS for html, class: .elementor-element-ce4724b *//* ========================= 1. STRUCTURE & BASE ========================= */ .portal-wrap { position: relative; z-index: 20; text-align: center; padding: 24px; max-width: 980px; margin: 0 auto; } .portal-doors { display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; } /* ========================= 2. LE TITRE (Dégradé Or) ========================= */ .elementor-8366 .elementor-element.elementor-element-ce4724b h1, .elementor-8366 .elementor-element.elementor-element-ce4724b h2, .elementor-8366 .elementor-element.elementor-element-ce4724b h3, .portal-title { /* Le dégradé original (gardé pour la brillance du texte) */ background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-family: "Playfair Display", serif !important; filter: drop-shadow(0px 0px 8px rgba(177, 139, 8, 0.3)); /* Ombre ajustée avec ton or foncé */ margin-bottom: 40px !important; } /* ========================= 3. LES CARTES (Style Fumé & Clean) ========================= */ .card-choice { width: 220px; height: 320px; /* Fond : Noir fumé (transparent sombre) */ background: rgba(5, 5, 5, 0.55); /* Flou d'arrière-plan */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* BORDURE : Invisible au repos (Transparent) */ border: 1px solid transparent; border-radius: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); /* Ombre portée sombre */ } /* Texte interne */ .card-kicker { font-family: 'Inter', sans-serif; /* Ou ta police */ text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.95rem; color: rgba(255, 255, 255, 0.35); /* Gris discret */ transition: color 0.3s ease, text-shadow 0.3s ease; z-index: 2; } /* ========================= 4. INTERACTION (Le "Scan" et le Hover) ========================= */ /* Effet Scanline (reflet qui passe) */ .card-choice::after { content: ""; position: absolute; top: -120%; left: 0; width: 100%; height: 100%; /* Reflet très subtil utilisant ton Or foncé */ background: linear-gradient(to bottom, transparent, rgba(177, 139, 8, 0.15), transparent); transition: top 0.6s ease-in-out; pointer-events: none; } /* --- AU SURVOL (HOVER) --- */ .card-choice:hover { transform: translateY(-8px); /* Bordure apparaît avec ton Or Foncé (#B18B08) */ border-color: #B18B08; /* Lueur externe riche et sombre (pas blanche) */ box-shadow: 0 15px 40px rgba(0,0,0,0.9), /* Profondeur noire */ 0 0 25px rgba(177, 139, 8, 0.4); /* Halo Or foncé */ } /* Le texte s'allume */ .card-choice:hover .card-kicker { color: #FCF6BA; /* Texte reste clair pour lisibilité */ text-shadow: 0 0 10px rgba(177, 139, 8, 0.8); /* Halo texte Or foncé */ } /* Animation du reflet */ .card-choice:hover::after { top: 120%; } /* ========================= 5. ATMOSPHERE (Fond animé & Sombre) ========================= */ .atmos-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* J'ai remplacé le bleu nuit par un noir quasi pur au centre */ background: radial-gradient(circle at center, #05070a 0%, #000000 80%); /* L'ASTUCE ICI : On baisse la luminosité globale du fond */ filter: brightness(0.6) contrast(1.1); opacity: 0.95; /* Plus opaque pour bien couvrir */ animation: breathing 10s infinite ease-in-out; /* Respiration plus lente */ } /* Grain Cinéma (plus subtil) */ .atmos-overlay::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.3; /* Grain réduit pour moins de "bruit" visuel */ mix-blend-mode: overlay; } /* Vignette (Coins TRES sombres) */ .atmos-overlay::after{ content:""; position:absolute; inset:0; /* Dégradé agressif vers le noir pur sur les bords */ background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.8) 70%, #000000 100%); opacity: 1; } @keyframes breathing { 0% { transform: scale(1); opacity: 0.90; } 50% { transform: scale(1.02); opacity: 1.00; } 100% { transform: scale(1); opacity: 0.90; } } /* ========================= 6. AMPLIFICATION : PESANTEUR LUNAIRE & POULS DORÉ ========================= */ @keyframes deepLevitate { 0% { transform: translateY(0px); box-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Ombre au sol */ border-color: rgba(255,255,255,0); } 50% { transform: translateY(-10px); /* Monte plus haut */ /* L'ombre s'étire et devient dorée/mystique */ box-shadow: 0 40px 70px rgba(0,0,0,0.9), 0 0 25px rgba(177, 139, 8, 0.15); border-color: rgba(177, 139, 8, 0.1); /* La bordure s'allume un peu */ } 100% { transform: translateY(0px); box-shadow: 0 10px 30px rgba(0,0,0,0.8); border-color: rgba(255,255,255,0); } } /* Application désynchronisée (Chaos organisé) */ .card-choice:nth-child(1) { animation: deepLevitate 6s ease-in-out infinite; } .card-choice:nth-child(2) { animation: deepLevitate 8s ease-in-out infinite; animation-delay: 1s; /* Décalage pour éviter l'effet "soldats" */ } .card-choice:nth-child(3) { animation: deepLevitate 7s ease-in-out infinite; animation-delay: 2.5s; } /* Si vous avez une 4ème carte */ .card-choice:nth-child(4) { animation: deepLevitate 9s ease-in-out infinite; animation-delay: 0.5s; } /* INTERACTION : On fige tout quand on veut cliquer */ .card-choice:hover { animation-play-state: paused; transform: translateY(-18px) scale(1.02) !important; /* Le "Pop" final */ border-color: #B18B08 !important; /* Or intense */ box-shadow: 0 30px 60px rgba(0,0,0,0.95), 0 0 35px rgba(177, 139, 8, 0.4) !important; z-index: 10; } /* ========================= 7. MOBILE ========================= */ @media (max-width: 768px){ .card-choice{ width: min(360px, 92vw); height: 130px; } }/* End custom CSS */