/* Définition des couleurs */
:root {
    --main-dark: black;
    --main-gray: #C5C5C5;
    --main-light: white;
    --accent-light: #FA6F0C;
    --accent-transparent-light: #fa6f0c54;
    --accent-transparent-dark: #5e30126e;
    --accent-dark: #6E3700;
    --secondary-light: #FDECA8;
    --secondary-dark: #b19a86;
}

/* Réinitialisation complète des styles par défaut */
* {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
    color: var(--main-light);
}

/* Configuration du body principal */
body {
    background-color: rgb(0, 0, 0);
    font-family: 'Montserrat';
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
    overflow-y: scroll;
}

/* Suppression du soulignement des liens */
a {
    text-decoration: none;
}

/* Désactivation du scroll quand les modales sont ouvertes */
body.no-scroll {
  overflow: hidden;
}

/* Structure responsive - Version téléphone ---------------------------------------------------------------------------------------------------------------- */

/* Configuration des sections comme conteneurs relatifs pour superposer background/overlay/contenu */
section { 
    position: relative;
overflow: hidden; 
  }

/* Effet vignette assombrissant les bords - pointer-events:none pour ne pas bloquer les clics */
.background-vignette {
    box-shadow: inset 0 0 5em 2.5em #000;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Images de fond en plein écran positionnées absolument */
.background {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    transform-origin: center;
}

/* Attribution des images spécifiques à chaque section */
.page {
    background: url("../img/elden_ring_background_phone.png") center center no-repeat;
    background-size: cover;
}
.competences {
    background: url("../img/forest_background.jpg") center center no-repeat;
    background-size: cover;
}
.projects {
    background-color: #000000;
}
.applications {
    background: url("../img/campfire_background.gif") center center no-repeat;
    background-size: cover;
}
.contacts {
    background: url("../img/forest_background_2.jpg") center center no-repeat;
    background-size: cover;
}

/* Conteneurs principaux pour le contenu de chaque section */
.wrapper-header,
.wrapper-competence {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.wrapper-projects,
.wrapper-applications,
.wrapper-contacts,
.wrapper-footer { 
    position: relative; 
    width: 100%; 
}
.wrapper-projects { text-align: center; }
.wrapper-footer { 
    text-align: center; 
    margin-top: 3vw;
}
.wrapper-applications {
    position: relative; 
    width: 100%;

}

/* Modale des informations détaillées des projets */
.wrapper-projects-info {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 1000;
    overflow-y: auto;
}

.wrapper-projects-info {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 12, 0.945);
    z-index: 1000;
    overflow-y: auto;
    max-width: 100vw;
    height: 100vh;
}


.grid-projet {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

    height: 100vh;
    padding: 3vw;
    gap: 1vw;
}

.img-1 {
    width: 100%;
    padding: 0 2vw;
    margin-top: 6vw;
}

.top-row {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw;
}

.top-row h1 {
    font-size: 10vw;
}

.top-row p {
    margin-bottom: 5vw;
}

.top-row button {
    font-size: 4.5vw;
    color: var(--accent-light);
    align-self: start;
    background: none;
}

.top-row button:hover {
    color: white;
}

.infos {
    grid-column-start: 1;
    grid-row-start: 2;
    font-size: 4vw;
}

.infos a {
    color: var(--accent-light);
    font-weight: 700;
    transition: color 0.5s;
}

.infos a:hover {
    color: white;
}

.tech {
    margin-top: 1vw;
    font-style: italic;
}

.role {
    margin-top: 1.5vw;
    margin-bottom: 0;
    font-weight: 700;
}

.role, .role-description {
    font-size: 3.5vw;
}

.creators {
    font-weight: 700;
    font-size: 5vw;
}

.project-content {
    padding: 0 2vw;
    margin-top: 5vw;
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column: span 2 / span 2;
    font-size: 3.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8vw;
}

.project-content p, .project-content img {
    margin-bottom: 8vw;
}

.project-content img {
    width: 100%;
}

.project-content button {
    margin-top: 4vw;
    padding-bottom: 4vw;
    font-size: 8vw;
    color: var(--accent-light);
    background: none;
}

.project-content button:hover {
    color: white;
}

/* Section 1 - En-tête et présentation principale ---------------------------------------------------------------------------------------------------------------- */

/* Logo principal avec opacité initialement à 0 pour l'animation d'apparition */
.logo-emeryk {
    width: 80vw;
    height: auto;
    margin-top: 10vw;
    opacity: 0;
    filter: drop-shadow(0 0 10px black);
}
/* Hiérarchie typographique de l'en-tête */
.title-header {
    font-weight: 700;
    font-size: 9vw;
    color: var(--main-gray);
    margin-top: -5vw;
}
.name {
    font-weight: 800;
    font-size: 9.5vw;
    margin-top: 15vw;
}
.occupation {
    font-weight: 700;
    font-size: 4.5vw;
    color: var(--accent-light);
    margin-top: 0.5vw;
}
/* Citation descriptive avec style italique */
.citation {
    font-weight: 300;
    font-size: 3.8vw;
    text-align: left;
    font-style: italic;
    padding: 0 8vw;
    margin-top: 20vw;
    margin-bottom: 20%;
}

/* Section 2 - Compétences et barres de progression ---------------------------------------------------------------------------------------------------------------- */

.title-competence {
    margin-top: 20vw;
    font-size: 7vw;
    padding: 0 8vw;
    margin-bottom: 20vw;
    color: var(--accent-light);
}
.description-competence {
    margin-bottom: 20%;
    padding: 0 8vw;
    font-size: 4vw;
}

/* Conteneur des compétences techniques avec arrière-plan coloré */
.wrapper-languages {
    background-color: var(--accent-transparent-light);
    padding: 3vw;
    border-radius: 4vw;
    margin-bottom: 20vw;
}
/* Structure des barres de progression */
.bar {
    background-color: var(--accent-dark);
    width: 75vw;
    border-radius: 50px;
    margin-bottom: 2vw;
    text-align: left;
    font-weight: 700;
}
.progression-name {
    padding: 2vw 0 2vw 3vw;
    font-size: 2vw;
}
/* Barre de progression elle-même, animée par GSAP */
.progression {
    background-color: var(--accent-light);
    border-radius: 50px;
}


/* Section 3 - Galerie de projets ---------------------------------------------------------------------------------------------------------------- */

.selection-projects {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vw;
    margin-bottom: 5vw;
}

/* Boutons de filtre avec effet hover */
button {
    background-color: var(--main-dark);
    color: var(--main-light);
    border: none;
    padding: 3vw;
    font-weight: 700;
    font-size: 6vw;
    z-index: 10; /* Placement au-dessus des vignettes */
    transition: background-color 0.5s, color 0.5s;
}
button:hover {
    color: var(--accent-light);
    cursor: pointer;
}

/* Style pour le bouton de filtre sélectionné */
button.selected {
    background-color: var(--main-light);
    color: var(--main-dark);
}
.list-projects { 
    padding: 10vw 0;
    display: grid;
    grid-template-rows: 1fr;
}
.project {
    margin-bottom: 10vw;
}

.project h1 {
    padding: 0 8vw;
}

.project img {
    width: 80%;
}
.project h1 {
    margin-bottom: 2vw;
    font-weight: 800;
    font-size: 8vw;
    color: var(--accent-light);
}

/* Section 4 - Logiciels et compétences techniques ---------------------------------------------------------------------------------------------------------------- */

.wrapper-logos { height: 80vw; }
.wrapper-applications h1 {
    padding-top: 30vw;
    color: var(--secondary-light);
    font-size: 10vw;
    text-align: center;

}

/* Effets visuels sur les logos avec hover et glow */
.logo { 
    filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0)) sepia(60%); 
    transition: filter 0.5s;
}
.logo:hover { 
    filter: drop-shadow(0 0 1rem rgb(172, 137, 74)) sepia(10%);
    cursor: pointer;
}

