@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Ubuntu+Condensed&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root{
    --fr-color-site: 137 135 122;
    --fr-color-site-dark: 73 72 70;
    --fr-color-site-light: 196 195 187;
    --fr-color-yellow : 242 217 57;

    --site-font-body:"Ubuntu", sans-serif;
    --site-font-title:"Alfa Slab One", serif;
    --site-font-condensed: "Ubuntu Condensed", sans-serif;
    --site-carre: 1rem;
    --fr-opacity: 100%;

}
body{
    font-family: var(--site-font-body);
    font-size: 1rem;
    background-color: rgb(var(--fr-color-site-dark));
    color: #ffffff;
}
.sp-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: black;
    width: 64px;
}
.photographer{
    position: relative;
    top: 72px;
}
.offcanvas-photographer {
    position: fixed;
    top: 72px;
    bottom: 0;
    right: 0;
    min-width: 300px;
}
.dropbtn {
    background-color: rgb(var(--fr-color-site-dark));
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown-cat {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 32px;
    left: 25px;
    background-color: rgb(var(--fr-color-site-dark));
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content::after {
    content: '';
    position: absolute;
    left: 1rem;
    top: -10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /* clear: both; */
}
.dropdown-content li {
    display: inline-block;
    float: left;
    width: 50%;
}

.dropdown-content a:hover {

}

.dropdown-cat:hover .dropdown-content {display: block;}

.dropdown-cat:hover .dropbtn {
    background-color: rgb(var(--fr-color-site-dark));
}

input:focus-visible {
    outline: none !important;
    color: white !important;
}
.offcanvas-photo{
    visibility: visible;
    transform: none !important;
}
.bg-gradient-site {
    background-image: linear-gradient(180deg, rgb(var(--fr-color-site)), transparent 70%);
}
header{
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: rgb(var(--fr-color-site-dark));
}
.view-image{
    width: calc(100% - 468px);
}
.photofull{
    min-width: 100%;
    max-height: calc(100vh - 2rem);
}
.comments{
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 93px;
}
._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: rgb(var(--fr-color-yellow)) !important; }

#mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }

#mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; }

.mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; height: 200% }

.minigal-link{
    opacity: 1;
    transition: opacity .5s;
}
.minigal-link:hover{
    opacity: .6;
}
.tag-link{
    color: rgb(var(--fr-color-yellow));
    opacity: .6;
    transition: opacity .5s;
}
.tag-link:hover{
    opacity: 1;
}
.photo-button {
    position: absolute;
    top: 1rem;
    right: 4.5rem;
}
.photo-close, .photo-full, .photo-fit {
    color: rgb(0 0 0 / 50%);
    padding: 1rem;
    width: 64px;
    height: 64px;
    background-color: rgb(var(--fr-color-yellow) / 0%);
    transition: all .3s ease-in-out;
    color: #ffffff;
}
.photo-close:hover, .photo-full:hover, .photo-fit:hover{
    background-color: rgb(var(--fr-color-yellow) / 10%);
}
.text-shadow {
    text-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}
.gal-artiste{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: -500px;
    opacity: 0;
    transition: all .3s ease-out;
    z-index: 4;
}
.gal-photo{
    overflow: hidden;
}
.gal-photo:hover .gal-artiste{
    left: 0;
    opacity: 1;
}
.avatar {
    --avatar-width: 100px;
    width: var(--avatar-width);
    height: var(--avatar-width);
}

.avatar-70 {
     --avatar-width: 70px;
     width: var(--avatar-width);
     height: var(--avatar-width);
 }
