@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--primary-gradient: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);--secondary-gradient: linear-gradient(135deg, #0891b2 0%, #7c3aed 50%, #db2777 100%);--modern-gradient: linear-gradient(135deg, #22d3ee 0%, #a855f7 50%, #f59e0b 100%);--bg-gradient: linear-gradient(135deg, #0f172a 0%, #581c87 25%, #1e293b 75%, #0f172a 100%);--shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .2);--shadow-large: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{@apply text-gray-100;font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh;background:var(--bg-gradient);letter-spacing:-.01em;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@layer components{.gradient-text{@apply text-transparent bg-clip-text;background-image:var(--primary-gradient)}.gradient-text-modern{@apply text-transparent bg-clip-text;background-image:var(--modern-gradient)}.gradient-bg{background-image:var(--primary-gradient)}.gradient-bg-secondary{background-image:var(--secondary-gradient)}.glass-effect{@apply bg-white/80 backdrop-blur-xl border border-white/20;box-shadow:var(--shadow-large)}.glass-effect-dark{@apply bg-slate-900/60 backdrop-blur-xl border border-cyan-300/20;box-shadow:var(--shadow-large),inset 0 1px #ffffff1a,inset 0 -1px #0003;color:#fff!important;text-align:center!important}.glass-effect-dark p,.glass-effect-dark span:not(.gradient-text-modern){color:#fff!important;text-align:center!important}.glass-effect-dark div{text-align:center!important}footer{color:#fff!important}.card-modern{@apply bg-slate-800/80 backdrop-blur-xl rounded-3xl border border-slate-700/50;box-shadow:var(--shadow-medium)}.btn-primary{@apply px-8 py-4 rounded-full font-bold text-white transition-all duration-300 transform hover:scale-105 active:scale-95;background-image:var(--primary-gradient);box-shadow:var(--shadow-medium)}.btn-primary-modern{@apply px-8 py-4 rounded-full font-bold text-white transition-all duration-300 transform hover:scale-105 active:scale-95;background-image:var(--modern-gradient);box-shadow:var(--shadow-medium)}.btn-primary:hover,.btn-primary-modern:hover{box-shadow:var(--shadow-large)}.text-heading{font-family:Space Grotesk,Inter,sans-serif;@apply font-bold tracking-tight;}.option-button-modern{@apply relative overflow-hidden text-left transition-all duration-300 bg-slate-800/40 backdrop-blur-md border border-slate-600/50 rounded-2xl;background:linear-gradient(135deg,#0f172acc,#1e293b99);box-shadow:0 4px 20px #0000004d,inset 0 1px #ffffff0d,inset 0 -1px #0003}.option-button-modern:hover{@apply border-cyan-400/50 text-cyan-100 transform scale-105;background:linear-gradient(135deg,#0f172ae6,#1e293bb3);box-shadow:0 8px 30px #22d3ee33,0 4px 20px #0006,inset 0 1px #ffffff1a,inset 0 -1px #0000004d}.option-button-modern.selected-modern{@apply text-white transform scale-105;background:linear-gradient(135deg,#22d3ee26,#a855f726,#f59e0b26);box-shadow:0 0 30px #22d3ee66,0 8px 30px #a855f733,inset 0 2px #ffffff26,inset 0 -2px #0003}.option-button-modern.selected-modern:before{content:"";position:absolute;inset:-2px;border-radius:18px;background:linear-gradient(135deg,#22d3ee,#a855f7,#f59e0b);z-index:-1;animation:pulse-border 2s ease-in-out infinite}@keyframes pulse-border{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.option-button-modern:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(34,211,238,.1),rgba(34,211,238,.2),rgba(34,211,238,.1),transparent);transition:left .5s ease-in-out}.option-button-modern:hover:after{left:100%}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-soft{0%,to{opacity:.3}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.02)}}@keyframes glow{0%,to{box-shadow:0 0 20px #ec48994d}50%{box-shadow:0 0 30px #ec489980}}@keyframes glow-modern{0%,to{box-shadow:0 0 20px #22d3ee66,0 0 40px #a855f733}50%{box-shadow:0 0 30px #22d3ee99,0 0 60px #a855f766}}.animate-fade-in-up{animation:fadeInUp .8s cubic-bezier(.4,0,.2,1) both}.animate-slide-in-right{animation:slideInRight .6s cubic-bezier(.4,0,.2,1) both}.animate-pulse-soft{animation:pulse-soft 3s ease-in-out infinite}.animate-float{animation:float 3s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.animate-glow-modern{animation:glow-modern 3s ease-in-out infinite}.form-input{@apply w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-pink-400 focus:ring-4 focus:ring-pink-100 transition-all duration-200 bg-white/50 backdrop-blur-sm;}.option-button{@apply px-6 py-4 rounded-2xl border-2 border-slate-600 backdrop-blur-sm text-left transition-all duration-300 group relative overflow-hidden;background-color:#1e293b!important;color:#fff!important}.option-button:hover{@apply border-cyan-400 transform scale-105;background-color:#334155!important;box-shadow:var(--shadow-medium);color:#fff!important}.option-button.selected{@apply border-cyan-400 transform scale-105;background:linear-gradient(135deg,#22d3ee66,#a855f766,#f59e0b66)!important;box-shadow:var(--shadow-large);color:#fff!important}.option-button *,.option-button span,.option-button div,.option-button:hover *,.option-button:hover span,.option-button:hover div,.option-button.selected *,.option-button.selected span,.option-button.selected div,.option-button-modern,.option-button-modern *,.option-button-modern span,.option-button-modern div,.option-button-modern:hover,.option-button-modern:hover *,.option-button-modern:hover span,.option-button-modern:hover div,.option-button-modern.selected-modern,.option-button-modern.selected-modern *,.option-button-modern.selected-modern span,.option-button-modern.selected-modern div{color:#fff!important}.CharoGuide,.CharoGuide *,.CharoGuide h1,.CharoGuide h2,.CharoGuide h3,.CharoGuide h4,.CharoGuide h5,.CharoGuide h6,.CharoGuide p,.CharoGuide span,.CharoGuide div,.CharoGuide li,.CharoGuide a,.CharoGuide ul,.CharoGuide ol,.CharoGuide strong,.CharoGuide em,.CharoGuideButton,.CharoGuideButton *,[data-guide] *,[data-guide],.CharoLexiconModal,.CharoLexiconModal *,.CharoLexiconModal h1,.CharoLexiconModal h2,.CharoLexiconModal h3,.CharoLexiconModal h4,.CharoLexiconModal h5,.CharoLexiconModal h6,.CharoLexiconModal p,.CharoLexiconModal span,.CharoLexiconModal div,.CharoLexiconModal li,.CharoLexiconModal a,.CharoLexiconModal ul,.CharoLexiconModal ol,.CharoLexiconModal strong,.CharoLexiconModal em{color:#fff!important;text-decoration-color:#fff!important}.CharoGuide *:before,.CharoGuide *:after,.CharoLexiconModal *:before,.CharoLexiconModal *:after{color:#fff!important}.CharoGuide .text-red-300,.CharoGuide .text-green-300,.CharoGuide .text-purple-300,.CharoGuide .text-cyan-300,.CharoGuide .text-orange-300,.CharoGuide .text-yellow-300,.CharoGuide .text-gray-300,.CharoGuide .text-slate-300,.CharoLexiconModal .text-red-300,.CharoLexiconModal .text-green-300,.CharoLexiconModal .text-purple-300,.CharoLexiconModal .text-cyan-300,.CharoLexiconModal .text-orange-300,.CharoLexiconModal .text-yellow-300,.CharoLexiconModal .text-gray-300,.CharoLexiconModal .text-slate-300,.CharoGuide [class*=text-],.CharoLexiconModal [class*=text-],.CharoGuide button,.CharoGuide input,.CharoGuide select,.CharoGuide textarea,.CharoLexiconModal button,.CharoLexiconModal input,.CharoLexiconModal select,.CharoLexiconModal textarea,.CharoGuide h1,.CharoGuide h2,.CharoGuide h3,.CharoLexiconModal h1,.CharoLexiconModal h2,.CharoLexiconModal h3{color:#fff!important}.CharoGuide #*,.CharoLexiconModal #*{color:#fff!important}.CharoGuide strong,.CharoGuide em,.CharoGuide i,.CharoGuide b,.CharoGuide small,.CharoLexiconModal strong,.CharoLexiconModal em,.CharoLexiconModal i,.CharoLexiconModal b,.CharoLexiconModal small{color:#fff!important}.CharoGuide button[style*="color: black"],.CharoGuide button[style*="color: black"] *,.CharoGuide button[style*="color: black"] span,.CharoGuide button[style*="color: black"]:hover,.CharoGuide button[style*="color: black"]:hover *,.CharoGuide button[style*="color: black"]:hover span,.CharoGuide button[class*=fixed][class*=right-6] *,.CharoGuide button[class*=fixed][class*=right-6] span,.CharoGuide button[class*=fixed][class*=right-6]:hover *,.CharoGuide button[class*=fixed][class*=right-6]:hover span{color:#000!important}.CharoGuide{position:relative}.CharoGuide:before{content:"";position:fixed;inset:0;background-image:url(/charopositif.png);background-size:contain;background-position:center center;background-repeat:no-repeat;opacity:.08;pointer-events:none;z-index:0;mix-blend-mode:overlay}.CharoGuide>*{position:relative;z-index:1}.questionnaire-page{position:relative}.questionnaire-page:before{content:"";position:fixed;inset:0;background-image:url(/charopositif.png);background-size:contain;background-position:center center;background-repeat:no-repeat;opacity:.06;pointer-events:none;z-index:0;mix-blend-mode:overlay}.questionnaire-page>*{position:relative;z-index:1}.result-page{position:relative}.result-page:before{content:"";position:fixed;inset:0;background-image:url(/charonegatif.png);background-size:contain;background-position:center center;background-repeat:no-repeat;opacity:.07;pointer-events:none;z-index:0;mix-blend-mode:overlay}.result-page>*{position:relative;z-index:1}@media (max-width: 640px){body{font-size:14px;line-height:1.5}.card-modern{@apply mx-2 p-4 rounded-2xl;margin:.5rem;padding:1rem}.btn-primary,.btn-primary-modern{@apply px-4 py-3 text-base;min-height:44px}.glass-effect-dark{@apply p-4 rounded-2xl mx-2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.glass-effect-dark,.glass-effect-dark *,.glass-effect-dark div,.glass-effect-dark p,.glass-effect-dark h1,.glass-effect-dark h2,.glass-effect-dark span,.glass-effect-dark a{text-align:center!important;margin-left:auto!important;margin-right:auto!important;justify-content:center!important;align-items:center!important}.glass-effect-dark .flex{justify-content:center!important;align-items:center!important;text-align:center!important;flex-direction:column!important;gap:.5rem}.glass-effect-dark img{@apply w-12 h-12;display:block!important;margin:0 auto!important}.glass-effect-dark p{display:block!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;font-size:.875rem!important;line-height:1.4!important}.option-button,.option-button-modern{@apply px-4 py-3 text-sm rounded-xl;min-height:52px;margin-bottom:.5rem}.fixed.bottom-6.right-6{@apply bottom-4 right-4;transform:scale(.9)}.fixed.bottom-6.left-6{@apply bottom-4 left-4;transform:scale(.9)}.fixed.right-6.top-1\/2{@apply right-2;transform:translateY(-50%) scale(.8)}.CharoGuide:before{background-size:60%;opacity:.03}.questionnaire-page:before{background-size:50%;opacity:.02}.result-page:before{background-size:55%;opacity:.03}}@media (max-width: 480px){.glass-effect-dark{@apply p-3 mx-1 rounded-xl;text-align:center!important}.glass-effect-dark h1{@apply text-2xl;text-align:center!important;display:block!important;margin:0 auto 1rem!important;line-height:1.2!important}.glass-effect-dark p{@apply text-xs;text-align:center!important;display:block!important;margin:.5rem auto!important;line-height:1.3!important}.glass-effect-dark img{@apply w-10 h-10;display:block!important;margin:0 auto!important}.btn-primary,.btn-primary-modern{@apply px-3 py-2 text-sm rounded-xl;min-height:40px;font-size:.875rem}.card-modern{@apply mx-1 p-3 rounded-xl;margin:.25rem}.fixed.bottom-6.right-6,.fixed.bottom-6.left-6{@apply bottom-2;transform:scale(.8)}.fixed.right-6.top-1\/2{@apply right-1;transform:translateY(-50%) scale(.7)}}@media (min-width: 641px) and (max-width: 1024px){.glass-effect-dark img{@apply w-16 h-16;}.glass-effect-dark *{text-align:center!important}.card-modern{@apply mx-4 p-6;}}@media (max-width: 896px) and (orientation: landscape) and (max-height: 500px){.glass-effect-dark{@apply p-4;max-height:90vh;overflow-y:auto}.glass-effect-dark h1{@apply text-3xl;}.fixed.right-6.top-1\/2{@apply top-4 right-4;transform:none}}button:focus-visible,.option-button:focus-visible{@apply outline-none ring-4 ring-pink-200;}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{@apply bg-slate-800 rounded-full;}::-webkit-scrollbar-thumb{@apply bg-cyan-500 rounded-full;}::-webkit-scrollbar-thumb:hover{@apply bg-cyan-400;}.charologue-logo{display:block!important;margin:0 auto!important;object-fit:contain!important}@media (max-width: 480px){.charologue-logo{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important}.glass-effect-dark{@apply p-3 mx-1 rounded-xl;min-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:space-between}}@media (min-width: 481px) and (max-width: 640px){.charologue-logo{width:80px!important;height:80px!important;max-width:80px!important;max-height:80px!important}.glass-effect-dark{min-height:calc(100vh - 140px)}}@media (min-width: 641px) and (max-width: 768px){.charologue-logo{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important}}@media (min-width: 769px) and (max-width: 1024px){.charologue-logo{width:112px!important;height:112px!important;max-width:112px!important;max-height:112px!important}}@media (min-width: 1025px){.charologue-logo{width:128px!important;height:128px!important;max-width:128px!important;max-height:128px!important}}.bg-gradient-to-r.from-purple-500.to-pink-500,.bg-gradient-to-r.from-purple-500.to-pink-500 *,.bg-gradient-to-r.from-purple-500.to-pink-500 span,.bg-gradient-to-r.from-purple-500.to-pink-500:hover,.bg-gradient-to-r.from-purple-500.to-pink-500:hover *,.bg-gradient-to-r.from-purple-500.to-pink-500:hover span{color:#fff!important}.HoroscopeModal,.HoroscopeModal *,.HoroscopeModal h1,.HoroscopeModal h2,.HoroscopeModal h3,.HoroscopeModal h4,.HoroscopeModal h5,.HoroscopeModal h6,.HoroscopeModal p,.HoroscopeModal span,.HoroscopeModal div,.HoroscopeModal li,.HoroscopeModal a,.HoroscopeModal ul,.HoroscopeModal ol,.HoroscopeModal strong,.HoroscopeModal em,.HoroscopeModal button,.HoroscopeModal input,.HoroscopeModal select,.HoroscopeModal textarea{color:#fff!important;text-decoration-color:#fff!important}.HoroscopeModal *:before,.HoroscopeModal *:after{color:#fff!important}.HoroscopeModal [class*=text-],.HoroscopeModal .text-purple-300,.HoroscopeModal .text-purple-200,.HoroscopeModal .text-purple-400,.HoroscopeModal .text-gray-300,.HoroscopeModal .text-gray-200,.HoroscopeModal .text-gray-400,.HoroscopeModal [style*=color],.HoroscopeModal h2,.HoroscopeModal h3,.HoroscopeModal p,.HoroscopeModal strong,.HoroscopeModal em,.HoroscopeModal i,.HoroscopeModal b,.HoroscopeModal small{color:#fff!important}