/*  mise en forme du l'élément que on voudrait voir appliquer si l'écran a une largeur au minimum de 768px qui est en gros  si c'est pas un ptb, on applique dans l'exemple un display none ce qui revient à ne pas l'affichere(*/
@media screen and (min-width:150px) {
        .edito article p {
        font-size: 0.6 em;
    }

    header figure { 
        position:relative;
        top:0;
        left:0;
        width : 100px;
        height : 100px;
        padding:0px;
    }
    header img {
        width : 100%;
        height : 100%;
        border-radius: 10%;
        object-fit:contain;
    }
    header p {
        display:inline-block;
        font-family : caveat;
        font-size : 1em;
    }
    button {
        font-size : 1.2em;
        background-color: var(--pal-green);
        color: white;
        border-radius: 20px;
    }
   #boutonDon {
    width: 120px ;
    margin-left: 5px;
   }
    header h1 {
            font-size:1em;
        }

    #mood_du_mois figure { 
        position:relative;
        top:0;
        left:0;
        width :auto;
        padding:0;
    }
    #mood_du_mois img {
        width : 80%;
        height : 80%;
        border-radius: 10px;
        object-fit:contain;
    }
    #mood_du_mois 
    {
    grid-column: span 3;
    }
    #mood_du_mois {
        font-size:1.1em;
        }

    header {
        position:relative;
        left:0;
        display:grid;
        grid-template-columns: 100px 1fr 100px;
        grid-template-rows: 100px 0px;
        text-align: center;
        align-items:center;
        }
 
    #headright
        {
        width : 100px;
        height : 100px;
        background-color: var(--pal-green);
        border-radius: 10%;
        color : var(--twhite);
        font-size : 1.2em;
        padding-top: 15px;
        margin-right:5px;
        }

 
        
        button {
            font-size : 1em;
        }
        footer button {
            width:75px;
            font-size: 1.4em;
            color:black;
            background-color: var(--pal-green);
            height : 30px;
        }
        h2 {
            font-size:0.8em;
            font-weight:600;
        }
        p { 
            font-size : 0.8em;
        }
        header {
            padding:1px;
        }
    main 
    {
        position:relative;
        top:5px;
    }
