@font-face {
    font-family: 'Freestyle';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/freestyle.woff') format('woff');
}

@font-face {
    font-family: 'Monsterrat';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Montserrat-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Monsterrat Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Montserrat-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Montserrat Bolder';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Montserrat-ExtraBold.woff') format('woff');
}

:root {
--orang: #F49926;
--blanc: #FFF9E1;
--noir : #181C36;
--violet: #792E88;
--rouge: #E52134;
--rougeclair: #F7BBB0;
--vert: #66BC94;
--bleu: #36afe5;
--orangclair: #FEE8D0;
--violetclair : #D9BFC8;
}

html {
    scroll-behavior: smooth;
}

header{
    margin-bottom: 3.125em;
    padding: 0 2em;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: var(--blanc);
}

#prev{
    font-size: 4em;
    position: absolute;
    margin-left: 0.6em;
    margin-top: 0.27em;
    color: var(--noir);
    z-index: 5;
}

#prev:hover{
    opacity: 80%;
    color: var(--orang);
    filter: drop-shadow(3px 4px 0.5px #0000003e);
}


/*Page*/
.page_content {
    margin: auto;
    width: 90%;
    max-width: 56.25em;
    padding-bottom: 1.875em;
}

* {
    box-sizing: border-box;
}


/*Contenu*/
h1:not(#nom, #portfolio){
    color: var(--noir);
    font-size: 4.5em;
    text-align: center;
    font-family: "freestyle", sans-serif;
    z-index: 2;
}

h2 {
    margin: 0 auto 1em auto;
    color: var(--noir);
    font-size: 2em;
    text-align: center;
    font-family: "freestyle", sans-serif;
    border-radius: 0.313em;
    grid-column: 1/3;
}

p:not(#prev, .ac){
    padding: 0.625em 0em;
    line-height: 1.2;
    text-align: justify;
    margin: auto;
}

#logo_haut{
    position: relative;
    display: flex;
    justify-content: center;
    align-items:center;
    margin-bottom: 3em;
    padding: 0.625em;
}

#logo_haut img{
    width: 30%;
    position: absolute;
}

#print{
    background-image: url("../images/projets/fond_bullesO.png");
    margin: 0 2.188em;
}

#print h2{
    color: var(--orangclair);
    background-color: var(--orang);
grid-area: deux;
}

#competences_print{
    margin-top: 1.875em;
}

#print_pdf{
    height: 40%;
    margin: auto;
}

#flex_print{
    display: flex;
    flex-direction: column;
}

#court-metrage{
    background-image: url("../images/projets/fond_bullesR.png");
    margin: 0 2.188em;
}

#court-metrage h2{
color: var(--rougeclair);
background-color: var(--rouge);
grid-area: deux;
}

#vr{
    background-image: url("../images/projets/fond_bullesVi.png");
    margin: 0 2.188em;
}

#vr h2{
color: var(--violetclair);
background-color: var(--violet);
grid-area: deux;
}

#vr a{
    color: var(--violet);
}

#vr a:hover{
    color: var(--noir);
}

.grid_competences{
    display: grid;
    grid-template: 1fr/1.5fr 1fr 1.5fr;
    grid-template-areas: "une deux trois";
}

.grid_competences h2{
    padding: 0.313em 1em;
}

.competence{
    width: 20%;
}

.ga{
    grid-area: une;
    rotate: -15deg;
    margin-left: 10em;
}

.dr{
    grid-area: trois;
    rotate: 15deg;
    margin-left: 4em;
}

.deux{
    grid-area: trois;
}


iframe{
    display:flex;
    margin:auto;
}

.separation{
    height: 2px;
    width: 80%;
    margin: 1em auto;
    background-color: var(--orang);
    border-radius: 15px;
}

#grid_videos_vr{
    display: grid;
    grid-template: "un_un un_deux" 1fr 
    "deux_un deux_deux" 0.25fr
    /1fr 1fr;
}

#grid_videos_vr video source{
    width: 50%;
}

#vid1{
    grid-area: un_un;
    height: 95%;
}

#lien1{
    grid-area: deux_un;
}

#vid2{
    grid-area: un_deux;
}

