body {
    margin: 0px;
    background-color: #54679d;
    font-family: 'Comic Sans';
    font-size: 15px;
    color: #060660;
}
.posts {
    --carrétaille: 120px;
    display:grid;
    grid-template-columns: repeat(auto-fill, var(--carrétaille));
    grid-auto-rows: var(--carrétaille);
    gap:18px;
}
.posts img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.bouton a {
    border-radius:7px;
    font-weight: bold;
    color: #060660;
    text-decoration: none;
    padding: 3px;
    border: solid 4px;
    background-color: #8b85eb;
}
.bouton a:active, .bouton a:hover {
    color: violet;
    background-color: darkorchid;
}

.boutonfermé a, .boutonfermé a:hover {
    color: #1d1d50;
    background-color: #625dab;
    pointer-events: none;
}

.banderolle {
    background-color: #2a355c;
    height: 124.5px;
    width: 100%;
}
.banderolle-logos {
    max-width: 100%;
    display:inline-flex;
    box-sizing: border-box;
    padding: 10px;
}
.banderolle-logos img {
    min-width:0px;
}
.banderolle-boutons {
    position: absolute;
    top: 110px;
    left: 120px;
}

.banderolle-post {
    z-index: 2;
    background-color: #3b497b;
    height: 30px; 
}
.banderolle-post-boutons {
    display: flex;
    position: fixed;
    top: 13px;
    left: 10px;
}
.banderolle-post-boutons-suivant-précédent {
    display: flex;
    position: relative;
    left: 13px;
    gap:5px;
}

.contenu-posts {
    padding: 25px;
}
.contenu{
    position: relative;
    padding: 20px;
    top: 10px;
}

.post-petit {
    background-color: slategrey;
    border: 6px solid #060660;
}
.post-petit:hover {
    border-color: violet;
}

.contact {
    position: relative;
    top: 5px;
    display:flex;
    width: min-content;
    border-radius: 1.5em;
    background-color: #36436f;
    font-size: 1em;
    text-decoration: none;
}
.contact-image {
    height:5.2em;
    border-radius:1.5em;
}
.contact-texte {
    font-size:1.28em;
    color:#8df3f0;
    align-self:center;
    padding:0.78em;
    position:relative;
    top: 0.2em;
}

@media only screen and (pointer: coarse) {
    .contenu {
        padding: 12px;
        top: auto;
    }
    .contenu-posts {
        padding:0px;
        position:relative;
        top:25px;       
    }
    .taillemobile {
        max-width: 100%;
    }
    .posts {
        justify-content: center;
    }
    .bouton a {
        font-size:20px;
        height: 42px;
        width: 90px;
    }
    .banderolle-post {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height:35px;
    }
    .banderolle-post-boutons {
        top: auto;
        bottom: 8.1px;
    }
    .banderolle-post-boutons a {
        display: flex;
        padding: 5px;
        border:solid 5.5px;
        border-radius: 20px;
        font-size: 180%;
        height: 39px;
        width: auto;
    }
    .banderolle-post-boutons-suivant-précédent {
        position :fixed;
        left: auto;
        right :10px;
        gap: 8px;
    }
    .contact {
        font-size: 1.4em;
    }
}

@media only screen and (pointer: coarse) and (max-width: 550px) {
    .posts{
        grid-template-columns: repeat(auto-fill, 30vw);
        grid-auto-rows: 30vw;
        gap:2.4vw;
    }
}

@media only screen and (pointer: coarse) and (min-width: 551px) and (max-width: 800px){
    .posts{
        grid-template-columns: repeat(auto-fill, 21.5vw);
        grid-auto-rows: 21.5vw;
        gap: 2.4vw;
    }
}

@media only screen and (pointer: coarse) and (min-width: 801px) {
    .contenu {
        padding: 20px;
    }
    .posts{
        padding: 10px;
        grid-template-columns: repeat(auto-fill, 120px);
        grid-auto-rows: 120px;
    }
}

@font-face {
    font-family:Comic Sans;
    src: url(/police/comic.ttf);
}
@font-face {
    font-family: Comic Sans;
    src: url(/police/comicbd.ttf);
    font-weight: bold;
}
@font-face {
    font-family: Comic Sans;
    src: url(/police/comici.ttf);
    font-style: italic;
}
@font-face {
    font-family: Comic Sans;
    src: url(/police/comicz.ttf);
    font-style: italic;
    font-weight: bold;
}