.creditsBox{
    width:700px;
    max-width:calc(100% - 40px);
    height:450px;

    margin:20px 0 20px 20px;

    overflow:hidden;
    position:relative;
    box-sizing:border-box;

    background:rgba(0,0,0,0.50);
    border-radius:15px;
    box-shadow:0 0 25px #000;
}

.creditsScroll{

    position:absolute;

    width:100%;

    font-style:italic;
    color:#c885de;
    text-align:center;

    animation:credits 25s linear infinite;

    box-sizing:border-box;
}

/* NOUVEAU */

.creditsContenu{

    padding:40px;
    box-sizing:border-box;
}

.creditsScroll h2{

    color:#d8cef2;
    font-size:34px;

    margin-bottom:40px;
}

.creditsScroll h3{

    color:#89CFF0;

    margin-top:40px;
    margin-bottom:10px;

    font-size:22px;
}

.creditsScroll p{

    font-size:18px;
    line-height:1.7;
}

@keyframes credits{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-50%);

    }

}


/* =====================================
   TEXTE HORIZONTAL EN BAS DE LA PAGE
   ===================================== */

.texteHorizontalBox{
    position:relative;
    width:100%;
    height:32px;

    margin-top:30px;

    overflow:hidden;
    white-space:nowrap;

    background:rgba(0,0,0,0.0);

    border-top:1px solid rgba(180,120,220,0.30);
    border-bottom:1px solid rgba(180,120,220,0.30);

    box-sizing:border-box;
}

.texteHorizontalScroll{
    position:absolute;

    display:inline-block;

    padding-left:100%;

    color:#eeeeee;

    font-family:Georgia, "Times New Roman", serif;
    font-size:12px;
    font-style:italic;
    line-height:30px;

    animation:texteHorizontal 75s linear infinite;

    will-change:transform;
}

.texteHorizontalScroll span{
    display:inline;
}

.texteHorizontalScroll .separation{
    display:inline-block;

    margin:0 30px;

    color:#d8a2ff;
    font-style:normal;
}


/* Pause lorsque la souris passe dessus */

.texteHorizontalBox:hover .texteHorizontalScroll{
    animation-play-state:paused;
}


/* Défilement de droite vers la gauche */

@keyframes texteHorizontal{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100%);
    }
}




.texteHorizontalBox2{
    position:relative;
    width:100%;
    height:32px;

    margin-top:30px;

    overflow:hidden;
    white-space:nowrap;

    background:rgba(0,0,0,0.0);

    border-top:1px solid rgba(180,120,220,0.30);
    border-bottom:1px solid rgba(180,120,220,0.30);

    box-sizing:border-box;
}

.texteHorizontalScroll2{
    position:absolute;

    display:inline-block;

    padding-left:100%;

    color:#eeeeee;

    font-family:Georgia, "Times New Roman", serif;
    font-size:8px;
    font-style:italic;
    line-height:30px;

    animation:texteHorizontal2 75s linear infinite;

    will-change:transform;
}

.texteHorizontalScroll2 span{
    display:inline;
}

.texteHorizontalScroll2 .separation{
    display:inline-block;

    margin:0 30px;

    color:#d8a2ff;
    font-style:normal;
}


/* Pause lorsque la souris passe dessus */

.texteHorizontalBox2:hover .texteHorizontalScroll2{
    animation-play-state:paused;
}


/* Défilement de droite vers la gauche */

@keyframes texteHorizontal2{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100%);
    }
}





/* Smartphone */

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

    /* AJOUT : adaptation de la boîte des crédits */

    .creditsBox{
        width:calc(100% - 20px);
        max-width:none;
        height:280px;

        margin:15px 10px;

        border-radius:10px;
        box-shadow:0 0 15px #000;
    }

    .creditsScroll{
        padding:20px;
    }

    .creditsScroll h2{
        font-size:23px;
        margin-bottom:25px;
    }

    .creditsScroll h3{
        margin-top:25px;
        margin-bottom:8px;
        font-size:16px;
    }

    .creditsScroll p{
        font-size:13px;
        line-height:1.5;
    }


    .texteHorizontalBox{
        height:28px;
    }

    .texteHorizontalScroll{
        font-size:11px;
        line-height:26px;
        animation-duration:90s;
    }

    .texteHorizontalScroll .separation{
        margin:0 20px;
    }
}


.textePoetique{
    max-width:900px;
    margin:40px auto;

    color:#CC99FF;

    font-family:"Book Antiqua", Palatino, serif;

    font-size:18px;
    line-height:1.9;

    text-align:justify;
}

.textePoetique p{
    margin-bottom:28px;
    text-indent:2em;
}

.textePoetique em{
    font-style:italic;
}

.textePoetique strong{
    font-weight:bold;
}

.photoOvale{
    width:280px;
    height:380px;
    object-fit:cover;

    border-radius:50% / 38%;

    border:3px solid #cc99ff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.7),
        0 0 18px rgba(204,153,255,.45);

    background:#000;
}

.ovaleFlip{

    width:280px;
    height:380px;

    perspective:1200px;

    cursor:pointer;

    margin:auto;
}

.ovaleInterieur{

    position:relative;

    width:100%;
    height:100%;

    transition:transform .8s;

    transform-style:preserve-3d;
}

.ovaleFlip.retourne .ovaleInterieur{

    transform:rotateY(180deg);
}

.face{

    position:absolute;

    width:100%;
    height:100%;

    backface-visibility:hidden;
}

.face img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50% / 35%;

    border:2px solid #cc99ff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.6),
        0 0 15px rgba(204,153,255,.35);
}

.arriere{

    transform:rotateY(180deg);
}







.ovaleTroisPhotos{
    position:relative;
    width:280px;
    height:380px;

    margin:auto;
    cursor:pointer;

    perspective:1200px;
}

.ovalePhoto{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;
    border-radius:50%;

    border:3px solid #cc99ff;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.70),
        0 0 18px rgba(204,153,255,0.45);

    opacity:0;
    transform:rotateY(180deg);

    transition:
        transform 0.8s ease,
        opacity 0.4s ease;

    pointer-events:none;
}

.ovalePhoto.active{
    opacity:1;
    transform:rotateY(0deg);
}