/* * -------------------------------------------------------------------------- */
/* * ANCHOR                           Base                                    */
/* * -------------------------------------------------------------------------- */
 
/* ? ---------------------------------- Fonts --------------------------------- */

@import url('https://fonts.cdnfonts.com/css/gotham');


/* ? -------------------------------- Variables ------------------------------- */

:root {

    /* Colors */
    --primary: #F4A261;
    --secondary: #5160e7;
    --secondary-dark: #2b347e;

    --blank: #ffffff00;
    
    --black: rgb(11, 14, 17);
    --darker: rgb(27, 29, 30);
    --dark: rgb(38, 50, 58);
    --grey: rgb(83, 84, 86);
    --grey-light: rgb(125, 126, 128);
    --pale: #FAFCFD;
    --white: rgb(253, 254, 255);
    --white-alpha: rgb(253, 254, 255, 0.8)

}



/* ? ---------------------------------- Setup ---------------------------------- */

/* ? Reset */
* {margin: 0; padding: 0; font-family: 'Gotham', Arial, Helvetica, sans-serif; color: var(--black);}

html {background: var(--white); scroll-behavior: smooth;}

body {padding-top: 92px;}

a {text-decoration: none;}

ul {padding-left: 5vw;}

br {display:block; margin: 1em}

strong {font-weight: 500;}

/* ? Titles */

h1 {font-weight: 700;
font-size: 3.4rem;}

h2 {font-weight: 700;
font-size: 2.4rem;}

h3 {font-weight: 700;
font-size: 1.8rem;}
    
h4 {font-weight: 600;
font-size: 1.5rem;}

/* ? Paragraphs */

p, li, ul { 
    font-family: 'Gotham';
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7em;
}

.p-small {font-size: 0.875rem;}
.p-italic {font-style: italic;}
.p-bold {font-weight: 700;}
.p-large {font-size: 1.125rem;}


/* ? --------------------------------- Rules -------------------------------- */

.flex-space-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.flex-wrap {flex-wrap: wrap;}

.margin-section {margin: 240px auto;}

.paragraph-link {text-decoration: underline;}

    /* Add an "new tab" icon after */
    .paragraph-link:after {
        
        /* Size & Position */
        display: inline-flex;
        height: 12px;
        width: 12px;
        margin-left: .4em;
        
        /* Style */
        content: "";
        background-color: var(--black);
        -webkit-mask-image: url(/images/icons/open-new-tab.svg);
        mask-image: url(/images/icons/open-new-tab.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
    }


/* ? ------------------------------- Animations ------------------------------- */

/* Hover underline animation - for links etc. */
.hover-underline-animation {
    display: inline-block;
    position: relative;
  }
  
  .hover-underline-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 4px;
    left: 0;
    background-color: var(--black);
    transform-origin: bottom right;
    transition: transform 0.25s cubic-bezier(0.4,0,0,0.9);
  }
  
  .hover-underline-animation:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }


/* * -------------------------------------------------------------------------- */
/* *                                  Elements                                  */
/* * -------------------------------------------------------------------------- */

/* ? --------------------------------- Boutons -------------------------------- */

/* ? Back-to-top button */

/* .back-to-top-btn img {
    position: fixed; 
    bottom: 2rem; 
    right: 2rem; 
    width: 3.5%;

    z-index: 6;} */

/* ? Classic button */

.btn {

    /* Auto layout */
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 1.2em 2em;

    /* Border */
    box-sizing: border-box;
    border-radius: 16px;
    border: 2px solid var(--black);
    
    /* Text */
    font-family: 'Gotham';
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
    text-align: center;

    /* Effect */
    transition: all 0.3s cubic-bezier(0,0,0,1);

    /* Others */
    cursor: pointer;
}

.btn:hover {
    background-color: var(--black);
    border: 2px solid var(--black);
    color: var(--white);

    /* transform: translateY(-4px) translateX(-4px);
    box-shadow: 4px 4px 0px 0px var(--black); */
}
    
    /* To style the icon when btn is hover */
    .btn path {transition: all 0.3s cubic-bezier(0,0,0,1);}
    .btn:hover path {fill: var(--white);}



/* ? Indicator scroll down possible */

