/*
    GLOBAL CSS STYLE SHEET
    ----------------------

    FRAPPA STUDIO 2024 © FRANCE - Tous droits réservés
    Ce fichier CSS et son contenu sont protégés par le droit d'auteur.
    Toute reproduction, distribution ou modification non autorisée est interdite
    et pourra faire l'objet de poursuites conformément au Code de la propriété intellectuelle.
    
    Auteur : Julien Frappa EI
    Créé pour le site officiel de Frappa Studio.

    Last Edition: 25 NOV 2024
*/







/*************************************/
/*                                   */
/*     VALEURS GLOBALES DE PAGE      */
/*                                   */
/*************************************/

/* Reset général */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'JetBrains Mono', sans-serif;
    color: #fff;
    background-color: #343541;
    overflow-x: hidden;
    /*scroll-behavior: smooth;*/
    /*padding-top: 120px;*/
}

.wrapper {
    max-width: 1200px; /* Largeur maximale pour toute la grille */
    width: 100%; /* Garde 20px de marge de chaque côté */
    margin: 0 auto; /* Centre le conteneur sur la page */
    padding: 30px 30px; /* Ajoute une marge intérieure pour éviter que le contenu touche les bords */
}

/* Top and Bottom Borders */
/* Same color than page background */
/* Simulates transparency border */
/* together with lateral global margin */
.fixed-banner {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0px;
    height: 31px;
    background-color: #343541;
    z-index: 1000;
}

.fixed-banner-low {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 31px;
    background-color: #343541;
    z-index: 1000; 
}

/* Ancre La plus en haut de la page */
#top {
    display: block;
    height: 1px; /* ou une hauteur plus grande pour vérifier */
}









/*************************************/
/*                                   */
/*              HEADER               */
/*                                   */
/*************************************/

/* Le Header Ne comprend que le logo + le nom du logo */
/* Le menu est dans le contenu, seul le logo + nom reste fixe */
header {
    position: relative;
    width: 100%;
    background-color: transparent;
    z-index: 1100;
}

/* Bloc global principal du logotype */
#logo-global-container {
    position: fixed;
    top: 10px;
    left: 19px;
    display: flex;
    align-items: center;
    background: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Masque sombre avec marge autour de la grille de pixels du logotype */
#logo-dark-background-square {
    /*background-color: rgba(0, 0, 0, 0.8);*/
    background-color: #343541;
    padding: calc(1px + 44px / 5 + 44px / 43);
}


/* Conteneur pour la grille dynamique du logo */
/* Le logo est une grille scriptée qui peut afficher */
/* ce que l'on veut */
#logo-grid-container {
    display: grid;
    width: 44px;
    height: 44px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: calc(10 / 43 * 100% / 5);
}

/* Texte du logo */
.logo-text {
    margin-left: 4px;
    font-size: 0.95em;
    color: #fff;
    line-height: 1.4;
    max-width: 150px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Effet de disparition du texte lors du scroll */
body.scrolled #logo-text {
    opacity: 0; /* Rendre le texte invisible */
    transform: translateY(-20px); /* Déplace légèrement vers le haut */
    pointer-events: none; /* Désactive les interactions */
}

/* Le logo reste intact */
#logo-global-container a {
    display: flex;
    align-items: center;
}

/* Fallback pour les navigateurs sans script */
noscript #logo-text {
    opacity: 1; /* Toujours visible */
    transform: none;
}

/* Texte du logo */
.intro-text-hello {
    margin-left: 4px;
    font-size: 1.25em; /* Taille du texte */
    color: #fff; /* Couleur blanche */
    line-height: 1.2; /* Hauteur de ligne */
    letter-spacing: 0.05em; /* Espacement légèrement réduit pour une police à empattement */
    max-width: 80%;
    font-family: 'Cormorant Garamond', serif; /* Remplacement par Cormorant Garamond */
    font-weight: 200; /* Poids léger pour un rendu élégant */
    padding: 10px 0; /* Assure que le contenu n'est pas collé aux filets */
    box-sizing: border-box; /* Inclut les bordures dans la largeur totale */
    max-height:100%;
}


    /* Style pour les liens par défaut */
    .intro-text-hello a {
        font-family: 'JetBrains Mono', sans-serif;
        font-size: 0.72em;
        letter-spacing:0.05em;
        color: lightgray; /* Gris clair */
        text-decoration: none; /* Supprime le soulignement si souhaité */
        transition: color 0.3s ease; /* Ajoute une transition douce */
    }

        /* Style pour les liens au survol */
        .intro-text-hello a:hover {
            color: darkgray; /* Gris foncé */
        }


