styles.css

/* Styles généraux et body */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@600&family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Golos Text';
    background-color: #EEF3EF;
}

/* Styles pour le header */
header {
    max-width: 100vw;
}

header.container {
    background-image: url('img/Degrade.svg');
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    overflow-y: auto; /* Ajoutez ceci pour permettre la barre de défilement verticale uniquement si nécessaire */
}

/* Styles pour le logo et le titre */
.header_logo {
    display: flex;
    align-items: center;
}

.logo {
    margin-right: 10px;
}

h1.projects {
    margin-top: -10px;
}

.title {
    font-family: 'Press Start 2P';
    font-size: 20pt;
    color: #191A19;
}

/* Styles pour la navigation */
nav.logolien {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Styles pour main et les projets */
main.main {
    padding: 20px;
}

/* Styles de base pour les articles */
section.projects article {
    max-width: 70%; /* Largeur maximale de la bulle */
    padding: 10px 20px; /* Padding intérieur */
    border-radius: 20px; /* Bords arrondis */
    margin-bottom: 10px; /* Espacement entre les bulles */
    background-color: #ECEEE6; /* Couleur de fond de la bulle */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); /* Ombre pour donner du relief */
    display: flex;
    align-items: center;
}

/* Styles pour alterner la disposition des bulles */
section.projects article:nth-child(odd) {
    margin-left: auto; /* Aligner à droite */
    background-color: #ECEEE6; /* Couleur pour distinguer les bulles */
}

section.projects article:nth-child(even) {
    margin-right: auto; /* Aligner à gauche */
    background-color: #ECEEE6; /* Couleur pour distinguer les bulles */
}

/* Styles pour les images et textes dans les bulles */
.imageLeft {
    border-radius: 15px;
    height: 100px; /* Hauteur de l'image */
    width: auto;
    padding-left: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.imageRight {
    border-radius: 15px;
    height: 100px; /* Hauteur de l'image */
    width: auto;
    padding-right: 20px;
    margin-right: 10px;
    margin-left: 10px;
}

.textLeft {
    text-align: right;
}

.textRight {
    text-align: left;
}


/* Style général du footer */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f2f2f2; /* Couleur de fond du footer */
}

/* Style de la barre de recherche */
#bar {
    width: 80%; /* Largeur de la barre */
    height: 60px; /* Hauteur de la barre */
    border: 1px solid #d1d1d1; /* Bordure subtile */
    border-radius: 30px; /* Bords arrondis */
    padding: 10px 20px; /* Padding intérieur */
    font-size: 16px; /* Taille de la police */
    color: #333; /* Couleur du texte */
    background-color: #fff; /* Couleur de fond */
    outline: none; /* Supprimer l'outline au focus */
}

/* Placeholder style */
#bar::placeholder {
    color: #999; /* Couleur du placeholder */
}

/* Style du bouton (si nécessaire) */
button.flag {
    margin-top: 20px;;
    width: 120px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

/* Style de l'icône dans le bouton */
button.flag img {
    width: 120px; /* Taille de l'icône */
    height: auto;
}

/* Styles de base */
a {
    text-decoration: none;
    color: inherit;
}

section.projects .containerRight  {
    display: flex;
    flex-direction: row;
    align-items: center;
}

section.projects .containerLeft  {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.imageLeft, .imageRight {
    width: auto;
    margin: 0;
    padding: 10px;
    height: 200px;
    border-radius: 25px;
}

.textLeft {
    text-align: left;
    padding-right: 20px;
}

.textRight {
    text-align: right;
    padding-left: 20px;
}

/* Adaptations responsive */
/* Media Queries pour ajuster sur les petits écrans */
@media screen and (max-width: 640px) {
    /* Styles pour le logo et le titre */
    .header_logo {
        flex-direction: column;
        align-items: center;
    }

    .logo {
        margin-top: 2px;
        margin-left: -55px;
        width: 60px; 
    }

    .title {
        font-size: 12pt;
        margin-top: 2px;
    }

    h1.projects {
        font-size: 25px;
        margin-right: 105px;
        width: 55px;
    }

    /* Styles pour la navigation */
    nav.logolien {
        margin-top: 2px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 25px;
    }

    section.projects article {
        max-width: 100%; /* Largeur plus grande sur petits écrans */
        padding: 10px; /* Padding intérieur */
        flex-direction: column; /* Les éléments sont empilés verticalement */
        align-items: center; /* Centrage des éléments */
        margin: auto; /* Aligner à gauche */
        background-color: #ECEEE6; /* Couleur pour distinguer les bulles */
        width: 95VW;
        margin-top:20px;
    }

    /* Pour les images dans les projets */
    .imageLeft, .imageRight {
        max-width: 90%;
        margin: 0;
        padding: 0;
        display: block; /* Assure que l'image est traitée comme un bloc */
    }

    /* Pour le texte dans les projets */
    .textLeft, .textRight {
        text-align: center; /* Texte centré */
        margin: 10px 0; /* Marge pour espacer les éléments */
    }

    /* Adapter le container pour les petits écrans */
    section.projects .containerLeft, section.projects .containerRight {
        flex-direction: column; /* Les éléments sont empilés verticalement */
        align-items: center; /* Centrage des éléments */
        height: auto; /* Hauteur de l'image */
        width: auto; /* Largeur de l'image */
        margin: 5px;
        padding: 5px;
    }
}

/* Écrans moyens à grands (tablettes à ordinateurs de bureau) */
@media screen and (min-width: 641px) {
    section.projects article:nth-child(odd) {
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }

    section.projects article:nth-child(even) {
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .containerLeft, .containerRight {
        flex-direction: row;
        align-items: center;
    }

    .textLeft, .textRight {
        text-align: left;
        margin-left: 20px;
    }
}

/* Écrans extra-larges (ordinateurs de bureau) */
@media screen and (min-width: 1025px) {
    header.container, main.main {
        /* max-width: 100vw; */
        margin: 0 auto;
    }
    .textLeft {
        text-align: right;
    }
    
    .textRight {
        text-align: left;
    }
}