.scroll-down-button {

    /* Position */
    position: fixed;
    bottom: 5vh;
    left: 50%;
    z-index: 2;
    padding-top: 64px;

    /* Text */
    letter-spacing: .1em;

    /* Animation */
    transition: opacity .3s;
  }
  /* On hover */
  .scroll-down-button:hover {opacity: .5;}

    .scroll-down-button span {

        /* Position */
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;

        /* Arrow style */
        border-left: 1px solid var(--black);
        border-bottom: 1px solid var(--black);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-sizing: border-box;
    }

/* * -------------------------------------------------------------------------- */
/* *                                   Layouts                                  */
/* * -------------------------------------------------------------------------- */

/* ? --------------------------------- Header --------------------------------- */

header {

    /* Position and size*/
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    padding: 1em 0;

    /* Auto-layout */
    display: flex;
    justify-content: space-around;
    align-items: center;

    /* Style */
    border-bottom: 2px solid var(--black);
    background-color: var(--white);
    transition: all 0.3s cubic-bezier(0,0,0,1);
}


    #menu-mobile {
        
        display: none; 
        position: fixed; 
        top: 24px; 
        left: 24px;
        z-index: 6;
        background-color: var(--white);
    }
    
    #header-menu-container {display: flex;}

        /* Logo */
        #header-logo {
            margin-right: 48px;
            background-color: var(--black);
            border-radius: 50%;
            width: 3.5rem;
            height: 3.5rem;}

    /* Links */
    #header-menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: fit-content;
        gap: 24px;
}

    /* Pages links */
    #header-menu a {

        /* Size & style */
        margin: 0 1vw;
        padding: 1.2em;
        border-radius: 16px;

        /* Text */
        font-family: 'Gotham';
        font-weight: 700;
        font-size: 1rem;

        /* Transition */
        transition: all 0.3s cubic-bezier(0,0,0,1);
    }
    
    /* Mise en forme des CTA du header */
    #header-container-cta {display: flex; gap: 24px; align-items: center;}

        /* "Mon CV" */
        #header-container-cta > a:first-child {border: solid 2px var(--white);}
            /* On hover */
            #header-container-cta > a:first-child:hover {border-color: var(--white); background-color: var(--white); color: var(--black);}


        /* "Me contacter" */
        #header-container-cta > a:last-child {background-color: var(--black); color: var(--white);}
            /* On Hover */
            #header-container-cta > a:last-child:hover {background-color: var(--white); color: var(--black);}
        
    

/* ? --------------------------- Section "Contact" -------------------------- */

.section-contact {

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Size */
    width: 65%;
    max-width: 1440px;
    height: fit-content;

    /* Texte */
    text-align: center;}

    .section-contact > h2 {margin-bottom: 64px;}

    .section-contact > .section-contact-smi-container {

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;}

        .section-contact a {
            
            /* Auto layout */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            
            /* Others */
            width: 25%;
            text-align: center;
            transition: all 0.3s ease;}

            .section-contact img {
                width: 48px; 
                height: 48px;
                margin: 0 0 12px 0;}

                /* Transition */
                .section-contact a:hover {transform: scale(1.1);}


/* ? ----------------------------- Section landing ---------------------------- */

.section-landing {

    /* Auto layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;

    /* Size */
    width: 65%;
    max-width: 1440px;
    height: fit-content;

    /* Position */
    margin: 120px auto 5vh auto;}

    .section-landing h1 {margin-bottom: 24px;}

    .section-landing img {width: 80%;max-width: 800px;}

    .section-landing p {max-width: 650px;}
    

/* ? --------------------------------- Footer --------------------------------- */

footer {

    /* Auto-layout */
    display: flex; 
    justify-content: center; 

    /* Position, size & Color */
    margin-top: 10vh;
    padding: 1.5rem;
    background-color: var(--white);
}

    .footer p {font-size: 0.8rem; font-weight: 600; color: var(--black);}
    
    


/* * -------------------------------------------------------------------------- */
/* *                                    Index                                   */
/* * -------------------------------------------------------------------------- */

/* ? ------------------------------ Section Hero ------------------------------ */

