96 lines
3.0 KiB
CSS
96 lines
3.0 KiB
CSS
/* css/style.css */
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* ZONES GLOBALES (overlay, cartes, images…) */
|
||
/* —————————————————————————————————————————— */
|
||
|
||
/* 0) Cartes en conteneur relatif */
|
||
.elementor-category-grid .category-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 0;
|
||
padding-bottom: 40%; /* ratio 5:2 */
|
||
}
|
||
|
||
/* overlay via pseudo-élément */
|
||
.elementor-category-grid .category-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; right: 0; bottom: 0; left: 0;
|
||
background-color: transparent;
|
||
transition: opacity .3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* images pleines cartes */
|
||
.elementor-category-grid .category-card img {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
transition: transform .4s ease;
|
||
}
|
||
|
||
/* zoom au hover */
|
||
.elementor-category-grid .category-card:hover img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* titre centré */
|
||
.elementor-category-grid .category-card-name {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
margin: 0;
|
||
padding: .5em 1em;
|
||
font-size: 1.5rem;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
transition: font-size .3s ease, padding .3s ease;
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* DISPOSITION DE LA GRILLE */
|
||
/* —————————————————————————————————————————— */
|
||
|
||
/* 1) Par défaut : auto-fit (desktop) */
|
||
.elementor-category-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
}
|
||
|
||
/* 2) Mobile (≤ 480px) → 1 colonne forcée */
|
||
@media screen and (max-width: 480px) {
|
||
.elementor-category-grid {
|
||
grid-template-columns: repeat(1, 1fr) !important;
|
||
}
|
||
.elementor-category-grid .category-card-name {
|
||
font-size: 1rem;
|
||
padding: .4em .8em;
|
||
}
|
||
}
|
||
|
||
/* 3) Tablette (481px–768px) → 2 colonnes */
|
||
@media screen and (min-width: 481px) and (max-width: 768px) {
|
||
.elementor-category-grid {
|
||
grid-template-columns: repeat(2, 1fr) !important;
|
||
}
|
||
.elementor-category-grid .category-card-name {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
|
||
/* 4) Desktop (≥ 769px) → respect des classes columns-X */
|
||
@media screen and (min-width: 769px) {
|
||
.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
|
||
.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
|
||
.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
|
||
.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
|
||
.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
|
||
.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
|
||
}
|