/* === ALTEZIA V3 MOCKUP CUSTOM STYLES === */

/* Fonctionnalités à venir - Feature cards */
.feature-card { cursor: pointer; transition: all 0.2s ease; }
.feature-card:hover { border-color: hsl(238.7 83.5% 66.7%); box-shadow: 0 4px 16px rgba(99,102,241,0.15); transform: translateY(-2px); }
.feature-card .feature-btn { pointer-events: none; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-overlay.active { display: flex; }
.modal-content { background: white; border-radius: 16px; padding: 2rem; max-width: 480px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalIn 0.2s ease; }
@keyframes modalIn { from { opacity:0; transform: scale(0.95) translateY(10px); } to { opacity:1; transform: scale(1) translateY(0); } }

/* Interest counter badge */
.interest-counter { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; background: hsl(238.7 83.5% 96%); color: hsl(238.7 83.5% 50%); }

/* Traffic dashboard tabs */
.traffic-tab { cursor: pointer; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: all 0.15s; border: 1px solid transparent; }
.traffic-tab:hover { background: hsl(0 0% 95%); }
.traffic-tab.active { background: hsl(238.7 83.5% 96%); color: hsl(238.7 83.5% 50%); border-color: hsl(238.7 83.5% 90%); }
.traffic-view { display: none; }
.traffic-view.active { display: block; }

/* Funnel */
.funnel-step { position: relative; padding: 12px 16px; border-left: 3px solid hsl(238.7 83.5% 80%); margin-left: 12px; }
.funnel-step::before { content: ""; position: absolute; left: -7px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: hsl(238.7 83.5% 66.7%); border: 2px solid white; }
.funnel-step:last-child { border-left-color: hsl(142 76% 50%); }
.funnel-step:last-child::before { background: hsl(142 76% 50%); }

/* Status badges */
.status-coming { background: hsl(49 100% 95%); color: hsl(31 92% 40%); border: 1px solid hsl(49 91% 84%); }
.status-dev { background: hsl(208 100% 95%); color: hsl(210 92% 40%); border: 1px solid hsl(221 91% 88%); }
.status-planned { background: hsl(0 0% 96%); color: hsl(0 0% 40%); border: 1px solid hsl(0 0% 88%); }