/* ======================== */
/*   STYLE GLOBAL           */
/* ======================== */

body {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    max-height: 100vh; /* Définit la hauteur maximale à 100% de la hauteur de l'écran */
    padding: 0; /* Supprime tout les padding autour du body */
    margin: 0; /* Supprime toutes les marges par défaut */
    overflow: hidden; /* Désactive le défilement vertical ou horizontal pour le body */
}

body::-webkit-scrollbar {
    display: none; /* Cache la barre sur Chrome, Edge et Safari */
}

/* ======================== */

@media screen and (max-width: 550px) {
    html, body {
        overflow: hidden; /* Cache tout ce qui dépasse de la fenêtre d'affichage */
    }
}


/* ======================== */
/*   HEADER                 */
/* ======================== */

header {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    font-family: "Capriola", sans-serif; /* Typographie Capriola utilisée et remplacée par défault */
    font-style: normal; /* Style de la typographie Capriola */
    font-size: 0.9em; /* Taille de la typographie */
    color: black; /* Couleur de la typographie */
    min-height: 3%; /* Hauteur minimale du header = 3% de la hauteur de la fenêtre */
    padding: 1% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    width: 100%; /* Le header prend toute la largeur de l'écran */
    position: fixed; /* Fixe le header en haut de la page */
    overflow: hidden; /* Empêche tout débordement du contenu à l'intérieur du header */
    z-index: 100; /* Indique l'ordre des priorités pour la superposition */
}

/* ======================== */

@media screen and (max-width: 768px) {
    header {
        background-color: white; /* Ajout d'un background blanc */
        font-size: 0.8em; /* Changement de la taille de la typographie du header */
        min-height: 5%; /* Hauteur minimale du header = 4% de la hauteur de la fenêtre */
        padding: 3% 3%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }
}

@media screen and (max-width: 550px) {
    header {
        font-size: 0.7em; /* Changement de la taille de la typographie du header */
        padding: 4% 4%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }

    .Graphiste {
        display: none !important; /* Disparition de la catégorie "Graphiste" */
    }
}


/* ======================== */
/*   MENU                   */
/* ======================== */

.menu {
    display: flex; /* Passe le menu en mode flex */
    justify-content: space-between; /* Espace les éléments du menu au maximum */
}

.Projets {
    color: #7A7A7A; /* Couleur de base */
}

.boutonExpérimental {
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Couleur de base */
}  

.boutonExpérimental:hover {
    color: #7A7A7A; /* Couleur en Hover */
}

.boutonInfos {
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Couleur de base */
}

.boutonInfos:hover {
    color: #7A7A7A; /* Couleur en Hover */
}


/* ======================== */
/*   CONTENEUR GLOBAL       */
/* ======================== */

.container {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    font-family: "Inter", sans-serif; /* Typographie CInter utilisée et remplacée par défault */
    font-style: normal; /* Style de la typographie Capriola */
    font-size: 2em; /* Taille de la typographie */
    color: black; /* Couleur de la typographie */
    min-height: 85%; /* Hauteur minimale du header = 3% de la hauteur de la fenêtre */
    padding: 3% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    width: 100%; /* Le header prend toute la largeur de l'écran */
    z-index: 50; /* Indique l'ordre des priorités pour la superposition */
    display: flex; /* Passe le container en mode flex */
    flex-direction: column; /* Affiche les images en colonne */
    align-items: center; /* Centre le contenu dans mon container */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    .container {
        font-size: 24px;
        padding: 0.5vh 0.5vh;
        min-height: 85%;
    }
}

@media screen and (max-width: 550px) {
    .container {
        min-height: 6%;
        padding: 12% 0%;
        font-size: 20px;
    }
}

/* ======================== */