/* -----------=============== Javascript Disabled ===============---------- */

/* NO SCRIPT VERSION OF DYNAMIC SCRIPTED LOGO */
.logoNoScriptReplacer {
    position: absolute; /* Superposé au conteneur parent */
    top: 11px; /* Alignement au bord supérieur */
    left: 2px; /* Alignement au bord gauche */
    display: grid; /* Utilise un grid layout comme #logo-grid-container */
    width: 60px; /* Prend toute la largeur disponible dans le conteneur */
    height: auto; /* Prend toute la hauteur disponible dans le conteneur */
    justify-items: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
    background-color: transparent; 
}

    .logoNoScriptReplacer img {
        display: block; /* Supprime les espaces blancs sous l'image */
        max-width: 100%; /* Adapte l'image au conteneur */
        max-height: 100%; /* Empêche l'image de dépasser le conteneur */
    }














/*************************************/
/*                                   */
/*         MAIN CONTENT GRID         */
/*                                   */
/*************************************/

/* Espace laissé pour le header quand la page est en haut */
.grid-container {
    margin-top: 80px;
}

    .grid-container.project {
        max-width: 1200px;
        margin: 40px auto;
    }

/* Grille de vignettes de projets */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 0 auto;
    padding-top:30px;
    max-width: 1200px;
    align-items: start;
    justify-items: start;
}

    .grid.project {
        margin: auto auto;
        gap: 30px;
    }

    .grid.projectDouble {
        margin: auto auto;
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        gap: 30px;
    }

/* Vignette de projet */
.thumbnail {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}
    .thumbnail img {
        width: 100%;
        height: auto;
        transition: transform 0.5s ease;
    }

    .thumbnail:hover {
        transform: scale(1.0);
    }

        .thumbnail:hover img {
            transform: scale(1.07);
        }








/***************************/
/*                         */
/*     PAGE D'ACCUEIL      */
/*                         */
/***************************/

/* Informations des projets sous les vignettes */
.projectInfo {
    transition: opacity 0.5s ease, max-height 0.5s ease;
    max-height: 300px;
    opacity: 1;
    overflow: hidden;
}

    .projectInfo span {
        color: #fff;
        padding: 3px 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        font-size: 11px;
        transition: background 0.3s;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 5px;
    }

        .projectInfo span:hover,
        .projectInfo span:focus {
            background: rgba(255, 255, 255, 0.3);
        }

/* Mise en forme Titres des projets */
/* Dans le bloc texte Project Info */
/* sous les vignettes que l'on peut afficher / masquer */
.projectTitle {
    font-size: 1.2em;
    max-width: 14em;
    line-height: 1.1em;
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Mise en forme Nom client des projets */
/* Dans le bloc texte Project Info */
/* sous les vignettes que l'on peut afficher / masquer */
.projectClientName {
    font-size: 0.8em;
    padding-top: 10px;
    letter-spacing: 0.2em;
    opacity: 60%;
}

/* -----------=============== TAG MENU + BUTTONS ===============---------- */

/* Container des boutons du menu tags / options */
.tags-menu-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    padding: 0 0px;
    position: absolute;
    top: 30px;
    right: 30px;
}

/* Aspect du menu des tags classique */
nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    z-index: 1200;
    align-items: center;
}

    nav ul li {
        display: flex;
        align-items: center;
    }

        nav ul li a {
            text-decoration: none;
            color: #fff;
            padding: 4px 6px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
            font-size: 11px;
            line-height: 1;
            transition: background 0.3s;
        }

            nav ul li a:hover,
            nav ul li a:focus {
                background: rgba(255, 255, 255, 0.3);
            }

/* Container du menu tags en style négatif et transparent */
.tags-menu-container-negative {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0px;
}

