/* Début des Styles Généraux */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: rgb(246, 245, 247);
}

h1 {
    font-size: 2.5rem;
}
/* Fin des Styles Généraux */

/* Début de la Section Header Principal (Page d'Accueil) */
header {
    height: 100vh;
    background-image: url("images/images/fond_1.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* Fin de la Section Header Principal */

/* Début de la Navbar */
header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 10px 3px rgb(14, 13, 13);
    width: 100%;
    height: 60px;
    padding: 10px;
    background-color: rgba(138, 43, 226, 0.950);
    font-family: "Poppins", sans-serif;
    position: relative;
    z-index: 1000;
}

header .navbar .logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
}

/* Début des Liens de navigation */
header .navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header .navbar a {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    padding-left: 20px;
    text-decoration: none;
}

header .navbar .nav-links a:hover {
    color: rgb(56, 216, 245);
}

header .navbar .nav-links ul li .active {
    color: rgb(56, 216, 245);
    font-weight: bold;
}

header .navbar .nav-links ul {
    display: flex;
}

header .navbar .nav-links ul li {
    padding: 0 40px;
}
/* Fin des Liens de navigation */

/* Début des Styles du bouton burger */
.menu-burger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    position: absolute;
    right: 20px;
    z-index: 1001;
}

.menu-burger .bar {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 5px;
    transition: all 0.3s ease;
}
/* Fin des Styles du bouton burger */

/* Début de la Section Bienvenue */
.bienvenue {
    padding: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
    text-shadow: 3px 0px 5px rgb(15, 15, 15), 2px -1px 0em rgb(8, 8, 8), -1px 1px 0em #060606;
    position: relative;
    top: 45%;
}
/* Fin de la Section Bienvenue */

