/*
    Auteur: Gabriel Messerli
    Date: 12.01.2024
    Description: Voci le code ma page "Napoleon"
*/

/*  menu Hamburger */


 
.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

#hiddenText {
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

a > p{
    color: #ffffff;
}
a > p:hover{
    color: darkred;
}
 
.nav-menu {
   
}
 
.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
 
.nav-menu li {
    margin-right: 20px;
}
 
.nav-menu a {
    text-decoration: none;
    color: #020202;
    font-size: 16px;
}

/* Body */

body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(https://wallpapers.gg/wp-content/uploads/2017/07/French-Tricolour-01-2560x1920.jpg);
    background-size: 100%;
    color: rgb(255, 255, 255);
}

/*Titres*/

/*Titres page la bataille de Iena*/

#forces{
    margin-left: 53%;
    font-size: 30px;
    text-decoration-line: underline;
}

#arrive{
    margin-left: 32%;
    font-size: 30px;
    text-decoration-line: underline;
}

#deroulement2{
    text-align: center;
    font-size: 30px;
    text-decoration-line: underline;
}

#Suite{
    margin-left: 32%;
    font-size: 30px;
    text-decoration-line: underline;
}

#pertes{
    text-align: center;
    font-size: 30px;
    text-decoration-line: underline;
}



/*Titres page la bataille d'austerlitz*/

#Introduction{
    text-align: center;
    font-size: 30px;
    text-decoration-line: underline;
}

#Plan{
    margin-left: 32%;
    font-size: 30px;
    text-decoration-line: underline;
    margin-top: 5%;
}

#deroulement{
    margin-left: 58%;
    font-size: 30px;
    text-decoration-line: underline;
}

#victoire{
    margin-left: 32%;
    font-size: 30px;
    text-decoration-line: underline;
}


/*Titres page la grande armee*/

#armee{
    text-align: center;
    font-size: 30px;
    text-decoration-line: underline;
}

#Oignon{
    text-align: center;
    font-size: 30px;
    text-decoration-line: underline;
}

#titreGarde{
    margin-left: 55%;
    font-size: 30px;
    text-decoration-line: underline;
}

#reforme{
    margin-left: 55%;
    font-size: 30px;
    text-decoration-line: underline;
}

#creation{
    margin-left: 30%;
    font-size: 30px;
    text-decoration-line: underline;
}

#mobile{
    margin-left: 55%;
    font-size: 30px;
    text-decoration-line: underline;
}

/*Titre page Napoleon*/

#enfance{
    margin-left: 46%;
    font-size: 30px;
    text-decoration-line: underline;
}

#iatlie{
   margin-left: 31%;
    font-size: 30px;
    text-decoration-line: underline;
}

#empereur{
    margin-left: 51%;
    font-size: 30px;
    text-decoration-line: underline;
}

#titrevideo{
    text-align: center;
    font-size: 30px;
    text-decoration-line: underline;
}


/*Fin titres*/



/*Articles paramètres*/

article > div {
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
}

article {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 5%;
    margin-right: 5%;
}

/*Images*/

/*Images d'en haut droite et gauche*/

.drapeau {
    width: 10%;
}

.drapeau2 {
    width: 10%;
}

/*Images page Napoleon*/

.SacrementdeNapoleon {
    margin-right: 50px;
    margin-left: 5px;
    width: 500px ;
}


.Napoleonsurcheval {
    margin-right: 50px;
    margin-left: 50px;
    width: 300px;
}

/*Images page la grande armee*/

.reforme{
    margin-right: 50px;
    margin-left: 50px;
    width: 150px;
}

#Boulogne{
    width: 500px;
    margin-left: 50px;
}

.GardeImperial{
    margin-right: 50px;
    margin-left: 50px;
    width: 350px;
}

.Gardesmarche{
    margin-right: 50px;
    margin-left: 50px;
    width: 420px ;
}

#grandeArmee {
    width: 550px;
}

/* Images page bataille d'austerlitz*/

.miseenplace{
    width: 600px;
    margin-right: 50px;
    margin-left: 50px;
}

.deroulementbataille{
    margin-right: 50px;
    margin-left: 50px;
    width: 500px;
}

.troisempereur{
    width: 400px;
    margin-right: 50px;
    margin-left: 50px;
}

/*Images page bataille de Iéna*/

.forcespresente{
    width: 450px;
    margin-right: 50px;
    margin-left: 50px;
}

.soldatiéna{
    width: 350px;
    margin-right: 50px;
    margin-left: 50px;
}

.deroulementbatailleIéna{
    width: 500px;
    margin-right: 50px;
    margin-left: 50px;
}

.VictoireIena{
    width: 500px;
    margin-right: 50px;
    margin-left: 50px;
}

/*Images page d'acceuil*/

.Général{
    margin-right: 50px;
    margin-left: 50px;
    width: 250px ;
}

.Napoleon{
    margin-right: 50px;
    margin-left: 50px;
    width: 200px;
}



/*FIN images*/



/*Viédo/audio*/

#containerIframe{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2cm;
    width: 100%;
    height:315px ;
   
   
}

/*Fin viédo/aduio*/

pre{
    font-family: Arial, Helvetica, sans-serif;
}

#paragraphe{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

h1 {
    font-size: 50px;
}

div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#textintro{
    margin-right: 30%;
    margin-left: 30%;
}

#plantext{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

#plantext2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

#deroulementtext{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20%;
}

#deroulementtext2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20%;

}

#victoiretext{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#forcestext{
    margin-right: 5%;
    margin-left: 50px;
}

#arrivetext{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#deroulementIéna{
    display: flex;
    flex-direction:column;
    width: 100%;
    justify-content: space-between;
}

#deroulementIéna2{
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;
}

#pertestext{
   text-align: center;
    
}

#acceuiltext{
    font-size: 25px;
}

#sources{
    text-align: center;
    font-size: 30px;

}
.contenue-footer{
    width: 100%;
    align-items: center;
    justify-content: center;
}

.sourceswiki{
    width: 100%;
    align-items: center;
}



@media screen and (max-width: 600px) {

    /* menu Hamburger */

    


     /*nav {
        display: block;
    } */

    .image {
        display: flex;

        flex-direction: column;
    }

    article {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .drapeau {
        width: 25%;
    }

    .drapeau2 {
        width: 25%;
    }

    div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    h1 {
        font-size: 35px;
        text-align: center;
    }

    #test {
        display: flex;
        flex-direction: column-reverse;
    }

    #article1 {
        align-items: center;
    }

    .SacrementdeNapoleon {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    iframe{
       margin-top: 5%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    #enfance{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
   

    #empereur{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    #iatlie {
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    /*Fin du code de la page 2 */

/*Commencement du code de la page 3 */

    #reforme{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    #creation{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    #titreGarde{
         display: flex;
        justify-content: center;
        margin-left: 0;
    }

    #GrandeArmee{
        display: flex;
        justify-content: center;
        margin-left: 0px;
    }

    #grandeArmee {
        width: 100%;
    }

    #Boulogne{
        width: 100%;
        margin-left: 0px;
    }

    #mobile{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    .Gardesmarche{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    /*Page bataille d'austerlitz*/

    .miseenplace{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .deroulementbataille{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    #deroulement{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
    
    .troisempereur{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    #textintro{
        margin-left: 0px;
        margin-right: 0px;
    }

    /* Page bataille de Iéna*/

    .forcespresente{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    #forces{
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    #arrive{
        font-size: 28px;
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    .deroulementbatailleIéna{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    #deroulementIéna2{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #pertestext{
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
    }

    .VictoireIena{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    #containerIframe{
        
    }

}