:root {
–bg: #e8dfcf; /* sable un peu plus foncé */
–ink:#273043; /* encre titres */
–muted:#6b7280; /* texte secondaire */
–brand:#1fb6a6; /* turquoise bouton */
–brand-dark:#159988; /* hover turquoise foncé */
–panel:#ffffff; /* cartes */
–ring:#e6ded1; /* bordure douce */
–shadow: 0 8px 24px rgba(0,0,0,.07);
}
.lam-cats { background:var(–bg); padding:56px 0; }
.lam-cats .container { max-width:1100px; margin:0 auto; padding:0 20px; }
.lam-cats h2 {
font-size: clamp(1.6rem, 2.2vw, 2.2rem);
color:var(–ink); margin:0 0 8px;
text-align:center;
}
.lam-cats .intro {
color:var(–muted); margin:0 0 28px;
text-align:center;
}
/* Grille 3 colonnes */
.lam-grid {
display:grid; gap:20px;
grid-template-columns: repeat(3, 1fr);
}
.lam-card {
background:var(–panel); border:1px solid var(–ring);
border-radius:18px; padding:22px; box-shadow:var(–shadow);
display:flex; flex-direction:column; min-height:260px;
transition: transform .2s ease, box-shadow .2s ease;
}
.lam-card:hover {
transform: translateY(-2px);
box-shadow:0 10px 28px rgba(0,0,0,.10);
}
.lam-tag {
display:inline-block; font-size:.85rem; color:var(–muted);
background:#f7f3ed; border:1px solid var(–ring);
border-radius:999px; padding:6px 10px; margin-bottom:12px;
}
.lam-card h3 {
color:var(–ink); font-size:1.4rem; line-height:1.25; margin:0 0 10px;
}
.lam-card p { color:var(–muted); margin:0 0 18px; }
.lam-card .spacer { flex:1 1 auto; }
.btn {
display:inline-flex; align-items:center; justify-content:center;
width:100%; min-height:46px; padding:10px 14px;
background:var(–brand); color:#fff; border:none; border-radius:12px;
font-weight:600; text-decoration:none;
transition: background .15s ease, transform .02s ease;
}
.btn:hover { background:var(–brand-dark); }
.btn:active { transform: translateY(1px); }
/* Responsive */
@media (max-width: 1024px) { .lam-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 640px) { .lam-grid { grid-template-columns:1fr; } }

Boutique — catégories phares

Choisissez votre univers et explorez nos pierres authentiques.