*
{
    box-sizing: border-box;
}
@media (max-width: 650px) /*lorsque la largeur<650 alors on colle les div aux bords*/
{
    p.fond
    {
        width: 100%;
    }
    .sources
    {
        width: 100%;
    }
}

@media (min-width: 801px) /*lorsque la largeur>801px alors le menu s'adapte en largeur*/ 
{
    nav>ul
    {
        background: #F7931A;
    }
    
    nav ul li
    {
        flex-direction: row;
        border-left: solid white 4px;
        padding-right: 15px;
        padding-top: 15px;
    }
    
    nav ul li>a
    {
        color: white;
    }
    
    nav ul li>a
    {
        font-size: 1em;
    }
    
    p.fond
    {
        width: 75%;
    }
    .sources
    {
        width: 75%;
    }
}


@media (max-width: 800px) /*lorsque la largeur<800 alors le menu s'adapte en longueur*/
{
    nav>ul
    {
        flex-direction: column;
        padding-left: 0;
    }
    
    nav>ul
    {
        align-items: center;
    }
    nav>ul>li
    {
        text-align: center;
        border-radius: 20px;
    }
    
    nav>ul>li>a
    {
        border: solid #F7931A 5px;
        min-width: 75%;
        background-color: #484848;
    }
    
    nav ul li>a 
    {
        font-size: 1em;
        color: #F7931A;
    }
    
}


body
{
    background: #4d4d4d;
    margin: 0;
    padding: 0;
    animation-duration: 0.5s;
    animation-name: ApparitionTranspar;
}


h1
{
    text-align: left;
    margin-left: 5%;
    color: white;
    font-family: Copperplate, "Copperplate Gothic Light";
}

h2
{
    color: navajowhite;
    text-align: center;
    margin-top: 5em;
}


p.fond
{
    color: white;
    font-size: 1.5em;
    margin: 0 auto;
    padding: 2em;
}


nav
{
    text-align: end;
    margin-top: 75px;
}

nav ul
{
    list-style-type: none;
    display: flex;
}

nav ul li
{
    margin: 10px;
    height: 75px;
    width: 100%;
    align-items: center;
}

nav ul li>a
{
    text-decoration: none;
    font-weight: bold;
    padding: 25px;
    border-radius: 20px;
    transition: all 1.5s ease-out;
}

nav ul li>a:hover
{
    text-decoration: underline;
    color: navajowhite;
}


#arriereh1
{
    height: 50px;
    width: 75%;
    background: #f7931a;
    margin: 0 auto;
    display: table; 
    vertical-align: middle;
    border-radius: 25% 10%;
}

.fond
{
    width: 75%;
    background: #F7931A;
    box-shadow: 10px 10px 20px black;
}


main+div
{
    display: grid;
    text-align: end;
    background-color: #6c6c6c;
    margin: auto;
    margin-top: 10%;
    padding-right:30px;
    color: white;
    font-size: 1.2em;
}

main+div a
{
    text-decoration: none;
    color: white;
    transition: all 1.5s ease-out;
}



main+div a:hover
{
    text-decoration: underline;
    color: antiquewhite;
}


main+div ul
{
    list-style: none;
    margin:0;
}

main+div ul>li:first-child
{
    margin-bottom:20px;
}


p.fond~div
{
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.image
{
    max-width: 60%;
    transition: .3s ease-in-out;
}

.image:hover
{
    transform: scale(1.05); /*effet agrandissement sur image*/
}

p.fond~div p
{
    color: white;
}

.valeur /*tout ce qui a besoin d'être mis en valeur*/
{
    color: antiquewhite;
    font-weight: bold;
}

.titre
{
    display: inline-flex;
    flex-direction: row;
    border-right: solid white 0.5em;
    border-bottom: solid white 0.5em;
    margin-top: 25px;
    margin-left: 25px;
    animation-duration: 6s;
    animation-name: ApparitionTranspar; 
    
}

div.titre>h1
{
    animation-duration: 3s;
    animation-name: agrandissement;
}

p.sources
{
    padding: 2em;
    background-color: #6c6c6c;
    margin: auto;
    font-size: 1.2em;
}

p.sources a
{
    color: white;
}


div.titre img
{
    height: 7em;
    width: 7em;
    animation-duration: 3s;
    animation-name: logo;
}

@keyframes logo { /*animation rotation 3D du logo*/
  from {
      transform: rotate3d(-1, 1, -1, 90deg);
  }

  to {
    transform: rotate3d(1, -1, 1, 360deg);
  }
}


@keyframes ApparitionTranspar { /*animation apparition transparente de la page,logo et titre*/
  from {
      opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes agrandissement { /*animation agrandissement du titre*/
  from {
      transform: scale(1.5);
  }

  to {
    transform: scale(1);
  }
}