/* <<< --- Style --- >>> */


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
}

b {
    font-size: inherit;
    font-weight: 600;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .2s ease;
}

a * {
    cursor: inherit !important;
}

span {
    cursor: default;
}

img {
    pointer-events: none;
    user-select: none;
}

div {
    position: relative;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.private {
    user-select: none;
}

::selection {
    color: var(--white);
    background: rgb(60, 60, 60, 0.8);
}
::-moz-selection {
    color: var(--white);
    background: rgb(60, 60, 60, 0.8);
}

::-webkit-scrollbar {
    display: none;
}

:root {
    --black: #000;
    --black-1: #202020;
    --filter-black-1: invert(0%) sepia(1%) saturate(6204%) hue-rotate(9deg) brightness(101%) contrast(87%);
    --white: #FFF;
    --white-1: #EFEFEF;
    --white-2: #CCC;
    --filter-white-2: invert(81%) sepia(0%) saturate(0%) hue-rotate(239deg) brightness(102%) contrast(94%);
    --grey: #707070;
    --filter-grey: invert(47%) sepia(2%) saturate(0%) hue-rotate(230deg) brightness(91%) contrast(88%);

    --padding: 50px;
}

@media screen and (max-width: 760px) {
    :root {
        --padding: 30px;
    }
}
@media screen and (max-width: 400px) {
    :root {
        --padding: 20px;
    }
}

body {
    opacity: 0;
    width: 100%;
    min-width: 350px;
    height: auto;
    background-color: var(--white);
    transition: 1s ease;
}

body.show {
    opacity: 1;
}

body.fade-out {
    transition: .5s ease;
}

.container {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    margin: auto;
    padding: 0 var(--padding);
}

section {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: calc(var(--padding) * 2);
}

section .content {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.main .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--padding) * 2);
    padding-top: calc(var(--padding) * 2);
}

.main {
    display: none;
}

body.home #home-content {
    display: inherit;
}
body.pro #pro-content {
    display: inherit;
}
body.perso #perso-content {
    display: inherit;
}
body.gallery #gallery-content {
    display: inherit;
}

.btn-view-more {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    color: var(--black);
    background-color: var(--white);
    backdrop-filter: blur(10px);
    outline: 1px solid rgb(255, 255, 255, .5);
    outline-offset: -1px;
    padding: 0 20px;
    border-radius: 6px;
    width: fit-content;
    height: auto;
    transition: .2s ease;
}

.btn-view-more img {
    width: auto;
    height: 12px;
    transition: .2s ease;
}

.social-media {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: fit-content;
    height: fit-content;
    user-select: none;
}

.social-media a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    width: 40px;
    height: 40px;
    background-color: transparent;
    outline: 1px solid transparent;
    outline-offset: -1px;
    border-radius: 50%;
    transition: .2s ease;
}

.social-media img {
    width: auto;
    height: 25px;
    filter: invert(1);
    transition: .2s ease;
}

@media screen and (hover: hover) {
    a.btn-view-more:hover {
        color: var(--white);
        background-color: rgb(255, 255, 255, .25);
    }
    a.btn-view-more:hover img {
        filter: invert(1);
        transform: translateX(2px);
    }
    .social-media a:hover {
        background-color: rgb(239, 239, 239, .25);
        backdrop-filter: blur(5px);
        outline: 1px solid rgb(255, 255, 255, .5);
    }
    .social-media a:hover img {
        height: 20px;
    }
}

@media screen and (max-width: 980px) {
    .main .content {
        padding-top: calc(calc(var(--padding) * 2) + 75px);
    }
}
@media screen and (max-width: 760px) {
    .social-media {
        gap: 10px;
    }
    .social-media img {
        height: 20px;
    }
}


/* <<< --- Photo --- >>> */