/* formatage des events et de la grosse photo*/
    #bigpicture {
        position:relative;
        display : flex;
        flex-direction: row;
    }
    #events {
        position:relative;
        display : flex;
        flex-direction: column;
        font-family: raleway;
    }
    #event0
    {
        padding:5px;
        height: 300px;
        overflow: hidden;
        border-style:solid;
        border-width: 2px;
        border-radius: 10px;
        border-color:grey;
    }
    #event1 {
        padding:5px;
        height: 150px;
        overflow: hidden;
        border-style:solid;
        border-width: 2px;
        border-radius: 10px;
        border-color: grey;

    }
    #event1 div {
        padding:5px;
        height: 150px;
        overflow: hidden;
        border-style:none;
        border-width: 2px;
        border-radius: 10px;
        border-color: brown;

    }
    #event2 {
        padding:5px;
        height: 150px;
        overflow: hidden;
        border-style:solid;
        border-width: 2px;
        border-radius: 10px;
        border-color: grey;

    }
    #event3 {
        padding: 5px;
        height: 150px;
        overflow: hidden;
        border-style:solid;
        border-width: 2px;
        border-radius: 10px;
        border-color: grey;

    }
    #event4 {
        padding: 5px;
        height: 150px;
        overflow: hidden;
        border-style:solid;
        border-width: 2px;
        border-radius: 10px;
        border-color: grey;

    }
 
    #event1 p , #event2 p, #event3 p, #event4 p{
        text-align: justify;
    }

    #event0 figure, #event1 figure,#event2 figure, #event3 figure, #event4 figure {
        float:left;
    }
    #event0 button, #event1 button,#event2 button, #event3 button, #event4 button, #gallery button , #galleri button ,footer button{
        float:right;
        background-color: var(--pal-cta);
        border-radius: 10px;
        color:var(--pal-bg);
        max-width: 60px;
    }


    #event0 figure, #event1 figure, #event2 figure,#event3 figure,#event4 figure { 
        padding: 5px;
        width : 175px;
        height : 175px;
    }
    #event0 img, #event1 img, #event2 img , #event3 img , #event4 img {
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
    /* formatage de la grosse photo*/
    #event0 figure { 
        width : auto;
        height : 300px;
    }
    #bigpicture img {
        width : 100%;
        height : 100%;
        object-fit: cover;
        border-radius: 20px;
    }
    #gallery figure { 
        padding: 5px;
        width : 100px;
        height : 100px;
    }
    #gallery img {
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
    #gallery div {
        display: flex;
        flex-direction: row;
        row-gap : 10px;
        overflow: hidden;
    }
     #galleri figure { 
        padding: 5px;
        width : 100px;
        height : 100px;
    }
    #galleri img {
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
    #galleri div {
        display: flex;
        flex-direction: row;
        row-gap : 10px;
        overflow: hidden;
    }

    main p {
        font-size: 0.8em;
    }

}
    @media screen and (min-width:768px) {
        .edito article p {
        font-size: 0.7 em;
    }

    #event1 button, #event0 button {
        float:right;
        height:35px;
    }
   
    header p {
        display:inline-block;
        font-family : caveat;
        font-size : 2.5em;
    }
    button {
        font-size : 1.5em;
    }
   
    header h1 {
            font-size:2.5em;
        }
        h2 {
            font-size:1.5em;
        }
        article { 
            font-size : 1em;
        }
        main p {
            font-size: 1em;
        }


    header figure { 
        position:relative;
        top:0;
        left:0;
        width : 200px;
        height : 200px;
        padding:0;
        margin:5px;
    }
    header figure {
        width: 200px;
        }
    header{
        position:relative;
        left:0;
        display:grid;
        grid-template-columns:200px 1fr 200px;
        grid-template-rows: 200px 0px;
        text-align: center;
        align-items: center;
    }
    #mood_du_mois figure { 
        position:relative;
        top:0;
        left:0;
        width :auto;
        height: 150px;
        padding:0;
    }
    #titre {
        grid-template-columns: 1fr;
        grid-template-rows: 50px 150px;
        
    }
    #mood_du_mois img {
        width : 100%;
        height : 100%;
        border-radius: 10%;
        object-fit:contain;
    }
    #headright
    {
        width : 200px;
        height : 200px;
        border-radius: 10%;
        color : var(--twhite);
        font-size : 2.4em;
    }
    /* formatage des events*/
    #events {
        position:relative;
        display : flex;
        flex-direction: row;
    }
    #event0
    {
        padding:5px;
        height: 350px;
        overflow: hidden;
    }
    #event0 figure { 
        width : auto;
        height : 350px;
    }
    #event1 div {
        position:relative;
        display : flex;
        flex-direction: column;
    }
    #event1 {
        padding:5px;
        height: 300px;
        width: 33%;
        overflow: hidden;

    }
    #event2 {
        padding:5px;
        height: 300px;
        width: 33%;
        overflow: hidden;

    }
    #event3,#event4 {
        padding: 5px;
        height: 300px;
        width: 33%;
        overflow: hidden;

    }
 

    #event0 p,#event1 p , #event2 p, #event3 p, #event4 p{
        text-align: justify;
    }

    #event0 figure , #event1 figure,#event2 figure ,#event3 figure,#event4 figure{
        float:left;
    }
    #event1 button,#event2 button, #event3 button, #event4 button,#gallery button,#galleri button,#event0 button {
        float:right;
        border-radius: 10px;
        color: white;
    }
        #event1 figure
    {padding: 5px;
    width : 175px;
    height : 175px;
    }
    #event2 figure
    {padding: 5px;
    width : 175px;
    height : 175px;
    }
    #event3 figure,#event4 figure
    {padding: 5px;
    width : 175px;
    height : 175px;
    }

    #event1 img,#event2 img , #event3 img, #event4 img{
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
    #gallery figure { 
        padding: 5px;
        width : 150px;
        height : 150px;
    }
    #gallery img {
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
    #gallery div {
        display: flex;
        flex-direction: row;
        row-gap : 10px;
        overflow: hidden;
    }
    #galleri figure { 
        padding: 5px;
        width : 150px;
        height : 150px;
    }
    #galleri img {
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
    #galleri div {
        display: flex;
        flex-direction: row;
        row-gap : 10px;
        overflow: hidden;
    }


}
@media screen and (min-width:1020px)
{
            .edito article p {
        font-size: 0.9 em;
    }

    main p {
        font-size: 1.2em;
    }

    #mood_du_mois {
        font-size:3.5em;
        }
    header h1, header p {
        font-size:3.1em;
    }
    button {
        font-size : 2em;
    }

    h2 {
        font-size:2em;
    }
    p , article { 
        font-size : 1em;
    }
    .edito article p {
        font-size: 2 em;
    }
    header {
        padding:5px;
        }
    header figure { 
        position:relative;
        top:0;
        left:0;
        width : 250px;
        height : 250px;
        padding:0;
        margin:5px;
    }
    header figure {
        width: 250px;
        }
    header{
        position:relative;
        left:0;
        display:grid;
        grid-template-columns: 250px 1fr 250px;
        grid-template-rows: 350px 0px;
        text-align: center;
        align-items: center;
    }
    #mood_du_mois figure { 
        position:relative;
        top:0;
        left:0;
        width : auto;
        height: 250px;
        padding:0;
    }
    #titre {
        grid-template-columns: 1fr;
        grid-template-rows: 100px 250px;
        
    }
    #mood_du_mois img {
        width : 100%;
        height : 100%;
        border-radius: 10%;
        object-fit:contain;
    } 
    #headright
    {
        width : 250px;
        height : 250px;
        background-color: var(--pal-green);
        border-radius: 10px;
        font-size : 3em;
        color : var(--twhite);
    }
    #event1 div {
        position:relative;
        display : flex;
        flex-direction: row;
    }
    #event0
    {
        padding:5px;
        height: 400px;
        overflow: hidden;

    }
    #event0 figure { 
        width : auto;
        height : 400px;
    }
}