@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root{
    --fr-color-site-1: 169 155 114;
    --fr-color-site-1-dark : 119 109 80;
    --fr-color-site-1-light : 204 195 171;
    --fr-color-site-2: 12 73 112;
    --fr-color-site-3: 103 116 126;
    --fr-color-font : 102 102 102;
    --fr-font1: Libre Franklin;
    --fr-font2: Playfair Display;
}
body{
    font-family:var(--fr-font1), sans-serif;
    color:rgb(var(--fr-color-font));
    background-color: #000000;
    overflow-x: hidden;
}
body {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
background-color: #ffffff;
}
}
.font-1{
    font-family:var(--fr-font1);
}
.font-2{
    font-family:var(--fr-font2);
}
.fr-opacity-5{
    --fr-opacity: 5% !important;
    }
    .fr-opacity-10{
    --fr-opacity: 10% !important;
    }
    .fr-opacity-15{
    --fr-opacity: 15% !important;
    }
    .fr-opacity-20{
    --fr-opacity: 20% !important;
    }
    .fr-opacity-30{
    --fr-opacity: 30% !important;
    }
    .fr-opacity-40{
    --fr-opacity: 40% !important;
    }
    .fr-opacity-50{
    --fr-opacity: 50% !important;
    }
    .fr-opacity-60{
    --fr-opacity: 60% !important;
    }
    .fr-opacity-70{
    --fr-opacity: 70% !important;
    }
    .fr-opacity-80{
    --fr-opacity: 80% !important;
    }
    .fr-opacity-90{
    --fr-opacity: 90% !important;
    }
    .fr-opacity-100{
    --fr-opacity: 100% !important;
    }
.text-justify {
    text-align: justify;
    word-break: break-word; /* solution de contournement pour Chrome */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.spooler {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(var(--fr-color-site-1) / 70%);
    color: white;
    background-image: linear-gradient(45deg, rgb(var(--fr-color-site-1) / 39%) 7%, rgb(var(--fr-color-site-2) / 56%));
    z-index: 10000;
    font-size: 2rem;
    font-weight: 200;
    display: none;
}
.spooler-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.h-line-100 {
    line-height: 100%;
}
.ft-12 {
    font-size: 12px;
}
.ft-14 {
    font-size: 14px;
}
.ft-16 {
    font-size: 16px;
}
.ft-18 {
    font-size: 18px;
}
.ft-20 {
    font-size: 20px;
}
.ft-24 {
    font-size: 24px;
}
.ft-28 {
    font-size: 28px;
}
.ft-32 {
    font-size: 32px;
}
.ft-36 {
    font-size: 36px;
}
.ft-42 {
    font-size: 42px;
}
.ft-48 {
    font-size: 48px;
}
.ft-52 {
    font-size: 52px;
}
.ft-60 {
    font-size: 60px;
}
.ft-72 {
    font-size: 72px;
}
@media (max-width: 768px){
    .ft-sm-12{
        font-size: 12px !important;
    }
    .ft-sm-14{
        font-size: 14px !important;
    }
    .ft-sm-16{
        font-size: 16px !important;
    }
    .ft-sm-18{
        font-size: 18px !important;
    }
    .ft-sm-20{
        font-size: 20px !important;
    }
    .ft-sm-24{
        font-size: 24px !important;
    }
    .ft-sm-28{
        font-size: 28px !important;
    }
    .ft-sm-32{
        font-size: 32px !important;
    }
    .ft-sm-36{
        font-size: 36px !important;
    }
    .ft-sm-48{
        font-size: 48px !important;
    }
    .ft-sm-52{
    font-size: 52px !important;
    }
    .ft-sm-58{
        font-size: 58px !important;
    }
}
.notification {
position: fixed;
right: 0;
top: 110px;
max-width: 320px;
z-index: 10000;
font-size: .9rem;
}
.notification .alert{
padding: 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.alert-success {
color: #ffffff !important;
background-color: #7ba54e !important;
border-color: #7ba54e !important;
}
.alert-danger {
color: #fff !important;
background-color: #ce0013 !important;
border-color: #d00016 !important;
}
.alert-warning {
color: #ffffff !important;
background-color: #ffa500 !important;
border-color: #ffa500 !important;
}
.alert-info {
color: #fff !important;
background-color: #00b3d4 !important;
border-color: #00b3d4 !important;
}
.fw-900{
font-weight:900;
}
h1, h2, h3 {
    font-family: var(--fr-font2), serif;
}
.btn-site-1 {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--fr-color-site-1));
    --bs-btn-border-color: rgb(var(--fr-color-site-1));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-hover-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(var(--fr-color-site-1));
    --bs-btn-disabled-border-color: rgb(var(--fr-color-site-1));
}

