/*
L'attribut "data-theme" est ajouté au tag body 
et l'id est spécifié par config.yaml
*/

body {
    font-family: 'eau_doucesans_regular';
}
h1 {
    font-family: 'eau_doucesans_thin';

}
#titlebar h1 {
    font-size: 4rem;
}
h2 {
    font-family: 'eau_doucesans_light';
    font-size: 2.2rem
}

.mosaique-grid {
    display: grid;
    grid-gap: 1rem;
}

.aspectratio-34 {
    aspect-ratio: 3 / 4;
}
.aspectratio-916 {
    aspect-ratio: 9 / 16;
}

.item:hover .item-illu, #viewer-inner .item-illu:hover {
    /* object-fit: cover !important; */
}

.text-viewer {
    margin: 0 auto;
}

/* mosaique */
.item.intercalaire {
    grid-column: 1/3;
}
.item-grid {
    position: relative;
}

.item-cartouche {
    position:absolute;
    bottom: 1rem;
    left:0;
    width: 80%;
    background-color: rgba(255,255,255,0.9);
    padding: 1rem;
    border-bottom: 1px solid #000;
    transition: all 0.5s linear;
}

.item:hover .item-cartouche {
    background-color: #fff; 
}

[data-listingtype="bgnoir"] .item-cartouche {
    background-color: #000;
    color: #fff;

}
[data-listingtype="deux"] .mosaique-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
}
[data-listingtype="deux"] .item-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}
[data-listingtype="deux"] .item-illu {
    aspect-ratio: 4 / 3;
}
[data-listingtype="deux"] .item-description, [data-listingtype="trois"] .item-description {
    display:none;
}
[data-listingtype="trois"] .mosaique-grid {
    grid-gap: 0.5rem;
}
[data-listingtype="trois"] .item-grid {
    grid-gap: 0.5rem; 
}
[data-listingtype="trois"] .item-illu {
    aspect-ratio: 1 / 1;
}


/* deux par rangée, fond tramé */
[data-listingtype="deuxdotted"] .item-description {
    display:none;
}
[data-listingtype="deuxdotted"] .mosaique-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

[data-listingtype="deuxdotted"] .item-cartouche {
    background-color: transparent;
    background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
    background-size: 2px 2px;

}
[data-listingtype="deuxdotted"] .item-illu {
    aspect-ratio: 4 / 3;
}

/* trois par rangée, fond tramé */
[data-listingtype="troisdotted"] .item-description, [data-listingtype="troisdotted"] .item-techspecs {
    display:none;
}
[data-listingtype="troisdotted"] .mosaique-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

[data-listingtype="troisdotted"] .item-cartouche {
    background-color: transparent;
    background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
    background-size: 2px 2px;
}
[data-listingtype="troisdotted"] .item-illu {
    aspect-ratio: 4 / 3;
}

/* deux centré */
[data-listingtype="deuxcenter"] .mosaique-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

[data-listingtype="deuxcenter"] .item-illu {
    aspect-ratio: 4 / 3;
}

[data-listingtype="deuxcenter"] .item-cartouche {
    bottom: 1rem;
    left: 1rem;
    top: 1rem;
    right: 1rem;
    width: auto;
    border-bottom:0;

    background-color: transparent;
    background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
    background-size: 2px 2px;
    opacity: 0;
    display: grid;
    flex-direction: column;
    align-content: center;
    text-align: center;
}

[data-listingtype="deuxcenter"] .item:hover .item-cartouche {
    opacity: 1;
    background-color: transparent;
}

[data-listingtype="deuxcenter"] .item-description, [data-listingtype="deuxcenter"] .item-techspecs {
    display:none;
}
/* trois centré */
[data-listingtype="troiscenter"] .mosaique-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

[data-listingtype="troiscenter"] .item-illu {
    aspect-ratio: 3 / 4;
}

[data-listingtype="troiscenter"] .item-cartouche {
    bottom: 1rem;
    left: 1rem;
    top: 1rem;
    right: 1rem;
    width: auto;
    border-bottom:0;

    background-color: transparent;
    background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
    background-size: 2px 2px;
    opacity: 0;
    display: grid;
    flex-direction: column;
    align-content: center;
    text-align: center;
}

[data-listingtype="troiscenter"] .item:hover .item-cartouche {
    opacity: 1;
    background-color: transparent;
}

