@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);
}
@font-face {
font-family: 'Rubik-ExtraBold';
src: url(../SRC/TYPO/Rubik/Rubik-ExtraBold.ttf);
}

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

html {
scroll-behavior: smooth;
}

body {
overflow-x: hidden;

font-family: 'CascadiaCode-Regular';
background-color: #F5F2E8;
color: #333;
}

/*  header  */
.header {
position: absolute;
top: 0;
z-index: 9999;

width: 100%;
padding: 1rem;
}

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

font-size: 1.5rem;
}

.navbar a {
font-family: 'CascadiaCode-Regular';
color: #858AE3;
text-decoration: none;
}

.navbar a:hover {
opacity: 0.7;
}

/*  section plein écran  */
.hero-section {
position: relative;
overflow: hidden;

width: 100%;
height: 100vh;

font-size: 2rem;
}

#blocksCanvas {
position: absolute;
top: 0;
left: 0;

width: 100%;
height: 100%;

cursor: grab;
}

#blocksCanvas:active {
cursor: grabbing;
}

.hero-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

font-family: 'Rubik-SemiBold';
font-size: 7rem;
letter-spacing: 1rem;
color: #F5F2E8;

pointer-events: none;
}

.hero-description {
position: absolute;
bottom: 6rem;
left: 3rem;

font-size: 1rem;
line-height: 1.6;
color: #7b68ee;

pointer-events: none;
}

.arrows {
display: flex;
gap: 3rem;

position: absolute;
bottom: 10%;
right: 5%;
z-index: 100;
}

.arrow {
font-size: 3rem;
color: #7b68ee;

cursor: pointer;
transition: all 0.3s;
}

.arrow:hover {
transform: scale(1.2);
}

/*  selecteur  */
.selector {
width: 100%;
padding: 3rem 2rem;

text-align: center;
}

.selector-boutons {
display: flex;
justify-content: center;
align-items: center;
}

.boutons {
padding: 10px 30px;

font-family: 'CascadiaCode-Regular';
font-size: 2rem;
color: #b0b0b0;

background: none;
border: none;

cursor: pointer;
transition: all 0.3s;
}

.boutons.active {
color: #7b68ee;
}

.boutons:hover {
color: #7b68ee;
}

.ligne {
width: 200px;
height: 3px;
margin: 0 2rem;

background: #7b68ee;
}

/*  galeries  */
.galerie-section {
margin: 0 auto;

max-width: 1400px;
padding: 60px 50px 120px;
}

.galerie-2d,
.galerie-3d {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}

.galerie-3d {
display: none;
}

.galerie-item {
aspect-ratio: 1;

background: #d4d4d4;
background-size: cover;
background-position: center;
border-radius: 8px;

cursor: pointer;
transition: all 0.3s;
}

.galerie-2d .galerie-item:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.galerie-3d .galerie-item {
overflow: hidden;

background: #F5F2E8;
}

.galerie-3d .galerie-item canvas {
width: 100%;
height: 100%;
}

/*  pop-up  */
.image-popup {
position: fixed;
top: 0;
left: 0;
z-index: 3000;

display: none;
justify-content: center;
align-items: center;

width: 100%;
height: 100%;

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

opacity: 0;
transition: opacity 0.3s ease;
}

.image-popup.active {
display: flex;

opacity: 1;
}

.popup-content {
position: relative;

display: flex;
flex-direction: column;
align-items: center;

max-width: 90%;
max-height: 90%;
}

.popup-image {
max-width: 100%;
max-height: 80vh;

border-radius: 8px;

object-fit: contain;
}

.popup-caption {
max-width: 600px;
margin-top: 20px;

font-size: 18px;
text-align: center;
color: white;
}

.popup-close {
position: absolute;
top: -50px;
right: 0;

font-family: Arial, sans-serif;
font-size: 50px;
line-height: 1;
color: white;

background: none;
border: none;

cursor: pointer;
transition: all 0.3s;
}

.popup-close:hover {
color: #7b68ee;
transform: rotate(90deg);
}

/*  bouton retour en haut  */
.back-to-top {
display: flex;
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: #F5F2E8;
}

/*  responsive  */

@media (max-width: 1100px) {
.hero-title {
    font-size: 4rem;
    letter-spacing: 8px;
}
}

@media (max-width: 700px) {
.hero-title {
    font-size: 2rem;
    letter-spacing: 8px;
}

.arrows {
    bottom: 50px;
    right: 50px;
}

.galerie-2d,
.galerie-3d {
    grid-template-columns: 1fr;
}
}