.bg-site-1{
    --fr-opacity:100%;
    background-color:rgb(var(--fr-color-site-1) / var(--fr-opacity)) !important;
}
.text-site-1{
    --fr-opacity:100%;
    color:rgb(var(--fr-color-site-1) / var(--fr-opacity)) !important;
}
.border-site-1{
--fr-opacity:100%;
border-color:rgb(var(--fr-color-site-1) / var(--fr-opacity)) !important;
}
.btn-site-1 {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--fr-color-site-1));
    --bs-btn-border-color: rgb(var(--fr-color-site-1));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-hover-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(var(--fr-color-site-1));
    --bs-btn-disabled-border-color: rgb(var(--fr-color-site-1));
}

.bg-site-2{
    --fr-opacity:100%;
    background-color:rgb(var(--fr-color-site-2) / var(--fr-opacity)) !important;
}
.text-site-2{
    --fr-opacity:100%;
    color:rgb(var(--fr-color-site-2) / var(--fr-opacity)) !important;
}
.border-site-2{
--fr-opacity:100%;
border-color:rgb(var(--fr-color-site-2) / var(--fr-opacity)) !important;
}
.btn-site-1 {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--fr-color-site-1));
    --bs-btn-border-color: rgb(var(--fr-color-site-1));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-hover-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(var(--fr-color-site-1));
    --bs-btn-disabled-border-color: rgb(var(--fr-color-site-1));
}

.bg-site-3{
    --fr-opacity:100%;
    background-color:rgb(var(--fr-color-site-3) / var(--fr-opacity)) !important;
}
.text-site-3{
    --fr-opacity:100%;
    color:rgb(var(--fr-color-site-3) / var(--fr-opacity)) !important;
}
.border-site-3{
--fr-opacity:100%;
border-color:rgb(var(--fr-color-site-3) / var(--fr-opacity)) !important;
}
.btn-site-1 {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--fr-color-site-1));
    --bs-btn-border-color: rgb(var(--fr-color-site-1));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-hover-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-border-color: rgb(var(--fr-color-site-1-dark));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(var(--fr-color-site-1));
    --bs-btn-disabled-border-color: rgb(var(--fr-color-site-1));
}

.bg-site-4{
    --fr-opacity:100%;
    background-color:rgb(var(--fr-color-site-4) / var(--fr-opacity)) !important;
}
.text-site-4{
    --fr-opacity:100%;
    color:rgb(var(--fr-color-site-4) / var(--fr-opacity)) !important;
}
.border-site-4{
--fr-opacity:100%;
border-color:rgb(var(--fr-color-site-4) / var(--fr-opacity)) !important;
}
.bg-text-site-1{
    --fr-opacity:100%;
    background-color:rgb(var(--fr-color-site-1) / var(--fr-opacity)) !important;
    color:#fff;
}
article h2, article h3{
font-family:var(--fr-font1), sans-serif;
font-weight:500;
}
img.bg {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.header-gradient {
    background-image: linear-gradient(180deg, black, transparent);
    position: absolute;
    top: 72px;
    left: 0;
    height: 300px;
    width: 100%;
    z-index: 2;
}
.logo-icon {
    width: 90px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color);
    font-weight: 600;
}
.nav-link {
    font-weight: 300;
    color: rgb(255 255 255);
}
.navbar-transparent{
    background-color:transparent;
}
.galerie {
    margin-top: 87px;
    /*height: calc(100vh - 174px);*/
    overflow: hidden;
    position: relative;
    z-index: 1028;
}
#panierblock {
    z-index: 2;
    position: relative;
    margin-top: 87px;
    min-height: calc(100vh - 400px);
}
.thumbs {
transition: all .5s ease-in-out;
}
.thumbs:hover {
scale: 1.25;
object-fit: contain !important;
z-index:1;
}
.content {
/* overflow: auto; */
/* position: relative; */
/* max-width: 97%; */
height: 593px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.offcanvas-full-screen .content{
height:390px;
overflow-y: auto;
padding-right: 1rem;
}
.offcanvas-full-screen .content::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius:50rem;
}

.offcanvas-full-screen .content::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}

.offcanvas-full-screen .content::-webkit-scrollbar-thumb
{
background-color: #000000;
border-radius:50rem;
}
.shipping{
    position:absolute;
    top: 0;
    left:2000px;
    width:100%;
    min-height:100%;
    z-index:1080;
    opacity:0;
    transition: all .75s;
}