#cover-livre {
    background-image: url(../imgs/livre.jpg);
}
#cover-pp {
    background-image: url(../imgs/photo-profil.jpg);
}
#cover-reportage-voyage {
    background-image: url(../imgs/portfolio/reportage-voyage.jpg);
}
#cover-event-corporate {
    background-image: url(../imgs/portfolio/event-corporate.jpg);
}
#cover-lifestyle {
    background-image: url(../imgs/portfolio/lifestyle.jpg);
}
#cover-sport-athletes {
    background-image: url(../imgs/portfolio/sport-athletes.jpg);
}
#cover-packshots-produits {
    background-image: url(../imgs/portfolio/packshots-produits.jpg);
}
#cover-esthetisme {
    background-image: url(../imgs/portfolio/esthetisme.jpg);
}
#cover-creativite {
    background-image: url(../imgs/portfolio/creativite.jpg);
}
#cover-originalite {
    background-image: url(../imgs/portfolio/originalite.jpg);
}
#cover-ile-de-re {
    background-image: url(../imgs/portfolio/ile-de-re.jpg);
}
#cover-alpine {
    background-image: url(../imgs/portfolio/packshots-produits.jpg);
}
#cover-destination-cote-atlantique {
    background-image: url(../imgs/portfolio/destination-cote-atlantique.jpg);
}
#cover-lea-nature {
    background-image: url(../imgs/portfolio/lea-nature.jpg);
}
#cover-top-gun-voltige {
    background-image: url(../imgs/portfolio/top-gun-voltige.jpg);
}
#cover-polar-pro {
    background-image: url(../imgs/portfolio/polarpro.jpg);
}
#cover-kf-concept {
    background-image: url(../imgs/portfolio/kf-concept.jpg);
}
#cover-roller-quad {
    background-image: url(../imgs/portfolio/roller-quad.jpg);
}
#cover-patrouille-de-france {
    background-image: url(../imgs/portfolio/patrouille-de-france.jpg);
}
#cover-praia-da-ursa {
    background-image: url(../imgs/portfolio/praia-da-ursa.jpg);
}
#cover-ile-de-skye {
    background-image: url(../imgs/portfolio/ile-de-skye.jpg);
}
#cover-athletisme {
    background-image: url(../imgs/portfolio/athletisme.jpg);
}
#cover-surf {
    background-image: url(../imgs/portfolio/surf.jpg);
}
#cover-abstract {
    background-image: url(../imgs/portfolio/abstract.jpg);
}
#cover-cote-granit-rose {
    background-image: url(../imgs/portfolio/cote-de-granit-rose.jpg);
}
#cover-biathlon-clusaz {
    background-image: url(../imgs/portfolio/biathlon-la-clusaz.jpg);
}
#insta-epingle-1 {
    background-image: url(../imgs/insta-epingle-1.jpg);
}
#insta-epingle-2 {
    background-image: url(../imgs/insta-epingle-2.jpg);
}
#insta-recent-1 {
    background-image: url(../imgs/insta-recent-1.jpg);
}
#insta-recent-2 {
    background-image: url(../imgs/insta-recent-2.jpg);
}


/* <<< --- Header --- >>> */


header {
    position: absolute;
    top: calc(var(--hero-height) + 25px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: fit-content;
    height: 50px;
    padding: 5px;
    background-color: rgb(255, 255, 255, .8);
    backdrop-filter: blur(5px);
    border-radius: 25px;
    outline: 1px solid var(--white-2);
    outline-offset: -1px;
    box-shadow: 0 0 0 1px var(--white);
}

header.sticky {
    position: fixed;
    top: 25px;
}
header.reveal- {
    transform: translateX(-50%) translateY(30px);
}
header.reveal-visible {
    transform: translateX(-50%) !important;
}

header .btn {
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    color: var(--black);
    width: auto;
    height: 40px;
    padding: 0 20px;
    background: none;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
}

#body.home #btn-home, #body.pro #btn-pro, #body.perso #btn-perso {
    color: var(--white);
}

header .cursor {
    position: absolute;
    top: 5px;
    z-index: -1;
    height: 40px;
    border-radius: 20px;
    background-color: var(--black);
    transition: .2s ease;
}

#body.home header .cursor {
    left: 5px;
    width: 99px;
}
#body.pro header .cursor {
    left: 109px;
    width: 150px;
}
#body.perso header .cursor {
    left: 264px;
    width: 122px;
}

