/* ==================================================
   PAGE PROJET — MOBILE
================================================== */

.projet-page{
    width:100%;

    padding:40px 20px 80px;

    overflow:visible;
}


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

.projet-heading{
    width:100%;

    margin:0 auto 35px;

    text-align:center;
}


.projet-heading h1{
    margin:0;

    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:42px;
    line-height:1;
}


/*
 * Titre destiné uniquement
 * à la colonne desktop.
 */

.projet-infos-title{
    display:none;
}



/* ==================================================
   LAYOUT
================================================== */

.projet-layout{
    width:100%;
    max-width:1050px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:40px;

    overflow:visible;
}



/* ==================================================
   GALERIE
================================================== */

.projet-galerie{
    width:90%;
    max-width:700px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    overflow:visible;
}


.projet-image{
    display:block;

    width:100%;

    line-height:0;

    cursor:zoom-in;
}


.projet-image img{
    display:block;

    width:100%;
    height:auto;

    max-width:100%;
}



/* ==================================================
   VIDÉO
================================================== */

.projet-video{
    width:100%;
    aspect-ratio:16 / 9;
}

.projet-video iframe{
    display:block;

    width:100%;
    height:100%;

    border:0;
}


/* ==================================================
   TEXTE
================================================== */

.projet-infos{
    width:100%;

    overflow:visible;
}


.projet-infos-inner p{
    margin:0 0 18px;

    color:#1e1553;

    font-size:17px;
    line-height:1.25;
    font-weight:400;
}

.projet-infos-inner ul,
.projet-infos-inner ol,
.projet-infos-inner li{
    font-weight:400;
}


.projet-infos-inner ul{
    margin:0 0 18px;

    padding-left:20px;

    color:#1e1553;

    font-size:17px;
    line-height:1.25;
}


.projet-infos-inner li{
    margin-bottom:7px;
}

.projet-editeur{
    margin-top:30px !important;
}



/* ==================================================
   NAVIGATION BAS DE PAGE
================================================== */

.projet-navigation{
    width:100%;
    max-width:1050px;

    margin:70px auto 0;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:25px;

    text-align:center;
}



/* PRÉCÉDENT / SUIVANT */

.projet-nav{
    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:22px;
    line-height:1.1;

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


.projet-nav:hover{
    color:#36e983;

    transform:scale(1.05);
}



/* RETOUR AUX PROJETS */

.projet-nav-retour{
    color:#ff4381;

    font-family:'Tovari Sans', sans-serif;
    font-size:22px;
    line-height:1.1;

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


.projet-nav-retour:hover{
    color:#36e983;

    transform:scale(1.05);
}

/* ==================================================
   ICÔNE RETOUR AUX PROJETS
================================================== */

.projet-nav-retour{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.projet-nav-retour-icone{
    display:grid;

    grid-template-columns:repeat(2, 8px);
    grid-template-rows:repeat(2, 8px);

    gap:3px;
}

.projet-nav-retour-icone i{
    display:block;

    width:8px;
    height:8px;

    background:currentColor;

    border-radius:2px;
}





















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


/* Navigation mobile : flèches en haut, retour en dessous */
@media (max-width:599px) {
    .projet-navigation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; row-gap:28px; align-items:start; }
    .projet-nav-prev { grid-column:1; grid-row:1; justify-self:start; text-align:left; }
    .projet-nav-next { grid-column:2; grid-row:1; justify-self:end; text-align:right; }
    .projet-nav-retour { grid-column:1 / -1; grid-row:2; justify-self:center; }
}

@media(min-width:600px){

    .projet-page{
        padding-left:30px;
        padding-right:30px;
    }


    .projet-galerie{
        width:85%;
        max-width:650px;
    }



    /* ==================================================
       NAVIGATION
    ================================================== */

    .projet-navigation{
        max-width:1000px;

        margin-top:90px;

        display:grid;

        grid-template-columns:
            1fr
            auto
            1fr;

        align-items:center;

        gap:30px;
    }


    .projet-nav-prev{
        justify-self:start;

        text-align:left;
    }


    .projet-nav-retour{
        justify-self:center;

        padding:0 20px;
    }


    .projet-nav-next{
        justify-self:end;

        text-align:right;
    }

}



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

@media(min-width:1040px){

    .projet-page{
        padding:60px 40px 120px;
    }



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

    /*
     * On retire le titre du haut uniquement
     * sur desktop.
     */

    .projet-heading{
        display:none;
    }


    /*
     * Et on affiche celui placé
     * dans la colonne sticky.
     */

    .projet-infos-title{
        display:block;

        margin:0 0 30px;

        color:#772faf;

        font-family:'Tovari Sans', sans-serif;
        font-size:42px;
        line-height:1;
    }



    /* ==================================================
       LAYOUT
    ================================================== */

    .projet-layout{
        max-width:1100px;

        display:grid;

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

        gap:60px;

        align-items:start;

        overflow:visible;
    }



    /* ==================================================
       GALERIE
    ================================================== */

    .projet-galerie{
        width:100%;
        max-width:none;

        margin:0;

        min-width:0;

        gap:10px;

        overflow:visible;
    }


    .projet-image img{
        width:100%;
        height:auto;

        max-width:100%;
    }



    /* ==================================================
       TEXTE STICKY
    ================================================== */

    .projet-infos{
        position:sticky;

        top:30px;

        align-self:start;

        width:100%;
        height:max-content;

        overflow:visible;
    }

}