@font-face {
    font-family: directorbold;
    src: url(../fonts/Director-bold.otf);
}

@font-face {
    font-family: director;
    src: url(../fonts/Director-Light-margo.otf);
}

@font-face {
    font-family: adelphereg;
    src: url(../fonts/Adelphe-GerminalRegular.otf);
}

@font-face {
    font-family: amireg;
    src: url(../fonts/Amiamie-Regular.otf);
}

@font-face {
    font-family: amibold;
    src: url(../fonts/Amiamie-BlackRound.otf);
}

@font-face {
    font-family: amilight;
    src: url(../fonts/Amiamie-Light.otf);
}

@font-face {
    font-family: adelphibold;
    src: url(../fonts/Adelphe-GerminalBold.otf);
}


body {
    background-color: rgb(170, 240, 249);
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.fleches {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    color: #ff49e7;
    background-color: white;
    box-shadow: 0 0 7px 6px #ff49e7;
    height:1.5em;

    z-index: 100;
}

.toleft {
    font-size: 2em;
    padding-left: 0.2em;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -0.4em;
    
}

.toleft:hover {
    cursor: pointer;
    text-shadow: 0 0 7px #ff49e7;
}

.toright {
    font-size: 2em;
    padding-right: 0.2em;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -0.4em;
}

.toright:hover {
    cursor: pointer;
    text-shadow: 0 0 7px #ff49e7;
}


.fleches2 {
    position: absolute;
    bottom: 3vh;
    right: 0;
    display: block;
    color: #ff49e7;
    background-color: white;
    box-shadow: 0 0 7px 6px #ff49e7;
    width:2em;

    z-index: 10000000;
}

.totop {
    font-size: 2em;
    margin-right: 2vw;
    padding-right: 10vw;
    
}

.totop:hover {
    cursor: pointer;
    text-shadow: 0 0 7px #ff49e7;
}

.tobottom {
    font-size: 2em;
    margin-right: 2vw;
    padding-right: 10vw;
}

.tobottom:hover {
    cursor: pointer;
    text-shadow: 0 0 7px #ff49e7;
}


.fake {
    visibility: hidden;
}

.itw {
    width: 57%;
    height: 100vh;
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    background-color: white;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: row;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: background-position 0.5s ease-in-out;
}


/* sélectionner tous les éléments qui sont des enfants directs de l'élément avec la classe 'itw'*/
.itw > *:not(.degrade) {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    white-space: normal;
    padding-top: 0;
    padding-left: -2vw;
    box-sizing: border-box;
    overflow-y: auto;
    margin-top: 0;
    top: 0vh;
    padding-bottom: 0;
    margin-bottom: 0;
}

.p-julia, .h1-julia {
    font-family: director;
    font-size: 0.8em;
    line-height: 1.1em;
    color: #8d00d4;
}


.p-julia-brouillon {
    font-family: director;
    font-size: 0.8em;
    line-height: 1.1em;
    color: #8d00d4;
}

.span-julia-brouillon {
    background-color: #c0fbff;
}

.span-julia {
    background-color: #c0fbff;
}

.span-julia-officiel {
    background-color: #cdfcff;
}

.auteur1-julia {
    background-color: #ffe0c3;
}

.auteur2-julia {
    background-color: #ffc9f2;
}

.p-julia {
    font-family: director;
    font-size: 0.8em;
    line-height: 1.1em;
    color: #8d00d4;
    position: fixed;
    top: 1vh;
    right: 0vw;
    width: 55.7%;
    height: 95vh;
    background: #fff;
    box-shadow: 0 0 4px 4px #8d00d4;
    z-index: 999;
    padding: 2px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s ease-out;
    overflow-y: auto;
    bottom: 0;
}


.p-julia-officiel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.p-julia-officiel {
    font-family: director;
    font-size: 0.8em;
    line-height: 1.1em;
    color: #8d00d4;
    position: fixed;
    top: 2.2vh;
    right: 0vw;
    width: 55%;
    height: 96vh;
    background: #fff;
    box-shadow: 0 0 4px 4px #8d00d4;
    z-index: 2000;
    padding: 2px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s ease-out;
    overflow-y: auto;
    bottom: 0;
}

.p-julia-officiel .nom-julia {
    font-family: directorbold;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
}

.p-julia-officiel::-webkit-scrollbar {
    width: 8px;
}

.p-julia-officiel::-webkit-scrollbar-track {
    background: white;
}

.p-julia-officiel::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #9d12e2 47%, white);
    border-radius: 4px;
}

.p-julia-officiel::-webkit-scrollbar-thumb:hover {
    background: #9d12e2;
}

.h1-julia {
    font-family: director;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.p-julia.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Style pour la barre de défilement */

.p-julia::-webkit-scrollbar {
    width: 8px;
}

.p-julia::-webkit-scrollbar-track {
    background: white;
}

.p-julia::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #9d12e2 47%, white);
    border-radius: 4px;
}

