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

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

 

@media screen and (min-width: 501px) and (max-width: 960px) {



    /*main*/


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

    .sujet{
        font-size: 24px;
        padding: 10px;
        margin: 20px 15%;

    }

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

    .dates{
        font-size: 16px;
    }   
    
    
    .divlien{
        display: grid;
        grid-template-areas:
        "img Titre"
        "img LienPage"    
        ;
        grid-template-columns: 180px auto ;
        grid-template-rows: 100px 50px;


        gap: 8px;

        border-radius: 12px;
        background-color: rgb(12, 102, 95);
        border: 3px solid rgb(88, 230, 182);
        box-shadow: rgb(88, 230, 182) 1px 1px 12px inset;

        padding: 8px;
        margin: 0 auto;

    }

   .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: 18px;
        padding: 10px 30px;
        margin: 20px 25%;

    }

    .répartition3{
        flex-wrap: wrap;
        
    }
    


    .lienYoutube{
        grid-template-areas:
        "img1lien"
        "plien"
        "plien"    
        ;

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

        justify-content: center;

       
        width: 85%;
        height: auto;
        
    }



  
    .img1{
        width: 220px;
        height: 100px;
    }

    .plien{
        height: 100px;
    }

       
   
   .plien1{
        font-size: 17px;
        padding: 8px;
    }

    .plien2{    
        font-size: 17px;
        padding: 8px;
    }





}