/***********************************PROPRIETES GENERALES**************************************/

a{ /*propriétés des liens*/
    text-decoration: none; /*décoration du texte des liens*/
    color: white; /*couleur des liens*/
}

strong {
    font-weight:500; /*Epaisseur de police*/
}

h2, h4 {
    font-weight: 800; /*Epaisseur de police*/
}

h3 {
    background-color: #fff3f3;
    border-radius: 10px;
    width: fit-content;
    padding: 10px;
}

body{  /*Propriétés du corps de page*/
    background-color: black; /*couleur de fond du corps de page*/
    font-family: "Oswald", sans-serif; /*police et style d'écriture*/
    font-weight: 300; /*Epaisseur de police*/
    font-style: normal; /*Style de police*/
    font-size: 20px; /*taille de la police*/
}

/**********************************HEADER**************************************/

header { /*Propriétés de l'en-tête*/
    margin: 0 0 30px 0; /*espace en dessous de l'en-tête*/
    display: flex; /*Utilisation de Flexbox*/
    flex-direction: column; /* Empilement vertical */
    align-items: center; /* Centre tout horizontalement */
    top: 0; /*position en haut de la page*/
    border-radius: 10px; /*bords arrondis*/
}

/*Responsive : Réduction de la taille sur petits écrans */
@media (max-width: 768px) {
    header {
        margin: 15px 10px;
        padding: 10px; 
    }
}

/*Responsive : Réduction de la taille sur petits écrans */
@media (max-width: 480px) {
    header {
        width:100%;
        margin-left: 0;
        margin-right: 0; 
    }
}

.Banniere { /*Nom et prénom dans l'en-tête*/
    width: 95%;
    border-radius: 15px;
}

@media(max-width:480px) {
    .Banniere {
        width:95%;
        margin-left: -15px;
    }
}

.HeadButtons {
    display:flex;
    justify-content: space-around; /* Un à gauche, un à droite */
    align-items: center; /* Centre verticalement */
    margin-bottom: 15px;
    padding: 0 20px; /* Espacement sur les côtés */
}

/*BOUTON ME CONTACTER*/

.IconeBulle {
    vertical-align: middle;
}

.BoutonContact {
    border: 2px solid black;
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    background: linear-gradient(to right, rgb(98, 41, 48), rgb(71, 28, 35), rgb(52, 21, 26)); /*couleur de fond de la présentation*/
    cursor: pointer;
    border-radius: 5px;
    padding:8px;
    color: white;
}

.BoutonContact:hover {
    background-color:#fff3f3;
}

.PopUp {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    overflow-y: auto; /* Permet le scroll sur tout l'écran */
}

.ContenuPopUp {
    background: linear-gradient(to right, rgb(98, 41, 48), rgb(71, 28, 35), rgb(52, 21, 26)); /*couleur de fond de la présentation*/
    color: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    top:0;
}