.p-julia::-webkit-scrollbar-thumb:hover {
    background: #9d12e2;
}


/*.auteur1-julia {
    font-family: director;
    font-size: 0.9em;
    line-height: 1em;
    color: #8d00d4;
}

.auteur2-julia {
    font-family: director;
    font-size: 0.9em;
    letter-spacing: 0em;
    color: #8d00d4;
    background-color: #ffc9f8;
}*/

/*.auteur1-julia:hover {
    font-family: director;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #ffffff;
    background-color:rgb(167, 249, 255);
   font-family: director;
    font-size: 0.9em;
    line-height: 1.3em;
    color:#8d00d4;
    background-color: #efcdff;
   color: #ff49e7;
    -webkit-text-stroke: 0.2px #8d00d4;
}*/

/*.auteur2-julia:hover {
    font-family: director;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #ffffff;
    background-color: #e3b5f9;
    font-family: director;
    font-size: 0.9em;
    line-height: 1.3em;
    color:#8d00d4;
    background-color: #f8e8ff;
    color: rgb(0, 238, 255);
    -webkit-text-stroke: 0.8px #8d00d4;
}*/

.p-johanna-brouillon {
    font-family: amireg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
}

.span-johanna-brouillon {
    background-color: #ffcae4;
}

.span-p-johanna {
    background-color: #ffcae4;
}

.span-p-johanna-officiel {
    background-color: #ffcae4;
}

.auteur1-johanna {
    background-color: #caffe0;
}

.auteur2-johanna {
    background-color: #e6caff;
}

.p-johanna {
    font-family: amireg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    position: fixed;
    top: 1vh;
    right: 0vw;
    width: 55.7%;
    height: 95vh;
    background: #fff;
    box-shadow: 0 0 4px 4px #8d00d4;
    z-index: 1001;
    padding: 2px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s ease-out;
    overflow-y: auto;
    bottom: 0;
}


.p-johanna-officiel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.p-johanna-officiel {
    font-family: amireg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    position: fixed;
    top: 2vh;
    right: 0vw;
    width: 55%;
    height: 96vh;
    background: #fff;
    box-shadow: 0 0 4px 4px #8d00d4;
    z-index: 2000;
    padding: 2px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s ease-out;
    overflow-y: auto;
    bottom: 0;
}

.p-johanna-officiel .nom-johanna {
    font-family: amibold;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
}

.p-johanna-officiel::-webkit-scrollbar {
    width: 8px;
}

.p-johanna-officiel::-webkit-scrollbar-track {
    background: white;
}

.p-johanna-officiel::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #9d12e2 47%, white);
    border-radius: 4px;
}

.p-johanna-officiel::-webkit-scrollbar-thumb:hover {
    background: #9d12e2;
}

.h1-johanna {
    font-family: amireg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.p-johanna.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Style pour la barre de défilement */

.p-johanna::-webkit-scrollbar {
    width: 8px;
}

.p-johanna::-webkit-scrollbar-track {
    background: white;
}

.p-johanna::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #9d12e2 47%, white);
    border-radius: 4px;
}

.p-johanna::-webkit-scrollbar-thumb:hover {
    background: #9d12e2;
}

.p-latifa, .h1-latifa {
    font-family: adelphereg;
    font-size: 1.5em;
    line-height: 1.3em;
    color: #8d00d4;
}

.p-latifa-brouillon {
    font-family: adelphereg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
}

.span-latifa-brouillon {
    background-color: #fffcc0;
}

.span-latifa {
    background-color: #fffcc0;
}

.span-latifa-officiel {
    background-color: #fffcc0;
}

.auteur1-latifa {
    background-color: #ffc0c0;
}

.auteur2-latifa {
    background-color: #eac0ff;
}

.p-latifa {
    font-family: adelphereg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    position: fixed;
    top: 1vh;
    right: 0vw;
    width: 55.7%;
    height: 95vh;
    background: #fff;
    box-shadow: 0 0 4px 4px #8d00d4;
    z-index: 1002;
    padding: 2px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s ease-out;
    overflow-y: auto;
    bottom: 0;
}


.p-latifa-officiel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.p-latifa-officiel {
    font-family: adelphereg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    position: fixed;
    top: 2.2vh;
    right: 0vw;
    width: 55%;
    height: 96vh;
    background: #fff;
    box-shadow: 0 0 4px 4px #8d00d4;
    z-index: 2000;
    padding: 2px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s ease-out;
    overflow-y: auto;
    bottom: 0;
}

.p-latifa-officiel .nom-latifa {
    font-family: adelphibold;
    font-size: 1em;
    line-height: 1.3em;
    color: #8d00d4;
}

.p-latifa-officiel::-webkit-scrollbar {
    width: 8px;
}

.p-latifa-officiel::-webkit-scrollbar-track {
    background: white;
}

.p-latifa-officiel::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #9d12e2 47%, white);
    border-radius: 4px;
}