@media screen and (hover: hover) {
    #body.home #btn-home:hover ~ .cursor,
    #body.pro #btn-pro:hover ~ .cursor,
    #body.perso #btn-perso:hover ~ .cursor {
        opacity: .8;
    }
    header .btn:hover {
        background-color: rgb(240, 240, 240, .9);
    }
    #body.home header #btn-home:hover,
    #body.pro header #btn-pro:hover,
    #body.perso header #btn-perso:hover {
        background: none;
    }
}
@media screen and (max-width: 980px) {
    header {
        top: calc(var(--hero-height) + var(--pp-marge) + 25px);
    }
}
@media screen and (max-width: 500px) {
    header {
        gap: 0;
    }
    header .btn {
        font-size: 14px;
        line-height: 40px;
        height: 40px;
        padding: 0 20px;
    }
    #body.home header .cursor {
        width: 92px;
    }
    #body.pro header .cursor {
        left: 97px;
        width: 136px;
    }
    #body.perso header .cursor {
        left: 233px;
        width: 112px;
    }
}
@media screen and (max-width: 400px) {
    header {
        height: 46px;
    }
    header .btn {
        font-size: 12px;
        line-height: 36px;
        height: 36px;
        padding: 0 18px;
    }
    header .cursor {
        height: 36px;
    }
    #body.home header .cursor {
        width: 80.5px;
    }
    #body.pro header .cursor {
        left: 85.5px;
        width: 118px;
    }
    #body.perso header .cursor {
        left: 203.5px;
        width: 97.5px;
    }
}
@media screen and (max-width: 350px) {
    header {
        left: 175px;
    }
}


/* <<< --- Hero --- >>> */


:root {
    --hero-height: 400px;
    --pp-height: 150px;
    --pp-marge : calc(var(--pp-height) / 2);
    --top-header: 400px;
}

#hero {
    width: 100%;
    height: var(--hero-height);
    background-image: url(../imgs/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: var(--pp-marge);
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(0, 0, 0, .5), rgb(0, 0, 0, 0), rgb(0, 0, 0, .5));
}

#hero .container {
    overflow: visible;
}

#hero .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: 100%;
    overflow: visible;
}

.logo-title {
    display: flex;
    width: auto;
    height: 50px;
    user-select: none;
}

.logo-title a {
    width: auto;
    height: 100%;
}

.logo {
    width: fit-content;
    max-width: 100%;
    height: 100%;
    font-size: 60px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 0 50px rgb(0, 0, 0, .5);
    transition: .2s ease;
}

.logo-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white-2);
    cursor: default;
}

#hero-btn {
    position: absolute;
    bottom: 30px;
    right: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    text-align: right;
    text-transform: uppercase;
    color: var(--black);
    background-color: var(--white);
    backdrop-filter: blur(10px);
    outline: 1px solid rgb(255, 255, 255, .5);
    outline-offset: -1px;
    padding: 0 15px;
    border-radius: 6px;
    transition: .2s ease;
}

#pp {
    position: absolute;
    bottom: calc(var(--pp-marge) - var(--pp-marge) - var(--pp-marge));
    left: 0;
    z-index: 100;
    width: var(--pp-height);
    height: var(--pp-height);
    padding: 5px;
    border-radius: 50%;
    background-color: var(--white);
    pointer-events: all;
    user-select: none;
}

#pp img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--white);
    transition: .2s ease;
    pointer-events: none;
}

@media screen and (hover: hover) {
    .logo-title:hover .logo {
        transform: scale(0.95);
    }
    #hero-btn:hover {
        color: var(--white);
        background-color: rgb(255, 255, 255, .25);
    }
}