/* Menu des tags en version négative et non interactif */
nav ul.negative {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    z-index: 1200;
    align-items: center;
}

    nav ul.negative li {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6); /* Couleur inversée et transparente */
        padding: 4px 6px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.2); /* Fond noir léger */
        font-size: 11px;
        line-height: 1;
        opacity: 0.6; /* Transparence à 60% */
        pointer-events: none; /* Rendre l'élément non interactif */
    }

/* Aspect spécifique du bouton Info dans le menu tags */
#toggleInfo {
    width: auto;
    height: auto;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(15, 15, 15, 0.9);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

    #toggleInfo:hover {
        background: rgba(255, 255, 255, 0.3);
    }

/* Checkbox caché */
#infoCheckbox {
    display: none;
}

    /* Checkbox visible */
    #infoCheckbox:checked + #infoContent {
        display: block;
    }

/* Cibles spécifiques pour affichage des tags */
#tous:target,
#prime:target,
#publicité:target,
#branding:target,
#design:target,
#IA:target,
#logo:target,
#tech:target,
#print:target,
#film:target,
#social:target,
#experience:target,
#art:target {
    display: block;
}

/* Afficher / Masquer les informations des projets sous les vignettes */
#infoCheckbox:checked ~ .wrapper .grid-container .grid .thumbnail .projectInfo {
    opacity: 0;
    max-height: 0;
}

/* Afficher / Masquer les informations des projets sous les vignettes */
#infoCheckbox: ~ .wrapper .grid-container .grid .thumbnail .projectInfo {
    opacity: 0;
    max-height: 70%;
}

/* -----------=============== Filtre par Tag Sans Script - CSS Pur ===============---------- */

/* Filtre par tags utilisant les ancres */
/* Reduit à zéro pour éviter tout décalage */
/* des sections masquées */
.filter {
    height: 0; /* Hauteur nulle */
    overflow: hidden; /* Aucun contenu ne sera visible */
    position: absolute;
    top: 0; /* Ou toute autre valeur pertinente */
    visibility: hidden; /* Garder caché visuellement */
}

/* Animation des vignettes lors du filtrage par tag */
#tous:target ~ .grid-container .grid .thumbnail,
#prime:target ~ .grid-container .grid .thumbnail,
#publicité:target ~ .grid-container .grid .thumbnail,
#branding:target ~ .grid-container .grid .thumbnail,
#design:target ~ .grid-container .grid .thumbnail,
#IA:target ~ .grid-container .grid .thumbnail,
#logo:target ~ .grid-container .grid .thumbnail,
#tech:target ~ .grid-container .grid .thumbnail,
#print:target ~ .grid-container .grid .thumbnail,
#film:target ~ .grid-container .grid .thumbnail,
#social:target ~ .grid-container .grid .thumbnail,
#experience:target ~ .grid-container .grid .thumbnail,
#art:target ~ .grid-container .grid .thumbnail {
    opacity: 0.3;
    filter: grayscale(90%);
    animation: slideRight 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
}

#tous:target ~ .grid-container .grid .thumbnail,
#prime:target ~ .grid-container .grid .thumbnail.prime,
#publicité:target ~ .grid-container .grid .thumbnail.publicité,
#branding:target ~ .grid-container .grid .thumbnail.branding,
#design:target ~ .grid-container .grid .thumbnail.design,
#IA:target ~ .grid-container .grid .thumbnail.AI,
#logo:target ~ .grid-container .grid .thumbnail.logo,
#tech:target ~ .grid-container .grid .thumbnail.tech,
#print:target ~ .grid-container .grid .thumbnail.print,
#film:target ~ .grid-container .grid .thumbnail.film,
#social:target ~ .grid-container .grid .thumbnail.social,
#experience:target ~ .grid-container .grid .thumbnail.experience,
#art:target ~ .grid-container .grid .thumbnail.art {
    opacity: 1;
    filter: grayscale(0%);
    animation: slideLeft 0.5s ease-in-out;
    order: -1;
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
}

@keyframes slideRight {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}

@keyframes slideLeft {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }
}









/***************************/
/*                         */
/*       PAGE PROJET       */
/*                         */
/***************************/


