/* Desktop */
@media screen and (min-width : 1280px) {

    /* collpres.php */

    #gridcollpres{
        width: 84vw;
        margin-left: 12vw;
        margin-right: 4vw;
        grid-template-columns: repeat(28,3vw);
        grid-template-rows: repeat(15,3vw);
    }
    #gridcollpres img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }
    #gridcollpres :nth-child(1) {
        grid-column: 2/25;
        grid-row: 1/2;
    }
    #gridcollpres > p {
        grid-column: 2/12;
        grid-row: 2/11;
        text-align: justify;
    }
    #coll_img {
        grid-column: 19/28;
        grid-row: 2/11;
    }
    .slide {
        grid-column: 12/28;
        grid-row: 12/14;
        display: flex;
    }
    .thumbcoll{
        cursor: pointer;
    }
    #list {
        grid-column: 2/10;
        grid-row: auto;
        display: flex;
        flex-direction: column;
    }
    #list > a {
        font-weight: 900;
        font-family: "rocket";
        font-size: 1.3em;
        text-align: right;
    }
    #list > a::after {
        content: " •";
    }
}

/* Tablette */
@media  screen and (min-width : 768px) and (max-width : 1279px) {
    #gridcollpres {
        width: 80%;
        margin-left: 10%;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        position: relative;
        overflow: hidden;
        align-items: center;
        justify-content: space-around;
    }
    #gridcollpres p {
        text-align: justify;
    }
    .slide {
        position: relative;
        width: 100%;
        height: 60vh;
        margin: 2vh 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .thumbcoll {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s, opacity 0.5s;
        z-index: 1;
    }
    .thumbcoll.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        z-index: 2;
    }
    .thumbcoll.slide-left {
        transform: translateX(-100%);
        opacity: 0;
    }
    .thumbcoll.slide-right {
        transform: translateX(100%);
        opacity: 0;
    }
    #coll_img {
        display: none;
    }
    #list {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    #list > a {
        font-weight: 900;
        font-family: "rocket";
        font-size: 1.6em;
    }
    #list > a::before {
        content: "• ";
    }
}

/* Mobile */
@media screen and (max-width : 767px) {
    #gridcollpres {
        width: 96%;
        margin-left: 2%;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        position: relative;
        overflow: hidden;
        align-items: center;
        justify-content: space-around;
    }
    #gridcollpres p {
        order: 3;
        text-align: justify;
    }
    .slide {
        order: 1;
        position: relative;
        width: 100%;
        height: 60vh;
        margin: 2vh 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .thumbcoll {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s, opacity 0.5s;
        z-index: 1;
    }
    .thumbcoll.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        z-index: 2;
    }
    .thumbcoll.slide-left {
        transform: translateX(-100%);
        opacity: 0;
    }
    .thumbcoll.slide-right {
        transform: translateX(100%);
        opacity: 0;
    }
    #coll_img {
        display: none;
    }
    #list {
        width: 100%;
        display: flex;
        flex-direction: column;
        order: 0;
    }
    #list > a {
        font-weight: 900;
        font-family: "rocket";
        font-size: 1.4em;
    }
    #list > a::before {
        content: "• ";
    }
}