/* ==================================================
   PAGE PROJETS
================================================== */

.projets-page{
    width:100%;
}


/* ==================================================
   FILTRES
================================================== */

.projets-page .projets-filtres{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    gap:10px;

    width:100%;
    padding:0 20px;

    visibility:visible;
    opacity:1;

    transform:none;
}


/* ==================================================
   BOUTON FILTRE
================================================== */

.projets-page .projets-filtre{
    position:relative;

    display:block;

    padding:8px 14px 14px;

    border:0;

    background:none;
    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:18px;
    line-height:1.2;

    cursor:pointer;

    visibility:visible;
    opacity:1;

    transition:
        color .2s ease,
        transform .2s ease;
}


.projets-page .projets-filtre:hover{
    color:#36e983;

    transform:
        scale(1.05)
        rotate(2deg);
}


/* ==================================================
   FILTRE ACTIF
================================================== */

.projets-page .projets-filtre.active{
    color:#ff4381;
}


/*
 * Petit rectangle rose
 * comme l'item actif du menu principal.
 */

.projets-page .projets-filtre.active::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:3px;

    width:35px;
    height:5px;

    background:#ff4381;
    border-radius:10px;

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* ==================================================
   MASONRY
================================================== */

.projets-page .projets-masonry{
    position:relative;

    width:100%;

    padding:20px;
}


/* ==================================================
   PROJET
================================================== */

.projets-page .projets-masonry .projet-item{
    position:absolute;

    display:block;

    overflow:hidden;
}


/* ==================================================
   IMAGE
================================================== */

.projets-page .projets-masonry .projet-item img{
    display:block;

    width:100%;
    height:auto;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1);
}


/* ==================================================
   VOILE AU SURVOL
================================================== */

.projets-page .projets-masonry .projet-item::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:#fffdef;

    opacity:0;

    transition:
        opacity .3s ease;

    pointer-events:none;
}


/* ==================================================
   TITRE PROJET
================================================== */

.projets-page .projets-masonry .projet-titre{
    position:absolute;
    inset:0;

    z-index:2;

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

    padding:20px;

    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:26px;
    line-height:1.1;
    text-align:center;

    opacity:0;

    transform:scale(.95);

    transition:
        opacity .3s ease,
        transform .3s cubic-bezier(.22,1,.36,1);

    pointer-events:none;
}


/* ==================================================
   HOVER PROJET
================================================== */

.projets-page .projets-masonry .projet-item:hover::after{
    opacity:.85;
}


.projets-page .projets-masonry .projet-item:hover .projet-titre{
    opacity:1;

    color:#772faf !important;

    transform:scale(1);
}


.projets-page .projets-masonry .projet-item:hover img{
    transform:scale(1.03);
}


/* ==================================================
   ANIMATION — APPARITION
================================================== */

.projets-page .projets-masonry .projet-in{
    opacity:0;

    transform:
        translateY(20px)
        scale(.97);
}


.projets-page .projets-masonry .projet-in.projet-in-active{
    opacity:1;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .4s ease,
        transform .4s cubic-bezier(.22,1,.36,1);
}


/* ==================================================
   AUCUN PROJET
================================================== */

.projets-page .projets-vide{
    width:100%;

    margin:40px 0;

    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:20px;

    text-align:center;
}


/* ==================================================
   TABLETTE
================================================== */

@media(min-width:600px){

    .projets-page .projets-filtre{
        font-size:24px;
    }

}


/* ==================================================
   DESKTOP
================================================== */

@media(min-width:1040px){

    .projets-page .projets-filtres{
        padding-top:40px;

        gap:25px;
    }


    .projets-page .projets-masonry{
        max-width:1400px;

        margin:0 auto;
        padding:40px;
    }

}
/* Hauteur stable pendant le téléchargement des vignettes */

.projets-page .projets-masonry .projet-in.projet-in-active {
    transition-delay: var(--gallery-delay, 0ms);
}
@media (prefers-reduced-motion:reduce) {
    .projets-page .projets-masonry .projet-in.projet-in-active { transition:none; }
}

/* Sans JS : les projets restent dans le flux, pas empilés. */
.projets-page .projets-masonry:not(.gallery-measuring):not(.gallery-layout-ready){
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
    height:auto !important;
}
.projets-page .projets-masonry:not(.gallery-measuring):not(.gallery-layout-ready) .projet-item{
    position:relative;
    width:auto !important;
    left:auto !important;
    top:auto !important;
}
@media(min-width:600px){
    .projets-page .projets-masonry:not(.gallery-measuring):not(.gallery-layout-ready){grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1040px){
    .projets-page .projets-masonry:not(.gallery-measuring):not(.gallery-layout-ready){grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
}
.projets-page .projets-masonry.gallery-measuring .projet-item{visibility:hidden;}

/* Empêche les projets des catégories inactives de flasher avant le filtre JS.
   La grille reste mesurable ; seuls ses éléments attendent le premier layout. */
@media (scripting: enabled) {
    .projets-page .projets-masonry:not(.gallery-layout-ready) .projet-item {
        visibility: hidden;
    }
}