.wrapper-app-description {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 75%);
    width: 80%;
    height: 40%;
    top: 10vw;
    font-size: 4vw;
    color: black;
    background-color: rgba(0, 0, 0, 0.918);
    z-index: 1;
    padding: 3vw;
}

.wrapper-app-description button {
    font-size: 4vw;
    color: var(--accent-light);
    background: none;
    text-align: right;
    flex: 1;
    align-self: flex-end;
    justify-content: flex-end;
}

.wrapper-app-description button:hover {
    color: white;
}

.app-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;
}

.app-name {
    flex: 4;
    font-weight: 700;
    font-size: 6vw;
    align-self: center;
}

/* Animation fade pour la description des logiciels */
.fade-enter-active, .fade-leave-active { transition: opacity 0.4s ease;}
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-to, .fade-leave-from { opacity: 1; }

.fade-move { transition: transform 0.4s ease; }


/* Positionnement précis des logos de logiciels sur la page */
.godot { position: absolute; right: 3%;  bottom: 37%; }
.unity { position: absolute; right: 7%;  bottom: 20%; }
.roblox { position: absolute; right: 35%; bottom: 11%;  }
.unreal { position: absolute; right: 65%; bottom: 17%; }
.maya { position: absolute; left: 3%;  bottom: 35%; }
.wrapper-logos img { width: 18vw; }

