html,
body {
height: 100%;
margin: 0;
font-family: sonar-sans, sans-serif;
background-color: #F2EDE7;
color: #0F161C;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: operetta-32, serif;
font-size: calc(1.625rem + 4.5vw);
}
a {
text-decoration: none;
color: inherit;
}
.table {
background-color: transparent !important;
--bs-table-bg: transparent !important;
}
.secondary-font {
font-family: zeitung-micro, sans-serif;
letter-spacing: 0.2rem;
text-transform: uppercase;
}
.text-highlight {
color: #F25252;
}
.text-white {
opacity: 1;
color: #F2EDE7 !important;
}
.text-black {
opacity: 1;
color: #0F161C !important;
}
.widget-title {
font-size: 2rem;
}
.bg-white {
background-color: #F2EDE7 !important;
}
.bg-black {
background-color: #0F161C !important;
}
/* Classe pour image de fond responsive */
.bg-cover {
background-image: url('../images/d2d4a3abdb48e128994d04494af8bfe0a83c1941.jpeg');
/* Parallaxe */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-size: cover;
height: 100vh;
}
.bg-cover-abonnements {
background-image: url('../images/abonnement.jpg');
}
.bg-cover-concours {
background-image: url('../images/abonnement.jpg');
}
.bg-cover-concours-2024-2025 {
background-image: url('../images/portrait.png');
}
.navbar-burger {
position: fixed;
right: 0%;
}
.nav-classement {
background: transparent;
}
.nav-classement.active {
background: #0F161C !important;
border-bottom: 4px solid #F25252 !important;
color: #F2EDE7 !important;
}
.nav-classement:hover {
border-bottom: 4px solid #F25252 !important;
}
.nav-classement:focus,
.nav-classement:hover {
transition: all 0.1s ease-in;
}
.pagination .page-numbers {
width: 30px;
height: 30px;
display: flex;
align-items: center;
padding: 0 10px;
line-height: 1.4;
transition: 0.9s all;
text-decoration: none;
color: #0F161C !important;
}
.pagination .active {
border-bottom: 4px solid #F25252 !important;
}
.tab-content .offer {
height: 20vh;
}
.navbar {
z-index: 1000;
}
.scroll-content {
position: relative;
height: 85%;
}
.scroll-content svg {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%) !important;
}
/* Logo redimensionné */
.navbar-dark .navbar-brand img {
max-height: 50px;
}
/* Bouton burger styling */
.navbar-toggler {
border: none;
}
.navbar-brand a {
max-height: 50px;
}
/* Conteneur texte et bouton dans le header */
.header-content {
text-align: left;
color: #F2EDE7;
z-index: 1;
transform: translate(-25%, -50%) !important;
left: 25% !important;
}
.header-content h1 {
text-transform: uppercase;
}
.btn {
border-radius: 0;
}
.btn:hover {
background-color: #F25252 !important;
border-color: #F2A7A7 !important;
color: #F2EDE7;
}
.btn-light {
background-color: #F2EDE7;
}
.btn-dark {
background-color: #0F161C;
}
.header-content .btn-cta {
margin-top: 1.5rem;
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
background: #F2EDE7;
}
.bg-overlay {
background-color: rgba(0, 0, 0, 0.4);
z-index: 0;
}
/* Permet d'avoir l'offcanvas-header en position relative */
.offcanvas-end .offcanvas-header {
position: relative;
padding: 0;
}
/* Place la croix en absolu dans le coin supérieur droit */
.offcanvas-end .close {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
}
/* Décale le contenu pour éviter qu'il soit sous la croix */
.offcanvas-end .offcanvas-body {
padding-top: 3rem;
}
.offer {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
height: 100vh;
}
.offer-abonnements-num {
background: linear-gradient(180deg, rgb(15, 22, 28) 0%, rgba(255, 255, 255, 0) 50%), url("../images/169-magazine-mockup-03.jpg");
background-position: 71% !important;
}
.offer-abonnements-paper {
background: linear-gradient(180deg, rgb(15, 22, 28) 0%, rgba(255, 255, 255, 0) 50%), url("../images/Free PSD Magazine Mockup table.png");
background-position: right !important;
}
.offer-abonnements-all {
background: linear-gradient(180deg, rgb(15, 22, 28) 0%, rgba(255, 255, 255, 0) 50%), url("../images/PSD-FILE-FREE.jpg");
background-position: 17% !important;
}
.offer-num {
background: url("../images/169-magazine-mockup-03.jpg");
background-position: 71% !important;
}
.offer-paper {
background: url("../images/Free PSD Magazine Mockup table.png");
background-position: right !important;
}
.offer-all {
background: url("../images/PSD-FILE-FREE.jpg");
background-position: 17% !important;
}
.padding-medium {
padding-top: 10em;
padding-bottom: 10em;
}
.btn-underline {
border: none;
transition: 0.5s ease-in-out;
font-size: 14px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
background: none;
width: fit-content;
position: relative;
padding-bottom: 2px;
margin: 0;
color: inherit;
text-decoration: none;
}
.btn-underline:hover::after {
width: 100%;
}
.btn-underline::after {
content: "";
width: 0;
height: 2px;
background: #F25252 !important;
transition: 0.3s ease-in-out;
position: absolute;
left: 0;
bottom: 0;
}
.text-block {
margin-bottom: 6rem !important;
}
.carousel-inner .d-flex {
display: flex;
justify-content: space-between;
gap: 1rem;
}
/* Carte produit */
.product-card {
flex: 1;
display: flex;
flex-direction: column;
}
/* Image carrée avec background */
.product-image {
width: 100%;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
}
/* Infos produit */
.product-info {
text-align: left;
margin-top: 0.75rem;
}
.item-name {
font-weight: 500;
font-size: 1rem;
letter-spacing: 1px;
margin-bottom: 0.3rem;
}
.item-price {
font-weight: bold;
font-size: 1.1rem;
}
/* Flèches personnalisées */
.custom-arrow {
position: absolute;
bottom: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.8rem;
color: #0F161C;
z-index: 2;
}
/* Responsive */
@media (max-width: 768px) {
.carousel-inner .d-flex {
flex-direction: column;
}
}
.carousel-controls-custom {
position: absolute;
bottom: 10px;
right: 15px;
z-index: 10;
display: flex;
gap: 10px;
}
.carousel-controls-custom button {
width: 40px;
height: 40px;
color: #0F161C;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
opacity: 1;
}
.carousel-controls-custom i {
font-size: 18px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:active,
.carousel-control-next:active,
.carousel-control-prev:focus,
.carousel-control-next:focus {
color: #0F161C;
}
.nav-link {
font-family: 'Jost', sans-serif;
font-size: 13px;
text-transform: uppercase;
position: relative;
width: fit-content;
letter-spacing: 10%;
padding-bottom: 5px;
text-decoration: none;
color: #F2EDE7;
list-style: none;
line-height: 10px;
}
.card {
background-color: transparent;
border: none;
}
.card a {
color: inherit;
text-decoration: none;
transition: 0.3s ease-in-out;
}
.card-body a {
color: inherit;
text-decoration: none;
transition: 0.3s ease-in-out;
}
.offer-paragraph {
font-size: 1rem;
font-weight: 400;
line-height: normal;
}
.product-store .product-item {
position: relative;
}
.product-item .cart-concern {
width: 80%;
text-align: center;
margin: auto;
position: relative;
left: 0;
right: 0;
bottom: 120px;
z-index: 9;
transition: 0.5s ease-out;
padding: 10px;
opacity: 0;
background: #F2EDE7;
}
.image-holder .product-image {
aspect-ratio: auto !important;
}
.image-holder:hover .cart-concern {
bottom: 100px;
opacity: 1;
}
.alertCustom {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
}
.nav-tabs .nav-link.show,
.nav-tabs .nav-link.active {
background-color: transparent;
border-color: transparent;
border-bottom-color: transparent;
transition: all 0.1s ease-in;
color: #0F161C;
}
h5 {
font-size: 1.25rem !important;
}