102 lines
3.8 KiB
CSS
102 lines
3.8 KiB
CSS
/* css/style.css */
|
||
/* -------------------------------------------------- */
|
||
/* Corrige le comportement “flex” sur mobile/tablette */
|
||
/* -------------------------------------------------- */
|
||
.e-con-inner {
|
||
display: block !important;
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 0) Cartes, overlay et images */
|
||
/* —————————————————————————————————————————— */
|
||
.elementor-category-grid .category-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* ratio fixe 5:2 */
|
||
height: 0;
|
||
padding-bottom: 40%;
|
||
}
|
||
|
||
.elementor-category-grid .category-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: transparent;
|
||
transition: opacity .3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.elementor-category-grid .category-card img {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform .4s ease;
|
||
}
|
||
|
||
.elementor-category-grid .category-card:hover img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.elementor-category-grid .category-card-name {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: .5em 1em;
|
||
font-size: 1.5rem;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
color: #fff;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
transition: font-size .3s ease, padding .3s ease;
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 1) Grille responsive par défaut (desktop) */
|
||
/* —————————————————————————————————————————— */
|
||
.elementor-category-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
/* auto-fit avec min 150px : plusieurs tuiles même sur petits écrans */
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 2) Mobile (≤ 480px) → 1 colonne */
|
||
/* —————————————————————————————————————————— */
|
||
@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 fixes */
|
||
/* —————————————————————————————————————————— */
|
||
@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 */
|
||
/* —————————————————————————————————————————— */
|
||
@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); }
|
||
}
|