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

/*BALISES SEMANTIQUES*/

body {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    background-image: url("fond.png");
    height: 100vh;
}

header {
    margin: 1% auto;
    padding: 1%; 
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: rgb(190, 183, 167);
    font-family: serif;    
}

header img {
    width: 100%;
    height: auto;
}

nav {
    max-width: 100%;
    margin: 0.5% auto 0.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.5%;
    list-style-type: none;
    background: rgb(219, 218, 212);
    font-family: serif;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav li {
    font-size: 10px;
    margin: 0 10px;
}

nav a{
    text-decoration: none;
}

nav .titre{
    width: 100%;
    color: #660000;
}


main {
    width: 100%;
    margin: auto;
    background-color: white;
    padding: 2%;
    font-family: arial;
}

footer {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    font-family: arial;
    text-align: justify;
    border: 2px solid rgb(200, 173, 127);
    border-radius: 0.5em;
}

footer item {
    margin: 0.2em;
}


video{
    width: 96%;
    margin: 1.5% 2% 0.5% 2%;
}

table {
    width: 96%;
    margin: 1.5% auto;
    border-collapse: collapse;
    table-layout: fixed;
    padding: 0.5%;
}

th, td{
    text-align: center;
    vertical-align: middle;
    padding: 0.5% 1% 0.5% 1%;
    border: 1px solid rgb(245, 185, 22);
}

/*SELECTEURS GENERAUX*/

h1, .Titre_page {
    width: 100%;
    margin: 0.5% auto;
    color: #660000;
    text-align: center;
}

h2 {
    width: 96%;
    margin: 5% 2% 2% 2%;
    color: #473823;
    text-align: center;
}

h3 {
    width: 94%;
    margin: 3% 2% 0% 4%;
    color: #530606;
    text-align: Center;
}

h4 {
    width: 92%;
    margin: 2% 2% 0% 4%;
    color: #530606;
    text-align: Center;
}


hr {
    height: 2px;
    background-color: #fff;
    color: #fff;
}

p {
    margin: 1% 2% 0% 2%;
    text-align: justify;
}

ul {
    margin: 0.5% 2% 0% 3%;
    text-align: justify;
}

li {
    margin: 0.5% 2% 0% 3%;
    text-align: justify;
}



/* pseudo-classes*/
a {
    color: rgb(215, 133, 79);
    text-decoration: none;
}

a img {
    border: none;
}

a:hover {
    text-decoration: underline;
    background: #ffffcc;
}

/*BALISES GENERIQUES BLOC*/

/*Ancre : retour haut de page*/
.ancre{
    margin: 2% auto 0% 0%;
    font-style: oblique;
}

.chapeau{
    margin: 5% 0% 0% 0%;
    font-weight: bolder;
}

/*Conteneur 2 images 1/2 sans encadrement*/
.conteneur {
    max-width: 96%;
    margin: 2%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
 }

.conteneur img {
    max-width: 48%;
    justify-content: center;
    align-items:center;
    height: 48%;
}
/*Conteneur 1 image 75%*/
.conteneur75 {
    max-width: 96%;
    margin: 2% auto 2% auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.conteneur75 img{
    max-width: 75%;
}
/*Conteneur pour 7 figurines côte-à-côte*/
.conteneur12 {
    max-width: 96%;
    margin: 2% auto 2% auto;
    display: flex;
    flex-direction: row;
    justify-content:space-between ;
    align-content: center;
}
.conteneur12 img{
    max-width: 12%;
}
/*Conteneur avec encadrement*/
.encadre {
    max-width: 96%;
    margin: 2% 2% 0.5% 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*Conteneur info*/
.info {
    max-width: 96%;
    margin: 1.5% auto 1.5% auto;
   /* display: flex;
    flex-direction: column;
    align-items: center;*/
    padding: 0% 2% 2% 2%;
    border: 1px solid rgb(13, 89, 202);
    border-radius: 2em;

}
.info h3{
color: blue;
}

.info img {
    max-width: 100%;
    box-shadow: 2px 2px 5px rgb(94, 92, 92);
}
/*Conteneur pour légende*/
.legende {
    width: 96%;
    margin: 0% 0% 0.5% 0%;
    text-align: center;
    color: rgb(104, 63, 38);
}

/*Conteneur avec effet d'ombrage*/
.ombre {
    max-width: 96%;
    margin: 1.5% auto 1.5% auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 2px 2px 5px rgb(94, 92, 92);
}
.ombre img {
    max-width: 100%;
    box-shadow: 2px 2px 5px rgb(94, 92, 92);
}


/* - - - - MEDIA QUERIES - - - - */
@media screen and (max-width: 575px)

/*Ecrans de smartphones- 1 colonne d'images de 330px*/
    {
        body{
            max-width: 576px;
        }
        header {
            border: 1px solid rgb(200, 173, 127);
            border-radius: 0.5em;
        }
    
        nav {
            border: 1px solid rgb(200, 173, 127);
            border-radius: 0.5em;
        }
    
        nav a {
            font-size: 10px;
        }
    
        nav .titre{
            font-size: 11px;
            font-weight: bolder;
        }
    
        main{
            border: 2px solid rgb(200, 173, 127);
            border-radius: 0.5em;
        }
    
        h1, .Titre_page {
            font-size: 22px;
        }
    
        h2 {
            font-size: 18px;
            text-shadow: 0 0 40px rgb(223, 159, 11);
        }
    
        h3 {
            font-size: 14px;
            text-shadow: 0 0 40px rgb(223, 159, 11);
        }
        
        h4 {
            font-size: 12px;
            text-shadow: 0 0 40px rgb(223, 159, 11);
        }
        
         p, a, li{
            font-size: 10px;
        }
    
        .ancre, th, td{
            font-size: 8px;
        }

        .conteneur75{
            max-width: 100%;
        }
    
        .encadre {
            border: 2px solid rgb(200, 173, 127);
            border-radius: 0.5em;
        }
    
        .legende {
            font-size: 8px;
            font-style: oblique;
        }
    }

@media screen and (min-width: 576px) and (max-width: 767px)

/*Ecrans de tablettes - 1 ou 2 images de 300px c�te � c�te*/
    {
    body{
        max-width: 576px;
    }
        header {
        border: 1px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    nav {
        border: 1px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    nav a {
        font-size: 11px;
    }

    nav .titre{
        font-size: 13px;
        font-weight: bolder;
    }

    main{
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    h1, .Titre_page {
        font-size: 25px;
    }

    h2 {
        font-size: 22px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }

    h3 {
        font-size: 16px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }
    
    p, a, li{
        font-size: 12px;
    }

    .ancre, th, td{
        font-size: 10px;
    }

    .conteneur75{
        max-width: 100%;
    }

    .encadre {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    .legende {
        font-size: 10px;
        font-style: oblique;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px)

/*Ecrans d'ordinateurs portables - 2 images de 360px c�te � c�te*/
{
    body{
        max-width: 768px;
    }

    header {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }
    
    nav {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    nav a{
        font-size: 12px;
    }   

    nav .titre{
        font-size: 13px;
        font-weight: bolder;
    }

    main{
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    h1, .Titre_page {
        font-size: 28px;
    }

    h2 {
        font-size: 25px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }

    h3 {
        font-size: 18px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }
    
    p, a, li{
        font-size: 12px;
    }

    .ancre, th, td{
        font-size: 10px;
    }

    .conteneur75{
        max-width: 90%;
    }

    .encadre {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    .legende {
        font-size: 10px;
        font-style: oblique;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px)

/*Ecrans d'ordinateurs de bureau de r�solution inf�rieure � 1200 pixels - 2 images de 400px c�te � c�te*/
{
    body{
        max-width: 992px;
    }
    header {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }
    
    nav {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    nav a{
        font-size: 17px;
    }   

    nav .titre{
        font-size: 18px;
        font-weight: bolder;
    }

 
    h1, .Titre_page{
        font-size: 35px;
    }

    h2 {
        font-size: 29px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }

    h3 {
        font-size: 22px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }
    
    p, a, li{
        font-size: 15px;
    }

    .ancre, th, td{
        font-size: 13px;
    }

    .conteneur75{
        max-width: 75%;
    }

    .encadre {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    .legende {
        font-size: 15px;
    }
}

@media screen and (min-width: 1200px)

/*Ecrans d'ordinateurs de bureaude résolution supérieure à 1200 pixels- 2 images de 600px côte à côte*/
    {
    body{
        max-width: 1300px;
     }
       
   header {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }
    
    nav {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    nav a{
        font-size: 17px;
    }   

    nav .titre{
        font-size: 18px;
        font-weight: bolder;
    }

    main{
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    h1, .Titre_page{
        font-size: 35px;
    }

    h2 {
        font-size: 29px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }

    h3 {
        font-size: 22px;
        text-shadow: 0 0 40px rgb(223, 159, 11);
    }
    
    p, a, li{
        font-size: 17px;
    }

    .ancre, th, td{
        font-size: 13px;
    }

    .conteneur75{
        max-width: 75%;
    }


    .encadre {
        border: 2px solid rgb(200, 173, 127);
        border-radius: 0.5em;
    }

    .legende {
        font-size: 15px;
        font-style: oblique;
    }
}