/* Début de la Page Présentation */
header.presentation {
    height: 100vh;
    background-image: url("images/images/fond_2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-presentation-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.conteneurtextepres {
    border: 2px solid white;
    border-radius: 30px;
    margin: 30px;
    width: 60%;
    max-width: 800px;
    box-shadow: 1px 1px 10px 3px rgb(14, 13, 13);
    background-color:rgba(138, 43, 226, 0.950);
    flex-shrink: 0;
    z-index: 1;
}

.textedepres {
    color: white;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    padding: 60px;
    text-align: justify;
    line-height: 1.6;
}
/* Fin de la Page Présentation */

/* Début des Media Queries */
@media screen and (max-width: 850px) {
    /* Navbar en mobile */
    header .navbar {
        padding: 0 20px;
        justify-content: space-between;
    }

    .menu-burger {
        display: flex;
    }

    header .navbar .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: rgba(138, 43, 226, 0.950);
        position: absolute;
        top: 80px;
        left: 0;
        text-align: center;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        z-index: 998;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    header .navbar .nav-links.active {
        display: flex;
    }

    header .navbar .nav-links ul {
        flex-direction: column;
        width: 100%;
    }

    header .navbar .nav-links ul li {
        padding: 15px 0;
        width: 100%;
    }

    header .navbar .nav-links ul li a {
        display: block;
        padding: 0;
        font-size: 1.2rem;
        width: 100%;
    }

    /* Transformation du burger */
    .menu-burger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-burger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-burger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Page Présentation en mobile */
    .conteneurtextepres {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

    .textedepres {
        font-size: 16px;
        padding: 15px;
        text-align: left;
    }
}
/* Fin des Media Queries */

/* Début des Autres Sections */
.bandeauportfolio {
    display: flex;
    width: 100%;
    height: 300px;
    background-color: rgb(138, 103, 170);
}

.textebandeauportfolio {
    margin: auto;
    font-family: "Poppins", sans-serif;
    color: white;
    font-size: 1.5rem;
}

span {
    font-size: 12px;
}
/* Fin des Autres Sections */

/* Début de la Section Animation */
.bandeau_animations {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    height: 120px;
    background-color: #1523eb1a;
}

.texte_bandeau_animations {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_animations {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.contenu_animations {
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Fin de la Section Animation */

/* Début Effet Zoom sur images */
.zoom {
    transition: 0.5s;
}

.zoom:hover {
    transform: scale(1.25);
}
/* Fin Effet Zoom sur images */

/* Début de la Section Dessins Digitaux */
.bandeau_dessins_digit {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_dessins_digit {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_dessins_digit {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.dessinsdigit {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dessinsdigit img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Dessins Digitaux */

/* Début de la Section Croquis */
.bandeau_croquis {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_croquis {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_croquis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.croquis {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.croquis img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Croquis */

/* Début de la Section Dessins d'observation */
.bandeau_dessins_observation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_dessins_observation {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_dessins_observation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.dessins_observation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px;
}

.dessins_observation img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Dessins d'observation */

/* Début de la Section Dessins */
.bandeau_dessins {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_dessins {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_dessins {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.dessins {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dessins img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Dessins */

/* Début de la Section Collages */
.bandeau_collages {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_collages {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_collages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.collages {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collages img {
    max-width: 400px;
    height: 310px;
}
/* Fin de la Section Collages */

/* Début de la Section Exercices */
.bandeau_exercices {
    display: flex;
    margin-top: 100px;
    background-color: #1523eb1a;
    width: 100%;
    height: 100px;
}

.texte_bandeau_exercices {
    margin: auto;
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_exercices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.exercices {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px;
}

.exercices img {
    width: 168px;
    height: 219px;
    inline-size: cover;
}

.exercices p {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    width: 168px;
    padding: 10px;
    text-align: left;
}
/* Fin de la Section Exercices */

/* Début de la Section Bd */
.bandeau_bd {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_bd {
    font-family: "Poppins", sans-serif;
    text-align: center;
    color: black;
}

.conteneur_bd {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.bd {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Bd */

/* Début de la Section Storyboard */
.bandeau_storyboard {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    height: 100px;
}

.texte_bandeau_storyboard {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_storyboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.storyboard {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storyboard img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Storyboard */

/* Début de la Section Projet Eclipse */
.bandeau_projet_eclipse {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
}

.texte_bandeau_projet_eclipse {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_projet_eclipse {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.projet_eclipse {
    padding: 0;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.projet_eclipse img {
    max-width: 295px;
    max-height: 195px;
}
/* Fin de la Section Projet Eclipse */

/* Début de la Section Inspirations */
.bandeau_mes_inspirations {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    background-color: #1523eb1a;
    width: 100%;
    height: 100px;
}

.texte_bandeau_mes_inspirations {
    font-family: "Poppins", sans-serif;
    text-align: center;
}

.conteneur_mes_inspirations {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* Films */
.p_films {
    font-family: "Poppins", sans-serif;
    width: 80px;
    border-radius: 30px;
    background-color: blue;
    text-align: center;
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin: 50px;
}

.conteneur_films {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.films {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.films img {
    height: 211px;
    width: 150px;
    display: inline-block;
}

.head {
    margin-top: 10px;
}

.films p {
    width: 150px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    padding: 5px;
}

/* Séries */
.p_series {
    font-family: "Poppins", sans-serif;
    width: 80px;
    border-radius: 30px;
    background-color: blue;
    text-align: center;
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin: 50px;
}

.conteneur_series {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.series {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.series p {
    width: 150px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    padding: 5px;
}

/* Jeux Vidéos */
.p_jeux_videos {
    font-family: "Poppins", sans-serif;
    width: 135px;
    border-radius: 30px;
    background-color: blue;
    text-align: center;
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin: 50px;
}

.conteneur_jeux_videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 50px;
}

.jeux_videos img {
    height: 211px;
    width: 150px;
    display: inline-block;
}

.jeux_videos p {
    width: 150px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    padding: 5px;
}
/* Fin de la Section Inspirations */

/* Début du Footer */
.section_footer {
    display: flex;
    width: 100%;
    height: 200px;
    background-color: rgb(138, 103, 170);
}

.blockfooter1 {
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    width: 100%;
    padding: 20px;
    font-family: "Poppins", sans-serif;
    color: white;
}

.blockfooter1 h4 {
    font-size: 12px;
    font-weight: normal;
}

.material-symbols-outlined {
    color: red;
    font-size: 19px;
    margin: 0 5px 0 5px;
    position: relative;
    bottom: -5px;
}
/* Fin du Footer */