[data-listingtype="troiscenter"] .item-description, [data-listingtype="troiscenter"] .item-techspecs {
    display:none;
}

/* quatre centré */
[data-listingtype="quatrecenter"] .mosaique-grid {
    grid-template-columns: 1fr 1fr;
}
[data-listingtype="quatrecenter"] .item-illu {
    aspect-ratio: 3 / 4;
}

[data-listingtype="quatrecenter"] .item-cartouche {
    bottom: 1rem;
    left: 1rem;
    top: 1rem;
    right: 1rem;
    width: auto;
    border-bottom:0;

    background-color: transparent;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 2px 2px;
    opacity: 0;
    display: grid;
    flex-direction: column;
    align-content: center;
    text-align: center;
}

[data-listingtype="quatrecenter"] .item:hover .item-cartouche {
    opacity: 1;
    background-color: rgba(255,255,255,0.5);
}

[data-listingtype="quatrecenter"] .item-description, [data-listingtype="quatrecenter"] .item-techspecs {
    display:none;
}

/* cinq centré */
[data-listingtype="cinqcenter"] .mosaique-grid {
    grid-template-columns: 1fr 1fr;
}
[data-listingtype="cinqcenter"] .item-illu {
    aspect-ratio: 3 / 4;
}

[data-listingtype="cinqcenter"] .item-cartouche {
    bottom: 1rem;
    left: 1rem;
    top: 1rem;
    right: 1rem;
    width: auto;
    border-bottom:0;

    background-color: transparent;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 2px 2px;
    opacity: 0;
    display: grid;
    flex-direction: column;
    align-content: center;
    text-align: center;
}

[data-listingtype="cinqcenter"] .item:hover .item-cartouche {
    opacity: 1;
    background-color: rgba(255,255,255,0.5);
}

[data-listingtype="cinqcenter"] .item-description, [data-listingtype="cinqcenter"] .item-techspecs {
    display:none;
}


/* queries */
@media (min-width: 768px) {
    [data-listingtype="un"] .item-cartouche {
        width: 50%;
    }
    [data-listingtype="deux"] .item-cartouche {
        width: 60%;
    }
    [data-listingtype="trois"] .item-cartouche {
        width: 80%;
    }
    [data-listingtype="quatrecenter"] .mosaique-grid {
        grid-template-columns: 1fr 1fr;
    }
    [data-listingtype="quatrecenter"] .item.intercalaire {
        grid-column: 1/3;
    }
    [data-listingtype="cinqcenter"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    [data-listingtype="cinqcenter"] .item.intercalaire {
        grid-column: 1/4;
    }
}

@media (min-width: 992px) {
    [data-listingtype="trois"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2rem;
    }

    [data-listingtype="un"] .item-cartouche {
        width: 40%;
    }
    [data-listingtype="deux"] .item-cartouche {
        width: 50%;
    }
    [data-listingtype="trois"] .item-cartouche {
        width: 75%;
    }
    .text-viewer {
        max-width: 768px;
    }
    [data-listingtype="deuxcenter"] .item-techspecs {
        display:block;
    }
    [data-listingtype="troiscenter"] .item-techspecs {
        display:block;
    }
    [data-listingtype="quatrecenter"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    [data-listingtype="quatrecenter"] .item.intercalaire {
        grid-column: 1/4;
    }
    [data-listingtype="cinqcenter"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    [data-listingtype="cinqcenter"] .item.intercalaire {
        grid-column: 1/5;
    }
}

@media (min-width: 1200px) {
    [data-listingtype="trois"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2rem;
    }
    [data-listingtype="un"] .item-cartouche {
        width: 30%;
    }
    [data-listingtype="deux"] .item-cartouche {
        width: 40%;
    }
    [data-listingtype="trois"] .item-cartouche {
        width: 50%;
    }
    .text-viewer {
        max-width: 992px;
    }
    [data-listingtype="deuxdotted"] .item-description {
        display:block;
    }
    [data-listingtype="deuxcenter"] .item-description {
        display:block;
    }
    [data-listingtype="troiscenter"] .item-description {
        display:block;
    }
    [data-listingtype="quatrecenter"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    [data-listingtype="quatrecenter"] .item.intercalaire {
        grid-column: 1/5;
    }
    [data-listingtype="cinqcenter"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    [data-listingtype="cinqcenter"] .item.intercalaire {
        grid-column: 1/6;
    }
}