/* ==================================================
   ACCUEIL — HORS HERO
================================================== */

.accueil{
    width:100%;
    margin:0;
    padding:0;
}

/* ==================================================
   PRÉSENTATION
================================================== */

.accueil-presentation{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:80px 25px 100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
}

.accueil-presentation-image{
    width:100%;
    max-width:350px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.accueil-presentation-image img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:350px;
}

.accueil-presentation-texte{
    max-width:600px;
    text-align:center;
}

.accueil-presentation-texte h1{
    margin:0 0 20px;
    color:#772faf;
    font-family:'Tovari Sans', sans-serif;
    font-size:40px;
    line-height:1;
}

.accueil-presentation-texte p{
    margin:0 0 15px;
    color:#1e1553;
    font-size:18px;
    line-height:1.3;
}

.accueil-presentation-texte a{
    display:inline-block;
    margin-top:10px;
    color:#ff4381;
    font-family:'Tovari Sans', sans-serif;
    font-size:21px;
    transition:color .2s ease, transform .2s ease;
}

.accueil-presentation-texte a:hover{
    color:#36e983;
    transform:scale(1.05) rotate(-2deg);
}

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

.accueil-projets h2,
.accueil-boutique h2{
    margin:0 0 35px;
    color:#772faf;
    font-family:'Tovari Sans', sans-serif;
    font-size:38px;
    line-height:1;
    text-align:center;
}

/* ==================================================
   DERNIERS PROJETS
================================================== */

.accueil-projets{
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:40px 0;
    overflow:hidden;
    background:
        url("../img/accueil-projets-bg.png")
        repeat-x
        center top / auto 100%;
    text-align:center;
}

.accueil-projets h2{
    margin:0 0 25px;
}

.accueil-projets-slider{
    position:relative;
    width:100%;

    padding:25px 0;
    margin:-25px 0;

    overflow:hidden;
}
.accueil-projets-track{
    display:flex;
    align-items:stretch;
    gap:15px;
    width:max-content;
    padding:0;
    transform:translateX(0);
}

.accueil-projet{
    position:relative;
    z-index:1;
    display:block;
    flex:0 0 auto;
    height:250px;
    width:auto;
    overflow:hidden;
    border-radius:20px;
    transition:transform .3s cubic-bezier(.22,1.4,.36,1);
}

.accueil-projet:hover{
    z-index:2;
    transform:scale(1.06) rotate(-2deg);
}

/*
 L'image garde son ratio naturel.
 La largeur du <a> est donc déterminée par l'image.
*/
.accueil-projet img{
    display:block;
    width:auto;
    height:100%;
    max-width:none;
    object-fit:contain;
    border-radius:20px;
}

.accueil-projet-overlay{
    display:none;
}

.accueil-projets-prev,
.accueil-projets-next{
    position:absolute;
    z-index:10;
    top:50%;
    padding:0;
    border:0;
    background:none;
    color:#ff4381;
    font-family:'Tovari Sans', sans-serif;
    font-size:50px;
    cursor:pointer;
    transform:translateY(-50%);
    transition:color .2s ease, transform .2s ease;
}

.accueil-projets-prev{ left:20px; }
.accueil-projets-next{ right:20px; }

.accueil-projets-prev:hover{
    color:#ff4381;
    transform:translateY(-50%) scale(1.2) rotate(-3deg);
}

.accueil-projets-next:hover{
    color:#36e983;
    transform:translateY(-50%) scale(1.2) rotate(3deg);
}

.accueil-projets-actions{
    margin-top:35px;
    text-align:center;
}

.accueil-projets-actions .accueil-section-link{
    margin-top:0;
}

/* ==================================================
   LIENS SECTIONS
================================================== */

.accueil-section-link{
    display:inline-block;
    margin-top:35px;
    color:#ff4381;
    font-family:'Tovari Sans', sans-serif;
    font-size:22px;
    transition:color .2s ease, transform .2s ease;
}

.accueil-section-link:hover{
    color:#36e983;
    transform:scale(1.06) rotate(-2deg);
}

/* ==================================================
   BOUTIQUE
================================================== */

.accueil-boutique{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:40px 20px;
    text-align:center;
}

/* MOBILE : 1 produit par ligne */
.accueil-boutique-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

.accueil-produit:nth-child(n+3){
    display:none;
}

.accueil-produit{
    display:flex;
    flex-direction:column;
    min-width:0;
    color:#1e1553;
    text-align:left;
    transition:transform .25s cubic-bezier(.22,1.4,.36,1);
}

.accueil-produit:hover{
    transform:translateY(-5px) rotate(-1deg);
}

.accueil-produit-image{
    width:100%;
    margin-bottom:10px;
    overflow:hidden;
    border-radius:15px;
    background:#fff;
}

.accueil-produit-image img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    transition:transform .3s ease;
}

.accueil-produit:hover img{
    transform:scale(1.04);
}

/*
 Structure prévue :
 <span class="accueil-produit-nom">
     La Cascade,
     <span>ou félicité d’un ennui solitaire</span>
 </span>
*/
.accueil-produit-nom{
    display:block;
    color:#23166e;
    font-family:'Tovari Sans', sans-serif;
    font-size:30px;
    line-height:.95;
}

.accueil-produit-nom .product-title-subtitle{
    display:block;
    margin-top:3px;
    font-family:'Nunito Sans', sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.05;
}

.accueil-produit-prix{
    margin-top:6px;
    color:#1e1553;
    font-size:15px;
}












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

@media(min-width:600px){

    .accueil-projet{
        height:300px;
    }

    /* 4 produits par ligne à partir de la tablette */
    .accueil-boutique-grid{
        grid-template-columns:repeat(4, 1fr);
        gap:20px;
    }

    .accueil-produit:nth-child(n+3){
        display:flex;
    }

}

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

@media(min-width:1040px){

    .accueil-presentation{
        max-width:1100px;
        display:grid;
        grid-template-columns:400px 1fr;
        gap:80px;
        align-items:center;
    }

    .accueil-presentation-image{
        max-width:400px;
    }

    .accueil-presentation-image img{
        max-height:450px;
    }

    .accueil-presentation-texte{
        max-width:600px;
        text-align:left;
    }

    .accueil-presentation-texte h1{
        font-size:56px;
    }

    .accueil-presentation-texte p{
        font-size:20px;
    }

    .accueil-projets h2{
        font-size:50px;
        color:#fff;
    }

    .accueil-projets-track{
        gap:20px;
        padding:0;
    }

    .accueil-projet{
        height:400px;
    }

    .accueil-projets-prev{ left:35px; }
    .accueil-projets-next{ right:35px; }

    .accueil-boutique{
        max-width:1200px;
    }

     .accueil-produit-nom .product-title-main{
        font-size:28px;
    }

    .accueil-produit-nom .product-title-subtitle{
        font-size:14px;
    }

}

.accueil-projets button, .accueil-carousel button { -webkit-tap-highlight-color:transparent; }