/*GENERAL*/
/*PREMIERE ANIMATION*/
/*GESTION VUES*/
/*VUE DOCUFICTION*/
/*VUE INTERVIEW*/
/*MENU HAUT*/

/*GENERAL*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
}

body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: syneregular, Arial, Helvetica, sans-serif;
    color: #333333;
    position: relative;
    background-color: white;
}

a {
    text-decoration: none;
    font-family: syneregular, Arial, Helvetica, sans-serif;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

@font-face {
    font-family: 'syneregular';
    src: url('/medias/fonts/syne-variablefont_wght-webfont.woff2') format('woff2'),
        url('/medias/fonts/syne-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'azo_sansregular';
    src: url('/medias/fonts/rui_abreu_-_azosans-regular-webfont.woff2') format('woff2'),
        url('/medias/fonts/rui_abreu_-_azosans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'azo_sansblack';
    src: url('/medias/fonts/rui_abreu_-_azosans-black-webfont.woff2') format('woff2'),
        url('/medias/fonts/rui_abreu_-_azosans-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

h2 {
    display: block;
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e9ddce;
    font-size: clamp(14px, 5vw, 120px);
    font-family: azo_sansblack;
    text-shadow: 0.75vw 0.75vw 1vw rgba(0, 0, 0, 0.1);
}

h3 {
    color: #E4563D;
    font-family: azo_sansblack;
    font-size: 50px;
    margin-bottom: 20px;
}

h4 {
    font-family: azo_sansblack;
    font-size: 35px;
    margin-bottom: 10px;
    text-align: center;
}

h5 {
    font-family: azo_sansblack;
    font-size: 20px;
    margin-bottom: 5px;
}

p {
    font-size: 18px;
    line-height: 1.2;
    text-align: justify;
}

/*PREMIERE ANIMATION*/

#animation {
    width: 100vw;
    display: block;
    /*A remettre après*/
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    text-align: center;
    opacity: 1;
    position: absolute;
    z-index: 3;
    margin: center;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: logo2 4.1s forwards;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

@keyframes logo2 {
    0% {}

    99% {
        display: block;
    }

    100% {
        display: none;
    }
}

/*GESTION VUES*/

#section-vue {
    width: 100%;
    display: flex;
    overflow: hidden;
    transition: 1.5s ease-in-out;
    cursor: pointer;
}

#docufiction-vue {
    width: 50%;
    position: relative;
    overflow: hidden;
    height: 100vh;
    scroll-snap-type: y mandatory;
    scrollbar-color: #E4563D #e9ddce;
    background-color: #e9ddce;
    background-image: url(medias/images/echo-fond.svg);
    background-repeat: repeat;
    background-size: 100px;
}

#interview-vue {
    width: 50%;
    position: relative;
    overflow: hidden;
    height: 100vh;
    scroll-snap-type: y mandatory;
    scrollbar-color: #E4563D #e9ddce;
    background-image: url(medias/images/echo-fond.svg);
    background-repeat: repeat;
    background-size: 100px;
}

.bouton {
    width: 100px;
    height: 100vh;
    position: absolute;
    z-index: 1;
    display: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bouton:hover .img-fleche {
    width: 80%;
    height: 60px;
}

.img-fleche {
    width: 0%;
    height: 0%;
    background: url(medias/images/fl2b.svg) center / contain no-repeat;
    transition: 1s ease-in-out;
}

#bouton-droite {
    transform: rotate(180deg);
    right: 0px;
    top: 0px;
}

#bouton-gauche {
    left: 0px;
    top: 0px;
}

/*VUE DOCUFICTION*/

#video-docufiction {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
}

#video-docufiction>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.docufiction-page {
    width: 100%;
    min-height: 100vh;
    padding: 60px;
    scroll-snap-align: start;
}

.docufiction-page:nth-child(2) {
    height: fit-content;
}

#court-metrage-conteneur {
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

#court-metrage {
    width: 100%;
    height: auto;
}

#court-metrage-conteneur p:nth-child(2) {
    width: 98%;
    text-align: justify;
}

#note-intention-conteneur {
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 2%;
    text-align: justify;
    margin: auto;
    width: 95%;
}

/*VUE INTERVIEW*/

#video-interview {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
}

#video-interview>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interview-page {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    padding: 60px;
}

#interviews-liste-conteneur {
    height: 700vh;
    width: 100%;
    display: flex;
    position: absolute;
    top: 100vh;
    left: 0vw;
}

#interviews-liste-conteneur2 {
    height: 700vh;
    width: 100%;
    display: flex;
    position: absolute;
    top: 100vh;
    left: 0vw;
    pointer-events: none;

}


.interview {
    margin-bottom: 5px;
    width: 25%;
    height: 100%;
    flex-shrink: 0;
}