.p-latifa-officiel::-webkit-scrollbar-thumb:hover {
    background: #9d12e2;
}

.h1-latifa {
    font-family: adelphereg;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.p-latifa.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Style pour la barre de défilement */

.p-latifa::-webkit-scrollbar {
    width: 8px;
}

.p-latifa::-webkit-scrollbar-track {
    background: white;
}

.p-latifa::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #9d12e2 47%, white);
    border-radius: 4px;
}

.p-latifa::-webkit-scrollbar-thumb:hover {
    background: #9d12e2;
}

.p-latifa-officiel, .p-latifa-brouillon, .p-latifa, .p-johanna-officiel, .p-johanna-brouillon, .p-johanna, .p-julia-officiel, .p-julia-brouillon, .p-julia {
    padding-right: 1.3vw;
    padding-left: 1.2vw;
    padding-top: 0;
}

.itw h1 {
text-decoration: underline;
text-decoration-style: dotted;
text-align: center;
}

.degrade {
    width: 40px;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 57%;
    background-image: linear-gradient(to right, rgb(170, 240, 249) 0%, rgb(170, 240, 249) 20%, white 85%, white 100%);
    z-index: 1;
    pointer-events: none;
}

/* Style pour la barre de défilement */
.itw::-webkit-scrollbar {
    height: 8px;
}

.itw::-webkit-scrollbar-track {
    background: #ff49e7;
}

.itw::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to right, #ff49e7, white 45%, #ff49e7);
    border-radius: 4px;
}

.itw::-webkit-scrollbar-thumb:hover {
    background: white;
}



/*.skew {
    font-family: director;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #8d00d4;
    transform: skew(10deg);
}*/

.biblio-button {
    position: absolute;
    top: 0;
    right: 0.1vw;
    border-style: none;
    background-color: #ff49e7;
    color: #ffffff;
}

#notes {
    font-family: amilight;
    font-size: 9pt;
    color: #ff49e7;
    width: 25vw;
    height: 40vh;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding-top: 1vh;
}

.notes-julia {
    line-height: 1.3em;
    top: 3vh;
    box-shadow: 0 0 3px 3px rgb(234, 51, 203);
    background-color: #ffffff;
    visibility: hidden;
}



.notes-johanna {
    top: 6vh;
    left: 7vw;
    line-height: 1.3em;
    box-shadow: 0 0 3px 3px rgb(234, 51, 203);
    background-color: #ffffff;
    position: relative;
    visibility: hidden;
}

.notes-latifa {
    top: 0.7vh;
    left: 11vw;
    line-height: 1.3em;
    box-shadow: 0 0 3px 3px rgb(234, 51, 203);
    background-color: #ffffff;
    visibility: hidden;
}

.notes-julia h1,
.notes-johanna h1,
.notes-latifa h1 {
    margin-top: 0;
    margin-bottom: 0; 
    margin-left: 0.5vw;
    line-height: 0.9em;
}

.notes-julia p,
.notes-johanna p,
.notes-latifa p {
    margin-left: 0.5vw;
    margin-right: 0.2vw; 
}

/* Style pour la barre de défilement */
#notes::-webkit-scrollbar {
    width: 4px;
}

#notes::-webkit-scrollbar-track {
    background: #ffffff;
}

#notes::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom, white, #ff49e7 45%, white);
    border-radius: 10%;
}

#notes::-webkit-scrollbar-thumb:hover {
    background: white;
}
#notes::-webkit-scrollbar-track {
    background: white;
}

.img-julia {
    position: absolute;
    bottom: 3vh;
    z-index: 1000;
    width: 47%;
    box-shadow: 0 0 3px 3px rgb(234, 51, 203);
    border-radius: 2px;
}

.img-johanna {
    position: absolute;
    bottom: 1vh;
    left: 1.3vw;
    z-index: 1001;
    width: 47%;
    box-shadow: 0 0 3px 3px rgb(234, 51, 203);
    border-radius: 2px;
}

.img-latifa {
    position: absolute;
    bottom: 2.8vh;
    left: 1.8vw;
    z-index: 1002;
    width: 47%;
    box-shadow: 0 0 3px 3px rgb(234, 51, 203);
    border-radius: 2px;
}

.section {
    position: relative;
}

.biblio-julia-list,
.biblio-johanna-list,
.biblio-latifa-list {
    position: fixed;
    width: 15vw;
    height: 43vh;
    top: 2vh;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 5px 5px rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    visibility: hidden;
    z-index: 2;
    margin: 0 0 1em 1em;
    shape-outside: margin-box;
    list-style: none;
    color: #8d00d4;
}

.section p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.biblio-julia, .biblio-johanna, .biblio-latifa {
    display: none;
}


.msg1 {
    width: 10vw;
    object-fit: cover;
    position: absolute;
    top: 2vh;
    left: 5vw;
    z-index: 2001;
    pointer-events: none;
    transition: opacity 0.5s;
    opacity: 0;
}

.msg1.visible {
    opacity: 1;
}