/* Animation de feu pour l'ambiance visuelle */
.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(60% 45% at 50% 70%, rgba(255,220,120,.35), rgba(255,160,0,.22) 40%, rgba(255,0,0,0) 70%),
    radial-gradient(42% 32% at 50% 78%,  rgba(255,140,0,.26), transparent 60%),
    radial-gradient(34% 26% at 50% 86%,  rgba(255,80,0,.22),  transparent 60%);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: blur(14px) hue-rotate(var(--hue, 0deg)) saturate(1.1);
  opacity: 1;
  animation: camp-flicker 1.1s steps(9,end) infinite alternate;
}

/* Keyframes pour l'animation de scintillement du feu */
@keyframes camp-flicker {
  0%   { opacity:.40; transform: translateY(0) scale(1); }
  15%  { opacity:.56; transform: translateY(-.2vh) scale(1.02); }
  35%  { opacity:.46; transform: translateY(.1vh)  scale(.99); }
  60%  { opacity:.60; transform: translateY(-.35vh) scale(1.03); }
  80%  { opacity:.48; transform: translateY(.15vh) scale(.985); }
  100% { opacity:.42; transform: translateY(0) scale(1); }
}

/* Section 5 - Contact et réseaux sociaux ---------------------------------------------------------------------------------------------------------------- */

.contact-text {
    padding-top: 20vw;
    color: var(--secondary-dark);
    font-size: 10vw;
    text-align: center;
}

/* Grille responsive des cartes de contact */
.wrapper-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 2vw;
    text-align: center;
    margin: 5vw 0 ;
}

/* Style des cartes avec effet hover */
.card {
    background-color: var(--accent-transparent-dark);
    font-size: 2vw;
    padding: 3vw;
    transition: background-color 0.5s;
    height: 100%;
}

.card:hover {
    background-color: var(--accent-transparent-light);
    cursor: pointer;
}

.card img {
    width: 8vw;
}


.titre {
    margin-bottom: 2vw;
}


/* Fond semi-transparent derrière le tableau contact */
.wrapper-background {
    position: absolute;
    width: 80%;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    background-color: var(--accent-transparent-dark);
}
.quest-board {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    background: url("../img/quest_board.jpg") center center no-repeat;
    background-size: 100%;
    width: 70%;
    height: 70% ;
}

/* Effet d'ombre ou de glow avec le hover */
.paper { filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0)) sepia(0%); }
.paper:hover { filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0)) sepia(90%); cursor: pointer; }

/* Placement des papiers sur le board */
.email { position: absolute; width: 60%; top: 14%; left: 20%; transform: rotate(-2deg); }
.linkedin { position: absolute; width: 28%; top: 54%; left: 7%;  transform: rotate(2deg); }
.x { position: absolute; width: 28%; top: 47%; left: 38%; transform: rotate(-3deg); }
.instagram { position: absolute; width: 28%; top: 60%; left: 68%; transform: rotate(5deg); }

/* Section 6 - Footer et navigation ---------------------------------------------------------------------------------------------------------------- */
/* Animation de flottement pour le bouton "remonter" */
.remonter {
    margin-top: 6vw;
     animation: floatY 1s ease-in-out infinite alternate;
}
.remonter:hover {
  animation-play-state: paused;
}

/* Keyframes pour l'animation de flottement */
@keyframes floatY {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20px); } /* Distance ajustable */
}

.remonter h1 { 
    font-weight: 800; 
    margin-top: 3vw; 
    font-size: 6vw; }
.remonter img { width: 12vw; }
.rights { 
    margin-top: 15vw; 
    margin-bottom: 5vw; 
    font-size: 3vw;
}

/* Version Ordinateur - Optimisations responsive ---------------------------------------------------------------------------------------------------------------- */