.Fermer {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.Fermer:hover {
    color:white;
}

.FormulaireContact label {
    font-family: "Oswald";
    display: block;
    margin-top: 15px;
}

.FormulaireContact input, .FormulaireContact textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.envoyer {
    margin-top: 20px;
    padding: 10px 15px;
    background-color:#e09095;
    font-family: "Oswald", sans-serif;
    color: black;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
}

.envoyer:hover {
    background-color:#471c23;
    color: white;
    border: 2px solid white;
}

/*BOUTON TRADUCTION*/
.English { /*Bouton pour passer en anglais*/
    font-size: 20px; /*taille de la police*/
    border: black 2px solid; /*bordure du bouton*/
    background: linear-gradient(to right, #622930, #471c23, rgb(52, 21, 26)); /*couleur de fond de la présentation*/
    font-family: "Oswald", sans-serif; /*police et style d'écriture*/
    cursor:pointer;
    border-radius: 5px;
    padding:8px;
    color: white;
}

.English:hover {
    background-color:#fff3f3;
}

.FlagEngland { 
    padding-right: 5px;
}

/*RESPONSIVE BOUTONCONTACT ET ENGLISH*/

@media (max-width:480px){
    .BoutonContact, .English {
        text-decoration: none;
        color: white;
        padding: 10px;
        border-radius: 10px;
    }
}

/********************PRESENTATION PORTFOLIO*********************/


.divPresentation { /*Présentation générale*/
    background: linear-gradient(to right, rgb(98, 41, 48), rgb(71, 28, 35), rgb(52, 21, 26)); /*couleur de fond de la présentation*/
    margin: 25px 100px; /*marge autour de la présentation*/
    padding: 0 20px 0 20px ; /*espace autour du texte*/
    border-radius: 15px; /*bords arrondis*/
    display: grid;
    grid-template-columns: 2;
    align-items: center;
    gap : 30px;
    
}

@media (max-width:480px) {
    .divPresentation {
        display: flex; /*Utilisation de Flexbox*/
        flex-direction: column; /* Empilement vertical */
        margin: 15px;
        padding: 15px;
        gap: 5px;
    }
}

.PhotoElisePortfolio {
    width: 300px;
    height: auto;
    flex-shrink: 0;
    margin-top: 20px;
    border-radius: 5px;
    margin: 10px 0 15px 0;
    column-span: 1;
    
}

/* Responsive : Réduction des marges sur petits écrans */
@media (max-width: 768px) {
    .photoElisePortfolio {
        margin: 15px 10px; /* Marges réduites pour tablettes */
        padding: 10px; /* Padding réduit */
    }
}

/* Responsive : Réduction des marges sur petits écrans */
@media (max-width: 480px) {
    .photoElisePortfolio {
        margin: 0;
        width:300px;
    }
}

.presentation{ /*Texte de la présentation générale*/
    text-align: left; /*alignement du texte*/
    padding: 0 0; /*espace autour du texte*/
    margin: 15px 0;
    grid-column-start: 2;
}

.TitreBienvenue {
    background-color: whitesmoke;
    padding: 15px;
    width: fit-content;
    border-radius: 5px;
}

.TexteBienvenue {
    color: white;
    padding: 0 15px;
}

.LinkedIn, .GitHub {
    color: black;
    background-color: whitesmoke;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
}

.LinkedIn:hover, .GitHub:hover {
    color: #5b1717;
}

/**********TITRES MES PROJETS ET CE QUE J'UTILISE***********/

.GrandsTitresh2{ 
    margin: 15px 0 15px 0 ; /*marge autour du titre*/
    color: white;
    text-align: center;
}

/***********************TOUS LES PROJETS*********************/

.divProjets{
    background: linear-gradient(to right, rgb(98, 41, 48), rgb(71, 28, 35), rgb(52, 21, 26)); /*couleur de fond de la présentation*/; /*couleur de fond de la grille*/
    border-radius: 15px; /*bords arrondis*/
    margin:25px 100px;
    padding: 20px;

}

.TitreProjet {
    padding:15px;
    background-color: whitesmoke;
    text-align: center;
    width: 50%;
    margin: 15px auto 30px auto;
    color: black;
}

@media (max-width:480px) {
    .divProjets {
        display: flex; /*Utilisation de Flexbox*/
        flex-direction: column; /* Empilement vertical */
        margin: 15px;
        padding: 15px;

    }
}

.divProjetSeul {
    display: flex;
    gap: 30px;
    align-items: flex-start
}

.ProjetGauche, .ProjetDroite {
    flex:1;
}

.ProjetGauche {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
}

.ProjetDroite {
    color: white;
}

@media (max-width:480px) {
    .divProjetSeul {
        flex-direction: column;
    }
}

.TitreProjet:hover {
    color:white; /* Rend le texte transparent pour voir le contour */
    background: linear-gradient(to right, rgb(98, 41, 48), rgb(71, 28, 35), rgb(52, 21, 26)); /*couleur de fond de la présentation*/
    padding: 15px;
    border-radius: 10px;
    border: 2px solid white;
}

@media (max-width:480px) {
    .TitreProjet {
        padding:15px;
        width: 90%;
        text-align: center;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        text-decoration: none;
        color: black;
    }
}

.Captures { /*captures d'écran*/
    max-width: 100%; /*largeur max*/
    width: 100%;
    height: auto; /*hauteur max*/
    display:block;
    margin: 0 auto 20px; /* Centre l'image */
    border-radius: 5px;
}

@media (max-width:480px) {
    .Captures {
        margin: 5px auto;
        max-width: 100%;
        width: 100%;
    }
}

.ProjetDescription {
    padding: 0 30px 0 30px;
}

@media (max-width:480px) {
    .projetDescription {
        margin: 10px;
        padding: 10px;

    }
}

/***************COMPETENCES ET OUTILS UTILISES******************/

.divCompetencesOutils{ /*Compétences et outils utilisés*/
    display: flex; /*disposition en grille*/
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(to right, rgb(98, 41, 48), rgb(71, 28, 35), rgb(52, 21, 26)); /*couleur de fond de la présentation*/
    margin: 25px 100px; /*marge autour de la grille*/
    padding: 0 15px 0 15px;
    border-radius: 15px;    
}

@media (max-width:480px) {
    .divCompetencesOutils {
        display: flex; /*Utilisation de Flexbox*/
        flex-direction: column; /* Empilement vertical */
        margin: 15px;
        padding: 15px;

    }

    .divCompetencesOutils .ProjetDescription{
        padding-top: 0px;
    }

    .TitreBienvenue, .TitreOutils {
        margin:0;
    }
}

.divCompetences, .divOutilsInformatiques {
    border: none;
    flex: 1;
    min-width: 300px;
    
}

.TitreCompetences, .TitreOutils {
    background-color: white;
    padding: 10px;
    width: fit-content;
    border-radius: 5px;
    color: black;
}

.CompetencesOutils {
    color: white;
    border: none;
    padding: 15px;
}

/***********************************FOOTER**************************************/