@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


body {
    font-family: raleway;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #ede8f5;
}

/*défilement ulrta incroyablment fluide  */
html {
    scroll-behavior: smooth;
}


h1 {
    color: #092653;
}

h2 {
    color: #092653;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

p {
Margin: 5px 0;
}

.contact {
    margin-top: 0;
}

strong {
    font-weight: bold;
}

/* place la colonne de gauche */
#pagegauche {
    position: absolute;
    left: 0;
    height: 1177px;
    background-color: #24c6d152;
    padding: 40px;
    border-radius: 10px;
}


#pagegauche img {
    width: 200px;
}

/* Style de la colonne de droite pour le responsive(inlin-eblock) met le texte a la suite quand la page est réduite */
#pagedroite {
    display: inline-block;
    height: 1258px;
    margin-left: 300px
}


#software {
    position: relative;
}


#logo {
    position: absolute;
    left: 0;
    display: flex;
    flex-wrap: wrap
}

/* Style des logo de la page gauche(le object-fit: contain;) fait en sorte de ne pas déformer les logos */
#logo img {
    width: 75px;
    height: 150px;
    top: 3px;
    object-fit: contain;
    margin: 5px;
}


header {
    background-color: #24c6d152;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


header h1, header nav {
    margin: 0;
}

/* Style des liens dans l'en-tête (le transition: color permet d'avoir un effet fluide  quand on passe la souris par dessus*/
header a {
    text-decoration: none;
    margin-left: 15px;
    font-weight: bold;
    color: #092653;
    transition: color 0.5s, background-color 0.7s;
}


header a:hover {
    color: #fff;
    background-color: #092653;
    border-radius: 6px;
    padding: 5px 10px;
}

nav li {
    display: inline;
}


footer {
    background-color: #24c6d152;
    color: #092653;
    padding: 20px;
}


.footer-contact {
    max-width: 300px;
    margin-right: 20px;
}

.footer-contact h3 {
    margin-bottom: 15px;
    color: #092653
}

/* met le formulaire en colone  */
.footer-contact form {
    display: flex;
    flex-direction: column;
}

.footer-contact label {
    margin-top: 10px;
    font-size: 0.9rem;
}

.footer-contact input,
.footer-contact textarea {
    margin-top: 5px;
    padding: 10px;
    border-radius: 5px;
    background-color: #ede8f5;
}

/* le cursor pointer permet d'informer l'utilisateur que l'on peut interagir a cette endroit*/
.footer-contact button {
    margin-top: 15px;
    padding: 10px;
    background-color: #092653;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

/* Effet de survol sur le bouton */
.footer-contact button:hover {
    background-color: #000000;
}

#pagedroite h2 {
    background-color: #24c6d152;
    width: 200px;
    text-align: center;
    border-radius: 6px;
}


#projetjet {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
}


#projetjet h1 p, #TRBOX h1 p, #BITMAP h1 p, #JEU h1 p, #FIGMARDS h1 p, #OASIS12 h1 p {
    color: #092653;
    font-size: 4rem;
    font-family: "Parkinsans", sans-serif;
    text-align: center;
}

/* centre la video youtube  */
#video {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#video video {
    border-radius: 15px;
    max-width: 100%;
    height: auto;
}

/* Style pour les sections de projets block bleu */
#OASIS12,#GRAPHICDS,#WEBDEV,#WEBDS,#FIGMARDS,#TRBOX,#BITMAP,#JEU {
    margin: 20px auto;
    padding: 20px;
    font-size: 1.2rem;
    background-color: #24c6d152;
    border-radius: 15px;
    text-align: center;
    width: 80%;
    max-width: 800px;
}

/* Style des images et vidéo dans la section*/
#FIGMARDS img, #TRBOX img, #BITMAP img, #JEU img, #OASIS12 img, #TRBOX video, #BITMAP video, #JEU video {
    border-radius: 10px;
    display: inline-block;
    max-width: 250px;
    height: auto;
    margin: 10px;
}

/* Style des listes dans les sections de projets */
#WEBDS ul, #FIGMARDS ul, #TRBOX ul, #BITMAP ul, #JEU ul, #OASIS12 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#pagedroite h1 {
    font-size: 1.5rem
}


#fleche {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
/* le temps d'agrandissement du survol de la flèche*/
#fleche img {
    width: 60px;
    transition: transform 0.3s ease;
}
/* ajoute un effet d'agrandissement*/
#fleche img:hover{
    transform: scale(1.2);
}

/* barre de navigation fixer a droite*/
aside {
    background-color: #24c6d152;
    position: fixed;
    right: 0;
    top: 150px; 
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 5px;
}

/* Style des liens dans l'aside */
aside a {
    text-decoration: none;
    margin: 10px 0px;
    font-weight: bold;
    color: #092653;
}

aside a:hover {
    color: #fff;
    background-color: #092653;
    border-radius: 6px;
    padding: 5px 10px;
}