@font-face {
font-family: 'CascadiaCode-Regular';
src: url(../SRC/TYPO/Cascadia_Code/CascadiaCode-Regular.ttf);
}
@font-face {
font-family: 'Rubik-SemiBold';
src: url(../SRC/TYPO/Rubik/Rubik-SemiBold.ttf);
}

/* base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
overflow: hidden;

font-family: 'CascadiaCode-Regular';
background-color: #0a0a23;
color: #fff;
}

/* header */
.header {
width: 100%;
padding: 1rem;

border-bottom: 1px solid #776bff;
}

.navbar {
display: flex;
justify-content: flex-end;
gap: 2rem;

font-size: 1.5rem;
}

.navbar a {
color: #888bff;
text-decoration: none;
}

.navbar a:hover {
opacity: 0.7;
}

/* container principal */
.container {
display: grid;
grid-template-columns: 50% 50%;

height: calc(100vh - 60px);

font-family: 'CascadiaCode-Regular';
}

/* slider vertical */
.slider {
position: relative;
overflow: hidden;

cursor: url('../SRC/IMG/arrow.png') 16 16, auto;
}

.slider:active {
cursor: url('../SRC/IMG/arrow.png') 16 16, auto;
}

.slider-wrapper {
display: flex;
flex-direction: column;

transition: transform 0.6s ease-in-out;
}

.slider img {
width: 100%;
height: 100vh;
padding: 1rem;

object-fit: contain;
}

.slider video {
display: block;

width: 100%;
height: 100vh;
padding: 1rem;

object-fit: contain;
}

/* section texte */
.details {
display: flex;
flex-direction: column;
justify-content: center;

padding: 4rem;

background-color: #0a0a23;
}

.details p {
margin-bottom: 1rem;
}

.details h1 {
margin-top: 2rem;
margin-bottom: 1rem;

font-family: 'Rubik-SemiBold';
font-size: 2rem;
font-weight: bold;
font-style: italic;
}

/* bouton retour en haut */
.back-to-top {
display: none;
align-items: center;
justify-content: center;

position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;

width: 40px;
height: 40px;

font-size: 1.5rem;
color: #888bff;
text-decoration: none;

border: solid 2px #776bff;
border-radius: 20%;
}

.back-to-top:hover {
background-color: #776bff;
color: #0a0a23;
}


@media (max-width: 900px) {
body {
    overflow-y: auto;
    overflow-x: hidden;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    
    height: auto;
}

.details {
    order: 1;
    
    padding: 2rem;
}

.slider {
    order: 2;
    overflow: visible;
    
    cursor: default;
}

.slider-wrapper {
    display: block;
    
    transform: none !important;
}

.slider img,
.slider video {
    height: auto;
    min-height: 40vh;
    max-height: 60vh;
}

.back-to-top {
    display: flex;
}
}