#section-hero {

    /* Auto-layout */
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;

    /* Remove Margin section */
    margin-top: 0;

    /* Size */
    width: 80%;
    max-width: 1440px;
    height: 80vh;
    max-height: 1300px;
}

    #section-hero-card {

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 32px;
        gap: 24px;

        /* Size */
        width: 80%;
        max-width: 680px;
        min-width: 420px;
        height: fit-content;
        margin-right: -20px;

        /* Border */
        border: 2px solid var(--black);
        box-sizing: border-box;
        border-radius: 32px;
        
        /* Position */
        z-index: 2;

        background: var(--white);}

        /* Align title and age to baseline */
        #section-hero-card > div {align-items: baseline; flex-wrap: wrap;}
                
        #section-hero > img {

            /* Size */
            width: 25vw;
            max-height: 1200px;
            min-width: 500px;            
        }


/* ? ------- Section "Découvrez" (dans l'index c'est les liens vers les pages) ------- */
                       
#section-decouvrez {

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Size */
    width: 65%;
    max-width: 1440px;
    height: fit-content;
}
    #section-decouvrez > h2 {margin-bottom: 64px;}

        #section-decouvrez .section-decouvrez-category {
            
            /* Auto layout */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            
            width: 25%;
            min-width: 200px;
            text-align: center;
        }
            
            #section-decouvrez * {margin: 12px 0;}
            
            #section-decouvrez svg {
                width: 128px; 
                height: 128px; 
            }



/* * -------------------------------------------------------------------------- */
/* *                                  Biography                                 */
/* * -------------------------------------------------------------------------- */

#section-biography-content {

    /* Auto-layout */
    display: flex;
    flex-direction: column;
    align-items: center;}

/* ? ---------------------------- Biography Element --------------------------- */

.biography-element {

    /* Auto layout */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Size */
    width: 65%;
    max-width: 1440px;
    
    /* Position */
    margin: 10vh auto;

    /* background-color: var(--primary);   */
}

    .biography-element > div {
        
        /* Size */
        width: 50%; 
        max-width: 700px;
        min-width: 440px;

        /* background-color: var(--secondary); */
    }

    .biography-element-text {margin-right: 120px;}

    .biography-element-text-reverse {margin-left: 120px;}
    
        .biography-element h3 {margin-bottom: 24px;}

        .biography-element img {

            /* Size */
            width: 100%;
            max-width: 480px;
            min-width: 320px;            
        }

/* * -------------------------------------------------------------------------- */
/* *                            Design & Photography                            */
/* * -------------------------------------------------------------------------- */

/* ? ---------------- Section project cards & photography gallery ------------------ */

#section-design-cards, #section-photography-gallery {

    /* Auto-layout */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    /* Size */
    width: 100%;
    max-width: 1440px;
    min-width: 720px;
    height: fit-content;
}

#section-photography-gallery {max-width: 80%;}


    /* Cards margin */
    #section-design-cards > * {margin: 32px;}


/* ? -------------------------- Project & photography card -------------------------- */

.design-project-card, .photography-card {

    /* Auto layout */
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;

    /* Size */
    width: 100%;
    max-width: 480px;
    min-width: 320px;

    /* Border */
    border: 2px solid var(--black);
    border-radius: 32px;
    box-sizing: border-box;

    /* Effect */
    transition: all 0.3s cubic-bezier(.26,.25,0,1);
}

    .design-project-card > img {

        /* Size */
        width: 100%;
        height: 240px;
        object-fit: contain;

        /* Border */
        border: 2px solid var(--black);
        border-radius: 28px;
        box-sizing: border-box;
    }
    
        .design-project-card {color: inherit;}
        .design-project-card-text > * {margin: 12px 0; color: inherit;}

        .design-project-card-text > div {align-items: flex-end;}

            /* Card effect on hover */
            .design-project-card:hover, .photography-card:hover {

                /* Move */
                transform: translateY(-4px) translateX(-4px);
                box-shadow: 4px 4px 0px 0px var(--black);
            }


    /* ------------------------------ Photographie ------------------------------ */

    .photography-card {
        padding: 0; 
        margin: 32px;
        overflow: hidden; /* c'est cette propriété qui permet de découper l'image */
        cursor: pointer;
    }
    .photography-card > img {box-sizing: border-box;}

    /* Overlay */
    .overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .overlay-img {
            max-width: 90%;
            max-height: 80vh;
            border-radius: 32px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }

    .close-btn {
        position: absolute;
        top: 30px; right: 30px;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }

    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 50px;
        color: white;
        cursor: pointer;
        user-select: none;
        padding: 10px;
    }

    .prev-btn { left: 20px; }
    .next-btn { right: 20px; }

    .nav-btn:hover, .close-btn:hover { opacity: 0.7; }