@media screen and (max-width: 1920px) {
    :root {
        --hero-height: 300px;
        --top-header: 300px;
    }
    .logo-title {
        height: 40px;
    }
    .logo {
        font-size: 48px;
        line-height: 40px;
    }
    .logo-subtitle {
        font-size: 16px;
        line-height: 20px;
    }
    #hero-btn {
        bottom: 20px;
    }
}
@media screen and (max-width: 980px) {
    :root {
        --hero-height: 350px;
        --top-header: 425px;
    }
    #hero .content {
        padding-bottom: calc(var(--pp-marge) / 2);
    }
    #pp {
        left: 50%;
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 760px) {
    :root {
        --hero-height: 300px;
        --pp-height: 120px;
        --top-header: 360px;
    }
    #hero .content {
        gap: 20px;
    }
    .logo-title {
        height: 30px !important;
    }
    .logo {
        font-size: 40px;
        line-height: 30px;
    }
    .logo-subtitle {
        font-size: 14px !important;
    }
}
@media screen and (max-width: 650px) {
    #pp {
        left: 0;
        transform: none;
    }
}
@media screen and (max-width: 500px) {
    .logo-title {
        height: 24px !important;
    }
}
@media screen and (max-width: 400px) {
    :root {
        --hero-height: 320px;
        --top-header: 380px;
    }
    .logo-title {
        height: fit-content !important;
        width: 270px !important;
    }
    .logo-subtitle {
        width: 220px !important;
    }
}


/* <<< --- Grid --- >>> */


.grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    height: auto;
}

.card, .photo {
    position: relative;
    display: flex;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 var(--white-1);
    outline: 0 solid var(--white-2);
    overflow: hidden;
    user-select: none;
    transition: .2s ease;
}

.photo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--white-1);
    outline: 1px solid var(--white-2);
    outline-offset: -1px;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(0, 0, 0, .5), rgb(0, 0, 0, 0), rgb(0, 0, 0, .6));
}

.card.-x2, .photo.-x2 {
    width: calc(50% - 15px);
    height: 400px;
    padding-top: 40px;
}
.card.-x3, .photo.-x3 {
    width: calc(calc(100% / 3) - 20px);
    height: 520px;
    padding-top: 30px;
}

.card .title {
    font-family: "Jost", sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 60px;
    color: var(--white);
    text-align: center;
    text-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    height: fit-content;
    padding: 0 20px;
    cursor: default;
}

@media screen and (hover: hover) {
    .card.-x2:hover {
        transform: scale(0.975);
    }
    .card.-x3:hover {
        transform: scale(0.9808);
    }
    .card:hover .btn-view-more {
        color: var(--white);
        background-color: rgb(255, 255, 255, .25);
    }
    .card:hover .btn-view-more img {
        filter: invert(1);
        transform: translateX(3px);
    }
}

@media screen and (max-width: 1200px) {
    .grid {
        gap: 20px;
    }
    .card.-x2, .photo.-x2 {
        width: calc(50% - 10px);
        height: 370px;
        padding-top: 30px;
    }
    .card.-x3, .photo.-x3 {
        width: calc(calc(100% / 3) - calc(40px / 3));
        height: 470px;
    }
}
@media screen and (max-width: 1100px) {
    .card.-x3, .photo.-x3 {
        width: calc(50% - 10px);
        height: 370px;
    }
    .card .title {
        font-size: 32px;
        line-height: 50px;
        padding: 0 30px;
    }
}
@media screen and (max-width: 980px) {
    .card.-x3.-last, .photo.-x3.-last {
        width: 100%;
        height: 420px;
    }
}
@media screen and (max-width: 760px) {
    .card, .photo {
        width: 100% !important;
        height: 420px !important;
    }
    .card.delay-1, .card.delay-2, .card.delay-3, .card.delay-4, .photo.delay-1, .photo.delay-2, .photo.delay-3, .photo.delay-4 {
        transition-delay: unset !important;
    }
}
@media screen and (max-width: 500px) {
    .card, .photo {
        height: 300px !important;
    }
}
@media screen and (max-width: 400px) {
    .card .title {
        font-size: 28px;
        padding: 0 20px;
    }
}


/* <<< --- Wrap --- >>> */


.wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    height: fit-content;
    padding: 20px;
    background-color: var(--black);
    border-radius: 20px;
    overflow: hidden;
}

.wrap-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    padding: 30px;
    width: calc(100% - 480px);
    height: 100%;
}

.wrap .title {
    font-size: 40px;
    font-weight: 600;
    line-height: 50px;
    color: var(--white);
    text-align: left;
    text-wrap: wrap;
    text-transform: uppercase;
    width: 100%;
    height: auto;
}

.wrap .subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--white-2);
    text-align: center;
    text-wrap: wrap;
    width: 100%;
    height: auto;
    cursor: default;
}