.project-header {
    margin: 0px auto 40px auto;
    max-width: 100%;
    width: 100%;
}

/* -----------=============== Main Projet Header Image Banner ===============---------- */

.projectMainImageBanner {
    position: relative; /* Change à 'absolute' si nécessaire */
    top: 0 !important;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    /*height: 150px;*/
    height: 60px;
    margin-bottom: 20px;
    display: block;
    font-size: 0;
}

    .projectMainImageBanner img {
        margin-top: -5vw !important;
        width: 100%;
    }

/* -----------================== Main Projet Header Texts ===================---------- */

/* Wrapper pour projectDetails et projectDescription */
.projectHeaderTexts-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: flex-start; /* Assure l'alignement initial à gauche */
    align-items: flex-start; /* Alignement vertical */
    margin-top: -10px;
    max-width: 1200px;
}

.projectHeaderTitle {
    font-size: 2.05em;
    line-height: 1.13em;
    letter-spacing:0.02em;
    text-align: left;
    max-width: 14em;
    margin-right: 25px;
}

.projectHeaderConceptText {
    padding-top: 4px;
    margin-top: 20px;
    margin-right: 2em;
    position: relative;
    opacity: 100%;
    letter-spacing: 0.04em;
    line-height: 1.4em;
    font-weight: 100;
    font-size: 0.4em;
    max-width: 165em !important;
}


.projectDetails {
    flex-direction: column;
    margin-left: auto; /* Pousse l'élément à droite */
    align-self: flex-start;
    height: fit-content;
    max-width: 35em;
    opacity: 80%;
    font-size: 0.85em;
    font-weight: 100;
    line-height: 1.4em;
    letter-spacing: 0.03em;
    opacity: 75%;
    align-content: flex-end;
    justify-content: flex-end;
    right: 0;
}

    .projectDetails.bloc {
        border: 1px solid silver;
        background-color: rgb(0,0,0,0.2);
        padding: 10px;
        margin-top:10px;
    }

    .projectDetails.blocAwards {
        border: 1px solid silver;
        background-color: rgb(0,0,0,0.2);
        padding: 10px;
        margin-top: 10px;
        line-height: 1.6em;
        opacity: 100%;
        font-size: 0.87em;
        font-weight: 300;
        max-width: 34.2em;
    }

.projectDetailsVerticalSpace {
    height: 10px;
}

.projectHeaderArrow {
    height:0%;
    opacity:0%;
    margin-top:-50px;
}


/* -----------================== FULL WIDTH MANAGEMENT ===================---------- */

.projectFullWidth {
    background-color: transparent;
    margin: 0 auto;
    width: 100%;
    pointer-events: auto;
    padding-top: 30px;
    max-width: 900px;
}

.js-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.projectFullWidth .js-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

.projectFullWidth iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* -----------=============== Vignettes de grille spécial TEXTE ===============---------- */

/* VIGNETTE DE GRILLE SPECIALE*/
.thumbnail.text-wrapper {
    border-top: 1px solid silver; /* Liseré blanc en haut */
    border-bottom: 1px solid silver; /* Liseré blanc en bas */
    padding: 0px 0; /* Espacement en haut et en bas pour le liseré */
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    text-align: left; /* Ferrer le texte à gauche */
    height: 100%; /* Occuper toute la hauteur disponible */
}
    /* Grid Bloc: Project Details */
    .thumbnail.text-wrapper.noBorder {
        border-top: 0px solid silver; /* Liseré blanc en haut */
        border-bottom: 0px solid silver;
    }

/* Grid Bloc: Grid Text Quote */
.gridTextQuote {
    border-top: none; /* Liseré blanc en haut */
    border-bottom: none; /* Liseré blanc en bas */
    width: 100%; /* Occuper toute la largeur possible jusqu'à 70% */
    text-align: center; /* Ferrer le texte à gauche */
    padding-left: 9%;
    padding-right: 9%;
    padding-bottom: 20px;
    padding-top: 20px;
    font-size:1.1em;
    max-width: 30em;
}
/* Grid Bloc: Grid Text Quote */
.gridTextQuote a {
    color: white;
}

