/* =============================================================
   ANNUAIRE-LEGACY.CSS — Page annuaire.php (root, entreprises certifiées)
   ============================================================= */

body { background: #fdfdfd; font-family: 'Outfit', sans-serif; color: #0B132B; }

.page-title    { font-weight: 900; font-size: 42px; letter-spacing: -1.5px; color: #0B132B; }
.page-subtitle { color: #64748b; font-size: 18px; margin-bottom: 40px; }

/* ── Filter Bar ──────────────────────────────────────────────── */
.filter-box {
    background: #0B132B;
    padding: 35px;
    border-radius: 30px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(11, 19, 43, 0.15);
}
.filter-row {
    display: flex;
    align-items: center;
    margin: 0;
}
.filter-col {
    position: relative;
    padding: 0 10px;
}
.filter-icon {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 5;
    font-size: 18px;
}
.filter-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 15px;
    padding: 15px 20px;
    height: 55px; /* Fixed height for better alignment */
    transition: 0.3s;
}
.filter-col .filter-input {
    padding-left: 45px; /* Spacing for search icon */
}
/* Other inputs without icons don't need extra padding */
.filter-col:not(:first-child) .filter-input {
    padding-left: 20px;
}

.filter-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #39FF14;
    color: #fff;
    outline: none;
    box-shadow: none;
}
.filter-btn {
    background: #39FF14;
    color: #0B132B;
    border: none;
    border-radius: 15px;
    font-weight: 900;
    padding: 15px;
    height: 55px;
    transition: 0.3s;
}
.filter-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(57, 255, 20, 0.3);
}

@media (max-width: 991px) {
    .filter-row {
        flex-direction: column;
        gap: 20px; /* Increased gap for better breathing room */
    }
    .filter-col {
        width: 100%;
        padding: 0 10px; /* Restored some padding */
    }
    .filter-box {
        padding: 40px 25px; /* More generous padding */
        border-radius: 35px;
        margin-bottom: 50px;
        margin-top: 20px;
    }
    .filter-icon {
        left: 25px; /* Keep icon well-placed */
    }
    .filter-col .filter-input {
        padding-left: 50px;
    }
    .page-title {
        font-size: 34px;
        margin-top: 15px;
    }
    .page-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .filter-box {
        padding: 40px 20px;
        border-radius: 30px;
    }
    .elite-card {
        padding: 30px 25px; /* More breathing room in cards too */
        border-radius: 30px;
    }
    .card-logo-box {
        height: 90px;
        margin-bottom: 20px;
    }
    .card-name {
        font-size: 20px;
    }
    .card-slogan {
        font-size: 14px;
        margin-bottom: 20px;
        height: auto; /* Allow more text if needed on mobile */
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    .card-meta {
        gap: 20px;
        padding-top: 15px;
    }
}

/* ── Elite Company Cards ─────────────────────────────────────── */
.elite-card {
    background: #fff;
    border-radius: 30px;
    border: 1px solid #f1f5f9;
    padding: 30px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none !important;
}
.elite-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);
    border-color: #39FF14;
}
.card-logo-box {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
.card-logo-box img { max-height: 100%; max-width: 120px; object-fit: contain; }

.card-info    { flex-grow: 1; text-align: center; }
.card-sector  { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; margin-bottom: 8px; display: block; }
.card-name    { font-weight: 900; font-size: 19px; color: #0B132B; margin: 0 0 8px 0; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 8px; }
.card-slogan  { font-size: 13px; color: #64748b; line-height: 1.5; margin-bottom: 20px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 38px; }

.card-meta    { display: flex; justify-content: center; gap: 15px; border-top: 1px solid #f8fafc; margin-top: 10px; padding-top: 15px; }
.meta-item    { font-size: 12px; font-weight: 700; color: #64748b; display: flex; align-items: center; gap: 5px; }
.meta-item i  { color: #39FF14; font-size: 16px; }

.view-btn { font-weight: 900; font-size: 11px; text-transform: uppercase; color: #0B132B; letter-spacing: 1px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; opacity: 0; transition: 0.3s; }
.elite-card:hover .view-btn { opacity: 1; transform: translateY(-5px); }