/* En-tête de page */
.page-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.page-header h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-3);
}

.page-intro {
    color: var(--muted);
    max-width: 800px;
    margin: 0 auto;
}

/* Grille des comparatifs */
#comparatifs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 2rem;

    margin-top: 3rem;
}

.card-comparatifs {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.015));

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

    cursor: pointer;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.02),
        0 10px 30px rgba(0, 0, 0, 0.35);
}

.card-comparatifs:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 255, 255, 0.12);

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.02));

    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.03),
        0 0 40px rgba(96, 165, 250, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.45);
}

.card-comparatifs img {
    width: 100%;
    height: 220px;

    object-fit: cover;

    display: block;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.card-comparatifs:hover img {
    transform: scale(1.03);

    filter: brightness(1.05);
}

.card-comparatifs h2 {
    padding:
        1.5rem 1.5rem 0.75rem;
    margin: auto;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;

    color: var(--text);
}

.card-comparatifs p {
    padding:
        0 1.5rem 1.5rem;

    color: var(--muted);

    line-height: 1.6;

    font-size: 0.95rem;
}

/* petit glow subtil */

.card-comparatifs::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top right,
            rgba(96, 165, 250, 0.12),
            transparent 45%);

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;
}

.card-comparatifs:hover::before {
    opacity: 1;
}

/* Responsive */

@media (max-width: 720px) {

    #comparatifs-list {
        gap: 1.5rem;
    }

    .card-comparatifs {
        border-radius: 20px;
    }

    .card-comparatifs img {
        height: 190px;
    }

    .card-comparatifs h2 {
        font-size: 1.15rem;

        padding:
            1.2rem 1.2rem 0.6rem;
    }

    .card-comparatifs p {
        padding:
            0 1.2rem 1.2rem;

        font-size: 0.9rem;
    }
}