/* * Finition premium du guide vers l'étape suivante du comparateur. * Le comportement reste piloté par kolytica-comparator-guardrails.js. */ #compareForm .metier-card.is-active, #compareForm .intent-card.is-active, #compareForm .task-card.is-active { border-color: rgba(15, 157, 140, .72) !important; background: radial-gradient(circle at 100% 0, rgba(217, 149, 33, .13), transparent 42%), linear-gradient(145deg, #fff 0%, #f7fcfb 54%, rgba(15, 157, 140, .11) 100%) !important; box-shadow: 0 10px 25px rgba(20, 34, 79, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(15, 157, 140, .08) !important; transform: translateY(-1px); } #compareForm .rank-choice.is-active { border-color: rgba(217, 149, 33, .84) !important; background: radial-gradient(circle at 100% 0, rgba(15, 157, 140, .11), transparent 40%), linear-gradient(145deg, #fff 0%, #fffdf8 58%, rgba(217, 149, 33, .12) 100%) !important; box-shadow: 0 10px 25px rgba(20, 34, 79, .08), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 0 0 1px rgba(217, 149, 33, .08) !important; transform: translateY(-1px); } #compareForm .metier-card.is-active::after, #compareForm .intent-card.is-active::after, #compareForm .task-card.is-active::after { width: 9px; height: 9px; background: #D99521 !important; box-shadow: 0 0 0 4px rgba(217, 149, 33, .14), 0 0 16px rgba(217, 149, 33, .42) !important; } #compareForm .metier-card:focus-visible, #compareForm .intent-card:focus-visible, #compareForm .task-card:focus-visible, #compareForm .rank-choice:focus-visible { outline: 3px solid rgba(15, 157, 140, .48); outline-offset: 3px; } html body .choice-block.is-next-step { border-color: transparent !important; outline: 0 !important; animation: kcPremiumStepHalo 1.76s cubic-bezier(.22, .7, .2, 1) both !important; } html body #resultPanel.is-next-step { border-color: rgba(15, 157, 140, .68) !important; outline: 1px solid rgba(255, 255, 255, .94) !important; outline-offset: 4px !important; animation: kcPremiumResultHalo 1.76s cubic-bezier(.22, .7, .2, 1) both !important; } .advisor-card .choice-block.is-next-step::after { content: ""; position: absolute; z-index: -1; inset: -10px; border: 1px solid rgba(15, 157, 140, .48); border-radius: 18px; background: radial-gradient(circle at 88% 8%, rgba(217, 149, 33, .16), transparent 28%), linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(238, 250, 247, .94)); box-shadow: 0 18px 45px rgba(11, 111, 98, .14), 0 0 0 6px rgba(15, 157, 140, .07), inset 0 1px 0 rgba(255, 255, 255, .98); pointer-events: none; animation: kcPremiumSurface 1.76s cubic-bezier(.22, .7, .2, 1) both; } .advisor-card .choice-block.is-next-step::before { content: attr(data-next-step-label) " →" !important; top: -13px !important; right: 10px !important; padding: 5px 11px 5px 10px !important; border: 1px solid rgba(255, 255, 255, .58) !important; border-radius: 999px !important; background: linear-gradient(110deg, #0B6F62 0%, #0F9D8C 56%, #D99521 150%) !important; background-size: 180% 100% !important; color: #fff !important; box-shadow: 0 10px 24px rgba(11, 111, 98, .24), inset 0 1px 0 rgba(255, 255, 255, .28) !important; font-size: .64rem !important; font-weight: 900 !important; letter-spacing: .065em !important; text-transform: uppercase !important; animation: kcPremiumBadge 1.76s cubic-bezier(.22, .7, .2, 1) both !important; } .advisor-card .choice-block.is-next-step .choice-title small { opacity: 0; transition: opacity .12s ease; } @keyframes kcPremiumStepHalo { 0% { box-shadow: 0 0 0 0 rgba(15, 157, 140, 0); } 24% { box-shadow: 0 0 0 1px rgba(15, 157, 140, .52), 0 0 0 7px rgba(15, 157, 140, .10), 0 22px 50px rgba(11, 111, 98, .13); } 68% { box-shadow: 0 0 0 1px rgba(15, 157, 140, .34), 0 0 0 11px rgba(15, 157, 140, .045), 0 14px 34px rgba(11, 111, 98, .09); } 100% { box-shadow: 0 0 0 0 rgba(15, 157, 140, 0); } } @keyframes kcPremiumResultHalo { 0% { box-shadow: 0 14px 36px rgba(20, 34, 79, .06), 0 0 0 0 rgba(15, 157, 140, 0); } 26% { box-shadow: 0 24px 62px rgba(11, 111, 98, .18), 0 0 0 1px rgba(15, 157, 140, .55), 0 0 0 8px rgba(15, 157, 140, .10); } 70% { box-shadow: 0 20px 48px rgba(11, 111, 98, .12), 0 0 0 1px rgba(15, 157, 140, .34), 0 0 0 12px rgba(15, 157, 140, .04); } 100% { box-shadow: 0 14px 36px rgba(20, 34, 79, .06), 0 0 0 0 rgba(15, 157, 140, 0); } } @keyframes kcPremiumSurface { 0% { opacity: 0; transform: scale(.986); } 22%, 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.006); } } @keyframes kcPremiumBadge { 0% { opacity: 0; transform: translateY(5px) scale(.95); background-position: 0 0; } 22% { opacity: 1; transform: translateY(0) scale(1); } 68% { opacity: 1; transform: translateY(0) scale(1); background-position: 100% 0; } 100% { opacity: 0; transform: translateY(-3px) scale(.985); background-position: 100% 0; } } @media (max-width: 600px) { .advisor-card .choice-block.is-next-step::after { inset: -7px; border-radius: 15px; } .advisor-card .choice-block.is-next-step::before { top: -10px !important; right: 6px !important; padding: 4px 9px !important; font-size: .59rem !important; } } @media (prefers-reduced-motion: reduce) { html body .choice-block.is-next-step, html body #resultPanel.is-next-step, .advisor-card .choice-block.is-next-step::before, .advisor-card .choice-block.is-next-step::after { animation: none !important; } html body .choice-block.is-next-step { box-shadow: 0 0 0 1px rgba(15, 157, 140, .48), 0 0 0 7px rgba(15, 157, 140, .09) !important; } } @media (forced-colors: active) { html body .choice-block.is-next-step, html body #resultPanel.is-next-step { outline: 3px solid Highlight !important; box-shadow: none !important; } .advisor-card .choice-block.is-next-step::after { border-color: Highlight; background: Canvas; box-shadow: none; } .advisor-card .choice-block.is-next-step::before { border-color: Highlight !important; background: Highlight !important; color: HighlightText !important; box-shadow: none !important; } }