.container div:nth-child(1) {
    width: 30%;
    margin-left: 37%;
    margin-right: 23%;
  }
  
  .container div:nth-child(2) {
    width: 30%;
    margin-left: 45%;
    margin-right: 25%;
  }

  .container div:nth-child(3) {
    width: 50%;
    margin-left: 34%;
    margin-right: 16%;
  }

  .container div:nth-child(4) {
    width: 50%;
    margin-left: 45%;
    margin-right: 5%;
  }

  .container div:nth-child(5) {
    width: 35%;
    margin-left: 41%;
    margin-right: 24%;
  }

  .container div:nth-child(6) {
    width: 35%;
    margin-left: 45%;
    margin-right: 20%;
  }

  .container div:nth-child(7) {
    width: 30%;
    margin-left: 41%;
    margin-right: 24%;
  }

  .container div:nth-child(8) {
    width: 40%;
    margin-left: 40%;
    margin-right: 20%;
  }

/* ======================== */

@media screen and (max-width: 768px) { /* Pour écrans de moins de 800px de large */
    .container div:nth-child(1) { 
        width: 30%;
        text-align: center;
        margin-left: 33%;
        margin-right: 37%;
    }
    .container div:nth-child(2) { 
        width: 35%;
        text-align: center;
        margin-left: 39%;
        margin-right: 26%;
    }
    .container div:nth-child(3) { 
        width: 58%;
        text-align: center;
        margin-left: 11%;
        margin-right: 31%;
    }
    .container div:nth-child(4) { 
        width: 58%;
        text-align: center;
        margin-left: 33%;
        margin-right: 9%;
    }
    .container div:nth-child(5) { 
        width: 45%;
        text-align: center;
        margin-left: 26%;
        margin-right: 29%;
    }
    .container div:nth-child(6) { 
        width: 45%;
        text-align: center;
        margin-left: 33%;
        margin-right: 22%;
    }
    .container div:nth-child(7) { 
        width: 45%;
        text-align: center;
        margin-left: 27%;
        margin-right: 28%;
    }
}

/* ======================== */

