@charset "UTF-8";

/* ==================================================
   BASE
================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background: #ffffff;
    font-family: "Times New Roman", Times, serif;
    overflow-x: hidden;
}


/* ==================================================
   CONTENEUR
================================================== */

.conteneur {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;

    padding: 300px 20px 300px;

    display: grid;
    grid-template-columns: repeat(4, 260px);

    justify-content: center;
    align-items: start;

    column-gap: 15px;
    row-gap: 30px;
}


/* ==================================================
   GALERIES
================================================== */

.galerie {
    position: relative;
    display: block;

    width: 240px;
    max-width: 100%;

    padding: 5px;

    background: #ffffff;
    text-decoration: none;

    overflow: hidden;
}


/* ==================================================
   IMAGES
================================================== */

.galerie img {
    display: block;

    width: 100%;
    height: auto;

    border: none;
}


/* ==================================================
   TITRES
================================================== */

.titre {
    position: static;
    display: block;

    width: 100%;

    padding: 8px 2px 3px;

    text-align: center;

    background: #ffffff;
    color: #000000;

    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    letter-spacing: 1px;
}


/* ==================================================
   LANGUES
================================================== */

.titre span {
    display: none;
}

.titre span:first-child {
    display: inline;
}


/* ==================================================
   GIF RETOUR
================================================== */

.retour {
    grid-column: 1 / -1;

    width: 100%;

    margin: 10px auto 20px;

    text-align: center;
}

.retour img {
    display: block;

    width: 25px;
    max-width: 25px;

    height: auto;

    margin: 0 auto;
}


/* ==================================================
   SMARTPHONE
================================================== */

@media screen and (max-width: 700px) {

    .conteneur {
        width: 100%;
        max-width: 100%;

        padding: 20px 10px;

        display: grid;
        grid-template-columns: minmax(0, 165px);

        column-gap: 0;
        row-gap: 30px;

        justify-content: center;
        align-items: start;
    }

    .galerie {
        width: 165px;
        max-width: 165px;
        padding: 5px;

        justify-self: center;
    }

    .galerie img {
        display: block;
        width: 100%;
        height: auto;
    }

    .titre {
        padding: 7px 1px 2px;
        font-size: 14px;
        letter-spacing: 0.3px;
    }

    .en-cours {
        grid-column: 1 / -1;

        width: 165px;
        max-width: 165px;
        padding: 5px;

        justify-self: center;
    }

    .retour {
        grid-column: 1 / -1;
        width: 100%;
        margin: 5px auto 15px;
        text-align: center;
    }

    .retour img {
        width: 25px;
        max-width: 25px;
        margin: 0 auto;
    }
}


/* ==================================================
   PETITS SMARTPHONES
   CORRECTION : UNE SEULE COLONNE
================================================== */

@media screen and (max-width: 400px) {

    .conteneur {
        padding: 15px 8px;

        grid-template-columns: minmax(0, 145px);

        column-gap: 0;
        row-gap: 25px;
    }

    .galerie {
        width: 145px;
        max-width: 145px;

        padding: 4px;
    }

    .titre {
        font-size: 12px;
        padding-top: 6px;
    }

    .en-cours {
        width: 145px;
        max-width: 145px;

        padding: 4px;
    }

    .retour img {
        width: 25px;
        max-width: 25px;
    }
}


/* ==================================================
   DIAPORAMA PEINTURES
   IMAGES 1 À 5
   CYCLE DE 10 SECONDES
================================================== */

.galerie-peintures .diaporama-peintures {
    position: relative;
    display: block;

    width: 100%;

    overflow: hidden;
}

.galerie-peintures .diaporama-peintures .photo {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    opacity: 0;

    animation: fonduPeintures 10s linear infinite;
}

/* Première image : définit la hauteur */

.galerie-peintures .diaporama-peintures .photo1 {
    position: relative;

    top: auto;
    left: auto;

    height: auto;
}

/* Décalage des images */

.galerie-peintures .diaporama-peintures .photo1 {
    animation-delay: 0s;
}

.galerie-peintures .diaporama-peintures .photo2 {
    animation-delay: 2s;
}

