.liste-offres {
width: 100%;
max-width: 1200px;
margin: 0 auto;
} .liste-offres-filtres {
margin-bottom: 2rem;
padding: 1.5rem;
border-radius: 16px;
border: 1px solid var(--wp--preset--color--custom-beige-1);
background: var(--wp--preset--color--custom-blanc);
}
.filtres-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: end;
}
.filtres-actions {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.filtre-item {
display: flex;
flex-direction: column;
min-width: 180px;
position: relative;
}
.filtre-item label {
margin-bottom: 0.5rem;
font-family: var(--wp--preset--font-family--noto-sans-jp);
font-size: var(--wp--preset--font-size--2);
font-weight: 600;
color: var(--wp--preset--color--custom-noir);
}
.filtre-item select {
width: 100%;
padding: 12px 22px;
border: 1px solid var(--wp--preset--color--custom-beige-1);
border-radius: 10px;
background: var(--wp--preset--color--custom-blanc);
font-family: var(--wp--preset--font-family--noto-sans-jp);
font-size: var(--wp--preset--font-size--2);
color: var(--wp--preset--color--custom-noir);
box-sizing: border-box;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.filtre-item select:focus {
outline: none;
background: var(--wp--preset--color--custom-blanc);
box-shadow: 0 0 0 2px var(--wp--preset--color--custom-bleu);
}
.btn-filtrer,
.btn-reset {
padding: 14px 32px;
border: none;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--2);
font-weight: 700;
text-transform: uppercase;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-filtrer {
background: var(--wp--preset--color--custom-noir);
color: var(--wp--preset--color--custom-blanc);
}
.btn-filtrer:hover {
background: var(--wp--preset--color--custom-bleu);
}
.btn-reset {
background: transparent;
color: var(--wp--preset--color--custom-noir);
border: 1px solid var(--wp--preset--color--custom-beige-1);
margin-top: 1rem;
display: block;
width: fit-content;
}
.btn-reset:hover {
background: var(--wp--preset--color--custom-beige-2);
} .btn-reset-discret {
background: none;
border: none;
padding: 0.5rem 0;
font-family: var(--wp--preset--font-family--noto-sans-jp);
font-size: var(--wp--preset--font-size--1);
font-weight: 400;
color: rgba(29, 30, 27, 0.6);
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
}
.btn-reset-discret:hover {
color: var(--wp--preset--color--custom-marron);
text-decoration: underline;
} .liste-offres-grille {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
list-style: none;
padding: 0;
}
.liste-offres-item {
min-height: 300px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
} .offre-link-global {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
} .offre-card {
background: var(--wp--preset--color--custom-bleu);
color: var(--wp--preset--color--custom-blanc);
border-radius: 50px;
padding: var(--wp--preset--spacing--4);
height: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s ease;
} .offre-item:nth-child(2n) .offre-card {
background: var(--wp--preset--color--custom-noir);
} .offre-item:nth-child(2n) .offre-cta .wp-block-button__link {
background: #000!important;
}
.offre-item:nth-child(2n) .offre-cta .wp-block-button__link:hover {
background: var(--wp--preset--color--custom-marron)!important;
} .offre-title {
margin: 0 0 1rem 0;
font-size: var(--wp--preset--font-size--6);
font-weight: 900;
text-transform: uppercase;
line-height: 1.2;
color: inherit;
} .offre-details {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: var(--wp--preset--spacing--2);
}
.offre-contrat,
.offre-ville {
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--5);
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
color: inherit;
} .contenu-personnalise {
background: var(--wp--preset--color--custom-gris-clair);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.contenu-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50px;
}
.contenu-video {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.contenu-video iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
} .liste-offres-pagination {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.liste-offres-pagination .page-numbers {
display: inline-block;
padding: 0.75rem 1rem;
margin: 0 0.25rem;
text-decoration: none;
border-radius: 5px;
background: var(--wp--preset--color--custom-blanc);
color: var(--wp--preset--color--custom-noir);
border: 1px solid #ddd;
transition: all 0.3s ease;
width: 48px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.liste-offres-pagination .page-numbers:hover,
.liste-offres-pagination .page-numbers.current {
background: var(--wp--preset--color--custom-bleu);
color: var(--wp--preset--color--custom-blanc);
border-color: var(--wp--preset--color--custom-bleu);
} .liste-offres-vide {
text-align: center;
padding: 2rem;
background: var(--wp--preset--color--custom-gris-clair);
border-radius: 10px;
}
.liste-offres-grille .liste-offres-item .wp-block-buttons {
margin-top: var(--wp--preset--spacing--1);
}
.liste-offres-grille .liste-offres-item .wp-block-button__link {
background-color: var(--wp--preset--color--custom-noir);
border-radius: 10px;
font-size: var(--wp--preset--font-size--4);
font-style: normal;
font-weight: 700;
padding-top: 14px;
padding-right: 32px;
padding-bottom: 14px;
padding-left: 32px;
text-transform: uppercase;
} @media (max-width: 980px) {
.liste-offres-grille {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.filtres-row {
flex-direction: column;
align-items: stretch;
}
.filtre-item {
min-width: auto;
}
}
@media (max-width: 600px) {
.liste-offres-grille {
grid-template-columns: 1fr;
}
.liste-offres-item {
min-height: 250px;
}
}
@media (max-width: 768px) {
.offre-card {
min-height: auto!important;
gap: 1rem!important;
}
.offre-title {
font-size: var(--wp--preset--font-size--5);
margin: 0!important;
}
.offre-details {
margin: 0!important;
}
}