/* Page : Porte-clés personnalisés */

header {
    background-color: #e2c7d2; /* Rappel du rose pastel */
    color: #000000;
    text-align: center;
    padding: 1rem 0;
}

header .logo {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
}

.section-intro {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.section-intro h2 {
    color: #ec5192;
}

/* Présentation des portes-clés */
.keychain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

/* Si tu utilises .product-card, elle est déjà stylée dans communs.css */

@media (max-width: 768px) {
    header .logo {
        height: 220px;
    }

    .page-content {
        padding: 15px 10px;
    }
}