/* ? ----------------------------- Layout Section landing (PROJECT) ---------------------------- */

.section-landing-project > img {

    /* Size */
    width: 100%;
    max-height: 60vh;

    /* Position */
    object-fit: cover;
    /* object-position: 0 -15vh; */

    /* Other */
    overflow: hidden;
}



.section-landing-design-project-intro {

    /* Size & Margin */
    width: 85%;
    max-width: 960px;
    margin: 32px auto;

    /* Auto-layout */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
    /* Align items to baseline */
    .section-landing-design-project-intro div {align-items: baseline; flex-wrap: wrap;}

    /* Styling the CTA */
    .section-landing-design-project-intro > .btn {width: fit-content; margin-top: 24px;}


/* ? ----------------------------- Layout Section content (PROJECT) ---------------------------- */

.section-content-project {

    /* Auto-layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Spacing */
    gap: 80px;
    margin-top: 120px;
}

    /* Any element (=content sections) inside content */
    .section-content-project > * {

        /* Auto-layout */
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* Size */
        width: 65%;
        max-width: 960px;

    }
        /* Spacing elements into content sections (paragraphs from one to another and title)*/
        .project-element > * {margin: 24px 0;}

        .section-content-project > img {

            /* Size & Position */
            width: fit-content;
            max-height: 540px;
            object-fit: contain;

            /* Style */
            border-radius: 4px; 
        }


/* * -------------------------------------------------------------------------- */
/* *                                   Mon CV                                   */
/* * -------------------------------------------------------------------------- */


#page-mon-cv > main {

    /* Auto-layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    /* Size */
    height: 80vh;
}

/* Styling the embed */
#embed-mon-cv {

    /* Size */
    width: 80vw;
    max-width: 780px;
    height: 100%;
    max-height: 1100px;

    /* Margin */
    margin: 3vh 0;

    /* Style */
    border: 2px solid var(--black);
    border-radius: 4px;
}

#page-mon-cv > main > a {width: fit-content;}



/* * -------------------------------------------------------------------------- */
/* *                                 RESPONSIVE                                 */
/* * -------------------------------------------------------------------------- */

@media (max-width: 1080px) {

    /* ? --------------------------------- header --------------------------------- */
    
    header {
            flex-direction: column;
            height: 100%;
            display: none;
        }
    
        #header-logo {margin-right: 0;}

        #header-menu {justify-content: center; gap: 24px;}
        
        #header-menu-container {gap: 64px;}
        
        #header-container-cta, #header-menu {flex-direction: column;}
    
        #header-menu-container {flex-direction: column; align-items: center;}

        #menu-mobile {display: flex;}


    
    /* ?--------------------------------- Accueil -------------------------------- */


    #section-hero {
        flex-direction: column-reverse;
        height: auto;
    }

    #section-hero-card {
        min-width: 80px; 
        width: 100%;
        margin-right: 0;
        margin-top: -100px;
    }

    #section-hero > img {
        /* position: absolute;  */
        align-self: center; 
        width: 90vw; 
        max-width: 95vw;
        min-width: 60vw;
    }

    /* Blocs biographie et design */

    #section-decouvrez > div {
        flex-direction: column; 
        align-items: center;
        /* padding-top: 50vh; */
    }


    /* ?--------------------------------- Projets -------------------------------- */

    /* Images dans les pages de projets */

    .section-content-project>img {width: 80%;}



    /* ?---------------------------------- Biography --------------------------------- */

    .section-landing {flex-direction: column;}

    .biography-element {flex-direction: column;}

    .biography-element > div {

        /* Size */
        width: 100%;
        min-width: 80vw;
        max-width: 440px;

        margin: 0;}

    /* ?--------------------------------- Design --------------------------------- */
        
    #section-design-cards, #section-photography-gallery {min-width: auto;}

    .design-project-card, .photography-card {min-width: auto;}

        .design-project-card-text > div {flex-wrap: wrap;}

    .section-content-project > * {width: 85%;}

    .hide {display: flex;}

}