/* -----------=============== Pop Up Open Image Functionality ===============---------- */

/* Styles de la popup quand on clique sur une image */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 53, 65, 0.92); /* avec une opacité de 80% */
    justify-content: center;
    align-items: center;
    z-index: 5000;
    top: 0;
    left: 0;
    position: fixed;
    margin: 0;
    padding: 0;
}

    .popup:target {
        display: flex;
    }
        /* Cible tout élément popup ouvert */
        .popup:target ~ #logo-global-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('/image/ui/FS_logo_cross.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            pointer-events: none; /* Permet de ne pas bloquer les clics */
        }

    .popup .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 2000; /* Doit être inférieur au contenu */
    }

    .popup img {
        position: relative; /* Assure qu'il peut être une référence pour les pseudo-éléments */
    }

        .popup img::after {
            content: '-> avant';
            position: absolute;
            top: 5px;
            left: 5px;
            color: #f0f0f0;
            font-size: 2em;
            background: rgba(0, 0, 0, 0.7);
            padding: 5px 10px;
            z-index: 5000;
        }

    .popup span {
        position: absolute;
        top: 5px;
        left: 5px;
        color: #f0f0f0;
        font-size: 1.5em;
        background: rgba(0, 0, 0, 0.7);
        padding: 5px 10px;
        z-index: 5000; /* Assure qu'il est bien au-dessus de l'image */
    }

/* Masque (overlay) pour cliquer en dehors de l'image et fermer */
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 5000; /* Assure qu'elle ne masque pas les éléments de z-index supérieur */
    pointer-events: auto;
}

/* Bouton de fermeture */
.popup .close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 2em;
    text-decoration: none;
    z-index: 4000;
}

/* Image dans la popup */
.popup img {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: block;
}








/*************************************/
/*                                   */
/*            MEDIA QUERIES          */
/*                                   */
/*************************************/

/* Passer le menu tags / info sur plusieurs lignes plus tot */
@media (max-width: 768px) {

    .logo-text {
        max-width: 90px;
    }

    .tags-menu-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end; /* Assure l'alignement à droite */
        max-width: 50%; /* Limite la largeur du conteneur à 60% de la largeur de la fenêtre */
        margin-left: auto; /* Garde le conteneur aligné à droite */
    }

    nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px; /* Espacement entre les boutons */
        justify-content: flex-end; /* Assure que les boutons restent alignés à droite */
        margin: 0; /* Supprime les marges indésirables */
        padding: 0; /* Supprime les marges intérieures indésirables */
    }

    .projectMainImageBanner {
        height: 90px !important;
        margin-bottom: 10px;
    }

        .projectMainImageBanner img {
            width: 150vw !important;
            margin-left: -40vw !important;
            margin-top: 25vw ;
        }

    /* Styles de la popup quand on clique sur une image */
    .popup {
        display: none;
        position: fixed;
        left:-5%;
        width: 110%;
        height: 110%;
        background: rgba(52, 53, 65, 0.92); /* avec une opacité de 80% */
        justify-content: center;
        align-items: center;
        z-index: 5000;
        overflow: visible;
    }

    .projectHeaderArrow {
        font-size: 2.05em;
        opacity: 100%;
        text-align: center;
        margin-top: 5px;
        margin-bottom: -40px;
        height: auto;
        opacity: 100%;
    }


}

/* Passer le menu tags / info sur plusieurs lignes plus tot */
@media (min-width: 1200px) {

    .projectHeaderTitle {
        max-width: 19em !important;
    }

}

/* Header Is Not Enough wide To have columns */
@media (max-width: 910px) {
    .projectHeaderTitle {
        font-size: 1.75em;
        line-height: 1.13em;
        letter-spacing: 0.02em;
        max-width: 20em;
        margin-right: 0px;
        margin-top:-20px;
    }

    .projectHeaderConceptText {
        font-size: 0.46em;
        letter-spacing: 0.04em;
        line-height: 1.4em;
        font-weight: 100;
        max-width: 50em;
    }

    .projectDetails {
        margin-top:20px;
        margin-left: 0;
    } 
}


@media (max-width: 768px) {
    .grid.projectDouble {
        grid-template-columns: 1fr;
    }
}