.galerie-peintures .diaporama-peintures .photo3 {
    animation-delay: 4s;
}

.galerie-peintures .diaporama-peintures .photo4 {
    animation-delay: 6s;
}

.galerie-peintures .diaporama-peintures .photo5 {
    animation-delay: 8s;
}

@keyframes fonduPeintures {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* ==================================================
   DIAPORAMA CÉRAMIQUES
   IMAGES 6 À 10
================================================== */

.galerie-ceramiques .diaporama-ceramiques {
    position: relative;
    display: block;

    width: 100%;

    overflow: hidden;
}

.galerie-ceramiques .diaporama-ceramiques .photo {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    opacity: 0;

    animation: fonduCeramiques 10s linear infinite;
}

/* Première image : définit la hauteur */

.galerie-ceramiques .diaporama-ceramiques .photo1 {
    position: relative;

    top: auto;
    left: auto;

    height: auto;
}

/* Décalage des images */

.galerie-ceramiques .diaporama-ceramiques .photo1 {
    animation-delay: 0s;
}

.galerie-ceramiques .diaporama-ceramiques .photo2 {
    animation-delay: 2s;
}

.galerie-ceramiques .diaporama-ceramiques .photo3 {
    animation-delay: 4s;
}

.galerie-ceramiques .diaporama-ceramiques .photo4 {
    animation-delay: 6s;
}

.galerie-ceramiques .diaporama-ceramiques .photo5 {
    animation-delay: 8s;
}

@keyframes fonduCeramiques {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* ==================================================
   DIAPORAMA TEXTILES
   IMAGES 11 À 15
================================================== */

.galerie-textiles .diaporama-textiles {
    position: relative;
    display: block;

    width: 100%;

    overflow: hidden;
}

.galerie-textiles .diaporama-textiles .photo {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    opacity: 0;

    animation: fonduTextiles 10s linear infinite;
}

/* Première image : définit la hauteur */

.galerie-textiles .diaporama-textiles .photo1 {
    position: relative;

    top: auto;
    left: auto;

    width: 100%;
    height: auto;
}

/* Délais des textiles */

.galerie-textiles .diaporama-textiles .photo1 {
    animation-delay: 0s;
}

.galerie-textiles .diaporama-textiles .photo2 {
    animation-delay: 2s;
}

.galerie-textiles .diaporama-textiles .photo3 {
    animation-delay: 4s;
}

.galerie-textiles .diaporama-textiles .photo4 {
    animation-delay: 6s;
}

.galerie-textiles .diaporama-textiles .photo5 {
    animation-delay: 8s;
}

@keyframes fonduTextiles {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* ==================================================
   EXPOSITIONS
   ANIMATION DES LETTRES
================================================== */

/* Emplacement de l'ancienne image Pierre.jpg */

.galerie-expositions {
    display: block;
}

.galerie-expositions .animation-expositions {
    width: 100%;
    aspect-ratio: 3 / 2;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    /* Descend les lettres de 15 pixels */
    padding-top: 50px;
}

.galerie-expositions .mot-exposition {
    display: block;
    width: 100%;
    text-align: center;
}

.galerie-expositions .mot-exposition > span {
    display: none;

    white-space: nowrap;

    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    letter-spacing: 1.5px;

    /* Couleur bordeaux */
    color: #8b2635;
}

/* Première langue visible au chargement */

.galerie-expositions .mot-exposition > span:first-child {
    display: inline-block;
}

/* Animation individuelle de chaque lettre */

.galerie-expositions .lettre-exposition {
    display: inline-block !important;

    opacity: 0;

    animation: apparitionLettre 0.65s ease forwards;
}

@keyframes apparitionLettre {

    0% {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(12px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-2px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}


/* ==================================================
   EXPOSITIONS — SMARTPHONE
================================================== */

@media screen and (max-width: 700px) {

    .galerie-expositions .mot-exposition > span {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
}


/* ==================================================
   EXPOSITIONS — PETITS SMARTPHONES
================================================== */

@media screen and (max-width: 400px) {

    .galerie-expositions .mot-exposition > span {
        font-size: 14px;
        letter-spacing: 0.3px;
    }
}