141 lines
5.5 KiB
CSS
141 lines
5.5 KiB
CSS
/* css/style.css */
|
||
/* -------------------------------------------------- */
|
||
/* Corrige le comportement “flex” sur mobile/tablette */
|
||
/* -------------------------------------------------- */
|
||
.e-con-inner {
|
||
display: block !important;
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 1) Structure de la carte */
|
||
/* —————————————————————————————————————————— */
|
||
.elementor-category-grid .category-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* ratio fixe 5:2 pour l’image uniquement */
|
||
}
|
||
.elementor-category-grid .category-card.title-below {
|
||
/* autorise la hauteur auto quand titre en dessous */
|
||
height: auto !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
.elementor-category-grid .category-card-image {
|
||
/* reprend l’ancien padding-bottom */
|
||
position: relative;
|
||
width: 100%;
|
||
padding-bottom: 40%; /* ratio 5:2 */
|
||
}
|
||
.elementor-category-grid .category-card.title-below .category-card-image {
|
||
/* si titre en dessous, on garde juste l’image */
|
||
padding-bottom: 40%;
|
||
}
|
||
|
||
/* Overlay via pseudo */
|
||
.elementor-category-grid .category-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: transparent;
|
||
transition: opacity .3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Image plein cadre */
|
||
.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);
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 2) Titre overlay */
|
||
/* —————————————————————————————————————————— */
|
||
.elementor-category-grid .category-card-name.overlay {
|
||
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;
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 3) Titre below */
|
||
/* —————————————————————————————————————————— */
|
||
.elementor-category-grid .category-card-name-below {
|
||
padding: .5em;
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
}
|
||
.elementor-category-grid .category-card-name-below a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
transition: text-decoration .3s ease;
|
||
}
|
||
.elementor-category-grid .category-card-name-below a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 4) Grille responsive par défaut (desktop) */
|
||
/* —————————————————————————————————————————— */
|
||
.elementor-category-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 5) Mobile (≤ 480px) → 1 colonne */
|
||
/* —————————————————————————————————————————— */
|
||
@media screen and (max-width: 480px) {
|
||
.elementor-category-grid {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
.elementor-category-grid .category-card-name.overlay {
|
||
font-size: 1rem;
|
||
padding: .4em .8em;
|
||
}
|
||
.elementor-category-grid .category-card-name-below {
|
||
font-size: 1rem;
|
||
padding: .4em;
|
||
}
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 6) 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.overlay {
|
||
font-size: 1.2rem;
|
||
}
|
||
.elementor-category-grid .category-card-name-below {
|
||
font-size: 1.2rem;
|
||
padding: .5em;
|
||
}
|
||
}
|
||
|
||
/* —————————————————————————————————————————— */
|
||
/* 7) 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); }
|
||
} |