#lien2{
    grid-area: deux_deux;
}


.paysage{
    grid-row: 2/4;
    margin: auto;
    padding: 0.625em 2.188em;
}

.paysage_vid{
    max-width: 100%;
    margin: auto;
    padding: 0.625em 2.188em;
}



img:not(.item) {
    max-width: 100%;
}

.portrait{
    grid-row: 2/4;
    margin: auto;
    padding: 0.625em 2.188em;
}


div a:not(.item){
    grid-column: 2/3;
    margin: auto;
    text-decoration: underline;
}

/*Liens*/
a:hover {
    color: var(--noir);
}

a, a:active {
    color: var(--orang);
}w

span a {
    text-decoration: underline;
}

@media screen and (max-width: 660px) {
    .page-content {
        width: auto;
        margin-left: 0.625em;
        margin-right: 0.625em;
    }
}

/*Footer*/
footer{
    margin-top: 3.125em;
    position: relative;
    bottom: 0;
}

/*Ma participation*/
/*.moi_deroulant::after{
    content: "\25BC";
    transform: rotate(270deg);
    display: inline-block;
}*/


.maPartie{
    display: flex;
    flex-direction: column;
    padding: 1.5em 0;
}

.labelMaPartie, #cacheprint, #cacheprintCM, #cacheprintPr
{
    display: none;
}

.moi_deroulant {
  display: none;
}

.nivDeux{
    padding-left: 2.5em;
    margin-top: 0.25em;
    margin-bottom: 1em;
    line-height: 1.2;
    text-align: justify;
}

.nivUn{
    list-style-type: none;
}

.labelMaPartie
    {
        display: flex;
        justify-content: flex-start;;
        align-items: center;
        cursor: pointer;
        font-family: "freestyle", sans-serif;
        font-size: 1.8em;
    }

#cacheprint:checked ~ .moi_deroulant, #cacheprintCM:checked ~ .moi_deroulant, #cacheprintPr:checked ~ .moi_deroulant {
        display: flex;
        animation: appMaPartie 0.25s ease-in-out forwards;
    }

    @keyframes appMaPartie {
    0% {
      margin-top: -0.5em;
      opacity: 0%;
    }
    10%{
        opacity: 0%;
    }
    100%{
      margin-top: 0em;
      opacity: 100%;
    }
}

.labelMaPartie p, .moi_deroulant p{
    margin: 0 !important;
}

    .labelMaPartie p::before{
    content: "\25BC";
    transform: rotate(270deg);
    display: inline-block;
    font-size: 0.7em;
    margin-right: 0.5em;
}

.labelMaPartie p:hover{
    opacity: 70%;
    font-size: 1.01em;
}

    #cacheprint:checked ~ .labelMaPartie p::before, #cacheprintCM:checked ~ .labelMaPartie p::before, #cacheprintPr:checked ~ .labelMaPartie p::before{
        animation: fleche_Participation 0.25s linear forwards;
    }

    @keyframes fleche_Participation {
    0% {
      transform: rotate(-90deg);
    }
    100%{
      transform: rotate(0deg) translate(-2px, 0.5vh);
    }
}

.ac {
    font-size : 0.65em;
    padding: 0.2em 0 0.625em 0;
    font-style: italic;
}

.wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
    border-radius: 5px;
    padding: 0em 0 1.5em 0;
}

.carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  display: flex;
}

.carousel::-webkit-scrollbar {
  height: 0;
}

.prev,
.next {
  display: flex;
  justify-content: center;
  align-content: center;
  background: white;
  border: none;
  padding: 8px;
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  position: absolute;
}

.prev {
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
  display: none;
}

.next {
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}
.content {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 16px;
  align-items: center;
}

.item {
  width: 200px; 
  height: 16vw;
  width: auto;
  border-radius: 5px;
  object-fit: contain;
}

.item img,
.item video {
  display: block;
  height: inherit;
  border-radius: 5px;
  object-fit: cover;
}







    @media screen and (max-width: 1200px) and (min-width: 805px) {
        h1{
            font-size: 3.5em;
        }
    }

    @media screen and (max-width: 800px){
        h1{
            font-size: 2.75em;
        }
    }