/* Media query basée sur le ratio d'aspect : s'active pour les écrans plus larges que hauts */
@media screen and (min-aspect-ratio: 1/1) { 

    /* Effet vignette renforcé pour les grands écrans */
    .background-vignette {
        box-shadow: inset 0 0 10em 8em #000;
    }

    /* Background haute qualité pour ordinateur */
    .page {
        background: url("../img/elden_ring_background.jpg") center center no-repeat;
        background-size: cover;
    }

    /* Modification des hauteurs et de certain display en grid pour ordinateur */
    .wrapper-header {
        padding: 0 10vw;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(4, 4vw);
        text-align: left;
        align-content: center;
        height: 100vh;
    }
    .wrapper-competence {
        display: grid;
        grid-template-columns: 1fr 0.5fr;
        grid-template-rows: repeat(2, 1fr);
        height: 100vh;
    }
    .wrapper-projects { 
        height: auto; 
    }
    .wrapper-applications { 
        height: 50vh;
        padding-bottom: 50vw;
    }
    .wrapper-contacts { 
        height: auto;
    }

    .wrapper-projects-info {
        position: fixed;
        inset: 0;
        background: rgba(12, 12, 12, 0.945);
        z-index: 1000;
        overflow-y: auto;
        max-width: 100vw;
        height: 100vh;
    }


    .grid-projet {
        display: grid;
        overflow-x: hidden;
        grid-template-columns: 1.5fr 2fr;
        grid-template-rows: repeat(2, minmax(auto, 100%));
        height: 100vh;
        padding: 3vw;
        gap: 1vw;
        
    }

    .img-1 {
        width: 100%;
        grid-column-start: 1;
        grid-row-start: 1;
        margin-top: 0;
        padding: 0;
    }

    .top-row {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

    .top-row h1 {
        font-size: 3.5vw;
    }

    .top-row p {
        margin-bottom: 0.5vw;
    }

    .creators {
        font-weight: 700;
        font-size: 1.5vw;
    }

    .top-row button {
        font-size: 1.5vw;
        color: var(--accent-light);
        align-self: start;
        background: none;
    }

    .top-row button:hover {
        color: white;
    }

    .infos {
        grid-column-start: 1;
        grid-row-start: 2;
        font-size: 1.3vw;
    }

    .infos a {
        color: var(--accent-light);
        font-weight: 700;
    }

    .role, .role-description {
        font-size: 1vw;
    }

    .project-content {
        margin-top: 5vw;
        grid-column-start: 1;
        grid-row-start: 2;
        grid-column: span 2 / span 2;
        font-size: 1.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 8vw;
    }

    .project-content p, .project-content img {
        margin-bottom: 4vw;
    }

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

    .project-content button {
        margin-top: 4vw;
        padding-bottom: 8vw;
        font-size: 3vw;
        color: var(--accent-light);
        background: none;
    }

    .project-content button:hover {
        color: white;
    }


    /* Section 1 ---------------------------------------------------------------------------------------------------------------- */

    /* Changements de grosseur et de placement */
    .logo-emeryk {
        width: 35vw;
        height: auto;
        margin-top: 0;
        grid-row: span 4;   /* Prend les 4 rows de gauche */
        justify-self: end;
    }
    .title-header { 
        font-size: 2vw; 
        font-weight: 700; 
        margin: 0 0 0 -4vw; 
    }
    .name { 
        font-size: 4vw; 
        margin-top: 0.5vw; 
        grid-column-start: 2;
    }
    .occupation {
        font-size: 1.5vw;
        margin-top: -0.5vw;
        margin-bottom: 1vw;
        grid-column-start: 2;
        grid-row-start: 3;
    }
    .citation {
        font-size: 1vw;
        padding: 0;
        margin: 0 0 0  -3vw;
        grid-column-start: 2;
        grid-row-start: 4;
    }

    /* Section 2 ---------------------------------------------------------------------------------------------------------------- */

    /* Changements de grosseur et de placement */
    .title-competence {
        margin: 0;
        font-size: 2.8vw;
        padding: 0 5vw 2vw 6vw;
        text-align: left;
        color: var(--accent-light);
        align-self: end;
    }
    .description-competence {
        margin: 0;
        font-size: 1.3vw;
        grid-column-start: 1;
        grid-row-start: 2;
        padding: 0 5vw 0 6vw;
        text-align: left;
        align-self: start;
    }
    .wrapper-languages { 
        background-color: var(--accent-transparent-light);
        margin-right: 6vw; 
        border-radius: 0; 
        margin-bottom: 0;
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 1; 
        display: flex;
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        height: 100%;
    }
    .bar { 
        width: 32vw;
        border-radius: 50px; 
        margin-bottom: 2vw; 
        font-weight: 700;
    }
    .progression-name { 
        padding: 0.5vw 0 0.5vw 1.5vw;
        font-size: 1.5vw; 
    }

    /* Section 3 ---------------------------------------------------------------------------------------------------------------- */

    /* Changements de grosseur et de placement */
    .selection-projects {
        height: 5vw;
        margin-bottom: 0;

    }
    button { 
        padding: 1vw 3vw;
        font-size: 3vw;
    }
 
    /* effet perspective sur les projects */
    .project img {
        width: 100%;
        border-radius: 0;
    }
    .project h1 {
        font-weight: 700;
        font-size: 2vw;
        color: var(--accent-light);
        margin-bottom: 1vw;
    }
    .list-projects { 
        padding: 5vw 9vw 4vw 9vw;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .project { 
        margin-bottom: 3vw;
        margin-left: 2vw;
        margin-right: 2vw;
        padding: 0.7vw 0;
        background-color: var(--accent-transparent-dark);
        transition: background-color 0.5s;
    }

    .project:hover {
        background-color: var(--accent-transparent-light);
        cursor: pointer;
    }

    .list-projects h1 {
        padding: 0;
    }
    .project img {
        width: 35vw;
        height: 20vw;
        border-radius: 0;
        object-fit: cover;
    }

    /* Section 4 ---------------------------------------------------------------------------------------------------------------- */

    /* Changements de grosseur et de placement */
    .wrapper-logos { height: 100%; }
    .wrapper-applications h1 { 
        padding-top: 8vw; 
        color: var(--secondary-light);
        font-size: 6vw; text-align: center;

    }
    .godot { position: absolute; left: 50%; margin-left: 22vw; margin-top: 3vw;  top: 50%; transform: translate(-50%, -50%); }
    .unity { position: absolute; left: 50%; margin-left: 19vw; margin-top: 15vw; top: 50%; transform: translate(-50%, -50%); }
    .roblox { position: absolute; left: 50%; margin-left: 0; margin-top: 18vw; top: 50%; transform: translate(-50%, -50%); }
    .unreal { position: absolute; left: 50%; margin-left: -22vw;margin-top: 10vw; top: 50%; transform: translate(-50%, -50%); }
    .maya { position: absolute; left: 50%; margin-left: -22vw;margin-top: -4vw; top: 50%; transform: translate(-50%, -50%); }
    .wrapper-logos img { width: 8%; }

    .wrapper-app-description {
        transform: translate(-50%, 60%);
        padding: 1.2vw;
        width: 25%;
        height: 30%;
        top: 10vw;
        font-size: 1.2vw;
        background-color: rgba(0, 0, 0, 0.76);
    }

    .wrapper-app-description button {
        font-size: 1.2vw;
        color: var(--accent-light);
        background: none;
        padding: 0;
        width: 100%;
        text-align: right;
        margin-bottom: 1vw;
    }

    .wrapper-app-description button:hover {
        color: white;
    }

    .app-name {
        font-size: 1.7vw;
    }

    /* Section 5 ---------------------------------------------------------------------------------------------------------------- */

    /* Changements de grosseur et de placement */

    .contact-text { 
        padding-top: 8vw; 
        color: var(--secondary-dark); 
        font-size: 5vw; 
        text-align: center;
    }

    .wrapper-card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2vw;
        text-align: center;
        margin: 5vw 0 ;
    }

    .card {
        font-size: 1vw;
        padding: 1vw;
    }

    .card-linkedin {
        grid-row-start: 2;
        grid-column: span 1 / span 1;
    }
    .card-twitter {
        grid-row-start: 2;
        grid-column: span 1 / span 1;
    }
    .card-courriel {
        grid-column: span 3 / span 3;
    }
    .card-instagram {
        grid-row-start: 2;
        grid-column: span 1 / span 1;
    }

    .card img {
        width: 4vw;
    }

    .email { position: absolute; width: 35%; left: 50%; margin-left: -11vw; margin-top: -12vw; top: 50%; transform: translate(-50%, -50%); transform: rotate(-2deg); }
    .linkedin { position: absolute; width: 17%; left: 50%; margin-left: -3vw; margin-top: 1vw; top: 50%; transform: translate(-50%, -50%); transform: rotate(-2deg); }
    .x { position: absolute; width: 17%; left: 50%; margin-left: -13vw; margin-top: 1vw; top: 50%; transform: translate(-50%, -50%); transform: rotate(-3deg); }
    .instagram { position: absolute; width: 17%; left: 50%; margin-left: 6vw; margin-top: -3vw; top: 50%; transform: translate(-50%, -50%); transform: rotate(5deg); }

    /* Section 6 ---------------------------------------------------------------------------------------------------------------- */

    /* Changements de grosseur et de placement */
    .remonter h1 { 
        font-weight: 800; 
        margin-top: 0.3vw; 
        font-size: 1.5vw; 
    }
    .remonter img { width: 3vw; }
    .rights { 
        margin-top: 5vw; 
        margin-bottom: 1vw; 
        font-size: 0.6vw; 
    }
}