.wrap .description {
    font-size: 20px;
    font-weight: 300;
    line-height: 40px;
    color: var(--white-2);
    text-align: justify;
    text-align-last: left;
    text-wrap: wrap;
    width: 100%;
    height: auto;
    cursor: default;
}

.wrap .cover {
    position: relative;
    z-index: 10;
    width: 460px;
    height: 460px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    outline: 1px solid rgb(255, 255, 255, .5);
    outline-offset: -1px;
}

#livre .cover {
    background-position: top center;
}

.wrap .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0), rgb(0, 0, 0, .6));
}

@media screen and (max-width: 1300px) {
    .wrap .cover {
        height: 660px;
    }
}
@media screen and (max-width: 1100px) {
    .wrap .wrap-content {
        width: calc(65% - 20px);
    }
    .wrap .cover {
        width: 35%;
        height: 560px;
    }
}
@media screen and (max-width: 980px) {
    .wrap .wrap-content {
        width: 100%;
    }
    .wrap .cover {
        height: 520px;
        width: 100%;
    }
}
@media screen and (max-width: 760px) {
    .wrap .cover {
        height: 400px;
    }
    .wrap .wrap-content {
        padding: 10px;
    }
    .wrap .title {
        font-size: 32px;
        line-height: 40px;
    }
    .wrap .description {
        font-size: 18px;
        line-height: 30px;
    }
}
@media screen and (max-width: 500px) {
    .wrap .cover {
        height: 250px;
    }
    .wrap .wrap-content {
        padding: 0;
        gap: 20px;
    }
    .wrap .title {
        font-size: 28px;
    }
    .wrap .description {
        font-size: 16px;
        line-height: 25px;
    }
}
@media screen and (max-width: 400px) {
    .wrap .wrap-content {
        gap: 10px;
    }
    .wrap .title {
        font-size: 24px;
    }
}


/* <<< --- Social --- >>> */


#instagram .content {
    overflow: visible;
}

section.social .content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.social-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    width: calc(50% - 15px);
    height: fit-content;
    background-color: var(--white);
    outline: 1px solid var(--white-2);
    outline-offset: -1px;
    border-radius: 20px;
    padding: 20px;
}

.social-card .profil {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    height: 60px;
}

.social-card .logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--black);
    border-radius: 10px;
}

.social-card .logo-link img {
    width: auto;
    max-width: 30px;
    height: auto;
    max-height: 30px;
    filter: invert(1);
    transition: .2s ease;
}

.social-card .profil-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: calc(100% - 80px);
    height: 100%;
}

.social-card .username {
    font-size: 18px;
    font-weight: 600;
    line-height: 35px;
    text-align: left;
    text-wrap: nowrap;
    color: var(--black);
}
.social-card .name {
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    text-align: left;
    text-wrap: nowrap;
    color: var(--grey);
}

.social-card .tag {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-align: right;
    text-wrap: nowrap;
    color: var(--white);
    width: fit-content;
    height: fit-content;
    padding: 0 10px;
    background-color: var(--black);
    border-radius: 5px;
}

.social-card .gallery {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    height: auto;
}

.social-card .gallery .post {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(50% - 7.5px);
    height: auto;
    max-height: 410px;
    border-radius: 10px;
    overflow: hidden;
    transition: .2s ease;
}

.social-card .gallery .post img {
    width: 100%;
    height: auto;
}

@media screen and (hover: hover) {
    .social-card .logo-link:hover img {
        transform: scale(0.9);
    }
    .social-card .gallery .post:hover {
        transform: scale(0.97);
    }
}

@media screen and (max-width: 980px) {
    .social-card {
        width: 100%;
    }
    .social-card .gallery {
        gap: 20px;
    }
    .social-card .gallery .post {
        width: calc(50% - 10px);
    }
}
@media screen and (max-width: 500px) {
    .social-card {
        gap: 10px;
        padding: 10px;
    }
    .social-card .profil {
        gap: 15px;
    }
    .social-card .profil-title {
        width: calc(100% - 75px);
    }
    .social-card .tag {
        top: -25px;
        right: 15px;
    }
    .social-card .username {
        font-size: 16px;
        line-height: 25px;
    }
    .social-card .name {
        font-size: 14px;
    }
    .social-card .gallery {
        gap: 10px;
    }
    .social-card .gallery .post {
        width: calc(50% - 5px);
    }
}