@media screen and (max-width: 550px) { /* Pour écrans de moins de 768px de large */

    .container { 
        gap: 0.8px;
        margin-top: 4%;
    }

    .container div:nth-child(1) { 
        width: 45%;
        text-align: center;
        margin-left: 26%;
        margin-right: 26%;
    }

    .container div:nth-child(2) { 
        width: 50%;
        text-align: center;
        margin-left: 35%;
        margin-right: 15%;
    }

    .container div:nth-child(3) { 
        width: 75%;
        text-align: center;
        margin-left: 7%;
        margin-right: 18%;
    }

    .container div:nth-child(4) { 
        width: 78%;
        text-align: center;
        margin-left: 15%;
        margin-right: 7%;
    }

    .container div:nth-child(5) { 
        width: 55%;
        text-align: center;
        margin-left: 19%;
        margin-right: 26%;
    }

    .container div:nth-child(6) { 
        width: 50%;
        text-align: center;
        margin-left: 40%;
        margin-right: 20%;
    }

    .container div:nth-child(7) { 
        width: 46%;
        text-align: center;
        margin-left: 31%;
        margin-right: 33%;
    }

    .container div:nth-child(8) { 
        width: fit-content;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ======================== */
/*   D.D.D                  */
/* ======================== */

a[href="/Projets/D.D.D.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/D.D.D.html"]:hover {
    text-decoration: none;
    color: #FC8F2F;
    font-style: italic;
}

a[href="/Projets/D.D.D.html"]:hover::after {
    content: "2023 • 148x210 cm ";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }


a[href="/Projets/D.D.D.html"]::before {
    content: ""; /* Afficher l'image */
    position: absolute; /* Positionner l'image hors de la div*/
    top: 200%; /* Positionner l'image sous la div */
    left: -252%; /* Positionner l'image à côté de la div */
    width: 85vh; /* Largeur de l'image */
    max-width: 85vh;
    height: 55vh; /* Hauteur de l'image */
    z-index: -1; /* L'image est derrière */
    background-image: url('/Liens_Images/D.D.D.jpg'); /* URL de l'image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    pointer-events: none; /* Pas d'interactions avec l'image */
}


a[href="/Projets/D.D.D.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/D.D.D.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}

@media screen and (max-width: 550px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/D.D.D.html"]:hover::after {
        background-image: none;
    }
    a[href="/Projets/D.D.D.html"].active::before {
        opacity: 0 !important; /* Cache l'image lorsque le menu est actif sur mobile */
    }
}


/* ======================== */
/*   Axololt                */
/* ======================== */

a[href="/Projets/Axololt.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/Axololt.html"]:hover {
    text-decoration: none;
    color: #898989;
    font-style: italic;
}

a[href="/Projets/Axololt.html"]:hover::after {
    content: "2021 • 105x148 cm";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/Axololt.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: 670%; /* Positionner l'image sous la div */
    left: -200%;
    width: 80vh; /* Largeur de l'image */
    height: 50vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/Axololt.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/Axololt.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/Axololt.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}


/* ======================== */
/*   Komik Stroke           */
/* ======================== */

a[href="/Projets/Komik Stroke.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/Komik Stroke.html"]:hover {
    text-decoration: none;
    color: #2A9AAE;
    font-style: italic;
}

a[href="/Projets/Komik Stroke.html"]:hover::after {
    content: "2022 • 5m-90 cm ";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/Komik Stroke.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: -160%; /* Positionner l'image sous la div */
    left: 161%;
    width: 38vh; /* Largeur de l'image */
    height: 55vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/Komik-Stroke.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/Komik Stroke.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/Komik Stroke.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}


/* ======================== */
/*   Icono-Graphique        */
/* ======================== */

a[href="/Projets/Icono-graphique.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/Icono-graphique.html"]:hover {
    text-decoration: none;
    color: #886969;
    font-style: italic;
}

a[href="/Projets/Icono-graphique.html"]:hover::after {
    content: "2021 • 59,4x84,1 cm";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/Icono-graphique.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: 70%; /* Positionner l'image sous la div */
    left: -83%;
    width: 30vh; /* Largeur de l'image */
    height: 40vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/Icono-Graphique.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/Icono-graphique.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/Icono-graphique.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}


/* ======================== */
/*   Oriscope               */
/* ======================== */

a[href="/Projets/Oriscope.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/Oriscope.html"]:hover {
    text-decoration: none;
    color: #A8A7D3;
    font-style: italic;
}

a[href="/Projets/Oriscope.html"]:hover::after {
    content: "2024 • Smartphone";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/Oriscope.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: 65%; /* Positionner l'image sous la div */
    left: -42%;
    width: 28vh; /* Largeur de l'image */
    height: 62vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/Oriscope.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/Oriscope.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/Oriscope.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}

/* ======================== */
/*   Bompard                */
/* ======================== */

a[href="/Projets/Bompard.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/Bompard.html"]:hover {
    text-decoration: none;
    color: #FC615C;
    font-style: italic;
}

a[href="/Projets/Bompard.html"]:hover::after {
    content: "2022 • 1:30";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/Bompard.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: 300%; /* Positionner l'image sous la div */
    left: -20%;
    width: 85vh; /* Largeur de l'image */
    height: 45vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/Bompard.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/Bompard.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/Bompard.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}


/* ======================== */
/*   PPN                    */
/* ======================== */

a[href="/Projets/PPN.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/PPN.html"]:hover {
    text-decoration: none;
    color: #01008C;
    font-style: italic;
}

a[href="/Projets/PPN.html"]:hover::after {
    content: "2024 • Multi-support";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/PPN.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: -430%; /* Positionner l'image sous la div */
    left: 0%;
    width: 100vh; /* Largeur de l'image */
    height: 60vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/PPN.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/PPN.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/PPN.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}

@media screen and (max-width: 768px) {
    a[href^="/Projets/"]::before {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* ======================== */
/*   Moonlight              */
/* ======================== */

a[href="/Projets/Moonlight.html"] {
    text-decoration: none;
    color: black;
    font-style: normal;
    position: relative;
}

a[href="/Projets/Moonlight.html"]:hover {
    text-decoration: none;
    color: #1d769b;
    font-style: italic;
}

a[href="/Projets/Moonlight.html"]:hover::after {
    content: "2018 • Crayons Fusains et Pastels";
    font-size: 0.3em;
    text-decoration: none;
    color: black;
  }

a[href="/Projets/Moonlight.html"]::before {
    content: ""; /* Nécessaire pour afficher une image avec un pseudo-élément */
    position: absolute;
    top: 150%; /* Positionner l'image sous la div */
    left: 40%;
    width: 63vh; /* Largeur de l'image */
    height: 45vh; /* Hauteur de l'image */
    background-image: url('/Liens_Images/Moonlight.jpg'); /* URL de votre image */
    background-size: cover; /* L'image couvre toute la zone définie */
    opacity: 0; /* L'image est invisible par défaut */
    pointer-events: none; /* Empêcher les interactions avec l'image */
    transition: opacity 0s ease; /* Transition fluide pour l'apparition de l'image */
    z-index: -1;
}

/* Afficher l'image au survol */
a[href="/Projets/Moonlight.html"]:hover::before {
    opacity: 1; /* L'image devient visible au survol */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    a[href="/Projets/Moonlight.html"]:hover::after {
        content: ""; /* Supprime le texte */
        display: none;
    }
}

@media screen and (max-width: 768px) {
    a[href^="/Projets/"]::before {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}



/* ======================== */
/*   TYPOGRAPHIES           */
/* ======================== */

.container span {
    font-style: Italic;
    font-size: 28px;
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    .container span {
        font-size: 24px;
    }
}

@media screen and (max-width: 550px) { /* Pour les écrans inférieurs à 768px */
    .container span {
        font-size: 20px;
    }
}


footer {
    background-color: transparent; /* Aucune couleur de fond n'est définie */
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions totales */
    font-family: "inter", sans-serif; /* Typographie Inter utilisée et remplacée par défault */
    font-style: normal; /* Style de la typographie Inter */
    font-size: 0.7em; /* Taille de la typographie */
    color: black; /* Couleur de la typographie */
    min-height: 2%; /* Hauteur minimale du header = 2% de la hauteur de la fenêtre */
    padding: 1% 1%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    width: 100%; /* Le header prend toute la largeur de l'écran */
    position: fixed; /* Fixe le header en haut de la page */
    overflow: hidden; /* Empêche tout débordement du contenu à l'intérieur du header */
    z-index: 100; /* Indique l'ordre des priorités pour la superposition */
    bottom: 0; /* Positionne le footer à 0px du bas de la fenêtre */
    left: 0; /* Positionne le footer à 0px du côté gauche de la fenêtre */
}

/* ======================== */

@media screen and (max-width: 768px) { /* Pour les écrans inférieurs à 768px */
    footer {
        background-color: white; /* Ajout d'un background blanc */
        min-height: 4%; /* Hauteur minimale du header = 4% de la hauteur de la fenêtre */
        padding: 3% 3%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }
}

@media screen and (max-width: 550px) { /* Pour les écrans inférieurs à 768px */
    footer {
        background-color: white; /* Ajout d'un background blanc */
        font-size: 0.6em; /* Taille de la typographie */
        min-height: 4%; /* Hauteur minimale du header = 4% de la hauteur de la fenêtre */
        padding: 4% 4%; /* Padding vertical et horizontal basé sur la hauteur de la fenêtre */
    }
}


/* ======================== */
/* CONTENU DU FOOTER        */
/* ======================== */

.bas {
    display: flex;
    justify-content: space-between;
    background-color: transparent;
}