@font-face {
    font-family: "Raqillas";
    src: url("/css/Raqillas-GOGdy.ttf") format("truetype");
    font-style: normal;
}

@font-face {
    font-family: "BRCobane";
    src: url("/css/BRCobane-Medium-BF654d96a174b64.otf") format("opentype");
    font-style: normal;
}

a {
    text-decoration: none;
    color: #000;
    font-weight: 700;
}

body {
    display: grid;
    grid-template:
        "space1" 1fr
        "title"
        "image"
        "content"
        "space2" 10px
        "contact"
        "space3" 1fr;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

h1 {
    grid-area: title;
    color: #060606;
    font-family: Verdana;
    text-align: center;
    font-size: 32px;
}

    h1 strong {
        font-size: 48px;
    }

.grid {
    grid-area: image;
    position: relative;
    display: grid;
    max-width: 100vw;
    grid-template-areas: "q1 q2"
        "q3 q4";
}

    .grid > img {
        max-width: 100%;
        justify-self: center;
        align-self: center;
        position: absolute;
        z-index: 7;
        pointer-events: none;
        transition: transform linear .1s;
        transform-origin: center;
        cursor: default;
    }
    
    .grid:hover > img {
        transform: scale(0.8);
    }

    .grid:hover .service:not(:hover) {
        opacity: 0.5;
    }

.service {
    cursor: pointer;
    display: flex;
    min-height: 150px;
    transition: opacity linear .1s;
}

.service .item {
    transition: transform linear .1s;
    z-index: 2;
}

.service .item img {
    max-width: 250px;
    max-height: 250px;
    margin: 25px;
}

    .service.espaceartsonore:hover .item, .service.pnl:hover .item {
        transform: scale(1.1) translateX(100px);
    }

    .service.midgfresh:hover .item, .service.toquealquimia:hover .item {
        transform: scale(1.1) translateX(-100px);
    }

.item {
    min-width: 300px;
    min-height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mobile { display: none; }

.midgfresh {
    grid-area: q1;
    align-items: flex-end;
    justify-items: right;
    flex-direction: row-reverse;
    transform-origin: bottom right;
}

.espaceartsonore {
    grid-area: q2;
    align-items: flex-end;
    transform-origin: bottom left;
}

.toquealquimia {
    grid-area: q3;
    align-items: flex-start;
    flex-direction: row-reverse;
    transform-origin: top right;
}

.pnl {
    grid-area: q4;
    align-items: flex-start;
    transform-origin: top left;
}

svg {
    height: 1em;
    fill: black;
    margin-right: 0.5em;
    position: relative;
    top: .2em;
}

div.content {
    grid-area: content;
    font-family: BRCobane, sans-serif;
    font-size: 22px;
    max-width: 1280px;
}

.mobile {
    font-family: BRCobane, sans-serif;
    font-size: 22px;
}

div.contact {
    grid-area: contact;
    font-family: BRCobane, sans-serif;
    font-size: 18px;
    max-width: 1280px;
}

.wjar {
    font-family: Raqillas, Verdana, sans-serif;
}

img {
    filter: drop-shadow(black 0 0 15px);
}

.sign {
    font-size: 30px;
}

@media (min-width: 1025px) {
    .service .item { position: relative; }
        .service .item.pointed::after {
            position: absolute;
            top: 0;
            height: 100%;
            width: 55px;
            content: ' ';
            background-image: url(/images/arrow-hl.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    .midgfresh .item.pointed::after {
        left: -55px;
        transform: scaleX(-1);
    }
    .toquealquimia .item.pointed::after {
        left: -55px;
        transform: scale(-1);
    }
    .pnl .item.pointed::after {
        right: -55px;
        transform: scaleY(-1);
    }
    .espaceartsonore .item.pointed::after {
        right: -55px;
        transform: scale(1);
    }
}

@media (max-width: 1024px) {
        .grid {
            grid-template-areas: "logo"
                "header"
                "q1"
                "q2"
                "q3"
                "q4";
            gap: 0 0;
        }

            .grid > img {
                position: static;
                grid-area: logo;
            }

            .grid:hover .service:not(:hover) {
                opacity: 1.0;
            }

        .mobile {
            display: block;
        }

        h1.mobile {
            grid-area: header;
        }

        h2.mobile strong {
            display: block;
        }

        .service {
            flex-flow: column;
            align-items: center;
            min-height: 150px;
            width: 100%;
        }

            .service .item {
                width: 100%;
                min-height: 150px;
                display: flex;
                align-items: center;
            }

                .service .item img {
                    max-width: 150px;
                    max-height: 150px;
                }

            .grid:hover img, .service:hover .item {
                transform: none !important;
            }
    }