h1,
h2 {
margin-top: 0;
font-family: Lato, sans-serif
}
h2 {
font-size: 45px;
font-weight: 300;
line-height: 1;
position: relative;
margin-bottom: 60px
}
@media (max-width:600px) {
h2 {
font-size: 38px
}
}
h3 {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 0;
text-transform: uppercase
}
h3,
p {
font-family: Lato, sans-serif;
margin-top: 0
}
.underline {
border-bottom: 1px solid #757e85;
margin-bottom: 15px
}
.center-underline {
display: flex;
justify-content: center;
align-items: center
}
.center-underline:after {
content: "";
width: 80px;
height: 2px;
position: absolute;
bottom: -30px;
background-color: #757e85
}
.left-underline {
display: flex;
justify-content: flex-start;
align-items: flex-start
}
.left-underline:after {
content: "";
width: 80px;
height: 2px;
position: absolute;
bottom: -30px;
background-color: #fff
}
.black-underline:after {
background-color: #757e85
}
html {
color: #757e85;
font-size: 16px;
font-family: Lato, sans-serif;
line-height: 26px;
font-family: Lato;
font-weight: 400;
scroll-behavior: smooth
}
body {
margin: 0
}
.container {
width: 100%;
max-width: 1080px
}
@media (max-width:1250px) {
.container {
max-width: 95%
}
}
@media (max-width:460px) {
.container {
max-width: 93%
}
}
.row {
display: flex
}
.flex-center,
.flex-column-center {
display: flex;
justify-content: center;
align-items: center;
align-content: center
}
.flex-column-center {
flex-direction: column
}
.flex-start-end {
display: flex;
justify-content: center;
align-items: flex-end;
align-content: flex-start
}
.flex-between {
align-items: center
}
.flex-between,
.flex-start-between {
display: flex;
justify-content: space-between;
align-content: center
}
.flex-colum-center,
.flex-start-between {
align-items: flex-start
}
.flex-colum-center {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
flex-wrap: wrap
}
.all-posts {
display: grid;
gap: 25px 20px;
grid-template-columns: auto auto auto
}
@media (max-width:1100px) {
.all-posts {
grid-template-columns: auto auto
}
}
@media (max-width:600px) {
.all-posts {
grid-template-columns: auto
}
}
.single-post h3 {
margin-bottom: 5px
}
.single-post .img-produit {
overflow: hidden;
height: 230px;
width: 340px
}
@media (max-width:1100px) {
.single-post .img-produit {
width: 100%;
height: 300px
}
}
.single-post .img-produit img {
object-fit: cover;
height: 100%;
width: 100%
}
input,
textarea {
font-family: Lato, sans-serif;
font-size: 16px;
line-height: 19px;
padding: 0 18px;
width: 100%;
max-width: 536px;
box-sizing: border-box
}
input {
height: 47px
}
textarea {
padding-top: 14px
}
input[type=submit] {
width: 196px;
height: 47px;
background-color: #b5bfc8;
color: #fff;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 700;
outline: none;
border: 0;
cursor: pointer;
transition: all .5s ease
}
input[type=submit]:hover {
background-color: #e3c7b9
}
.social-links a img {
transition: all .3s ease
}
.social-links a img:hover {
opacity: .7
}
.wpcf7 form .wpcf7-response-output {
margin-left: 0;
margin-right: 0
}
footer .section-contact {
padding: 75px 0
}
@media (max-width:600px) {
footer .section-contact {
padding: 50px 0
}
}
footer .section-contact .container {
align-items: flex-start
}
@media (max-width:900px) {
footer .section-contact .container {
flex-direction: column
}
}
footer .section-contact .info-content {
width: 50%;
align-items: flex-start
}
@media (max-width:900px) {
footer .section-contact .info-content {
width: 100%;
margin-bottom: 50px
}
}
@media (max-width:600px) {
footer .section-contact .info-content {
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center
}
}
footer .section-contact .info-content a {
color: #757e85
}
footer .section-contact .info-content h3 {
font-family: Lato, sans-serif;
font-weight: 700
}
footer .section-contact .info-content .adresse-content {
width: 50%
}
footer .section-contact .info-content .adresse-content .social-links {
display: flex;
flex-wrap: wrap
}
@media (max-width:600px) {
footer .section-contact .info-content .adresse-content .social-links {
margin-bottom: 50px;
justify-content: space-between;
max-width: 160px;
margin: 50px auto
}
}
footer .section-contact .info-content .adresse-content .social-links a {
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px
}
@media (max-width:600px) {
footer .section-contact .info-content .adresse-content .social-links a {
margin: 0
}
}
footer .section-contact .info-content .heures-content {
width: 50%
}
@media (max-width:600px) {
footer .section-contact .info-content .heures-content .heures-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
}
footer .section-contact .info-content .heures-content .single-heure {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px
}
footer .section-contact .info-content .heures-content .single-heure .titre-jour {
width: 100px;
margin: 0
}
footer .section-contact .info-content .heures-content .single-heure .titre-heure {
width: 75px;
margin: 0
}
footer .section-contact .formulaire-content {
width: 50%
}
@media (max-width:900px) {
footer .section-contact .formulaire-content {
width: 100%
}
}
footer .copyrights-footer a {
color: white;
}
footer .copyrights-footer a:first-child {
padding-right: 8px;
border-right: 1px solid white;
margin-right: 5px;
}
footer .copyrights-footer {
height: 80px;
width: 100%;
background-color: #757e85;
color: #fff;
font-size: 16px;
font-family: Lato, sans-serif;
line-height: 26px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
@media only screen and (max-width:360px) {
footer .copyrights-footer {
height: auto;
padding: 25px 15px;
box-sizing: border-box;
font-size: 14px;
text-align:center;
}
footer .copyrights-footer .politique-wrap{
display:flex;
flex-direction:column;
}
footer .copyrights-footer .politique-wrap a{
padding:0;
margin-right:0;
border:none;
}
}
header {
position: absolute;
width: 100%;
top: 50px;
left: 0;
z-index: 1
}
@media (max-width:1000px) {
header {
top: 0;
padding-top: 50px
}
}
@media (max-width:800px) {
header {
top: 0;
padding-top: 25px
}
}
@media (max-width:600px) {
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: #747e87;
padding-top: 15px;
padding-bottom: 15px
}
}
@media (max-width:600px) {
header .logo-site img {
width: 75%
}
}
header .menu-header-desktop .menu {
display: flex;
list-style: none
}
header .menu-header-desktop .menu li {
margin: 0 10px
}
header .menu-header-desktop .menu li a {
font-size: 16px;
font-weight: 400;
font-family: Lato, sans-serif;
line-height: 26px;
text-transform: uppercase;
color: #fff;
position: relative;
text-decoration: none;
transition: all .5s ease;
display: flex;
align-items: center;
justify-content: center
}
header .menu-header-desktop .menu li a:after {
content: "";
width: 42px;
height: 2px;
background-color: #fff;
position: absolute;
bottom: -10px;
opacity: 0;
transition: all .5s ease
}
header .menu-header-desktop .menu li a:hover {
color: #e3c7b9
}
header .menu-header-desktop .menu li a:hover:after {
opacity: 1
}
header .menu-header-desktop .menu .current-lang {
display: none
}
header .nav-content {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column
}
header .nav-content .social-links {
display: flex;
flex-wrap: wrap;
margin-top: 10px
}
header .nav-content .social-links a {
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px
}
header .nav-content .social-links a:last-child {
margin-right: 0
}
@media (min-width:1000px) {
header .hamburger {
display: none
}
header .nav-content {
display: flex
}
}
@media (max-width:1000px) {
header .hamburger {
display: block
}
header .nav-content {
display: none
}
}
.mobile-menu-content {
height: 0;
position: absolute;
top: 0;
background-color: #e3c7b9;
width: 100%;
z-index: -1;
left: 0;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
transition: all .3s ease
}
.mobile-menu-content .social-links {
display: flex;
flex-wrap: wrap;
margin-top: 25px
}
.mobile-menu-content .social-links a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
margin: 0 5px
}
.mobile-menu-content .current-lang {
display: none
}
.mobile-menu-content ul {
list-style: none;
opacity: 0;
padding: 0;
transition: all 1.5s ease
}
.mobile-menu-content ul li {
margin-bottom: 15px
}
.mobile-menu-content ul li a {
font-size: 16px;
font-weight: 400;
font-family: Lato, sans-serif;
line-height: 26px;
text-transform: uppercase;
color: #fff;
text-decoration: none
}
.active-menu-mobile {
height: 101vh
}
.active-menu-mobile ul {
opacity: 1
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
background-color: #fff;
opacity: 1
}
.hamburger.is-active:hover,
.hamburger:hover {
opacity: 1
}
.section-en-tete {
position: relative;
width: 100%;
min-height: 768px;
z-index: 0
}
@media (max-width:600px) {
.section-en-tete {
min-height: 600px
}
}
.section-en-tete .bg-en-tete {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
z-index: 0
}
.section-passion {
padding-top: 80px
}
.section-passion .text-passion {
padding: 15px 0;
text-align: center
}
.section-souliers,
.section-vetements {
padding: 20px 0
}
.section-accessoires {
padding: 20px 0;
padding-bottom: 50px
}
.section-accessoires .medias-content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap
}
.section-accessoires .text-indicatif {
width: 100%;
font-size: 14px;
font-style: italic;
text-align: left
}
.section-accessoires .text-medias {
width: 100%;
margin: 15px 0;
text-align: center
}
.section-accessoires .social-links {
display: flex;
flex-wrap: wrap
}
.section-accessoires .social-links a {
display: flex;
justify-content: center;
align-items: center
}
.section-accessoires .social-links img {
margin-right: 10px
}
.section-histoire {
position: relative;
width: 100%;
min-height: 625px;
z-index: 0
}
@media (max-width:800px) {
.section-histoire {
min-height: 500px
}
}
@media (max-width:600px) {
.section-histoire {
min-height: 400px
}
}
.section-histoire .bg-histoire {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
z-index: 0
}
.section-histoire .flex-center {
justify-content: flex-end
}
.section-histoire .notre-histoire-content {
position: relative;
z-index: 1;
width: 50%;
color: #fff;
font-weight: 700
}
@media (max-width:600px) {
.section-histoire .notre-histoire-content {
width: 100%
}
}
.section-trois-images {
position: relative;
width: 100%
}
.section-trois-images .wrap-img-histoire .single-img-histoire {
width: 33.33%
}
.section-trois-images .wrap-img-histoire .single-img-histoire img {
object-fit: cover;
height: 100%;
width: 100%
}
.section-marques {
padding: 100px 0
}
@media (max-width:600px) {
.section-marques {
padding: 50px 0
}
}
@media (max-width:900px) {
.section-marques .container {
flex-direction: column
}
}
.section-marques .marques-content {
width: 50%
}
@media (max-width:900px) {
.section-marques .marques-content {
width: 100%
}
}
.section-marques .marques-content .marques-text {
font-size: 30px;
font-family: Lato, sans-serif;
font-weight: 300;
line-height: 45px;
margin: 0
}
@media (max-width:600px) {
.section-marques .marques-content .marques-text {
font-size: 22px;
line-height: 30px
}
}
.section-marques .marques-logos-content {
width: 50%
}
@media (max-width:900px) {
.section-marques .marques-logos-content {
width: 100%
}
}
.section-marques .marques-logos-content .all-marques {
display: grid;
gap: 15px 15px;
grid-template-columns: auto auto auto
}
@media (max-width:600px) {
.section-marques .marques-logos-content .all-marques {
grid-template-columns: auto auto
}
}
.section-marques .marques-logos-content .all-marques .single-marque {
overflow: hidden;
position: relative;
border: 1px solid #707070;
display: flex;
justify-content: center;
align-items: center
}
.section-marques .marques-logos-content .all-marques .single-marque .img-marque {
height: 96px;
width: 168px;
position: relative;
padding: 5px;
box-sizing: border-box
}
.section-marques .marques-logos-content .all-marques .single-marque img {
height: 100%;
width: 100%;
object-fit: contain
}
.section-bande-images .bandeau-images {
width: 100%
}