/* --- Couleurs du thème clair --- */
:root {
    --banner-blue: #007bff; /* Ton bleu de bannière */
    --cyan-glow: #00d4ff;
    --glass-white: rgba(255, 255, 255, 0.15);
}

.vulnerability_search_section {
    /* Dégradé bleu clair pour matcher la bannière du dessus */
    background: linear-gradient(180deg, #0a58ca 0%, #031836 100%);
    padding: 70px 0;
    color: white;
}

.main-title {
    font-weight: 800;
    font-size: 2.5rem;
    letter-spacing: -1px;
}

.highlight-cyan {
    color: var(--cyan-glow);
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

.sub-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* Container Transparent (Glassmorphism) */
.search_glass_container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Inputs & Select */
.glass-input {
    background: var(--glass-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    height: 50px;
    border-radius: 8px;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* CORRECTIF LISTBOX (Le fond quand on clique) */
.glass-select option {
    background-color: #0751c2; /* Fond bleu solide pour la liste */
    color: white;
    padding: 10px;
}

.glass-select:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 15px var(--cyan-glow);
}

/* Bouton Vert SDepender */
.btn-action {
    background-color: #30ae69;
    color: white;
    font-weight: 700;
    border: none;
    height: 50px;
    border-radius: 8px;
    transition: 0.3s;
    text-transform: uppercase;
}

.btn-action:hover {
    background-color: #268d54;
    box-shadow: 0 0 20px rgba(48, 174, 105, 0.5);
    transform: translateY(-2px);
    color: white;
}





.vulnerability_search_section {
    background: linear-gradient(180deg, #0052cc 0%, #003d99 100%);
    padding: 80px 0; color: #fff;
}
.highlight-cyan { color: #00f2ff; text-shadow: 0 0 15px rgba(0, 242, 255, 0.6); }
.search_glass_container {
    background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25); padding: 25px; border-radius: 15px;
}
.glass-input {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important; height: 54px; border-radius: 8px;
}
/* Fix Listbox blanche */
.glass-select option { background-color: #b3c7e6 !important; color: white !important; }
.btn-action {
    background-color: #28a745; color: white !important; font-weight: 700;
    height: 54px; border: none; text-transform: uppercase; border-radius: 8px;
}
/* Modal Style */
.custom-modal {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(159, 180, 223, 0.9); backdrop-filter: blur(10px);
}
.modal-content {
    background: linear-gradient(145deg, #d8d9ff, #d8d9ff); margin: 10% auto;
    padding: 30px; border: 1px solid #00f2ff; border-radius: 20px; width: 380px; text-align: center;
}
.captcha-box { background: #fff; padding: 10px; border-radius: 8px; display: flex; justify-content: center; gap: 10px; margin: 15px 0; }
.is-invalid { border: 2px solid #ff4d4d !important; animation: shake 0.3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.d-none { display: none !important; }




.security-badge {
    background-color: rgba(0, 82, 204, 0.1); /* Bleu très léger */
    border: 1px solid rgba(0, 82, 204, 0.2);
    padding: 8px;
    border-radius: 4px;
    color: #0052cc;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.02);
}

/* Animation discrète pour montrer que c'est "vivant" */
.security-badge i {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% { opacity: 0.3; }
}

/* Drawer Logic */
.cve-drawer {
    position: fixed; top: 0; right: -500px; width: 450px; height: 100vh;
    background: rgba(0, 15, 35, 0.98); backdrop-filter: blur(15px);
    border-left: 2px solid #00f2ff; transition: 0.4s ease; z-index: 2000;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8); color: #fff; overflow-y: auto;
}
.cve-drawer.active { right: 0; }
.drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: none; z-index: 1999;
}
.drawer-overlay.active { display: block; }

/* Premium UI Elements */
.badge-premium {
    background: linear-gradient(45deg, #ffd700, #ffa500); color: #000;
    font-weight: 800; font-size: 0.7rem; padding: 3px 8px; border-radius: 4px;
}
.fix-box-premium {
    background: rgba(255, 255, 255, 0.05); border: 1px dashed #ffd700;
    padding: 15px; border-radius: 8px; margin-top: 20px;
}
.vector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vector-item { font-size: 0.85rem; border-bottom: 1px solid #1a3a5a; padding-bottom: 5px; }
.vector-item span { color: #888; }
.vector-item strong { float: right; color: #00f2ff; }




/* Container de résultats : Fond blanc pur avec ombre douce */
.result-card-white {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1);
    margin-top: -50px;
    position: relative;
    z-index: 5;
    border: 1px solid #e1e8ed;
}

.result-title-main {
    color: #003366;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* --- TABLEAU AVEC EFFET DE MOUVEMENT --- */
.sdepend-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse; 
}

.sdepend-table thead th {
    background: #f4f7fa;
    color: #556b82;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px;
    border-bottom: 2px solid #e1e8ed;
}

.sdepend-table tbody tr {
    transition: all 0.2s ease-in-out; /* Animation plus rapide et naturelle */
    background-color: #ffffff;
    position: relative;
}

/* EFFET HOVER PREMIUM : La ligne monte et l'ombre s'accentue */
.sdepend-table tbody tr:hover {
    background-color: #fcfdfe; /* Changement de couleur très léger */
    transform: translateY(-2px); /* Mouvement presque invisible mais ressenti */
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08); /* Ombre très douce */
    z-index: 1;
}

.sdepend-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #edf2f7;
    color: #2d3748;
    vertical-align: middle;
}

/* --- BOUTON AVEC IMAGE --- */
.btn-impact-cyan {
    background-color: #56f341;
    color: #001529;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.3s ease;
    text-transform: uppercase;
    display: inline-flex; /* Aligne le texte et l'image proprement */
    align-items: center;
    gap: 10px; /* Espace entre le texte et l'image */
}

.btn-impact-cyan:hover {
    background-color: #00d8e4;
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.5);
    transform: scale(1.05);
}

/* L'image de la flèche dans le bouton */
.btn-impact-cyan img {
    width: 16px; /* Ajuste la taille de ton image */
    height: auto;
    transition: transform 0.3s ease;
}

/* Petit effet : la flèche bouge un peu plus à droite au survol */
.btn-impact-cyan:hover img {
    transform: translateX(4px);
}

.badge-premium-gold {
    background: #fff8e1;
    color: #b7791f;
    border: 1px solid #fbd38d;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 700;
}


/* Bouton Trial avec effet de pulsation discret */
.btn-action-trial {
    background: linear-gradient(45deg, #00f2ff, #00d8e4);
    color: #001529;
    font-weight: 800;
    border: none;
    padding: 12px;
    border-radius: 6px;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-action-trial:hover {
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
    transform: scale(1.02);
}

/* Style des options secondaires */
.fix-box-premium .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.fix-box-premium .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #00f2ff;
    color: #00f2ff;
}

.btn-coming-soon {
    background: rgba(255, 255, 255, 0.05);
    color: #555;
    border: 1px solid #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: not-allowed;
    transition: none;
}

.saas-button-disabled {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    cursor: not-allowed !important;
    white-space: nowrap;
    opacity: 0.8;
    min-width: 50px; /* Largeur fixe pour éviter les sauts de texte */
    font-family: 'Courier New', Courier, monospace; /* Optionnel : pour des chiffres fixes */
    font-weight: bold;
}