.interieur-interview {
    width: 100%;
    height: calc(100vh - 186px);
    position: sticky;
    top: 186px;
    display: flex;
    overflow: hidden;
    /*left:0px;*/
    /*Donne un effet de c  arte qui se rabat*/
}

#test-title {
    width: 100%;
    height: 186px;
    position: sticky;
    top: 0px;
    background-color: #e9ddce;
    background-image: url(medias/images/echo-fond.svg);
    background-repeat: repeat;
    background-size: 100px;
    padding: 60px;
    pointer-events: all;
}

.photo-interview {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    overflow:hidden;
    display:flex;
    align-items: end;
    justify-content:start;
}
.photo-interview img{
    pointer-events: none;
    width:auto;
    height:95%;
    transform: translate(-15%, 0%);
}

.fermeture {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-right: 20px;
    flex-shrink: 0;
    cursor: pointer;
    background: url(medias/images/cr.svg) center / contain no-repeat;
}

.interview:nth-child(1) .interieur-interview .photo-interview img {
    transform: translate(-5%, 0%);
}

.interview:nth-child(2) .interieur-interview .photo-interview img {
    transform: translate(-5%, 0%);
}

.interview:nth-child(3) .interieur-interview .photo-interview img {
    transform: translate(-15%, 0%);
}

.interview:nth-child(4) .interieur-interview .photo-interview img {
    transform: translate(-15%, 0%);
}

.interview:nth-child(5) .interieur-interview .photo-interview img {
    transform: translate(-15%, 0%);
}

.interview:nth-child(6) .interieur-interview .photo-interview img {
    transform: translate(-8%, 0%);
}

.interview:nth-child(7) .interieur-interview .photo-interview img {
    transform: translate(-8%, 0%);
}

.interview:nth-child(1) .interieur-interview {
    background-color: hsla(338, 83%, 84%, 0.5);
}

.interview:nth-child(2) .interieur-interview {
    background-color: hsla(36, 89%, 57%, 0.5)
}

.interview:nth-child(3) .interieur-interview {
    background-color: rgba(233, 221, 206, 0.5);
}

.interview:nth-child(4) .interieur-interview {
    background-color: hsla(36, 89%, 57%, 0.5);
}

.interview:nth-child(5) .interieur-interview {
    background-color: rgba(233, 221, 206, 0.5);
}

.interview:nth-child(6) .interieur-interview {
    background-color: hsla(338, 83%, 84%, 0.5);
}

.interview:nth-child(7) .interieur-interview {
    background-color: hsla(9, 83%, 59%, 0.5);
}

#debug-background {
    background-color: hsla(9, 83%, 59%, 0.5);
    width: 100px;
    height: 100%;
    flex-shrink: 0;
}


.contenu-interview {
    width: 100px;
    height: 100%;
    padding: 50px;

}

.audiomp3 {
    width: 100%;
}

.audio-interview {
    width: 100%;
    max-width: 600px;
    margin: auto;
    margin-top: 15px;
}

.contenu-interview p {
    max-width: 900px;
    margin: 30px auto;
}

/*MENU HAUT*/

header {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: -100vh;
    z-index: 2;
}

#fix-header{
    position:relative;
    width:100%;
    min-height:100vh;
    height:fit-content;
    padding: 60px 60px 120px 60px;
}

#header-contenu {
    width: 100vw;
    height: 100vh;
    background-color: #ECACC3;
    overflow-y:auto;
    scrollbar-width: none;
    position:relative;
}

#header-contenu_logo {
    background-image: url(medias/images/logo.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: clamp(120px, 40vw, 350px);
    height: clamp(70px, 25vw, 200px);
    margin: auto;
}

#header-contenu_texte p {
    padding: 5px 40px;
}

#header-contenu_langue {
    width: 12vh;
    height: 5vh;
    margin: 20px auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    background: url(/medias/images/france.png) center /100%;
    border-radius: 20px;
    padding: 0.5vh;
    transition: background-image 1s ease-in-out;
}

#drapeau-langue {
    width: 4vh;
    height: 4vh;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    margin-left: 0vh;
    box-shadow: 0px 0px 5px black;
    transition: margin-left 1s ease-in-out;
}

#remonter {
    width: 80px;
    height: 80px;
    display:block;
    margin:auto;
    background: url(medias/images/fl2.svg) center / contain no-repeat;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

#menuechologo {
    display: flex;
}

#menuechologocentre {
    background-color: #ECACC3;
    background-image: url(medias/images/logo.svg);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 10vw;
    height: 2.5vw;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    cursor: pointer;
}

#menuechologoleft {
    width: 1.25vw;
    height: 1.25vw;
    background-image: url(medias/images/coin2.svg);
}

#menuechologoright {
    width: 1.25vw;
    height: 1.25vw;
    background-image: url(medias/images/coin.svg);
}