.accueil {
    position: relative;

    overflow: hidden;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
    display: flex;
}
.accueil-abs{
    position: absolute;
    inset: 0px;    
}
.accueil-abs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(40, 97, 189, 0.479); /* bleu avec opacité */
  pointer-events: none;
}
.img-cover{
    object-fit: cover;
    width: 100%;
    height: 100%;

    opacity: 0.5;

    max-width: 100%;
    display: block;
}


.main-title{
    position: relative;

    text-align: center;
    z-index: 10;

    max-width: 48rem;
    padding: 0 1.5rem;
    margin: 0 auto;
}
.slogan-txt{
    font-family: var(--font-accent);
    color: var(--gold-light);

    letter-spacing: .3em;
    text-transform: uppercase;
}
.title-as{
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 300;

    color: rgba(var(--cream));

    line-height: 1;
    margin-bottom: 2rem;
}
.trait-as{
    background-color: var(--ring);
    margin: 0 auto 2rem auto;

    width: 4rem;
    height: 1px;
}
.slogan-wel{
    font-size: 1.5rem;
    line-height: 2rem;

    font-family: var(--font-accent);
    font-style: italic;
    color: rgba(var(--cream), 0.8);
}

.container-scroll{
    position: absolute;

    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) 
    skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    left: 50%;
    bottom: 2rem;
}
.lien-scroll{
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    
    color: rgba(var(--cream), 0.6);
    text-decoration: inherit;
}
.corps-scroll{
    display: flex;

    padding-top: .25rem;
    justify-content: center;
    align-items: flex-start;

    border: solid 1px rgba(var(--cream), 0.6);
    border-radius: 9999px;

    width: 1.25rem;
    height: 2rem;
}
.btn-centre{
    background-color: rgba(var(--cream), 0.6);
    border-radius: 9999px;

    animation: bounce 1s infinite;

    width: .25rem;
    height: .5rem;
}

/*Autre création*/
.txt-ecrit, .txt-musique{
    font-family: var(--font-body);
    color: var(--muted-foreground);
    line-height: 1.625;
    font-size: .875rem;
    margin: 0 20%;
}
.ecrit-galerie, .musique-galerie{
    column-count: 3;
    column-gap: 1.5rem;
    margin: 0 20%;
}
.text-video > h2{
    font-family: var(--font-display);
    color: var(--foreground);
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* ratio 16:9 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100%;
}

/*SHOP*/
.shop{
    padding: 4rem 0;
    background-color: var(--background);    
}
.title-shop{
    text-align: center;
    margin-bottom: 4rem;    
}
.container-shop{
    margin: 0 20%;
}
.txtshop{
    font-family: var(--font-accent);
    color: var(--accent);

    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .3em;

    text-transform: uppercase;
    margin-bottom: 1rem;    
}
.titleshop{
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;

    line-height: 1;
    color: var(--foreground);
    margin-bottom: 2rem;    
}
.txt-shop > p {
    text-align: center;
}