/* <<< --- Contact --- >>> */


#contact {
    flex-direction: column;
    align-items: center;
    padding: 70px 50px;
    min-height: 400px;
}

#contact .title {
    text-align: center;
    max-width: 800px;
}
#contact .subtitle {
    max-width: 800px;
}

.contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.contact-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: fit-content;
    height: fit-content;
    background-color: var(--white-1);
    border-radius: 10px;
    transition: .2s ease;
}

.contact-link a {
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    text-align: left;
    color: var(--black);
    padding: 10px 30px;
    width: fit-content;
}

#tel-copy {
    margin: 0;
}

.contact-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: var(--black);
    transition: .2s ease;
    cursor: pointer;
}

.contact-btn::before {
    content: 'Ouvrir';
    position: absolute;
    top: -50px;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    width: fit-content;
    height: 35px;
    padding: 0 15px;
    background-color: var(--black-1);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 35px;
    text-align: center;
    text-transform: uppercase;
    text-wrap: nowrap;
    color: var(--white);
    opacity: 0;
    pointer-events: none;
}

.contact-btn::after {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%) rotate(45deg);
    width: 15px;
    height: 15px;
    background-color: var(--black-1);
    opacity: 0;
    pointer-events: none;
}

#mail-copy-btn::before, #tel-copy-btn::before {
    content: 'Copier';
}
#mail-copy-btn.copied::before, #tel-copy-btn.copied::before {
    content: 'Copié !';
}

.contact-btn img {
    width: auto;
    max-width: 15px;
    height: auto;
    max-height: 15px;
    transition: .2s ease;
    filter: invert(1);
}

@media screen and (hover: hover) {
    .contact-link:hover {
        background-color: var(--white);
    }
    .contact-btn:hover::before, .contact-btn:hover::after {
        opacity: 1;
    }
    .contact-btn:hover {
        background-color: var(--black-1);
    }
}

@media screen and (max-width: 650px) {
    #contact {
        padding: 50px 30px;
    }
}
@media screen and (max-width: 500px) {
    #contact {
        padding: 30px;
    }
    .contact {
        margin-top: 20px;
    }
    #contact .subtitle {
        font-size: 14px;
    }
    .contact-btn {
        display: none;
    }
}
@media screen and (max-width: 400px) {
    #contact .subtitle {
        font-size: 12px;
    }
    .contact-link a {
        font-size: 14px;
        padding: 5px 20px;
    }
}


/* <<< --- Footer --- >>> */


footer {
    width: 100%;
    height: fit-content;
    background-color: var(--black);
    overflow: hidden;
}

footer .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 80px 0 50px 0;
}

#footer-title {
    height: 40px;
}
#footer-subtitle {
    font-size: 16px;
    line-height: 20px;
}

footer .social-media {
    margin: 30px 0;
}

footer .infos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    height: auto;
}

footer .infos * {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
    color: var(--white-2);
    transition: .2s ease;
}

footer .infos a {
    color: var(--grey);
}

@media screen and (hover: hover) {
    footer .infos a:hover {
        color: var(--white);
    }
}

@media screen and (max-width: 500px) {
    footer .content {
        padding: 80px 0;
    }
}
@media screen and (max-width: 400px) {
    footer .infos {
        padding: 0 30px;
    }
}


/* <<< --- Reveal --- >>> */


.loading {
    display: none !important;
}

.reveal- {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-.scale {
    transform: scale(0.8);
}

.reveal-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: 1s cubic-bezier(0.5, 0, 0, 1) !important;
}

.reveal-visible.delay-1 {
    transition-delay: .1s !important;
}
.reveal-visible.delay-2 {
    transition-delay: .2s !important;
}
.reveal-visible.delay-3 {
    transition-delay: .3s !important;
}
.reveal-visible.delay-4 {
    transition-delay: .4s !important;
}

#services.reveal- {
    opacity: 1 !important;
    transform: none !important;
    transition: 1s cubic-bezier(0.5, 0, 0, 1) !important;
}