:root {
    --largeur-img-reco: 120px;
    --largeur-bandeau: 300px;
    --padding-bandeau: 50px;
    --largeur-fleche: 21px;
    --diag-fleche: 30px;
    --largeur-avis: calc(var(--taille-logo) * 2 + var(--gap-principal));
    --largeur-principal: calc(var(--largeur-bandeau) * 0.95);
    --gap-principal: 10px;
    --largeur-avis-text: calc(var(--largeur-principal) - var(--largeur-avis) - 2 * var(--taille-logo) - 3px - 4 * var(--gap-principal));
}

#fullscreen:has(.erreur) {
    background-color: black;
}

#fullscreen {
    width: 100%;
    height: 100dvh;
    display: block;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;

    & #iframe {
        width: 100%;
        height: 100%;
    }

    & #bandeau {
        display: block;
        background-color: rgba(255, 255, 255, 0.3);
        color: white;
        width: var(--largeur-bandeau);
        padding-left: var(--padding-bandeau);
        position: absolute;
        top: 0;
        right: calc(-1 * (var(--largeur-bandeau)));
        transition: ease 0.5s;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        z-index: 5000;
    }

    & #bandeau::-webkit-scrollbar {
        display: none;
    }

    & #bandeau.deploye {
        background-color: rgba(0, 0, 0, 0.5) !important;
        right: 0;
        transition: ease 0.5s;

        & #fleche {
            border: unset;
            border-top: 3px solid white;
            border-right: 3px solid white;
            right: calc((var(--padding-bandeau) / 2 - var(--diag-fleche) / 4) + var(--largeur-bandeau));
            transition: ease 0.5s;
        }
    }

    & #fleche {
        width: var(--largeur-fleche);
        height: var(--largeur-fleche);
        border: unset;
        border-bottom: 3px solid white;
        border-left: 3px solid white;
        position: fixed;
        top: calc(50vh - 10px);
        right: calc((var(--padding-bandeau) / 2 - 3 * var(--diag-fleche) / 4));
        transform: rotate(45deg);
        transition: ease 0.5s;
    }

    & #principal {
        display: grid;
        grid-template-columns: var(--largeur-avis-text) var(--largeur-avis) 3px var(--taille-logo) var(--taille-logo);
        grid-template-rows: var(--taille-logo);
        gap: var(--gap-principal);
        width: var(--largeur-principal);
        height: fit-content;
        padding-top: 10px;
        justify-content: center;
        align-items: center;
    }

    & #separateur {
        background: #c9c9c9;
        height: 100%;
        width: 3px;
    }

    & .logo img, .avis img {
        width: var(--taille-logo);
        height: var(--taille-logo);
    }

    & .avis-text {
        font-size: 0.7em;
    }

    & .avis {
        display: flex;
        flex-direction: row;
        gap: var(--gap-principal);
        height: var(--taille-logo);
    }

    & #quitter {
        border: 2px solid black;
        background: white;
        border-radius: 50%;
        width: calc(var(--taille-logo) - 4px);
        height: calc(var(--taille-logo) - 4px);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 90%;
    }

    & #quitter img {
        width: calc(var(--taille-logo) * 0.6);
    }

    & #recommandations {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-bottom: 10px;
    }

    & p {
        margin: 5px;
        font-size: 1.2rem;
        font-weight: bold;
    }

    & .reco {
        display: grid;
        grid-template-columns: var(--largeur-img-reco) 1fr;
        gap: 4px 8px;
        width: 100%;
        padding: 5px;
        max-height: calc(var(--largeur-img-reco) * 9 / 16);
    }

    & .reco:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }

    & .reco .titre {
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        overflow: hidden;
        min-width: 0;
    }

    & .reco > div:first-child {
        width: 100%;
        height: 100%;
        grid-row: 1 / 3;
        overflow: hidden;
    }

    & .reco img {
        width: 100%;
        max-height: calc(var(--largeur-img-reco) * 9 / 16);
        overflow: hidden;
    }

    & .reco .maxres {
        aspect-ratio: 16 / 9;
    }

    & .reco .hq, .reco .default {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
    }
}

/* tablette en paysage ou ordinateur */
@media (min-width: 1000px) and (orientation: landscape) {
    :root {
        --largeur-img-reco: 240px;
        --largeur-bandeau: 600px;
        --padding-bandeau: 60px;
        --largeur-fleche: 26px;
        --diag-fleche: 37px;
        --taille-logo: 80px;
        --gap-principal: 25px;
    }

    #fullscreen {
        
        & #fleche, #bandeau.deploye #fleche {
            border-width: 6px;
        }

        & .avis-text {
            font-size: 1em;
        }

        & #quitter {
            border-width: 4px;
            height: calc(var(--taille-logo) - 8px);
            width: calc(var(--taille-logo) - 8px);
        }

        & p {
            margin: 10px;
            font-size: 1.8rem;
        }

        & .reco .titre {
            font-size: 1.3rem;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            margin-left: 10px;
        }
    }
}