.avatar-50 {
    --avatar-width: 50px;
    width: var(--avatar-width);
    height: var(--avatar-width);
}
.avatar-30 {
    --avatar-width: 30px;
    width: var(--avatar-width);
    height: var(--avatar-width);
}
.photographer-header {
    position: relative;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.avatar-photographer {
    --avatar-width: 120px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: rgb(var(--fr-color-yellow));
    background-color: transparent;
    opacity: 1;
}
.btn-login {
    color: rgb(var(--fr-color-site));
}
.btn-login:hover {
    color: rgb(255 255 255 / 50%);
}
input:focus::placeholder {
    color: transparent;
}
.social-icon {
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    line-height: 55px;
}
#share {
    position: absolute;
    bottom: -30px;
}
.share:hover {
    color: rgb(var(--fr-color-yellow));
}
#share .social-icon{
    width: 35px;
    height: 35px;
    line-height: 35px;
}
.vk {
    background-color: #0077FF;
}
.pinterest{
    background-color: #E60023;
}
.telegram {
    background-color: #24A1DE;
}
.threads {
    background-color: #6c2ff7;
    background-image: linear-gradient(135deg, #ca57e5, #6c2ff6);
}
.facebook {
    background-color: #3b5998; }
.facebook:hover {
    background-color: #344e86; }
.twitter {
    background-color: #1da1f2; }
.social-login a.twitter:hover {
    background-color: #0d95e8; }
.google {
    background-color: #ea4335; }
.google:hover {
    background-color: #e82e1e; }

.btn-site {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--fr-color-site));
    --bs-btn-border-color: rgb(var(--fr-color-site-dark));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
    --bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--fr-color-site-dark));
    --bs-btn-active-border-color: rgb(var(--fr-color-site-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-dark));
    --bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.overlay, .loader-background {
    background-color: rgb(26 26 26 / 80%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    backdrop-filter: blur(5px);
    display: none;
}
.close {
    background-color: rgb(var(--fr-color-yellow) /0%);
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 63px;
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.close:hover{
    background-color: rgb(var(--fr-color-yellow) / 30%);
}
.bg-site-gradient{
    background-image: linear-gradient(to bottom, rgb(var(--fr-color-site-dark)), rgb(var(--fr-color-site) / 30%));
}
.header-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: all .3s ease-in-out;
}
.header-img:hover{
    object-fit: contain;
}
.border-white-50{
    border-color: rgb(255 255 255 / 50%) !important;
}
.bg-black{
    background-color: rgb(0 0 0 / var(--fr-opacity)) !important;;
}
.opacity-5{
    --fr-opacity: 5%;
}
.opacity-10{
    --fr-opacity: 10%;
}
.opacity-20{
    --fr-opacity: 20%;
}
.opacity-30{
    --fr-opacity: 30%;
}
.opacity-40{
    --fr-opacity: 40%;
}
.opacity-50{
    --fr-opacity: 50%;
}
.opacity-60{
    --fr-opacity: 60%;
}
.opacity-70{
    --fr-opacity: 70%;
}
.opacity-80{
    --fr-opacity: 80%;
}
.opacity-90{
    --fr-opacity: 90%;
}
.opacity-100{
    --fr-opacity: 100%;
}
.bg-site{
    background-color: rgb(var(--fr-color-site) / var(--fr-opacity));
}
.border-site {

    border-color: rgb(var(--fr-color-site) / var(--fr-opacity)) !important;
}
.text-site{
    color: rgb(var(--fr-color-site) / var(--fr-opacity));
}
.bg-site-light{
    background-color: rgb(var(--fr-color-site-light) / var(--fr-opacity));
}
.text-site-light{
    color: rgb(var(--fr-color-site-light) / var(--fr-opacity));
}
.bg-site-dark{

    background-color: rgb(var(--fr-color-site-dark) / var(--fr-opacity))
}
.text-site-dark{

    color: rgb(var(--fr-color-site-dark) / var(--fr-opacity));
}
.bg-site-yellow{

    background-color: rgb(var(--fr-color-yellow) / var(--fr-opacity));
}
.text-site-yellow{

    color: rgb(var(--fr-color-yellow) / var(--fr-opacity));
}
.nav-site a{
    color: #ffffff;
    opacity: .5;
    transition: opacity .3s ease;
}
.nav-site a:hover{
    color: #ffffff;
    opacity: 1;
}
.photo-selected {
    height: 90vh;
}
.font1{
    font-family: var(--site-font-body);
}
.font2{
    font-family: var(--site-font-title);
}
.carre{
    --site-carre: 2rem;
    width: var(--site-carre);
    height: var(--site-carre);
    z-index: 1;
}
.load {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.gal-photo:after {
    transform: translate(calc(-50% - 12.5px), -50%);
    background-color: rgb(var(--fr-color-site-dark) /50%);
    animation: lazyanim2 1s infinite;
}
.gal-photo:before {
    transform: translate(calc(-50% + 12.5px), -50%);
    background-color: rgb(var(--fr-color-site-dark));
    animation: lazyanim 1s infinite;
}

/* Style pour cacher les images avant qu'elles soient chargées */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Transition fluide de l'opacité */
    position: relative;
    z-index: 1;
}
.photo-view {
    width: 100%;
    height: auto;
}
/* Style après le chargement de l'image, via la classe .loaded */
.lazy-load.loaded {
    opacity: 1;  /* L'image devient visible après le chargement */
}

/* Optionnel : pour donner une meilleure indication visuelle pendant le chargement */
img.lazy-load::after {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    transition: opacity 0.2s;
}
@keyframes lazyanim {

    0%{
        transform: translate(calc(-50% + 12.5px), -50%);
    }
    50%{
        transform: translate(calc(-50% - 12.5px), -50%);
    }
    100%{
        transform: translate(calc(-50% + 12.5px), -50%) rotateZ(60deg);
    }
}
@keyframes lazyanim2 {

    0%{
        transform: translate(calc(-50% - 12.5px), -50%);
    }
    50%{
        transform: translate(calc(-50% + 12.5px), -50%);
    }
    100%{
        transform: translate(calc(-50% - 12.5px), -50%) rotateZ(60deg);
    }
}
img.lazy-load.loaded::after {
    opacity: 0; /* Une fois l'image chargée, on retire le "chargement" */
}
.fade-masonry {
     opacity: 1;
     animation-name: fadeInOpacity!important;
     animation-iteration-count: 1!important;
     animation-timing-function: ease-in !important;
     animation-duration: .5s!important;
 }
@keyframes square-animation {
    0% {
        left: 0;
        top: 0;
        background: rgb(var(--fr-color-yellow) /100%);
    }

    10.5% {
        left: 0;
        top: 0;
        background: rgb(var(--fr-color-yellow) /98%);
    }

    12.5% {
        left: 32px;
        top: 0;
        background: rgb(var(--fr-color-yellow) /85%);
    }

    23% {
        left: 32px;
        top: 0;
        background: rgb(var(--fr-color-yellow) /23%);
    }

    25% {
        left: 64px;
        top: 0;
        background: rgb(var(--fr-color-yellow) /25%);
    }

    35.5% {
        left: 64px;
        top: 0;
        background: rgb(var(--fr-color-yellow) /32.5%);
    }

    37.5% {
        left: 64px;
        top: 32px;
        background: rgb(var(--fr-color-yellow) /37.5%);
    }

    48% {
        left: 64px;
        top: 32px;
        background: rgb(var(--fr-color-yellow) /48%);
    }

    50% {
        left: 32px;
        top: 32px;
        background: rgb(var(--fr-color-yellow) /50%);
    }

    60.5% {
        left: 32px;
        top: 32px;
        background: rgb(var(--fr-color-yellow) /60.5%);
    }

    62.5% {
        left: 32px;
        top: 64px;
        background: rgb(var(--fr-color-yellow) /62.5%);
    }

    73% {
        left: 32px;
        top: 64px;
        background: rgb(var(--fr-color-yellow) /73%);
    }

    75% {
        left: 0;
        top: 64px;
        background: rgb(var(--fr-color-yellow) /75%);
    }

    85.5% {
        left: 0;
        top: 64px;
        background: rgb(var(--fr-color-yellow) /85.5%);
    }

    87.5% {
        left: 0;
        top: 32px;
        background: rgb(var(--fr-color-yellow) /87.5%);
    }

    98% {
        left: 0;
        top: 32px;
        background: rgb(var(--fr-color-yellow) /98%);
    }

    100% {
        left: 0;
        top: 0;
        background: rgb(var(--fr-color-yellow) /100%);
    }
}
.loader {
    position: absolute;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%) rotate(45deg);
    top: 50%;
    left: 50%;
}


.loader-square {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    margin: 2px;
    border-radius: 0px;
    background: rgb(var(--fr-color-yellow));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: square-animation 5s ease-in-out infinite both;
}

.loader-square:nth-of-type(0) {
    animation-delay: 0s;
}

.loader-square:nth-of-type(1) {
    animation-delay: -1.4285714286s;
}

.loader-square:nth-of-type(2) {
    animation-delay: -2.8571428571s;
}

.loader-square:nth-of-type(3) {
    animation-delay: -4.2857142857s;
}

.loader-square:nth-of-type(4) {
    animation-delay: -5.7142857143s;
}

.loader-square:nth-of-type(5) {
    animation-delay: -7.1428571429s;
}

.loader-square:nth-of-type(6) {
    animation-delay: -8.5714285714s;
}

.loader-square:nth-of-type(7) {
    animation-delay: -10s;
}
/*
.loader-square {
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(var(--site-color-jaune));
}
*/
.loader-circle {
    border: 8px solid rgb(243 243 243 / 30%);
    border-radius: 50%;
    border-top: 8px solid rgb(var(--fr-color-yellow));
    width: 160px;
    height: 160px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); }
    100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.signature a {
    text-decoration: none;
    color: #ffffff;
    transition: all .3s;
    opacity: .8;
    text-shadow: none;
}
.signature a:hover {
    opacity: 1;
    text-shadow: 0 0 15px rgb(var(--fr-color-yellow));
}
.ft-12{
    font-size: 12px;
}
.ft-14{
    font-size: 14px;
}
.ft-16{
    font-size: 16px;
}
.ft-18{
    font-size: 18px;
}
.ft-24{
    font-size: 24px;
}
.ft-28{
    font-size: 28px;
}
.ft-32{
    font-size: 32px;
}
.ft-36{
    font-size: 36px;
}
.ft-48{
    font-size: 48px;
}
.ft-52{
    font-size: 52px;
}
.condensed{
    font-family: var(--site-font-condensed) !important;
}
@media screen and (max-width: 440px){} {
    .ft-sm-12{
        font-size: 12px;
    }
    .ft-sm-14{
        font-size: 14px;
    }
    .ft-sm-16{
        font-size: 16px;
    }
    .ft-sm-18{
        font-size: 18px;
    }
    .ft-sm-24{
        font-size: 24px;
    }
    .ft-sm-28{
        font-size: 28px;
    }
    .ft-sm-32{
        font-size: 32px;
    }
    .ft-sm-36{
        font-size: 36px;
    }
    .ft-sm-48{
        font-size: 48px;
    }
    .ft-sm-52{
        font-size: 52px;
    }
}