.carousel-indicators {
align-items: center;
}
.carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
background-color: rgb(var(--fr-color-site-1));
}
.carousel-indicators .active {
opacity: 1;
width: 15px !important;
height: 15px !important;
}
.img-header {
position: absolute;
top: 0;
z-index: 1;
height: 100%;
object-fit: cover;
object-position: center;
}
.mask1 {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.ratiofr-1x1 {
padding-top: 100%;
}
.ratiofr-4x3 {
padding-top: 75%;
}
.ratiofr-3x2 {
padding-top: 66.66%;
}
.ratiofr-5x4{
padding-top: 80%;
}
.products .card {
overflow: hidden;
}
.offcanvas-full-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2000;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #0a0a0a;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateYX(-100%);
    transform: translateX(-100%);
    overflow-y: auto;
}
.offcanvas-full-screen.open{
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.down-arrow{
    width: 100px;
    height: 100px;
    background-color:rgb(var(--fr-color-site-1) /0%);
    opacity:.6;
    transition: all .5s;
}
.down-arrow:hover{
opacity:1;
background-color:rgb(var(--fr-color-site-1) /30%);
}
.card-img, .card-img-top
{
transition: all .5s;
}
.post:hover .readpost{
left:.75rem;
}
.readpost {
    color: #fff;
    position: absolute;
    width: calc(40% - 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    transition: all .5s;
    left: -500px;
}
.post{
position:relative;
overflow:hidden;
}
.post:hover .card-img-top1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: .4;
}
footer .menu{
    padding:0;
    margin:0;
    list-style-type: none;
}
.menu>li{
padding-bottom:2.5px;
margin-bottom: 2.5px;
overflow:hidden;
position:relative;
}
.menu>li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
background: linear-gradient(90deg, #ffffff, transparent);
background-size: 200% auto;
transition: all .5s;
transform: translateX(-100%);
}

.menu>li:hover::after {
transform: translateX(0%);
animation: gradient-89 3s linear infinite;
}
.menu li:has(> .btn-contact):after {
opacity: 0;
}
.btn-contact {
background-color: rgb(var(--fr-color-site-1-light) / 50%);
border-radius: 50rem;
padding: .25rem 2rem;
}
.btn-contact:hover{
background-color: rgb(var(--fr-color-site-1-dark) / 100%);
}
@keyframes gradient-89 {
0% { background-position: 100% 0%; }
50% { background-position: 0% 0%; }
100% { background-position: 100% 0%; }
}

.menu a {
font-size: 14px;
text-decoration: none;
color: #fff;
/*
border-radius: 5px;
padding: 10px 50px;
background: #333;
display: flex;
flex-direction: column;
text-transform: uppercase;
margin: 10px 0px;
letter-spacing: 1px;
text-align: center;
*/
transition: 0.3s ease;
}
footer h4{
    font-family:var(--fr-font2);
    color: rgb(var(--fr-color-site-1-light));
    margin-bottom:0;
}
footer .logo{
    width:25%;
    min-width:300px;

}
.menu a:hover {
transform: scale(1.1);
}
.mentions a{
    color: black;
    text-decoration: none;
}
.mentions a:hover{
    color:rgb(var(--fr-color-site-1));
}
.f-caption {
text-align: center !important;
width: 100% !important;
max-width: 960px !important;
font-size: 14px !important;
}
@media (min-width: 1024px){
    .ms-50 {
        margin-left: calc(50% + 60px);
    }
    .h-lg-100{
        height:100%!important;
    }
}
@media (max-width:1024px){
    .navbar-transparent {
        background-color: rgb(0 0 0 / 80%);
        margin-top: 2rem;
        border-radius: .5rem;
    }
}
@media (max-width:440px){
    .header-gradient {
        height: 200px;
    }
    .w-sm-100{
        width:100%;
    }
}
#rgpd {
    position: fixed;
    bottom: 0;
    right: 1rem;
    width: 100%;
    max-width: 340px;
    background-color: #fff;
    border-radius: .5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 1rem;
    box-shadow: 0 0 20px black;
    overflow: hidden;
    z-index:9999;
    transition: all 0.3s ease;
}
.cookie:before {
    content: "";
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: -1;
    background-image: url(https://photographers.frdev.ovh/assets/img/cookie.svg);
    background-repeat: no-repeat;
    opacity: 0.3;
    width: 100px;
    height: 100px;
    transform: rotate(120deg);
}
#rgpd #params {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

#rgpd.open #params {
    max-height: 2000px; /* assez grand pour tout afficher */
    opacity: 1;
}
.lh-100{
line-height: 100%;
}
.mCSB_scrollTools .mCSB_draggerRail {
    min-height: 593px;
}