/*css Page Histoire Chronologie - MédiaQuerie*/

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

 

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



    /*main*/


    .Chapitre{
        font-size: 22px;
        padding: 8px 10%;
        margin: 20px 5%;
    }

    .sujet{
        font-size: 28px;
        padding: 10px;
        margin: 20px 5%;

    }

 
    /*chronologie*/
    
    .répartition2{
        align-items: center;
    }

    .dates{
        font-size: 16px;
    }   
    
   .divlien{
    flex-direction: column;
    grid-template-areas:
    "img"
    "Titre"
    "LienPage"    
    ;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;


    gap: 8px;
    padding: 8px;

    width: 80%;
    height: 100%;

    }

   .img1{
        width: auto;
        height: auto;
    }

    

    .TitreP1{
        font-size: 22px;
    }

    .TitreP2{
        font-size: 16px;
    }


    .imgDrapeau{
        width: 45px;
        height: 30px;

    }

    .date{
        font-size: 18px;
    }

    .sujet2{
        font-size: 22px;
        padding: 10px 30px;
        margin: 20px 5%;

    }

    .répartition3{
        flex-wrap: wrap;
        
    }
    
    .lienYoutube{
        grid-template-areas:
        "img1lien"
        "plien1"
        "plien2"    
        ;

        grid-template-columns: auto;
        grid-template-rows: auto auto auto;

        justify-content: center;

        flex-wrap: wrap;
       
        width: 80%;
        height: auto;
        
    }

  
    .img1{
        width: 100%;
        height: 100%;
    }

       
   
    .plien1{
        text-align: center;
        font-size: 20px;
        margin-left: 0px;
        margin-top: 15px;
        height: auto;
    }

    .plien2{
        text-align: center;
        font-size: 20px;
        margin-left: 0px;
        height: auto;
    }





}