@font-face {
    font-family: 'Kindergarten';
    src: url('../font/kindergarten.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Préchargement de la police */
body {
    font-family: 'Kindergarten', Arial, sans-serif;
}

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

html {
    background: #000000 !important;
}

body {
    font-family: 'Kindergarten', 'Arial', sans-serif;
    overflow: hidden;
    background: #000000 !important;
}

/* Écran de chargement - FOND NOIR */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'Kindergarten', cursive;
    cursor: none; /* Cache le curseur par défaut */
    overflow: hidden;
}

/* Curseur personnalisé dessiné à la main */
.custom-cursor {
    position: fixed;
    width: 1.5vw;
    height: 1.5vw;
    pointer-events: none;
    z-index: 10000;
    transition: transform 0.1s ease;
}

.custom-cursor::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.9vw solid #f5f1e8;
    border-top: 0.6vw solid transparent;
    border-bottom: 0.6vw solid transparent;
    transform: rotate(-10deg);
    opacity: 0.9;
    animation: cursorTremble 2s infinite ease-in-out;
}

.custom-cursor::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.75vw solid #e8dcc0;
    border-top: 0.45vw solid transparent;
    border-bottom: 0.45vw solid transparent;
    transform: rotate(-8deg) translate(0.075vw, 0.075vw);
    opacity: 0.7;
    animation: cursorTremble 1.8s infinite ease-in-out reverse;
}

@keyframes cursorTremble {
    0%, 100% { 
        transform: rotate(-10deg) scale(1);
    }
    25% { 
        transform: rotate(-12deg) scale(1.02);
    }
    50% { 
        transform: rotate(-8deg) scale(0.98);
    }
    75% { 
        transform: rotate(-11deg) scale(1.01);
    }
}

/* Lignes de gribouillage créées par le mouvement de la souris */
.mouse-trail {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    width: 0.3vw;
    height: 0.3vw;
    background: #f5f1e8;
    border-radius: 50%;
    opacity: 0.9;
    animation: trailFade 3s ease-out forwards;
    box-shadow: 0 0 0.15vw rgba(245, 241, 232, 0.5);
}

.mouse-trail::before {
    content: '';
    position: absolute;
    top: -0.15vw;
    left: -0.15vw;
    width: 0.6vw;
    height: 0.6vw;
    background: radial-gradient(circle, #e8dcc0 30%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
    z-index: -1;
    animation: trailTremble 0.5s infinite ease-in-out;
}

.mouse-trail.scribble-line {
    width: 0.2vw;
    height: 1.5vw;
    background: linear-gradient(180deg, #f5f1e8 0%, #e8dcc0 50%, transparent 100%);
    border-radius: 0.15vw;
    transform-origin: bottom;
    animation: scribbleLineFade 2.5s ease-out forwards;
    box-shadow: 
        0.075vw 0 0 rgba(245, 241, 232, 0.3),
        -0.075vw 0 0 rgba(232, 220, 192, 0.3);
}

.mouse-trail.scribble-line::before {
    width: 0.45vw;
    height: 1.9vw;
    background: linear-gradient(180deg, rgba(240, 232, 208, 0.4) 0%, transparent 100%);
    top: -0.2vw;
    left: 0;
    animation: trailTremble 0.3s infinite ease-in-out;
}

.mouse-trail.continuous-trail {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    background: #f5f1e8;
    border-radius: 2px;
    transform-origin: center left;
    animation: naturalTremble 0.8s infinite ease-in-out;
    box-shadow: 
        0 0 1px rgba(245, 241, 232, 0.4),
        inset 0 0 2px rgba(232, 220, 192, 0.3);
}

/* Variations d'animation pour plus de naturel */
.mouse-trail.continuous-trail:nth-child(2n) {
    animation-duration: 0.6s;
    animation-delay: -0.1s;
}

.mouse-trail.continuous-trail:nth-child(3n) {
    animation-duration: 1s;
    animation-delay: -0.2s;
}

.mouse-trail.continuous-trail:nth-child(4n) {
    animation-duration: 0.9s;
    animation-delay: -0.15s;
}

.mouse-trail.continuous-trail:nth-child(5n) {
    animation-duration: 0.7s;
    animation-delay: -0.05s;
}

@keyframes continuousTrailTremble {
    0%, 100% { 
        transform: translateY(0px) scaleY(1);
    }
    25% { 
        transform: translateY(-0.5px) scaleY(0.95);
    }
    75% { 
        transform: translateY(0.5px) scaleY(1.05);
    }
}

@keyframes naturalTremble {
    0% { 
        transform: translateY(0px) scaleY(1) scaleX(1);
        opacity: 0.9;
    }
    15% { 
        transform: translateY(-0.5px) scaleY(0.95) scaleX(1.02);
        opacity: 0.7;
    }
    30% { 
        transform: translateY(0.3px) scaleY(1.05) scaleX(0.98);
        opacity: 1;
    }
    45% { 
        transform: translateY(-0.2px) scaleY(0.98) scaleX(1.01);
        opacity: 0.8;
    }
    60% { 
        transform: translateY(0.4px) scaleY(1.03) scaleX(0.99);
        opacity: 0.9;
    }
    75% { 
        transform: translateY(-0.1px) scaleY(0.97) scaleX(1.02);
        opacity: 0.75;
    }
    90% { 
        transform: translateY(0.2px) scaleY(1.01) scaleX(0.98);
        opacity: 0.85;
    }
    100% { 
        transform: translateY(0px) scaleY(1) scaleX(1);
        opacity: 0.9;
    }
}

@keyframes trailFade {
    0% { 
        opacity: 0.9;
        transform: scale(1);
    }
    30% { 
        opacity: 0.7;
        transform: scale(1.1);
    }
    70% { 
        opacity: 0.3;
        transform: scale(0.9);
    }
    100% { 
        opacity: 0;
        transform: scale(0.4);
    }
}

@keyframes trailTremble {
    0%, 100% { 
        transform: translate(0px, 0px) scale(1);
        opacity: 0.6;
    }
    25% { 
        transform: translate(0.5px, -0.3px) scale(1.05);
        opacity: 0.4;
    }
    50% { 
        transform: translate(-0.3px, 0.4px) scale(0.95);
        opacity: 0.8;
    }
    75% { 
        transform: translate(0.2px, 0.2px) scale(1.02);
        opacity: 0.5;
    }
}

@keyframes scribbleLineFade {
    0% { 
        opacity: 0.7;
        transform: scaleY(1) rotate(0deg);
    }
    30% { 
        opacity: 0.5;
        transform: scaleY(1.1) rotate(2deg);
    }
    100% { 
        opacity: 0;
        transform: scaleY(0.3) rotate(-1deg);
    }
}

/* Titre Clara Neulinger au-dessus du spinner */
.loading-title {
    font-size: 2.2rem;
    color: #f5f1e8;
    text-align: center;
    margin-bottom: 0.75vh;
    font-weight: normal;
    text-shadow: none;
    opacity: 0.9;
}

/* Sous-titre Loading Please Wait */
.loading-subtitle {
    font-size: 1rem;
    color: #e8dcc0;
    text-align: center;
    margin-bottom: 3vh;
    font-weight: normal;
    text-shadow: none;
    opacity: 0.8;
}

/* Vidéo d'arrière-plan */
#background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #000000 !important;
    /* Masquer complètement les contrôles vidéo */
    pointer-events: none !important;
}

/* Forcer le masquage des contrôles sur tous les navigateurs */
#background-video::-webkit-media-controls,
#background-video::-webkit-media-controls-panel,
#background-video::-webkit-media-controls-play-button,
#background-video::-webkit-media-controls-start-playback-button,
#background-video::-webkit-media-controls-fullscreen-button,
#background-video::-webkit-media-controls-timeline,
#background-video::-webkit-media-controls-current-time-display,
#background-video::-webkit-media-controls-time-remaining-display,
#background-video::-webkit-media-controls-mute-button,
#background-video::-webkit-media-controls-volume-slider {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    -webkit-appearance: none !important;
}

/* Masquage pour Firefox */
#background-video::-moz-media-controls {
    display: none !important;
}

/* Masquage spécifique mobile */
@media (max-width: 1024px) {
    #background-video {
        pointer-events: none !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    #background-video::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        pointer-events: none;
    }
}

/* Effet de vignettage noir sur les contours */
#video-vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.45) 80%,
        rgba(0, 0, 0, 0.6) 90%,
        rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Effet d'extinction de télé vintage */
.tv-shutdown {
    animation: tvShutdown 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    position: relative;
    overflow: hidden;
}

/* Fond noir uniquement pendant l'effet d'extinction */
.tv-shutdown::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black !important;
    z-index: -1;
}

/* Bordure noire pour masquer les contours blancs pendant l'animation */
.tv-shutdown::before {
    content: '';
    position: absolute;
    top: -3.7vw;
    left: -3.7vw;
    right: -3.7vw;
    bottom: -3.7vw;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 0.075vw,
            rgba(80, 80, 80, 0.3) 0.075vw,
            rgba(80, 80, 80, 0.3) 0.15vw,
            rgba(0, 0, 0, 1) 0.15vw,
            rgba(0, 0, 0, 1) 0.225vw
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 7.5vw,
            rgba(120, 120, 120, 0.1) 7.5vw,
            rgba(120, 120, 120, 0.1) 7.65vw
        ),
        radial-gradient(circle at 25% 75%, rgba(100, 120, 100, 0.08) 20%, transparent 40%),
        radial-gradient(circle at 75% 25%, rgba(120, 100, 120, 0.08) 20%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(110, 110, 130, 0.06) 30%, transparent 60%);
    border: 3.7vw solid black;
    box-shadow: inset 0 0 7.5vw rgba(0, 0, 0, 1), 0 0 15vw rgba(0, 0, 0, 1);
    z-index: 10;
    pointer-events: none;
    animation: tvStaticNoise 0.08s infinite, tvChromaticShift 0.15s infinite;
}

.tv-shutdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 1) 0.075vw,
            rgba(10, 12, 15, 1) 0.075vw,
            rgba(10, 12, 15, 1) 0.15vw
        );
    animation: tvStatic 0.02s infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
}

@keyframes tvShutdown {
    0% {
        transform: scale(1, 1);
        filter: brightness(1) contrast(1);
        opacity: 1;
    }
    10% {
        transform: scale(1, 0.8);
        filter: brightness(1.2) contrast(1.3);
        opacity: 1;
    }
    30% {
        transform: scale(1, 0.1);
        filter: brightness(2.5) contrast(3);
        opacity: 0.9;
    }
    60% {
        transform: scale(0.3, 0.02);
        filter: brightness(5) contrast(8);
        opacity: 0.7;
    }
    85% {
        transform: scale(0.1, 0.005);
        filter: brightness(10) contrast(15);
        opacity: 0.3;
    }
    95% {
        transform: scale(0.02, 0.001);
        filter: brightness(20) contrast(25);
        opacity: 0.1;
    }
    100% {
        transform: scale(0, 0);
        filter: brightness(0) contrast(0);
        opacity: 0;
    }
}

@keyframes tvStatic {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-0.075vw);
        opacity: 0.8;
    }
    100% {
        transform: translateY(0.075vw);
        opacity: 1;
    }
}

@keyframes tvStaticNoise {
    0% {
        opacity: 0.7;
        transform: translateX(0px) translateY(0px);
        filter: brightness(1) contrast(1.2);
    }
    12.5% {
        opacity: 0.3;
        transform: translateX(-1px) translateY(1px);
        filter: brightness(1.3) contrast(0.9);
    }
    25% {
        opacity: 0.9;
        transform: translateX(1px) translateY(-1px);
        filter: brightness(0.8) contrast(1.4);
    }
    37.5% {
        opacity: 0.4;
        transform: translateX(-2px) translateY(0px);
        filter: brightness(1.2) contrast(1.1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(0px) translateY(2px);
        filter: brightness(0.9) contrast(1.3);
    }
    62.5% {
        opacity: 0.2;
        transform: translateX(2px) translateY(-1px);
        filter: brightness(1.4) contrast(0.8);
    }
    75% {
        opacity: 0.6;
        transform: translateX(-1px) translateY(-2px);
        filter: brightness(0.7) contrast(1.5);
    }
    87.5% {
        opacity: 0.9;
        transform: translateX(1px) translateY(1px);
        filter: brightness(1.1) contrast(1);
    }
    100% {
        opacity: 0.7;
        transform: translateX(0px) translateY(0px);
        filter: brightness(1) contrast(1.2);
    }
}

@keyframes tvChromaticShift {
    0% {
        filter: hue-rotate(0deg) saturate(1);
    }
    20% {
        filter: hue-rotate(2deg) saturate(1.1);
    }
    40% {
        filter: hue-rotate(-1deg) saturate(0.9);
    }
    60% {
        filter: hue-rotate(3deg) saturate(1.2);
    }
    80% {
        filter: hue-rotate(-2deg) saturate(0.8);
    }
    100% {
        filter: hue-rotate(0deg) saturate(1);
    }
}

/* Overlay télé vintage pour l'effet d'extinction */
.shutdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at center, 
            rgba(0, 0, 0, 0.9) 0%, 
            rgba(0, 0, 0, 0.95) 70%, 
            rgba(0, 0, 0, 1) 100%),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(60, 60, 60, 0.1) 2px,
            rgba(60, 60, 60, 0.1) 4px
        );
    z-index: 9999;
    opacity: 0;
    animation: fadeToStaticTv 1s ease-in-out 0.8s forwards, overlayNoise 0.1s infinite 0.8s;
    overflow: hidden;
}

@keyframes overlayNoise {
    0% {
        filter: brightness(1) contrast(1);
    }
    25% {
        filter: brightness(1.05) contrast(1.1);
    }
    50% {
        filter: brightness(0.95) contrast(0.9);
    }
    75% {
        filter: brightness(1.02) contrast(1.05);
    }
    100% {
        filter: brightness(1) contrast(1);
    }
}



@keyframes fadeToStaticTv {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/* Écran Try Again - Style UI Gaming */
.try-again-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.try-again-overlay.show .try-again-content {
    animation: revealContent 2s ease-out forwards;
}

.try-again-content {
    text-align: center;
    color: white;
    font-family: 'Kindergarten', Arial, sans-serif;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes revealContent {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    30% {
        opacity: 0;
        transform: translateY(30px);
    }
    70% {
        opacity: 0.8;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.try-again-title {
    font-size: 4rem;
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    margin-bottom: 3rem;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(50px);
}

.try-again-overlay.show .try-again-title {
    animation: revealTitle 1.5s ease-out 1s forwards, tryAgainPulse 2s ease-in-out 2.5s infinite;
}

@keyframes revealTitle {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    70% {
        opacity: 0.8;
        transform: translateY(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tryAgainPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 30px rgba(255, 68, 68, 1);
    }
}

.try-again-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
}

.try-again-overlay.show .try-again-buttons {
    animation: revealButtons 1s ease-out 2s forwards;
}

@keyframes revealButtons {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.try-again-btn, .back-btn {
    background: transparent;
    border: 0.15vw solid white;
    color: white;
    padding: 1rem 2rem;
    font-family: 'Kindergarten', Arial, sans-serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.try-again-btn:hover, .back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.try-again-btn:active, .back-btn:active {
    transform: translateY(0);
}

.try-again-btn {
    border-color: #44ff44;
    color: #44ff44;
}

.try-again-btn:hover {
    background: rgba(68, 255, 68, 0.1);
    box-shadow: 0 5px 15px rgba(68, 255, 68, 0.3);
}

.back-btn {
    border-color: #ffaa44;
    color: #ffaa44;
}

.back-btn:hover {
    background: rgba(255, 170, 68, 0.1);
    box-shadow: 0 5px 15px rgba(255, 170, 68, 0.3);
}

/* Interface utilisateur principale - UI BLEUE */
#main-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    background: transparent;
}

.ui-overlay {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6vw; /* Padding responsive */
    pointer-events: all;
    box-sizing: border-box;
    position: relative;
    gap: 40px;
}



/* Titre principal - Style Gaming Blanc en haut à droite */
.game-title {
    text-align: right;
    color: #ffffff;
    text-shadow: none;
    position: fixed;
    top: 2.2vh;
    right: 3vw; /* Position responsive */
    padding: 2vw; /* Padding responsive */
    background: transparent;
    z-index: 10;
    max-width: 60vw; /* Max-width responsive */
}

.game-title h1 {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 0.4vh;
    color: #ffffff;
    text-shadow: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.1;
}

.game-title .subtitle {
    font-size: 1.5rem;
    color: #ffffff;
    opacity: 0.9;
    text-shadow: none;
    letter-spacing: 0.8px;
    font-weight: normal;
    font-style: italic;
    text-transform: none;
    margin: 0;
}



/* Menu principal */
.main-menu {
    display: flex;
    flex-direction: column;
    gap: 3.5vw; /* Gap responsive */
    padding: 5vw; /* Padding responsive */
    background: transparent;
    max-width: 33vw;
    align-items: flex-start;
    position: fixed;
    bottom: 3.7vh;
    left: 3.7vw;
    z-index: 10;
}

/* Boutons style épuré - Texte seul avec encadrement gribouillé */
.game-button {
    background: transparent !important;
    border: none;
    color: #ffffff;
    padding: 25px 35px;
    font-size: 1.3rem;
    font-family: 'Kindergarten', sans-serif;
    cursor: pointer;
    min-width: 320px;
    text-align: left;
    position: relative;
    text-shadow: none;
    z-index: 3;
    outline: none;
    box-shadow: none;
    transition: transform 0.1s ease-out;
    transform-origin: left center;
}

/* Encadrement gribouillé - Première couche fine */
.game-button::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
    pointer-events: none;
    border-radius: 2px 0.5px 2.5px 1px;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé - Deuxième couche fine superposée */
.game-button::after {
    content: '';
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: -0.5px;
    bottom: -0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    pointer-events: none;
    border-radius: 1px 2.5px 0.5px 1.5px;
    transform: rotate(0.2deg);
}

.game-button:hover {
    background: transparent !important;
}

.game-button:hover::before {
    border-color: rgba(255, 255, 255, 0.4);
    border-width: 0.7px;
    transform: rotate(-0.5deg);
}

.game-button:hover::after {
    border-color: rgba(255, 255, 255, 0.5);
    border-width: 0.7px;
    transform: rotate(0.4deg);
}

.game-button:focus {
    background: transparent !important;
    outline: none;
    box-shadow: none;
    border: none;
}

.game-button:active {
    background: transparent !important;
    transform: scale(1.1);
}

/* Anciens encadrements supprimés - remplacés par les nouveaux gribouillés */

@keyframes gribouilleBorder {
    0% {
        transform: rotate(0deg);
        opacity: 0.8;
        clip-path: polygon(
            8% 12%, 15% 8%, 22% 14%, 28% 6%, 35% 11%, 42% 9%, 48% 15%, 55% 7%, 
            62% 13%, 68% 5%, 75% 12%, 82% 8%, 88% 14%, 92% 20%, 95% 28%, 98% 35%, 
            96% 42%, 94% 48%, 97% 55%, 93% 62%, 95% 68%, 91% 75%, 94% 82%, 88% 88%, 
            82% 92%, 75% 95%, 68% 93%, 62% 96%, 55% 92%, 48% 94%, 42% 91%, 35% 93%, 
            28% 89%, 22% 92%, 15% 88%, 8% 85%, 5% 78%, 3% 72%, 6% 65%, 2% 58%, 
            4% 52%, 7% 45%, 3% 38%, 5% 32%, 2% 25%, 6% 18%
        );
    }
    25% {
        transform: rotate(0.8deg);
        opacity: 0.9;
        clip-path: polygon(
            10% 14%, 17% 6%, 24% 16%, 30% 4%, 37% 13%, 44% 7%, 50% 17%, 57% 5%, 
            64% 15%, 70% 3%, 77% 14%, 84% 6%, 90% 16%, 94% 22%, 97% 30%, 96% 37%, 
            98% 44%, 92% 50%, 95% 57%, 91% 64%, 93% 70%, 89% 77%, 92% 84%, 86% 90%, 
            80% 94%, 73% 97%, 66% 95%, 60% 98%, 53% 94%, 46% 96%, 40% 93%, 33% 95%, 
            26% 91%, 20% 94%, 13% 90%, 6% 87%, 3% 80%, 1% 74%, 4% 67%, 0% 60%, 
            2% 54%, 5% 47%, 1% 40%, 3% 34%, 0% 27%, 4% 20%
        );
    }
    50% {
        transform: rotate(-0.5deg);
        opacity: 0.7;
        clip-path: polygon(
            6% 10%, 13% 10%, 20% 12%, 26% 8%, 33% 9%, 40% 11%, 46% 13%, 53% 9%, 
            60% 11%, 66% 7%, 73% 10%, 80% 10%, 86% 12%, 90% 18%, 93% 26%, 96% 33%, 
            94% 40%, 96% 46%, 99% 53%, 95% 60%, 97% 66%, 93% 73%, 96% 80%, 90% 86%, 
            84% 90%, 77% 93%, 70% 91%, 64% 94%, 57% 90%, 50% 92%, 44% 89%, 37% 91%, 
            30% 87%, 24% 90%, 17% 86%, 10% 83%, 7% 76%, 5% 70%, 8% 63%, 4% 56%, 
            6% 50%, 9% 43%, 5% 36%, 7% 30%, 4% 23%, 8% 16%
        );
    }
    75% {
        transform: rotate(0.4deg);
        opacity: 0.85;
        clip-path: polygon(
            9% 13%, 16% 9%, 23% 15%, 29% 7%, 36% 12%, 43% 8%, 49% 16%, 56% 6%, 
            63% 14%, 69% 4%, 76% 13%, 83% 9%, 89% 15%, 93% 21%, 96% 29%, 99% 36%, 
            97% 43%, 95% 49%, 98% 56%, 94% 63%, 96% 69%, 92% 76%, 95% 83%, 89% 89%, 
            83% 93%, 76% 96%, 69% 94%, 63% 97%, 56% 93%, 49% 95%, 43% 92%, 36% 94%, 
            29% 90%, 23% 93%, 16% 89%, 9% 86%, 6% 79%, 4% 73%, 7% 66%, 3% 59%, 
            5% 53%, 8% 46%, 4% 39%, 6% 33%, 3% 26%, 7% 19%
        );
    }
    100% {
        transform: rotate(0deg);
        opacity: 0.8;
        clip-path: polygon(
            8% 12%, 15% 8%, 22% 14%, 28% 6%, 35% 11%, 42% 9%, 48% 15%, 55% 7%, 
            62% 13%, 68% 5%, 75% 12%, 82% 8%, 88% 14%, 92% 20%, 95% 28%, 98% 35%, 
            96% 42%, 94% 48%, 97% 55%, 93% 62%, 95% 68%, 91% 75%, 94% 82%, 88% 88%, 
            82% 92%, 75% 95%, 68% 93%, 62% 96%, 55% 92%, 48% 94%, 42% 91%, 35% 93%, 
            28% 89%, 22% 92%, 15% 88%, 8% 85%, 5% 78%, 3% 72%, 6% 65%, 2% 58%, 
            4% 52%, 7% 45%, 3% 38%, 5% 32%, 2% 25%, 6% 18%
        );
    }
}

@keyframes gribouilleBorder2 {
    0% {
        transform: rotate(-0.3deg);
        opacity: 0.5;
        clip-path: polygon(
            12% 18%, 19% 12%, 25% 19%, 32% 11%, 38% 17%, 45% 13%, 52% 20%, 58% 14%, 
            65% 18%, 71% 12%, 78% 19%, 84% 15%, 90% 22%, 94% 28%, 97% 35%, 95% 42%, 
            98% 48%, 94% 55%, 97% 62%, 93% 68%, 96% 75%, 92% 81%, 89% 87%, 83% 91%, 
            76% 94%, 69% 91%, 63% 94%, 56% 90%, 50% 93%, 43% 89%, 37% 92%, 30% 88%, 
            24% 91%, 17% 87%, 11% 84%, 7% 77%, 4% 70%, 7% 63%, 3% 56%, 6% 49%, 
            2% 42%, 5% 35%, 1% 28%, 4% 21%, 8% 15%
        );
    }
    33% {
        transform: rotate(0.7deg);
        opacity: 0.7;
        clip-path: polygon(
            14% 16%, 21% 14%, 27% 21%, 34% 9%, 40% 19%, 47% 11%, 54% 22%, 60% 12%, 
            67% 20%, 73% 10%, 80% 21%, 86% 13%, 92% 24%, 96% 30%, 99% 37%, 97% 44%, 
            100% 50%, 96% 57%, 99% 64%, 95% 70%, 98% 77%, 94% 83%, 91% 89%, 85% 93%, 
            78% 96%, 71% 93%, 65% 96%, 58% 92%, 52% 95%, 45% 91%, 39% 94%, 32% 90%, 
            26% 93%, 19% 89%, 13% 86%, 9% 79%, 6% 72%, 9% 65%, 5% 58%, 8% 51%, 
            4% 44%, 7% 37%, 3% 30%, 6% 23%, 10% 17%
        );
    }
    66% {
        transform: rotate(-0.5deg);
        opacity: 0.4;
        clip-path: polygon(
            10% 20%, 17% 16%, 23% 23%, 30% 13%, 36% 21%, 43% 15%, 50% 24%, 56% 16%, 
            63% 22%, 69% 14%, 76% 23%, 82% 17%, 88% 26%, 92% 32%, 95% 39%, 93% 46%, 
            96% 52%, 92% 59%, 95% 66%, 91% 72%, 94% 79%, 90% 85%, 87% 91%, 81% 95%, 
            74% 98%, 67% 95%, 61% 98%, 54% 94%, 48% 97%, 41% 93%, 35% 96%, 28% 92%, 
            22% 95%, 15% 91%, 9% 88%, 5% 81%, 2% 74%, 5% 67%, 1% 60%, 4% 53%, 
            0% 46%, 3% 39%, -1% 32%, 2% 25%, 6% 19%
        );
    }
    100% {
        transform: rotate(-0.3deg);
        opacity: 0.5;
        clip-path: polygon(
            12% 18%, 19% 12%, 25% 19%, 32% 11%, 38% 17%, 45% 13%, 52% 20%, 58% 14%, 
            65% 18%, 71% 12%, 78% 19%, 84% 15%, 90% 22%, 94% 28%, 97% 35%, 95% 42%, 
            98% 48%, 94% 55%, 97% 62%, 93% 68%, 96% 75%, 92% 81%, 89% 87%, 83% 91%, 
            76% 94%, 69% 91%, 63% 94%, 56% 90%, 50% 93%, 43% 89%, 37% 92%, 30% 88%, 
            24% 91%, 17% 87%, 11% 84%, 7% 77%, 4% 70%, 7% 63%, 3% 56%, 6% 49%, 
            2% 42%, 5% 35%, 1% 28%, 4% 21%, 8% 15%
        );
    }
}

@keyframes ratureBackgroundHover {
    0% {
        background: 
            /* Ratures plus intenses au survol */
            repeating-linear-gradient(
                3deg,
                transparent 0px,
                transparent 2px,
                rgba(0, 0, 0, 0.8) 2px,
                rgba(0, 0, 0, 0.8) 4px,
                transparent 4px,
                transparent 10px
            ),
            repeating-linear-gradient(
                -2deg,
                transparent 0px,
                transparent 3px,
                rgba(0, 0, 0, 0.7) 3px,
                rgba(0, 0, 0, 0.7) 5px,
                transparent 5px,
                transparent 12px
            ),
            repeating-linear-gradient(
                -1deg,
                transparent 0px,
                transparent 1px,
                rgba(0, 0, 0, 0.6) 1px,
                rgba(0, 0, 0, 0.6) 3px,
                transparent 3px,
                transparent 8px
            ),
            repeating-linear-gradient(
                47deg,
                transparent 0px,
                transparent 6px,
                rgba(0, 0, 0, 0.5) 6px,
                rgba(0, 0, 0, 0.5) 8px,
                transparent 8px,
                transparent 20px
            ),
            repeating-linear-gradient(
                -43deg,
                transparent 0px,
                transparent 4px,
                rgba(0, 0, 0, 0.4) 4px,
                rgba(0, 0, 0, 0.4) 6px,
                transparent 6px,
                transparent 15px
            ),
            repeating-linear-gradient(
                92deg,
                transparent 0px,
                transparent 3px,
                rgba(0, 0, 0, 0.6) 3px,
                rgba(0, 0, 0, 0.6) 5px,
                transparent 5px,
                transparent 14px
            );
        opacity: 0.9;
    }
    50% {
        background: 
            repeating-linear-gradient(
                1deg,
                transparent 0px,
                transparent 3px,
                rgba(0, 0, 0, 0.9) 3px,
                rgba(0, 0, 0, 0.9) 5px,
                transparent 5px,
                transparent 11px
            ),
            repeating-linear-gradient(
                -4deg,
                transparent 0px,
                transparent 2px,
                rgba(0, 0, 0, 0.6) 2px,
                rgba(0, 0, 0, 0.6) 4px,
                transparent 4px,
                transparent 9px
            ),
            repeating-linear-gradient(
                2deg,
                transparent 0px,
                transparent 2px,
                rgba(0, 0, 0, 0.7) 2px,
                rgba(0, 0, 0, 0.7) 4px,
                transparent 4px,
                transparent 10px
            ),
            repeating-linear-gradient(
                44deg,
                transparent 0px,
                transparent 7px,
                rgba(0, 0, 0, 0.4) 7px,
                rgba(0, 0, 0, 0.4) 9px,
                transparent 9px,
                transparent 22px
            ),
            repeating-linear-gradient(
                -46deg,
                transparent 0px,
                transparent 5px,
                rgba(0, 0, 0, 0.5) 5px,
                rgba(0, 0, 0, 0.5) 7px,
                transparent 7px,
                transparent 18px
            ),
            repeating-linear-gradient(
                86deg,
                transparent 0px,
                transparent 4px,
                rgba(0, 0, 0, 0.7) 4px,
                rgba(0, 0, 0, 0.7) 6px,
                transparent 6px,
                transparent 16px
            );
        opacity: 0.95;
    }
    100% {
        opacity: 0.9;
    }
}

/* === FEUILLES DE PAPIER SUPERPOSÉES === */
.contact-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.95);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    perspective: 2000px; /* Perspective 3D */
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.contact-overlay.show {
    display: flex;
    animation: fadeInPaper 0.6s ease-out;
}

.papers-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d; /* Active la 3D */
    /* ZONE DE CONFINEMENT - Empêcher les débordements */
    overflow: hidden; /* Le CV ne peut pas sortir de cette zone */
    /* Créer un espace de sécurité pour le déplacement */
    padding: 50px; /* Espace de marge interne pour les mouvements */
    box-sizing: border-box;
    /* Assurer que tous les enfants restent à l'intérieur */
    contain: layout style;
}

/* Forcer tous les papiers à rester dans le container */
.papers-container > .cv-paper,
.papers-container > .contact-paper {
    /* Limites maximales pour éviter tout débordement */
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    /* Confinement strict */
    contain: layout;
}

/* Responsive papers-container */
@media (max-width: 1024px) {
    .papers-container {
        padding: 30px; /* Padding réduit pour tablette */
        box-sizing: border-box;
        overflow: hidden; /* Maintenir le confinement */
        /* Assurer que tous les enfants restent à l'intérieur */
        contain: layout style;
    }
    
    /* Ajuster les limites pour tablette */
    .papers-container > .cv-paper,
    .papers-container > .contact-paper {
        max-width: calc(100% - 15px);
        max-height: calc(100% - 15px);
    }
}

@media (max-width: 768px) {
    .papers-container {
        padding: 20px; /* Padding encore plus réduit pour mobile */
        box-sizing: border-box;
        overflow: hidden; /* Maintenir le confinement */
        /* Assurer que tous les enfants restent à l'intérieur */
        contain: layout style;
    }
    
    /* Ajuster les limites pour mobile */
    .papers-container > .cv-paper,
    .papers-container > .contact-paper {
        max-width: calc(100% - 10px);
        max-height: calc(100% - 10px);
    }
}

/* === CV - GRANDE FEUILLE ARRIÈRE === */
.cv-paper {
    position: absolute;
    /* Dimensions réduites de 50% pour ordinateur seulement */
    width: 25vw;  /* 50vw réduit de 50% */
    height: calc(25vw / 0.707); /* Hauteur calculée selon le ratio A4 */
    max-width: 300px;  /* 600px réduit de 50% */
    max-height: calc(300px / 0.707); /* Hauteur max proportionnelle */
    min-width: 150px; /* 300px réduit de 50% */
    min-height: calc(150px / 0.707);
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    z-index: 1;
    cursor: grab !important;
    pointer-events: all; /* Force la réception des événements */
    user-select: none; /* Empêche la sélection de texte */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* POSITIONNEMENT AJUSTÉ : déplacé vers la droite et vers le bas */
    left: 36%; /* 40% - 4% = déplacé de 4% vers la gauche */
    top: 60%; /* 70% - 10% = remonté de 10% vers le haut */
    /* Utiliser transform pour centrer SANS déborder des marges */
    transform: translate(-50%, -50%) translateZ(-20px) rotateX(2deg) rotateY(-1deg);
    /* S'assurer qu'il reste strictement dans les limites du container */
    contain: layout style;
    /* RESPECT STRICT des marges du container - AJUSTÉ pour la nouvelle taille réduite */
    max-width: calc(50% - 30px); /* Ne pas dépasser la moitié moins les marges */
    max-height: calc(100% - 60px); /* Respecter les marges top/bottom */
}

.cv-paper.dragging {
    cursor: grabbing !important;
}

.cv-paper-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0; /* Supprime les coins arrondis */
    cursor: grab !important;
    user-select: none; /* Empêche la sélection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border: none; /* Plus besoin de bordure pour l'interaction */
    box-shadow: none; /* Supprime complètement les ombres */
}

.cv-paper-side.front {
    background: transparent !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.cv-paper-side.back {
    background: transparent !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
}

/* Optimisation rendu SVG pour CV */
.cv-paper-side img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.cv-frame {
    width: 100%; /* Remplit exactement le conteneur */
    height: 100%; /* Remplit exactement le conteneur */
    left: 0;
    top: 0;
    position: absolute;
    border: none;
    border-radius: 0;
    pointer-events: none;
    cursor: grab !important;
    user-select: none;
    filter: contrast(1.1) brightness(1.05);
    background: transparent !important;
    opacity: 1;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
}

/* Couche interactive transparente par-dessus le CV */
.cv-interactive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: grab !important;
    z-index: 2; /* Au-dessus de l'iframe mais sous les autres éléments */
    border-radius: 0; /* Supprime les coins arrondis */
}

.cv-interactive-overlay:active {
    cursor: grabbing !important;
}

/* SOLUTION SIMPLE ET EFFICACE - CV TOUJOURS CENTRÉ */
@media (max-width: 1024px) {
    .papers-container > .cv-paper {
        /* Taille adaptative simple */
        width: 50vw !important;
        height: 70vw !important; /* Proportion CV */
        max-width: 350px !important;
        max-height: 495px !important;
        min-width: 200px !important;
        min-height: 283px !important;
        /* CENTRAGE ABSOLU SIMPLE */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* Centrage parfait sans scale */
        transform-origin: center center !important;
        /* Style */
        transform-style: flat !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        transition: transform 0.3s ease !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }

    .cv-interactive-overlay {
        display: block !important;
        touch-action: manipulation !important;
        left: 0 !important;
    }
}

@media (max-width: 768px) {
    /* CV MOBILE - Centré avec taille mobile */
    .papers-container > .cv-paper {
        /* Taille mobile adaptée */
        width: 60vw !important;
        height: 85vw !important; /* Proportion CV mobile */
        max-width: 300px !important;
        max-height: 424px !important;
        min-width: 180px !important;
        min-height: 254px !important;
        /* CENTRAGE ABSOLU */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* Centrage parfait */
        transform-origin: center center !important;
        /* Style mobile */
        transform-style: flat !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        transition: transform 0.3s ease !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }
    
    .cv-interactive-overlay {
        display: block !important;
        /* Optimiser pour le tactile */
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        /* Overlay reste sur le CV */
        left: 0 !important;
    }
}

/* PETITS ÉCRANS - iPhone SE etc. */
@media (max-width: 480px) {
    .papers-container > .cv-paper {
        /* Taille petits écrans */
        width: 70vw !important;
        height: 99vw !important; /* Proportion CV petits écrans */
        max-width: 250px !important;
        max-height: 353px !important;
        min-width: 150px !important;
        min-height: 212px !important;
        /* CENTRAGE ABSOLU */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center center !important;
        z-index: 1000 !important;
    }
}

/* PAYSAGE MOBILE */
@media (max-height: 500px) and (orientation: landscape) {
    .papers-container > .cv-paper {
        /* Taille paysage compacte */
        width: 40vw !important;
        height: 70vh !important; /* En paysage, utiliser la hauteur */
        max-width: 200px !important;
        max-height: 280px !important;
        min-width: 120px !important;
        min-height: 170px !important;
        /* CENTRAGE ABSOLU */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center center !important;
        z-index: 1000 !important;
    }
}

/* Optimiser le conteneur pour mobile avec 3D */
.papers-container {
        /* Garder la perspective pour la 3D */
        perspective: 1500px !important;
        transform-style: preserve-3d !important;
        /* Améliorer les performances */
        will-change: transform !important;
        /* Zone de confinement mobile plus stricte */
        padding: 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Confinement strict sur mobile */
        /* Indicateur visuel subtil de la zone (optionnel) */
        /* border: 1px solid rgba(255,255,255,0.1); */
    }

    /* Désactiver les animations consommatrices mais garder la 3D */
    .cv-paper * {
        animation: none !important;
        /* Garder les transitions courtes pour la 3D */
        transition: transform 0.05s ease-out !important;
    }

/* ANTI-CHEVAUCHEMENT ULTIME - Position absolue des éléments */
@media (max-width: 1024px) {
    /* Sur mobile/tablette, repositionner aux coins */
    
    /* Repositionner le bouton retour accueil - COIN BAS GAUCHE */
    .back-to-home-btn {
        position: fixed !important;
        bottom: 10px !important;
        left: 10px !important;
        z-index: 9999 !important; /* Z-index ultra-élevé */
        transform: scale(0.7) !important; /* Plus petit */
        transform-origin: bottom left !important;
        width: auto !important;
        height: auto !important;
        min-width: 120px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; /* Visibilité */
    }
    
    /* === BOUTON RESET PAPIERS === */
    .reset-papers-btn {
        position: absolute;
        left: 30px;
        top: 45%; /* Légèrement plus haut */
        transform: translateY(-50%);
        width: 200px;
        height: 70px;
        z-index: 100;
        font-size: 0.9rem;
    }
    
    /* === INSTRUCTIONS === */
    .papers-instructions {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.9);
        font-size: 1rem;
        text-align: center;
        font-family: 'Kindergarten', sans-serif;
        background: rgba(0, 0, 0, 0.6);
        padding: 12px 24px;
        border-radius: 8px;
        backdrop-filter: blur(4px);
        z-index: 10;
    }
    
    /* Contrôle magnifier - CÔTÉ DROIT CENTRE */
    .magnifier-control {
        position: fixed;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        z-index: 5000;
    }
}

/* DESKTOP RESPONSIVE - Pour fenêtre redimensionnée */
@media (min-width: 1025px) {
    /* Réinitialiser les positions pour desktop - SAUF logos et loupe */
    .back-to-home-btn {
        position: relative !important;
        transform: none !important;
        /* Laisser les styles par défaut pour desktop */
    }
    
    /* Reset papers btn garde sa position absolue à gauche */
    .reset-papers-btn {
        position: absolute !important;
        left: 30px !important;
        top: 45% !important;
        transform: translateY(-50%) !important;
        width: 200px !important;
        height: 70px !important;
        z-index: 100 !important;
        transition: transform 0.1s ease-out !important;
    }
    
    /* Animations hover pour reset-papers-btn dans cette media query */
    .reset-papers-btn:hover {
        transform: translateY(-50%) scale(1.05) !important; /* Légère mise à l'échelle au hover */
        transition: transform 0.2s ease !important;
    }
    
    .reset-papers-btn:active {
        transform: translateY(-50%) scale(1.1) !important;
    }
    
    .reset-papers-btn::before {
        content: '' !important;
        position: absolute !important;
        top: -1px !important;
        left: -1px !important;
        right: -1px !important;
        bottom: -1px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 2px 0.5px 2.5px 1px !important;
        transform: rotate(-0.3deg) !important;
        transition: all 0.2s ease !important;
    }
    
    .reset-papers-btn::after {
        content: '' !important;
        position: absolute !important;
        top: -0.5px !important;
        left: -0.5px !important;
        right: -0.5px !important;
        bottom: -0.5px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 1px 2.5px 0.5px 1.5px !important;
        transform: rotate(0.2deg) !important;
        transition: all 0.2s ease !important;
    }
    
    .reset-papers-btn:hover::before {
        border-color: rgba(255, 255, 255, 0.4) !important;
        border-width: 0.7px !important;
        transform: rotate(-0.5deg) !important;
    }
    
    .reset-papers-btn:hover::after {
        border-color: rgba(255, 255, 255, 0.5) !important;
        border-width: 0.7px !important;
        transform: rotate(0.4deg) !important;
    }
    
    /* Instructions gardent leur position absolue en bas */
    .papers-instructions {
        position: absolute !important;
        bottom: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Logos sociaux responsive sur desktop redimensionné */
    .social-logos-container {
        position: absolute !important;
        right: 800px !important; /* Déplacé de 200% supplémentaires vers la gauche */
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        /* Réinitialiser les styles mobile */
        flex-direction: column !important;
        gap: 45px !important;
    }
    
    .social-logos-instruction {
        position: absolute !important;
        /* Réinitialiser les styles mobile */
        top: auto !important;
        right: auto !important;
        transform: none !important;
        background: transparent !important;
        color: inherit !important;
        font-size: inherit !important;
    }
    
    /* LOUPE - Garder sa position fixe à droite sur desktop */
    .magnifier-control {
        position: fixed !important;
        top: 50% !important;
        right: 30px !important;
        transform: translateY(-50%) !important;
    }
}

/* MOBILE SPÉCIFIQUE - Ajustements fins */
@media (max-width: 768px) {
    .back-to-home-btn,
    .reset-papers-btn {
        transform: scale(0.6) !important; /* Encore plus petit sur mobile */
        min-width: 100px !important;
    }
    
    .papers-instructions {
        bottom: 70px !important;
        font-size: 10px !important;
        padding: 6px 10px !important;
    }
    
    .social-logos-container {
        transform: scale(0.5) !important;
    }
}

/* === CONTACT - PETITE FEUILLE AVANT === */
.contact-paper {
    position: absolute;
    width: 280px; /* Réduit la largeur */
    height: 350px; /* Réduit la hauteur pour qu'il ne dépasse pas */
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    z-index: 10; /* Z-index CSS plus élevé que le CV */
    cursor: grab;
    pointer-events: all; /* Force la réception des événements */
    /* Position du papier jaune remonté */
    left: 50%; /* Centré horizontalement */
    top: 20%; /* Remonté plus haut */
    transform: translate(-50%, -50%) translateZ(100px) rotateX(-1deg) rotateY(2deg); /* Centrage parfait + transformations 3D */
}

.contact-paper.dragging {
    cursor: grabbing;
}

.contact-paper-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 3px;
    font-family: 'Kindergarten', serif;
    box-shadow: none !important; /* Supprime complètement l'ombre */
    border: none !important; /* Supprime complètement les bordures */
}

.contact-paper-side.front {
    background: 
        /* Taches d'usure plus nombreuses et marquées */
        radial-gradient(circle at 15% 25%, rgba(139, 69, 19, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 75% 85%, rgba(160, 82, 45, 0.12) 0%, transparent 25%),
        radial-gradient(circle at 45% 65%, rgba(101, 67, 33, 0.10) 0%, transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.08) 0%, transparent 20%),
        radial-gradient(circle at 25% 80%, rgba(160, 82, 45, 0.09) 0%, transparent 30%),
        radial-gradient(circle at 60% 40%, rgba(101, 67, 33, 0.07) 0%, transparent 40%),
        /* Rayures d'usure */
        linear-gradient(45deg, transparent 45%, rgba(139, 69, 19, 0.04) 49%, rgba(139, 69, 19, 0.04) 51%, transparent 55%),
        linear-gradient(-30deg, transparent 70%, rgba(160, 82, 45, 0.03) 72%, rgba(160, 82, 45, 0.03) 74%, transparent 76%),
        /* Base jaune vieillie et ternie */
        linear-gradient(135deg, 
            #f5f08a 0%,    /* Plus terne */
            #f0e870 15%,   /* Moins vif */
            #e8dd55 35%,   /* Plus sale */
            #ddd040 55%,   /* Plus foncé */
            #d1c235 75%,   /* Très terni */
            #c4b528 90%,   /* Très usé */
            #b8a820 100%  /* Bordures très sales */
        );
}

.contact-paper-side.back {
    background: 
        /* Taches d'usure au verso */
        radial-gradient(circle at 40% 40%, rgba(139, 69, 19, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(160, 82, 45, 0.08) 0%, transparent 40%),
        /* Base jaune ternie pour le verso */
        linear-gradient(135deg, 
            #ede085 0%,    /* Plus terne que le recto */
            #e2d560 25%, 
            #d5c845 50%, 
            #c8ba30 75%, 
            #b8a525 100%   /* Très usé */
        );
    transform: rotateY(180deg);
}

/* === CONTENU PAPERS === */
.contact-content {
    padding: 25px 20px;
    height: calc(100% - 50px);
    position: relative;
    z-index: 3;
}

.contact-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px dashed rgba(139, 69, 19, 0.4);
    padding-bottom: 15px;
}

.contact-header h2 {
    font-size: 1.6rem;
    color: #8B4513;
    margin: 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transform: rotate(-0.8deg);
}

.contact-list {
    margin: 20px 0;
}

.contact-item {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    transform: rotate(0.3deg);
    line-height: 1.3;
    font-size: 0.9rem;
}

.contact-item:nth-child(even) {
    transform: rotate(-0.4deg);
}

.contact-item .bullet {
    color: #8B4513;
    font-weight: bold;
    margin-right: 6px;
    font-size: 1rem;
}

.contact-item .label {
    font-weight: bold;
    color: #8B4513;
    min-width: 65px;
    margin-right: 6px;
    font-size: 0.85rem;
}

.contact-item .value {
    color: #654321;
    flex: 1;
    font-size: 0.8rem;
    word-break: break-all;
}

.contact-note {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px dashed rgba(139, 69, 19, 0.3);
    text-align: center;
}

.note-text {
    margin: 6px 0;
    color: #8B4513;
    font-style: italic;
    font-size: 0.75rem;
    transform: rotate(-0.2deg);
}

.note-text:nth-child(even) {
    transform: rotate(0.3deg);
}

/* === VERSO CONTACT === */
.contact-back-content {
    margin: 15px 0;
}

.contact-back-line {
    margin-bottom: 10px;
    color: #654321;
    font-size: 0.8rem;
    transform: rotate(0.2deg);
    line-height: 1.4;
}

.contact-back-line:nth-child(odd) {
    transform: rotate(-0.3deg);
}

/* === NOUVEAUX STYLES POUR LA FEUILLE CONTACT PERSONNALISÉE === */

/* Image de fond qui remplace complètement le fond de la feuille contact */
.contact-paper-side.front,
.contact-paper-side.back {
    background: none !important; /* Supprime le fond jaune original */
    padding: 0 !important; /* Supprime le padding pour que l'image prenne tout l'espace */
    border: none !important; /* Supprime les bordures */
}

/* Rendre transparent/invisible le contour, scotch et effets vintage */
.contact-paper .paper-tear,
.contact-paper .paper-stain,
.contact-paper .paper-tape {
    opacity: 0 !important; /* Rend invisible */
    pointer-events: none !important; /* Désactive les interactions */
}

.contact-paper-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    border-radius: 3px;
}

.contact-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

/* Contenu superposé sur l'image - Container limité à la taille de la feuille */
.contact-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Z-index plus élevé pour être au-dessus */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px; /* Marges plus importantes pour éviter le débordement */
    box-sizing: border-box;
    overflow: hidden; /* Empêche le débordement du contenu */
    border-radius: 3px; /* Suit la forme de la feuille */
    pointer-events: auto; /* Permet les interactions */
}

/* Section Open to Work */
.open-to-work-section {
    text-align: center;
    margin-bottom: 20px;
}

.open-to-work-title {
    font-family: 'Kindergarten', serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #2c5aa0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    margin: 0 0 15px 0;
    transform: rotate(-1deg);
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.skill-item {
    background: rgba(44, 90, 160, 0.1);
    border: 1px solid rgba(44, 90, 160, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #2c5aa0;
    font-weight: bold;
    transform: rotate(0.5deg);
    transition: all 0.3s ease;
}

.skill-item:hover {
    background: rgba(44, 90, 160, 0.2);
    transform: rotate(0deg) scale(1.05);
}

/* Logos sociaux */
.social-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

.social-link {
    display: block;
    transition: all 0.3s ease;
    transform: rotate(0deg);
}

.social-link:hover {
    transform: rotate(-2deg) scale(1.1);
}

/* Informations de contact */
.contact-info {
    text-align: center;
    margin-top: auto;
}

.contact-item {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transform: rotate(0.2deg);
}

.contact-label {
    font-weight: bold;
    color: #2c5aa0;
    font-size: 0.8rem;
}

.contact-value {
    color: #333;
    font-size: 0.8rem;
}

/* Container pour le contenu du verso - limité à la taille de la feuille */
.contact-back-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Empêche le débordement du contenu */
    border-radius: 3px; /* Suit la forme de la feuille */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.contact-back-content {
    flex: 1;
    overflow-y: auto; /* Scroll si nécessaire */
    padding-right: 5px; /* Espace pour la scrollbar éventuelle */
}

/* Styles pour le verso */
.contact-back-header {
    font-size: 1rem;
    font-weight: bold;
    color: #2c5aa0; /* Couleur cohérente avec le recto */
    text-align: center;
    margin-bottom: 15px;
    transform: rotate(-0.5deg);
    border-bottom: 2px solid rgba(44, 90, 160, 0.3);
    padding-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.contact-back-line {
    margin-bottom: 8px;
    color: #2c5aa0;
    font-size: 0.8rem;
    transform: rotate(0.2deg);
    line-height: 1.4;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

.contact-back-line:nth-child(odd) {
    transform: rotate(-0.3deg);
}

/* === DÉCHIRURES ET EFFETS === */
.paper-tear {
    position: absolute;
    background: rgba(0, 0, 0, 0.08);
    z-index: 4;
}

.contact-tear-1 {
    width: 20px;
    height: 15px;
    top: 0;
    left: 0;
    clip-path: polygon(0% 0%, 70% 0%, 85% 60%, 40% 100%, 0% 80%);
}

.contact-tear-2 {
    width: 15px;
    height: 12px;
    bottom: 0;
    right: 0;
    clip-path: polygon(30% 0%, 100% 0%, 100% 70%, 60% 100%, 20% 80%);
}

.cv-tear-1 {
    width: 40px;
    height: 30px;
    top: 0;
    left: 0;
    clip-path: polygon(0% 0%, 60% 0%, 80% 40%, 70% 100%, 30% 80%, 0% 90%);
}

.cv-tear-2 {
    width: 35px;
    height: 25px;
    bottom: 0;
    right: 10px;
    clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 70% 100%, 40% 70%, 0% 90%);
}

/* === TACHES === */
.paper-stain {
    position: absolute;
    border-radius: 50%;
    z-index: 3;
}

.contact-stain-1 {
    width: 8px;
    height: 6px;
    top: 60px;
    right: 30px;
    background: radial-gradient(ellipse, rgba(139, 69, 19, 0.15) 0%, transparent 70%);
    border-radius: 60% 40%;
}

.cv-stain-1 {
    width: 25px;
    height: 20px;
    top: 100px;
    left: 80px;
    background: radial-gradient(ellipse, rgba(160, 82, 45, 0.12) 0%, transparent 80%);
    border-radius: 70% 30%;
}

/* === SCOTCH === */
.paper-tape {
    position: absolute;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.85) 0%, 
            rgba(245, 245, 245, 0.7) 50%, 
            rgba(255, 255, 255, 0.85) 100%
        );
    border: 1px solid rgba(200, 200, 200, 0.4);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 5;
    pointer-events: none; /* Les scotchs ne doivent pas intercepter les clics */
}

.contact-tape {
    width: 50px;
    height: 15px;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
}

.cv-tape-1 {
    width: 60px;
    height: 18px;
    top: -9px;
    left: 30%;
    transform: translateX(-50%) rotate(1deg);
}

.cv-tape-2 {
    width: 45px;
    height: 15px;
    bottom: 50px;
    right: 40px;
    transform: rotate(-3deg);
}

/* === OVERLAY CV === */
.cv-vintage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permet aux événements de passer à travers */
    background: transparent; /* Supprime complètement le fond */
    border-radius: 0; /* Supprime les coins arrondis */
    border: none; /* Supprime la bordure */
}

/* === BOUTON RESET PAPIERS === */
.reset-papers-btn {
    position: absolute;
    left: 30px;
    top: 45%; /* Légèrement plus haut */
    transform: translateY(-50%);
    width: 200px;
    height: 70px;
    z-index: 100;
    font-size: 0.9rem;
    transition: transform 0.1s ease-out;
}

/* Effet parallaxe pour reset-papers-btn - Première couche */
.reset-papers-btn::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
    pointer-events: none;
    border-radius: 2px 0.5px 2.5px 1px;
    transform: rotate(-0.3deg);
    transition: all 0.2s ease;
}

/* Effet parallaxe pour reset-papers-btn - Deuxième couche */
.reset-papers-btn::after {
    content: '';
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: -0.5px;
    bottom: -0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    pointer-events: none;
    border-radius: 1px 2.5px 0.5px 1.5px;
    transform: rotate(0.2deg);
    transition: all 0.2s ease;
}

/* Animations hover pour reset-papers-btn - comme back-to-home-btn */
.reset-papers-btn:hover {
    background: transparent !important;
}

.reset-papers-btn:hover::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
    border-width: 0.7px !important;
    transform: rotate(-0.5deg) !important;
}

.reset-papers-btn:hover::after {
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-width: 0.7px !important;
    transform: rotate(0.4deg) !important;
}

.reset-papers-btn:focus {
    background: transparent !important;
    outline: none;
    box-shadow: none;
    border: none;
}

.reset-papers-btn:active {
    background: transparent !important;
    transform: scale(1.1);
}

.reset-papers-btn .button-text {
    font-size: 1rem;
}

.reset-papers-btn .button-subtitle {
    font-size: 0.75rem;
}

.back-to-home-btn {
    /* Utiliser les styles de base du game-button, juste ajuster la taille si nécessaire */
    font-size: 0.9rem;
    position: relative !important; /* Nécessaire pour les pseudo-éléments */
}

/* Forcer l'affichage des pseudo-éléments pour l'encadrement */
.back-to-home-btn::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 2px 0.5px 2.5px 1px !important;
    transform: rotate(-0.3deg) !important;
}

.back-to-home-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -0.5px !important;
    left: -0.5px !important;
    right: -0.5px !important;
    bottom: -0.5px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 1px 2.5px 0.5px 1.5px !important;
    transform: rotate(0.2deg) !important;
}

.back-to-home-btn:hover::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
    border-width: 0.7px !important;
    transform: rotate(-0.5deg) !important;
}

.back-to-home-btn:hover::after {
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-width: 0.7px !important;
    transform: rotate(0.4deg) !important;
}

/* Styles spécifiques avec ID pour forcer l'encadrement sur le bouton portfolio */
#back-to-home-portfolio::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 2px 0.5px 2.5px 1px !important;
    transform: rotate(-0.3deg) !important;
    display: block !important;
}

#back-to-home-portfolio::after {
    content: '' !important;
    position: absolute !important;
    top: -0.5px !important;
    left: -0.5px !important;
    right: -0.5px !important;
    bottom: -0.5px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 1px 2.5px 0.5px 1.5px !important;
    transform: rotate(0.2deg) !important;
    display: block !important;
}

#back-to-home-portfolio {
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

#back-to-home-portfolio:hover::before {
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-width: 0.8px !important;
    transform: rotate(-0.5deg) !important;
}

#back-to-home-portfolio:hover::after {
    border-color: rgba(255, 255, 255, 0.6) !important;
    border-width: 0.8px !important;
    transform: rotate(0.4deg) !important;
}


/* === FORCE ULTIME : BOUTON RETOUR PORTFOLIO === */
/* Sélecteurs très spécifiques pour écraser TOUS les autres styles */

/* Desktop et styles généraux */
#portfolio-window #back-to-home-portfolio.game-button.back-to-home-btn {
    position: relative !important;
    display: block !important;
    margin: 80px auto 50px auto !important;
    width: 250px !important;
    max-width: 90% !important;
    z-index: 999 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Encadrement forcé */
#portfolio-window #back-to-home-portfolio.game-button.back-to-home-btn::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 2px 1px 3px 0.5px !important;
    pointer-events: none !important;
    transform: rotate(-0.3deg) !important;
    display: block !important;
    z-index: 1 !important;
}

#portfolio-window #back-to-home-portfolio.game-button.back-to-home-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 1px 2px 0.5px 3px !important;
    pointer-events: none !important;
    transform: rotate(0.2deg) !important;
    display: block !important;
    z-index: 1 !important;
}
/* Style de base pour desktop */
#portfolio-window .project-item {
    margin-bottom: 80px !important;
    position: relative !important;
}

@media (max-width: 1024px) {
    /* S'assurer que le project-item a assez d'espace en dessous */
    #portfolio-window .project-item {
        margin-bottom: 100px !important;
        position: relative !important;
    }
    
    /* Bouton FORCÉ en dessous, jamais par-dessus */
    #portfolio-window #back-to-home-portfolio {
        position: relative !important;
        display: block !important;
        margin: 50px auto 30px auto !important;
        width: 200px !important;
        max-width: 90% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        clear: both !important;
        text-align: center !important;
        z-index: 15 !important; /* Z-index haut pour être visible */
    }
    
    /* S'assurer que le bouton a l'encadrement blanc */
    #portfolio-window #back-to-home-portfolio.game-button {
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        background: rgba(0, 0, 0, 0.7) !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Restaurer les pseudo-éléments pour l'encadrement gribouillé */
    #portfolio-window #back-to-home-portfolio.game-button::before {
        content: '' !important;
        position: absolute !important;
        top: -2px !important;
        left: -2px !important;
        right: -2px !important;
        bottom: -2px !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 2px 1px 3px 0.5px !important;
        pointer-events: none !important;
        transform: rotate(-0.3deg) !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio.game-button::after {
        content: '' !important;
        position: absolute !important;
        top: -3px !important;
        left: -3px !important;
        right: -3px !important;
        bottom: -3px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 1px 2.5px 0.5px 1.5px !important;
        pointer-events: none !important;
        transform: rotate(0.2deg) !important;
        display: block !important;
    }
}



/* === SOLUTION PROPRE : LAYOUT MOBILE SIMPLE === */
@media (max-width: 1024px) {
    /* Header simple et centré */
    #portfolio-window .collectibles-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
        margin-top: 70px !important;
        gap: 20px !important;
    }
    
    /* Titre en premier */
    #portfolio-window .collectibles-header .collectibles-title {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Conteneur des boutons navigation */
    #portfolio-window .collectibles-header .project-nav-btn {
        order: 2 !important;
        display: inline-block !important;
        margin: 0 10px !important;
        vertical-align: middle !important;
    }
}

/* === RESPONSIVE PARFAIT POUR TOUS LES FORMATS === */

/* TABLETTE GRANDE (769px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    /* ESPACE ULTRA-MINIMAL en bas */
    body {
        padding-bottom: 50px !important;
        min-height: 100vh !important;
    }
    
    /* CONTAINER PRINCIPAL - MARGE ULTRA-RÉDUITE */
    #portfolio-window .collectibles-container {
        margin-bottom: 50px !important;
        padding-bottom: 5px !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }
    
    /* ESPACEMENT ULTRA-MINIMAL POUR LES ÉLÉMENTS */
    #portfolio-window .collectibles-container > * {
        margin-bottom: 10px !important;
        padding-bottom: 2px !important;
    }
    
    /* Containers avec espacement minimal */
    #portfolio-window .collectibles-container .project-container,
    #portfolio-window .collectibles-container .project-info-side,
    #portfolio-window .collectibles-container .project-tags,
    #portfolio-window .collectibles-container .project-item {
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Espace minimal après le dernier élément */
    #portfolio-window .collectibles-container .project-item:last-child,
    #portfolio-window .collectibles-container .project-container:last-child {
        margin-bottom: 60px !important;
        padding-bottom: 10px !important;
    }
    
    /* Boutons navigation côte à côte */
    #portfolio-window .collectibles-header .project-nav-btn {
        padding: 10px 18px !important;
        font-size: 0.9rem !important;
        min-width: 120px !important;
        margin: 0 12px !important;
    }
    
    /* Titre */
    #portfolio-window .collectibles-header .collectibles-title h2 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    /* Bouton retour accueil - MARGE ORANGE RÉDUITE */
    #portfolio-window #back-to-home-portfolio {
        position: fixed !important;
        bottom: 0px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 280px !important;
        max-width: 90% !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        margin: 0 !important;
        padding: 4px 10px !important;
        z-index: 9999999 !important;
        /* STYLE ORANGE VOYANT MAIS PROPORTIONNÉ */
        background: linear-gradient(90deg, #ff6600, #ff8800, #ffaa00) !important;
        border: 3px solid #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 -5px 15px rgba(255, 102, 0, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
        color: #000000 !important;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
        overflow: visible !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        right: auto !important;
    }
}

/* MOBILE GRAND (481px - 768px) */
@media screen and (max-width: 768px) and (min-width: 481px) {
    /* ESPACE ULTRA-MINIMAL en bas */
    body {
        padding-bottom: 45px !important;
    }
    
    /* CONTAINER PRINCIPAL - MARGE ULTRA-RÉDUITE */
    #portfolio-window .collectibles-container {
        margin-bottom: 45px !important;
        padding-bottom: 5px !important;
        max-height: calc(100vh - 55px) !important;
        overflow-y: auto !important;
    }
    
    /* ESPACEMENT ULTRA-MINIMAL POUR LES ÉLÉMENTS */
    #portfolio-window .collectibles-container > * {
        margin-bottom: 8px !important;
        padding-bottom: 2px !important;
    }
    
    /* Containers avec espacement minimal */
    #portfolio-window .collectibles-container .project-container,
    #portfolio-window .collectibles-container .project-info-side,
    #portfolio-window .collectibles-container .project-tags,
    #portfolio-window .collectibles-container .project-item {
        margin-bottom: 18px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Espace minimal après le dernier élément */
    #portfolio-window .collectibles-container .project-item:last-child,
    #portfolio-window .collectibles-container .project-container:last-child {
        margin-bottom: 55px !important;
        padding-bottom: 10px !important;
    }
    
    /* Boutons navigation côte à côte */
    #portfolio-window .collectibles-header .project-nav-btn {
        padding: 9px 15px !important;
        font-size: 0.85rem !important;
        min-width: 100px !important;
        margin: 0 10px !important;
    }
    
    /* Titre */
    #portfolio-window .collectibles-header .collectibles-title h2 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Bouton retour accueil - STYLE GAME-BUTTON */
    #portfolio-window #back-to-home-portfolio.game-button.back-to-home-btn,
    #portfolio-window #back-to-home-portfolio {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 250px !important;
        max-width: 90% !important;
        height: auto !important;
        font-size: 0.85rem !important;
        font-weight: normal !important;
        margin: 40px auto 30px auto !important;
        padding: 12px 20px !important;
        z-index: 9999999 !important;
        /* STYLE GAME-BUTTON SANS ORANGE */
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px 0.5px 2.5px 1px !important;
        box-shadow: none !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        overflow: visible !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        right: auto !important;
    }
    
    /* Encadrement gribouillé comme les game-buttons */
    #portfolio-window #back-to-home-portfolio::before {
        content: '' !important;
        position: absolute !important;
        top: -0.5px !important;
        left: -0.5px !important;
        right: -0.5px !important;
        bottom: -0.5px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 1px 2.5px 0.5px 1.5px !important;
        transform: rotate(0.2deg) !important;
    }
    
    /* Texte du bouton compact sur tablette */
    #portfolio-window #back-to-home-portfolio .button-text {
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio .button-subtitle {
        font-size: 0.7rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0.8 !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio .button-subtitle::before {
        content: "\A" !important;
        white-space: pre !important;
    }
}

/* MOBILE MOYEN (361px - 480px) */
@media screen and (max-width: 480px) and (min-width: 361px) {
    /* ESPACE ULTRA-MINIMAL en bas */
    body {
        padding-bottom: 40px !important;
    }
    
    /* CONTAINER PRINCIPAL - MARGE ULTRA-RÉDUITE */
    #portfolio-window .collectibles-container {
        margin-bottom: 40px !important;
        padding-bottom: 5px !important;
        max-height: calc(100vh - 50px) !important;
        overflow-y: auto !important;
    }
    
    /* ESPACEMENT ULTRA-MINIMAL POUR LES ÉLÉMENTS */
    #portfolio-window .collectibles-container > * {
        margin-bottom: 6px !important;
        padding-bottom: 2px !important;
    }
    
    /* Containers avec espacement minimal */
    #portfolio-window .collectibles-container .project-container,
    #portfolio-window .collectibles-container .project-info-side,
    #portfolio-window .collectibles-container .project-tags,
    #portfolio-window .collectibles-container .project-item {
        margin-bottom: 15px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Espace minimal après le dernier élément */
    #portfolio-window .collectibles-container .project-item:last-child,
    #portfolio-window .collectibles-container .project-container:last-child {
        margin-bottom: 50px !important;
        padding-bottom: 10px !important;
    }
    
    /* Boutons navigation côte à côte */
    #portfolio-window .collectibles-header .project-nav-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
        min-width: 85px !important;
        margin: 0 8px !important;
    }
    
    /* Titre */
    #portfolio-window .collectibles-header .collectibles-title h2 {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }
    
    /* Header plus compact */
    #portfolio-window .collectibles-header {
        padding: 15px 10px !important;
        gap: 15px !important;
    }
    
    /* Bouton retour accueil - STYLE GAME-BUTTON */
    #portfolio-window #back-to-home-portfolio.game-button.back-to-home-btn,
    #portfolio-window #back-to-home-portfolio {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 220px !important;
        max-width: 90% !important;
        height: auto !important;
        font-size: 0.8rem !important;
        font-weight: normal !important;
        margin: 35px auto 25px auto !important;
        padding: 10px 16px !important;
        z-index: 9999999 !important;
        /* STYLE GAME-BUTTON SANS ORANGE */
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px 0.5px 2.5px 1px !important;
        box-shadow: none !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        overflow: visible !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        right: auto !important;
    }
    
    /* Encadrement gribouillé comme les game-buttons */
    #portfolio-window #back-to-home-portfolio::before {
        content: '' !important;
        position: absolute !important;
        top: -0.5px !important;
        left: -0.5px !important;
        right: -0.5px !important;
        bottom: -0.5px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 1px 2.5px 0.5px 1.5px !important;
        transform: rotate(0.2deg) !important;
    }
    
    /* Texte du bouton compact sur mobile moyen */
    #portfolio-window #back-to-home-portfolio .button-text {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio .button-subtitle {
        font-size: 0.65rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0.8 !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio .button-subtitle::before {
        content: "\A" !important;
        white-space: pre !important;
    }
}

/* MOBILE PETIT (≤360px) */
@media screen and (max-width: 360px) {
    /* ESPACE ULTRA-MINIMAL en bas */
    body {
        padding-bottom: 35px !important;
    }
    
    /* CONTAINER PRINCIPAL - MARGE ULTRA-RÉDUITE */
    #portfolio-window .collectibles-container {
        margin-bottom: 35px !important;
        padding-bottom: 3px !important;
        max-height: calc(100vh - 45px) !important;
        overflow-y: auto !important;
    }
    
    /* ESPACEMENT ULTRA-MINIMAL POUR LES ÉLÉMENTS */
    #portfolio-window .collectibles-container > * {
        margin-bottom: 5px !important;
        padding-bottom: 1px !important;
    }
    
    /* Containers avec espacement minimal */
    #portfolio-window .collectibles-container .project-container,
    #portfolio-window .collectibles-container .project-info-side,
    #portfolio-window .collectibles-container .project-tags,
    #portfolio-window .collectibles-container .project-item {
        margin-bottom: 12px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Espace minimal après le dernier élément */
    #portfolio-window .collectibles-container .project-item:last-child,
    #portfolio-window .collectibles-container .project-container:last-child {
        margin-bottom: 45px !important;
        padding-bottom: 8px !important;
    }
    
    /* Boutons navigation côte à côte mais plus petits */
    #portfolio-window .collectibles-header .project-nav-btn {
        padding: 7px 10px !important;
        font-size: 0.75rem !important;
        min-width: 70px !important;
        margin: 0 6px !important;
    }
    
    /* Titre plus petit */
    #portfolio-window .collectibles-header .collectibles-title h2 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Header très compact */
    #portfolio-window .collectibles-header {
        padding: 12px 8px !important;
        gap: 12px !important;
    }
    
    /* Bouton retour accueil - STYLE GAME-BUTTON */
    #portfolio-window #back-to-home-portfolio.game-button.back-to-home-btn,
    #portfolio-window #back-to-home-portfolio {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 200px !important;
        max-width: 90% !important;
        height: auto !important;
        font-size: 0.75rem !important;
        font-weight: normal !important;
        margin: 30px auto 20px auto !important;
        padding: 8px 14px !important;
        z-index: 9999999 !important;
        /* STYLE GAME-BUTTON SANS ORANGE */
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px 0.5px 2.5px 1px !important;
        box-shadow: none !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        overflow: visible !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        right: auto !important;
    }
    
    /* Encadrement gribouillé comme les game-buttons */
    #portfolio-window #back-to-home-portfolio::before {
        content: '' !important;
        position: absolute !important;
        top: -0.5px !important;
        left: -0.5px !important;
        right: -0.5px !important;
        bottom: -0.5px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 1px 2.5px 0.5px 1.5px !important;
        transform: rotate(0.2deg) !important;
    }
    
    /* Texte du bouton compact sur mobile petit */
    #portfolio-window #back-to-home-portfolio .button-text {
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio .button-subtitle {
        font-size: 0.6rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0.8 !important;
        display: block !important;
    }
    
    #portfolio-window #back-to-home-portfolio .button-subtitle::before {
        content: "\A" !important;
        white-space: pre !important;
    }
}

/* ANIMATION PULSANTE POUR LE BOUTON ORANGE */
@keyframes pulseOrange {
    0% {
        transform: scale(1);
        box-shadow: 0 -10px 30px rgba(255, 0, 0, 1), inset 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 -15px 40px rgba(255, 100, 0, 1), inset 0 0 30px rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 -10px 30px rgba(255, 0, 0, 1), inset 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

/* Styles spécifiques avec ID pour forcer l'encadrement sur le bouton contact */
#back-to-home::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 2px 0.5px 2.5px 1px !important;
    transform: rotate(-0.3deg) !important;
    display: block !important;
}

#back-to-home::after {
    content: '' !important;
    position: absolute !important;
    top: -0.5px !important;
    left: -0.5px !important;
    right: -0.5px !important;
    bottom: -0.5px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 1px 2.5px 0.5px 1.5px !important;
    transform: rotate(0.2deg) !important;
    display: block !important;
}

#back-to-home {
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* Surcharge pour le bouton dans la page contact */
#contact-window #back-to-home {
    position: absolute !important;
    left: 30px !important;
    top: calc(45% + 80px) !important; /* Juste en dessous du Reset Papers */
    transform: translateY(-50%) !important;
    width: 200px !important;
    height: 70px !important;
    z-index: 100 !important;
}

#back-to-home:hover::before {
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-width: 0.8px !important;
    transform: rotate(-0.5deg) !important;
}

#back-to-home:hover::after {
    border-color: rgba(255, 255, 255, 0.6) !important;
    border-width: 0.8px !important;
    transform: rotate(0.4deg) !important;
}

.back-to-home-btn .button-text {
    font-size: 1rem;
}

.back-to-home-btn .button-subtitle {
    font-size: 0.75rem;
}

/* === LOGOS SOCIAUX === */
.social-logos-container {
    position: absolute;
    right: 800px; /* Déplacé de 200% supplémentaires vers la gauche */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 45px;
    z-index: 10;
}

.social-logo {
    width: 156px;
    height: 156px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.social-logo:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.social-logo img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-logo:hover img {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Couleurs spécifiques au hover */
.social-logo[data-platform="artstation"]:hover,
.social-logo[data-platform="linkedin"]:hover,
.social-logo[data-platform="instagram"]:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Phrase explicative pour les logos */
.social-logos-instruction {
    position: absolute;
    right: 705px; /* Déplacé de 2% supplémentaires vers la droite */
    top: 22%; /* Déplacé de 4% encore plus haut */
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-family: 'Kindergarten', sans-serif;
    background: rgba(0, 0, 0, 0.6);
    padding: 12px 24px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive intermédiaire pour fenêtre desktop redimensionnée */
@media (min-width: 1025px) and (max-width: 1400px) {
    .social-logos-container {
        right: 700px !important; /* Déplacé vers la gauche, responsive */
        gap: 35px; /* Gap réduit */
        transform: translateY(-50%);
    }
    
    .social-logo {
        width: 120px; /* Taille réduite */
        height: 120px;
    }
    
    .social-logo img {
        width: 80px;
        height: 80px;
    }
}

/* Responsive pour les logos sociaux */
@media (max-width: 1024px) {
    .social-logos-container {
        right: 30px !important;
        gap: 25px;
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        transform: none !important;
        flex-direction: row !important;
    }
    
    .social-logo {
        width: 70px;
        height: 70px;
        overflow: hidden;
    }
    
    .social-logo img {
        width: 85%;
        height: 85%;
    }
    
    .social-logos-instruction {
        position: fixed !important;
        right: 20px !important;
        bottom: 120px !important; /* Au-dessus des logos sociaux */
        top: auto !important;
        transform: none !important;
        font-size: 0.8rem;
        padding: 6px 12px;
        max-width: 250px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .social-logos-container {
        position: fixed !important;
        right: 20px !important;
        bottom: 20px !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        gap: 15px;
    }
    
    .social-logo {
        width: 60px;
        height: 60px;
        overflow: hidden;
    }
    
    .social-logo img {
        width: 85%;
        height: 85%;
    }
    
    .social-logos-instruction {
        position: fixed !important;
        right: 10px !important;
        bottom: 110px !important; /* Au-dessus des logos sociaux */
        top: auto !important;
        transform: none !important;
        font-size: 0.7rem;
        padding: 4px 8px;
        max-width: 200px;
        text-align: center;
    }
}

/* === INSTRUCTIONS === */
.papers-instructions {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    text-align: center;
    font-family: 'Kindergarten', sans-serif;
    background: rgba(0, 0, 0, 0.6);
    padding: 12px 24px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    z-index: 1; /* Z-index bas pour ne pas se superposer */
}

/* Responsive instructions */
@media (max-width: 1024px) {
    .papers-instructions {
        display: none !important; /* Masquer sur tablette pour éviter superposition */
    }
}

@media (max-width: 768px) {
    .papers-instructions {
        display: none !important; /* Masquer sur mobile pour éviter superposition */
    }
}

/* === ANIMATIONS === */
@keyframes fadeInPaper {
    from {
        opacity: 0;
        transform: scale(0.85) rotateX(20deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

/* === FIN FEUILLES SUPERPOSÉES === */
@keyframes fadeInPaper {
    from {
        opacity: 0;
        transform: scale(0.8) rotateX(45deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

/* === FIN FEUILLE DE PAPIER === */

@keyframes gribouilleBorderHover {
    0% {
        transform: rotate(-0.5deg);
        opacity: 0.9;
        clip-path: polygon(
            5% 9%, 12% 5%, 19% 11%, 25% 3%, 32% 8%, 39% 6%, 45% 12%, 52% 4%, 
            59% 10%, 65% 2%, 72% 9%, 79% 5%, 85% 11%, 89% 17%, 92% 25%, 95% 32%, 
            93% 39%, 91% 45%, 94% 52%, 90% 59%, 92% 65%, 88% 72%, 91% 79%, 85% 85%, 
            79% 89%, 72% 92%, 65% 90%, 59% 93%, 52% 89%, 45% 91%, 39% 88%, 32% 90%, 
            25% 86%, 19% 89%, 12% 85%, 5% 82%, 2% 75%, 0% 69%, 3% 62%, -1% 55%, 
            1% 49%, 4% 42%, 0% 35%, 2% 29%, -1% 22%, 3% 15%
        );
    }
    50% {
        transform: rotate(1.2deg);
        opacity: 0.95;
        clip-path: polygon(
            7% 11%, 14% 7%, 21% 13%, 27% 5%, 34% 10%, 41% 8%, 47% 14%, 54% 6%, 
            61% 12%, 67% 4%, 74% 11%, 81% 7%, 87% 13%, 91% 19%, 94% 27%, 97% 34%, 
            95% 41%, 93% 47%, 96% 54%, 92% 61%, 94% 67%, 90% 74%, 93% 81%, 87% 87%, 
            81% 91%, 74% 94%, 67% 92%, 61% 95%, 54% 91%, 47% 93%, 41% 90%, 34% 92%, 
            27% 88%, 21% 91%, 14% 87%, 7% 84%, 4% 77%, 2% 71%, 5% 64%, 1% 57%, 
            3% 51%, 6% 44%, 2% 37%, 4% 31%, 1% 24%, 5% 17%
        );
    }
    100% {
        transform: rotate(-0.5deg);
        opacity: 0.9;
        clip-path: polygon(
            5% 9%, 12% 5%, 19% 11%, 25% 3%, 32% 8%, 39% 6%, 45% 12%, 52% 4%, 
            59% 10%, 65% 2%, 72% 9%, 79% 5%, 85% 11%, 89% 17%, 92% 25%, 95% 32%, 
            93% 39%, 91% 45%, 94% 52%, 90% 59%, 92% 65%, 88% 72%, 91% 79%, 85% 85%, 
            79% 89%, 72% 92%, 65% 90%, 59% 93%, 52% 89%, 45% 91%, 39% 88%, 32% 90%, 
            25% 86%, 19% 89%, 12% 85%, 5% 82%, 2% 75%, 0% 69%, 3% 62%, -1% 55%, 
            1% 49%, 4% 42%, 0% 35%, 2% 29%, -1% 22%, 3% 15%
        );
    }
}

@keyframes gribouilleBorderHover2 {
    0% {
        transform: rotate(0.6deg);
        opacity: 0.7;
        clip-path: polygon(
            15% 21%, 22% 15%, 28% 22%, 35% 14%, 41% 20%, 48% 16%, 55% 23%, 61% 17%, 
            68% 21%, 74% 15%, 81% 22%, 87% 18%, 93% 25%, 97% 31%, 100% 38%, 98% 45%, 
            101% 51%, 97% 58%, 100% 65%, 96% 71%, 99% 78%, 95% 84%, 92% 90%, 86% 94%, 
            79% 97%, 72% 94%, 66% 97%, 59% 93%, 53% 96%, 46% 92%, 40% 95%, 33% 91%, 
            27% 94%, 20% 90%, 14% 87%, 10% 80%, 7% 73%, 10% 66%, 6% 59%, 9% 52%, 
            5% 45%, 8% 38%, 4% 31%, 7% 24%, 11% 18%
        );
    }
    50% {
        transform: rotate(-0.8deg);
        opacity: 0.9;
        clip-path: polygon(
            13% 19%, 20% 13%, 26% 20%, 33% 12%, 39% 18%, 46% 14%, 53% 21%, 59% 15%, 
            66% 19%, 72% 13%, 79% 20%, 85% 16%, 91% 23%, 95% 29%, 98% 36%, 96% 43%, 
            99% 49%, 95% 56%, 98% 63%, 94% 69%, 97% 76%, 93% 82%, 90% 88%, 84% 92%, 
            77% 95%, 70% 92%, 64% 95%, 57% 91%, 51% 94%, 44% 90%, 38% 93%, 31% 89%, 
            25% 92%, 18% 88%, 12% 85%, 8% 78%, 5% 71%, 8% 64%, 4% 57%, 7% 50%, 
            3% 43%, 6% 36%, 2% 29%, 5% 22%, 9% 16%
        );
    }
    100% {
        transform: rotate(0.6deg);
        opacity: 0.7;
        clip-path: polygon(
            15% 21%, 22% 15%, 28% 22%, 35% 14%, 41% 20%, 48% 16%, 55% 23%, 61% 17%, 
            68% 21%, 74% 15%, 81% 22%, 87% 18%, 93% 25%, 97% 31%, 100% 38%, 98% 45%, 
            101% 51%, 97% 58%, 100% 65%, 96% 71%, 99% 78%, 95% 84%, 92% 90%, 86% 94%, 
            79% 97%, 72% 94%, 66% 97%, 59% 93%, 53% 96%, 46% 92%, 40% 95%, 33% 91%, 
            27% 94%, 20% 90%, 14% 87%, 10% 80%, 7% 73%, 10% 66%, 6% 59%, 9% 52%, 
            5% 45%, 8% 38%, 4% 31%, 7% 24%, 11% 18%
        );
    }
}

.button-text {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: #ffffff;
    text-shadow: none;
    position: relative;
    z-index: 3;
}

.button-subtitle {
    display: block;
    font-size: 0.9rem;
    opacity: 0.7;
    color: #ffffff;
    text-shadow: none;
    position: relative;
    z-index: 3;
    font-weight: 300;
    padding-left: 20px;
}

.button-subtitle::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    z-index: 4;
}

/* Animations Gaming Blanches */
@keyframes titlePulse {
    0%, 100% { 
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 8px rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% { 
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.9),
            0 0 12px rgba(255, 255, 255, 0.5),
            0 0 20px rgba(255, 255, 255, 0.2);
        transform: scale(1.02);
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Animation traits visibles - troisième couche (horizontal) */
@keyframes visibleScribble3 {
    0% { 
        border-top-width: 2px;
        border-bottom-width: 1px;
        opacity: 0.6;
        transform: translateX(0px);
    }
    40% { 
        border-top-width: 1px;
        border-bottom-width: 2px;
        opacity: 0.4;
        transform: translateX(1px);
    }
    80% { 
        border-top-width: 3px;
        border-bottom-width: 1px;
        opacity: 0.7;
        transform: translateX(-0.5px);
    }
    100% { 
        border-top-width: 2px;
        border-bottom-width: 1px;
        opacity: 0.6;
        transform: translateX(0px);
    }
}

/* Animation gribouillage intense - quatrième couche */
@keyframes visibleScribble4 {
    0% { 
        border-radius: 2px 3px 1px 4px;
        border-width: 1px 2px 1px 1px;
        opacity: 0.5;
        transform: translate(0px, 0px) rotate(0deg);
    }
    22% { 
        border-radius: 4px 1px 3px 2px;
        border-width: 2px 1px 3px 2px;
        opacity: 0.2;
        transform: translate(0.4px, -0.5px) rotate(0.3deg);
    }
    44% { 
        border-radius: 1px 4px 2px 1px;
        border-width: 3px 1px 1px 3px;
        opacity: 0.7;
        transform: translate(-0.3px, 0.3px) rotate(-0.2deg);
    }
    66% { 
        border-radius: 3px 2px 4px 3px;
        border-width: 1px 3px 2px 1px;
        opacity: 0.4;
        transform: translate(0.2px, 0.6px) rotate(0.1deg);
    }
    88% { 
        border-radius: 2px 1px 3px 4px;
        border-width: 2px 2px 1px 2px;
        opacity: 0.6;
        transform: translate(-0.6px, -0.2px) rotate(-0.4deg);
    }
    100% { 
        border-radius: 2px 3px 1px 4px;
        border-width: 1px 2px 1px 1px;
        opacity: 0.5;
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Animations pour variations de remplissage */
@keyframes fillVariation1 {
    0% { 
        background: linear-gradient(90deg, #f5f1e8 0%, #e8dcc0 30%, #f0e8d0 60%, #f5f1e8 100%);
        opacity: 0.8;
    }
    25% { 
        background: linear-gradient(90deg, #e8dcc0 0%, #f5f1e8 40%, #e8dcc0 80%, #f0e8d0 100%);
        opacity: 0.6;
    }
    50% { 
        background: linear-gradient(90deg, #f0e8d0 0%, #f5f1e8 20%, #e8dcc0 70%, #f5f1e8 100%);
        opacity: 0.9;
    }
    75% { 
        background: linear-gradient(90deg, #f5f1e8 0%, #f0e8d0 35%, #f5f1e8 65%, #e8dcc0 100%);
        opacity: 0.7;
    }
    100% { 
        background: linear-gradient(90deg, #f5f1e8 0%, #e8dcc0 30%, #f0e8d0 60%, #f5f1e8 100%);
        opacity: 0.8;
    }
}

@keyframes fillVariation2 {
    0% { 
        opacity: 0.6;
        transform: scaleX(1) translateX(0%);
    }
    33% { 
        opacity: 0.3;
        transform: scaleX(1.1) translateX(5%);
    }
    66% { 
        opacity: 0.8;
        transform: scaleX(0.9) translateX(-3%);
    }
    100% { 
        opacity: 0.6;
        transform: scaleX(1) translateX(0%);
    }
}

/* Spinner dessiné à la main pour le chargement */
.spinner {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 50%;
    position: relative;
    margin-bottom: 30px;
    animation: drawSpinner 3s infinite linear;
}

/* Première couche du gribouillage du spinner */
.spinner::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #f5f1e8;
    border-radius: 50%;
    animation: scribbleSpinner1 1.5s infinite ease-in-out;
    opacity: 0.8;
}

/* Deuxième couche du gribouillage du spinner */
.spinner::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px solid #e8dcc0;
    border-radius: 50%;
    animation: scribbleSpinner2 1.8s infinite ease-in-out;
    opacity: 0.6;
}

/* Troisième couche pour plus d'effet manuscrit */
.spinner {
    position: relative;
}

.spinner:before {
    z-index: 1;
}

.spinner:after {
    z-index: 2;
}

/* Messages de chargement - style mat */
#loading-message {
    font-size: 16px;
    color: #e8dcc0;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    font-weight: normal;
    text-shadow: none;
    line-height: 1.4;
    opacity: 0.8;
    animation: fadeInOut 3s infinite;
    transition: all 0.3s ease;
}

#loading-message.pause-message {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    letter-spacing: 1px;
    animation: pauseTitlePulse 4s infinite ease-in-out !important;
    margin-top: 25px;
    margin-bottom: 25px;
    display: inline-block;
    transform-origin: center;
}

.pause-icon {
    font-size: 24px;
    color: #ffffff;
    display: inline-block;
    animation: pauseIconPulse 1.2s infinite ease-in-out;
    margin: 0 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@keyframes pauseIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    }
}



@keyframes pauseBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

@keyframes pauseTitlePulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.08);
    }
}

/* PAUSE COMPLÈTE - Arrêter toutes les animations SAUF le message de pause */
.loading-paused *:not(.pause-message):not(.pause-icon) {
    animation-play-state: paused !important;
    animation: none !important;
}

/* Arrêter spécifiquement les animations visibleScribble */
.loading-paused .loading-bar-container::before {
    animation: none !important;
}

.loading-paused .loading-bar-container::after {
    animation: none !important;
}

.loading-paused .loading-bar-container:before {
    animation: none !important;
}

.loading-paused .loading-bar-container:after {
    animation: none !important;
}

.loading-paused #loading-bar,
.loading-paused #loading-bar::before,
.loading-paused #loading-bar::after {
    animation: none !important;
}

/* Forcer l'arrêt avec des sélecteurs très spécifiques */
#loading-screen.loading-paused .loading-bar-container::before,
#loading-screen.loading-paused .loading-bar-container::after,
#loading-screen.loading-paused .loading-bar-container:before,
#loading-screen.loading-paused .loading-bar-container:after {
    animation: none !important;
    animation-play-state: paused !important;
}

.pause-icon {
    display: inline-block;
    font-size: 20px;
    margin-right: 8px;
    animation: pauseIconTremble 1.5s infinite ease-in-out;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    transform-origin: center;
}

@keyframes pauseIconTremble {
    0%, 100% { 
        transform: rotate(-1deg) scale(1);
    }
    25% { 
        transform: rotate(1deg) scale(1.05);
    }
    50% { 
        transform: rotate(0deg) scale(0.95);
    }
    75% { 
        transform: rotate(-0.5deg) scale(1.02);
    }
}

/* Conteneur de la barre de progression */
.loading-bar-container {
    width: 300px;
    height: 10px;
    background: transparent;
    position: relative;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Couches supplémentaires pour effet gribouillage intense */
.loading-bar-container::before,
.loading-bar-container::after {
    content: '';
    position: absolute;
}

/* Première couche de gribouillage - la plus visible */

/* Première couche - trait principal ÉPAIS et très visible */
.loading-bar-container::before {
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid #f5f1e8;
    border-radius: 4px;
    animation: visibleScribble1 3s infinite linear;
    opacity: 0.95;
    z-index: 4;
    box-shadow: 0 0 1px rgba(245, 241, 232, 0.8);
}

/* Deuxième couche - trait FIN superposé */
.loading-bar-container::after {
    top: -1px;
    left: -4px;
    right: -1px;
    bottom: -4px;
    border: 1px solid #e8dcc0;
    border-radius: 2px;
    animation: visibleScribble2 2.5s infinite linear;
    opacity: 0.85;
    z-index: 3;
}

/* Troisième couche - trait GRAS horizontal */
.loading-bar-container {
    position: relative;
}

.loading-bar-container:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -2px;
    right: -2px;
    bottom: -1px;
    border-top: 4px solid #f0e8d0;
    border-bottom: 2px solid #f0e8d0;
    border-radius: 1px;
    animation: visibleScribble3 4s infinite linear;
    opacity: 0.75;
    z-index: 2;
}

/* Quatrième couche - trait TRÈS FIN pour contraste */  
.loading-bar-container:after {
    content: '';
    position: absolute;
    top: 1px;
    left: -1px;
    right: -1px;
    bottom: 1px;
    border: 1px solid #d4c4a0;
    border-radius: 1px;
    animation: visibleScribble4 2.7s infinite linear;
    opacity: 0.9;
    z-index: 1;
}

/* Barre de progression principale - avec variations de remplissage */
#loading-bar {
    height: 100%;
    background: #f5f1e8;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    width: 0%;
    transition: width 0.3s ease-out;
    box-shadow: none;
    opacity: 0.9;
}

/* Variations de remplissage intérieur */
#loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        #f5f1e8 0%, 
        #e8dcc0 30%, 
        #f0e8d0 60%, 
        #f5f1e8 100%);
    animation: fillVariation1 2.8s infinite linear;
    opacity: 0.8;
}

#loading-bar::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    right: 10%;
    bottom: 20%;
    background: #e8dcc0;
    border-radius: 1px;
    animation: fillVariation2 3.2s infinite linear;
    opacity: 0.6;
}

/* Effet de texture sur la barre */
#loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.3) 25%, 
        transparent 50%, 
        rgba(255,255,255,0.2) 75%, 
        transparent 100%);
    animation: shimmer 2s infinite;
}

/* Pourcentage - style mat */
#loading-percentage {
    font-size: 18px;
    color: #f5f1e8;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: center;
    text-shadow: none;
    opacity: 0.9;
}

/* Animations */
@keyframes drawSpinner {
    0% { transform: rotate(0deg); border-top-color: #f5f1e8; }
    25% { border-right-color: #e8dcc0; }
    50% { transform: rotate(180deg); border-bottom-color: #f5f1e8; }
    75% { border-left-color: #e8dcc0; }
    100% { transform: rotate(360deg); border-top-color: #f5f1e8; }
}

/* Animation gribouillage spinner - première couche */
@keyframes scribbleSpinner1 {
    0%, 100% { 
        border-radius: 45% 55% 48% 52%;
        border-width: 1px 3px 2px 1px;
        opacity: 0.8;
        transform: rotate(0deg);
    }
    20% { 
        border-radius: 52% 48% 55% 45%;
        border-width: 3px 1px 1px 2px;
        opacity: 0.6;
        transform: rotate(0.5deg);
    }
    40% { 
        border-radius: 48% 52% 45% 55%;
        border-width: 2px 2px 3px 1px;
        opacity: 0.9;
        transform: rotate(-0.3deg);
    }
    60% { 
        border-radius: 55% 45% 52% 48%;
        border-width: 1px 2px 1px 3px;
        opacity: 0.7;
        transform: rotate(0.2deg);
    }
    80% { 
        border-radius: 47% 53% 49% 51%;
        border-width: 3px 1px 2px 2px;
        opacity: 0.8;
        transform: rotate(-0.1deg);
    }
}

/* Animation gribouillage spinner - deuxième couche */
@keyframes scribbleSpinner2 {
    0%, 100% { 
        border-radius: 53% 47% 49% 51%;
        border-width: 2px 1px 1px 2px;
        opacity: 0.6;
        transform: rotate(0deg);
    }
    25% { 
        border-radius: 46% 54% 52% 48%;
        border-width: 1px 2px 2px 1px;
        opacity: 0.4;
        transform: rotate(-0.4deg);
    }
    50% { 
        border-radius: 51% 49% 46% 54%;
        border-width: 2px 2px 1px 1px;
        opacity: 0.7;
        transform: rotate(0.3deg);
    }
    75% { 
        border-radius: 49% 51% 54% 46%;
        border-width: 1px 1px 2px 2px;
        opacity: 0.5;
        transform: rotate(-0.2deg);
    }
}

/* Animation gribouillage TRÈS visible - première couche ÉPAISSE */
@keyframes visibleScribble1 {
    0% { 
        border-radius: 2px 5px 3px 6px;
        border-width: 2px 5px 3px 2px;
        opacity: 0.95;
        transform: translate(0px, 0px) rotate(0deg);
    }
    12% { 
        border-radius: 6px 2px 5px 3px;
        border-width: 5px 2px 2px 6px;
        opacity: 0.7;
        transform: translate(0.8px, -0.4px) rotate(0.3deg);
    }
    25% { 
        border-radius: 3px 6px 2px 4px;
        border-width: 3px 6px 4px 2px;
        opacity: 1.0;
        transform: translate(-0.6px, 0.7px) rotate(-0.2deg);
    }
    37% { 
        border-radius: 5px 3px 6px 2px;
        border-width: 2px 3px 2px 5px;
        opacity: 0.5;
        transform: translate(0.3px, -0.6px) rotate(0.4deg);
    }
    50% { 
        border-radius: 2px 4px 3px 5px;
        border-width: 6px 2px 3px 3px;
        opacity: 0.8;
        transform: translate(-0.7px, 0.3px) rotate(-0.3deg);
    }
    62% { 
        border-radius: 6px 2px 4px 3px;
        border-width: 3px 4px 5px 2px;
        opacity: 0.9;
        transform: translate(0.4px, 0.6px) rotate(0.2deg);
    }
    75% { 
        border-radius: 3px 5px 2px 6px;
        border-width: 2px 2px 4px 3px;
        opacity: 0.85;
        transform: translate(-0.2px, -0.3px) rotate(-0.4deg);
    }
    87% { 
        border-radius: 4px 3px 5px 2px;
        border-width: 4px 3px 2px 5px;
        opacity: 0.6;
        transform: translate(0.9px, 0.2px) rotate(0.3deg);
    }
    100% { 
        border-radius: 2px 5px 3px 6px;
        border-width: 2px 5px 3px 2px;
        opacity: 0.95;
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Animation gribouillage intense - deuxième couche */
@keyframes visibleScribble2 {
    0% { 
        border-radius: 3px 1px 4px 2px;
        border-width: 2px 1px 1px 3px;
        opacity: 0.7;
        transform: translate(0px, 0px) rotate(0deg);
    }
    18% { 
        border-radius: 1px 4px 2px 3px;
        border-width: 1px 3px 2px 1px;
        opacity: 0.4;
        transform: translate(-0.7px, 0.3px) rotate(-0.4deg);
    }
    36% { 
        border-radius: 4px 2px 1px 4px;
        border-width: 3px 2px 3px 1px;
        opacity: 0.8;
        transform: translate(0.5px, -0.6px) rotate(0.2deg);
    }
    54% { 
        border-radius: 2px 3px 4px 1px;
        border-width: 1px 1px 2px 4px;
        opacity: 0.3;
        transform: translate(-0.2px, 0.4px) rotate(0.5deg);
    }
    72% { 
        border-radius: 1px 4px 3px 2px;
        border-width: 2px 4px 1px 2px;
        opacity: 0.6;
        transform: translate(0.6px, -0.1px) rotate(-0.1deg);
    }
    90% { 
        border-radius: 4px 1px 2px 3px;
        border-width: 4px 1px 3px 1px;
        opacity: 0.9;
        transform: translate(-0.3px, 0.5px) rotate(0.3deg);
    }
    100% { 
        border-radius: 3px 1px 4px 2px;
        border-width: 2px 1px 1px 3px;
        opacity: 0.7;
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300px); }
}

/* Version mobile */
@media (max-width: 768px) {
    .ui-overlay {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 40px 20px;
        gap: 30px;
    }
    
    .game-title {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-self: center;
        text-align: center;
        padding: 15px;
    }
    
    .game-title h1 {
        font-size: 2.2rem;
    }
    
    .main-menu {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        justify-self: center;
        max-width: 100%;
        padding: 25px;
        gap: 20px;
    }
    
    .game-button {
        min-width: 250px;
        padding: 15px 20px;
        font-size: 0.95rem;
    }
    
    #loading-message {
        font-size: 16px;
        padding: 0 20px;
    }
    
    .loading-bar-container {
        width: 250px;
        height: 10px;
    }
    
    .spinner {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .game-title h1 {
        font-size: 2rem;
    }
    
    .game-button {
        min-width: 220px;
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    .ui-overlay {
        padding: 20px;
    }
}

/* Overlays pour les menus */
.coming-soon-overlay,
.options-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.coming-soon-content,
.options-content {
    background: rgba(0, 0, 0, 0.5); /* Fond noir mat à 50% d'opacité pour voir la vidéo */
    border: none; /* Pas de bordure fixe, encadrement gribouillé à la place */
    border-radius: 0; /* Rectangulaire, pas arrondi */
    padding: 40px;
    text-align: center;
    color: #ffffff; /* Texte blanc */
    max-width: 400px;
    position: relative;
    overflow: visible; /* Pour voir les animations de traits */
    /* Suppression de toutes les ombres et effets brillants pour un rendu mat */
}

/* Encadrement gribouillé style bouton - Première couche mate */
.options-content::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px solid rgb(255, 255, 255); /* Blanc mat, pas de transparence */
    z-index: -1;
    pointer-events: none;
    border-radius: 4px 2px 5px 3px;
    transform: rotate(-0.3deg);
    
    /* Animation simple et nette sans effets brillants */
    animation: encadrementNet 4s ease-in-out infinite;
}

/* Encadrement gribouillé - Deuxième couche mate avec décalage temporel */
.options-content::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid rgb(255, 255, 255); /* Blanc mat, pas de transparence */
    z-index: -1;
    pointer-events: none;
    border-radius: 3px 5px 2px 4px;
    transform: rotate(0.4deg);
    
    /* Animation décalée dans le temps, rendu mat */
    animation: encadrementNet2 4s ease-in-out infinite 2s;
}
/* Animations nettes et mates comme le spinner */
@keyframes encadrementNet {
    0%, 100% { 
        border-radius: 4px 2px 5px 3px;
        border-width: 2px;
        opacity: 1; /* Opacité fixe pour un rendu mat */
        transform: rotate(-0.3deg);
        border-color: rgb(255, 255, 255); /* Blanc mat */
    }
    20% { 
        border-radius: 3px 5px 2px 4px;
        border-width: 2px 1px 2px 2px;
        opacity: 1;
        transform: rotate(0.1deg);
        border-color: rgb(255, 255, 255);
    }
    40% { 
        border-radius: 5px 3px 4px 2px;
        border-width: 1px 2px 2px 1px;
        opacity: 1;
        transform: rotate(-0.2deg);
        border-color: rgb(255, 255, 255);
    }
    60% { 
        border-radius: 2px 4px 3px 5px;
        border-width: 2px 2px 1px 2px;
        opacity: 1;
        transform: rotate(0.3deg);
        border-color: rgb(255, 255, 255);
    }
    80% { 
        border-radius: 4px 3px 5px 2px;
        border-width: 1px 2px 2px 1px;
        opacity: 1;
        transform: rotate(-0.1deg);
        border-color: rgb(255, 255, 255);
    }
}

@keyframes encadrementNet2 {
    0%, 100% { 
        border-radius: 3px 5px 2px 4px;
        border-width: 1px;
        opacity: 1; /* Opacité fixe pour un rendu mat */
        transform: rotate(0.4deg);
        border-color: rgb(255, 255, 255); /* Blanc mat */
    }
    25% { 
        border-radius: 2px 3px 5px 4px;
        border-width: 1px 0.5px 1px 1px;
        opacity: 1;
        transform: rotate(-0.2deg);
        border-color: rgb(255, 255, 255);
    }
    50% { 
        border-radius: 5px 2px 4px 3px;
        border-width: 0.5px 1px 1px 0.5px;
        opacity: 1;
        transform: rotate(0.1deg);
        border-color: rgb(255, 255, 255);
    }
    75% { 
        border-radius: 4px 4px 3px 2px;
        border-width: 1px 1px 0.5px 1px;
        opacity: 1;
        transform: rotate(0.3deg);
        border-color: rgb(255, 255, 255);
    }
}



/* S'assurer que le contenu est au-dessus de l'animation */
.options-content > * {
    position: relative;
    z-index: 2;
}

.coming-soon-content h2,
.options-content h2 {
    color: #ffffff; /* Titre blanc */
    margin-bottom: 20px;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Ombre blanche douce */
}

.coming-soon-content p {
    margin-bottom: 30px;
    color: #ffffff; /* Texte blanc */
    font-size: 1rem;
}

.option-item {
    margin-bottom: 20px;
    text-align: left;
}

.option-item label {
    color: #ffffff; /* Labels blancs */
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.option-item input[type="checkbox"],
.option-item input[type="range"],
.option-item select {
    margin-left: 10px;
    accent-color: #ffffff; /* Accent blanc */
}

/* Styles spécifiques pour le slider avec encadrement blanc et fond transparent */
.option-item input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: transparent; /* Fond transparent */
    border: 1px solid rgb(255, 255, 255); /* Seulement l'encadrement blanc */
    border-radius: 0; /* Rectangulaire pour un aspect mat */
    outline: none;
    position: relative;
    overflow: visible;
}

/* Suppression de l'effet de gribouillage pour un rendu mat */
.option-item input[type="range"]::before {
    display: none; /* Suppression des effets pour un rendu mat */
}

.option-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #ffffff; /* Blanc mat */
    border-radius: 0; /* Carré pour un aspect mat */
    cursor: pointer;
    /* Suppression de toutes les ombres pour un rendu mat */
    border: 1px solid #000000; /* Bordure noire mate */
}

.option-item input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ffffff; /* Blanc mat */
    border-radius: 0; /* Carré pour un aspect mat */
    cursor: pointer;
    border: 1px solid #000000; /* Bordure noire mate */
    /* Suppression de toutes les ombres pour un rendu mat */
}

/* ===== PORTFOLIO - COLLECTIBLES STYLE JEU VIDÉO ===== */

/* ===== PORTFOLIO - RETOUR AU STYLE ORIGINAL ===== */
.portfolio-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(5px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* En-tête Collectibles */
.collectibles-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Boutons aux extrémités, titre au centre */
    padding: 30px 50px;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.nav-arrow {
    background: transparent;
    border: 2px solid white;
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    /* SUPPRESSION : position: relative; */
}

.nav-arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.nav-arrow:active {
    transform: scale(0.95);
}

.collectibles-title {
    text-align: center;
    color: white;
    font-family: 'Kindergarten', sans-serif;
    flex: 1; /* Prend l'espace central disponible */
}

.collectibles-title h2 {
    font-size: 2.5rem;
    margin: 0;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.category-indicator {
    margin-top: 10px;
}



.category-counter {
    font-size: 1rem;
    color: #aaa;
}

/* Ligne blanche décorative - Style gribouillé simple avec layout naturel */
.collectibles-separator {
    position: relative;
    height: 8px;
    margin: 0 50px 30px 50px;
    overflow: visible;
}

.collectibles-separator::before,
.collectibles-separator::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

.collectibles-separator::before {
    top: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        white 15%, 
        transparent 18%, 
        white 22%, 
        white 78%, 
        transparent 82%, 
        white 85%, 
        transparent 100%
    );
    transform: skew(-0.5deg) translateY(1px);
    clip-path: polygon(
        0% 0%, 15% 80%, 18% 20%, 22% 100%, 25% 0%, 
        30% 70%, 35% 30%, 40% 90%, 45% 10%, 50% 60%, 
        55% 40%, 60% 80%, 65% 20%, 70% 100%, 75% 0%, 
        78% 70%, 82% 30%, 85% 90%, 100% 0%
    );
}

.collectibles-separator::after {
    top: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        white 20%, 
        transparent 23%, 
        white 25%, 
        white 75%, 
        transparent 77%, 
        white 80%, 
        transparent 100%
    );
    transform: skew(0.3deg) translateY(-1px);
    clip-path: polygon(
        0% 100%, 20% 30%, 23% 80%, 25% 0%, 28% 60%, 
        33% 40%, 38% 90%, 43% 20%, 48% 70%, 53% 50%, 
        58% 30%, 63% 80%, 68% 10%, 73% 90%, 75% 40%, 
        77% 60%, 80% 20%, 100% 100%
    );
}



/* Bonhomme simple qui marche - Position relative au séparateur */
.collectibles-separator .stick-figure {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 30px;
    height: 45px;
    animation: simpleWalk 15s infinite linear;
    transform-origin: center bottom;
    z-index: 10;
    font-size: 35px;
    filter: brightness(0) invert(1);
    /* Animation décorative - ne peut pas affecter le layout */
    pointer-events: none; /* Évite les interactions accidentelles */
}

.collectibles-separator .stick-figure::before {
    content: '🚶';
    display: block;
    animation: walkRun 1s infinite ease-in-out;
    text-align: center;
    transform: scaleX(-1);
}



/* Animation simple - traversée du séparateur */
@keyframes simpleWalk {
    0% { 
        left: -40px; 
        top: -40px;
    }
    25% { 
        left: 25%; 
        top: -40px;
    }
    50% { 
        left: 50%; 
        top: -40px;
    }
    75% { 
        left: 75%; 
        top: -40px;
    }
    100% { 
        left: calc(100% + 40px); 
        top: -40px;
    }
}

/* Animation équilibrée - ni trop rapide ni trop lente */
@keyframes walkRun {
    /* MARCHE - Jambe droite */
    0% { 
        content: '🚶';
        transform: scaleX(-1) translateY(0px) rotate(0deg) scale(1);
    }
    /* MARCHE - Jambe gauche */
    33% { 
        content: '🏃';
        transform: scaleX(-1) translateY(-1px) rotate(0deg) scale(1.02);
    }
    /* COURSE - Jambe droite */
    66% { 
        content: '🚶';
        transform: scaleX(-1) translateY(-1px) rotate(0deg) scale(1.02);
    }
    /* RETOUR MARCHE */
    100% { 
        content: '🚶';
        transform: scaleX(-1) translateY(0px) rotate(0deg) scale(1);
    }
}

/* Animation du corps - marche mystérieuse style Limbo */
@keyframes limboBody {
    0% { 
        transform: translateX(-50%) rotate(0deg);
        box-shadow: 
            -8px 6px 0 -2px black, 8px 6px 0 -2px black,
            -8px 6px 2px 0 rgba(255,255,255,0.3), 8px 6px 2px 0 rgba(255,255,255,0.3),
            -4px 22px 0 -1px black, 4px 22px 0 -1px black,
            -4px 22px 2px 0 rgba(255,255,255,0.2), 4px 22px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
    12% { 
        /* Marche - jambe gauche en avant */
        transform: translateX(-50%) rotate(-2deg);
        box-shadow: 
            -10px 4px 0 -2px black, 6px 8px 0 -2px black,
            -10px 4px 2px 0 rgba(255,255,255,0.3), 6px 8px 2px 0 rgba(255,255,255,0.3),
            -6px 20px 0 -1px black, 2px 24px 0 -1px black,
            -6px 20px 2px 0 rgba(255,255,255,0.2), 2px 24px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
    25% { 
        /* Marche - jambe droite en avant */
        transform: translateX(-50%) rotate(2deg);
        box-shadow: 
            -6px 8px 0 -2px black, 10px 4px 0 -2px black,
            -6px 8px 2px 0 rgba(255,255,255,0.3), 10px 4px 2px 0 rgba(255,255,255,0.3),
            -2px 24px 0 -1px black, 6px 20px 0 -1px black,
            -2px 24px 2px 0 rgba(255,255,255,0.2), 6px 20px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
    37% { 
        /* Regarde vers le bas - penche la tête */
        transform: translateX(-50%) rotate(8deg);
        box-shadow: 
            -12px 8px 0 -2px black, 4px 6px 0 -2px black,
            -12px 8px 3px 0 rgba(255,255,255,0.4), 4px 6px 3px 0 rgba(255,255,255,0.4),
            -6px 23px 0 -1px black, 2px 25px 0 -1px black,
            -6px 23px 3px 0 rgba(255,255,255,0.3), 2px 25px 3px 0 rgba(255,255,255,0.3),
            0 0 10px rgba(255,255,255,0.3);
    }
    50% { 
        /* Position neutre */
        transform: translateX(-50%) rotate(0deg);
        box-shadow: 
            -8px 6px 0 -2px black, 8px 6px 0 -2px black,
            -8px 6px 2px 0 rgba(255,255,255,0.3), 8px 6px 2px 0 rgba(255,255,255,0.3),
            -4px 22px 0 -1px black, 4px 22px 0 -1px black,
            -4px 22px 2px 0 rgba(255,255,255,0.2), 4px 22px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
    62% { 
        /* Course accélérée */
        transform: translateX(-50%) rotate(-4deg);
        box-shadow: 
            -12px 2px 0 -2px black, 4px 10px 0 -2px black,
            -12px 2px 2px 0 rgba(255,255,255,0.3), 4px 10px 2px 0 rgba(255,255,255,0.3),
            -8px 18px 0 -1px black, 0px 26px 0 -1px black,
            -8px 18px 2px 0 rgba(255,255,255,0.2), 0px 26px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
    75% { 
        /* Saut préparatoire */
        transform: translateX(-50%) rotate(-8deg) scaleY(0.9);
        box-shadow: 
            -10px 5px 0 -2px black, 10px 5px 0 -2px black,
            -10px 5px 3px 0 rgba(255,255,255,0.4), 10px 5px 3px 0 rgba(255,255,255,0.4),
            -6px 20px 0 -1px black, 6px 20px 0 -1px black,
            -6px 20px 3px 0 rgba(255,255,255,0.3), 6px 20px 3px 0 rgba(255,255,255,0.3),
            0 0 12px rgba(255,255,255,0.4);
    }
    87% { 
        /* Atterrissage */
        transform: translateX(-50%) rotate(3deg) scaleY(1.1);
        box-shadow: 
            -6px 8px 0 -2px black, 12px 4px 0 -2px black,
            -6px 8px 2px 0 rgba(255,255,255,0.3), 12px 4px 2px 0 rgba(255,255,255,0.3),
            -2px 24px 0 -1px black, 8px 22px 0 -1px black,
            -2px 24px 2px 0 rgba(255,255,255,0.2), 8px 22px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
    100% { 
        transform: translateX(-50%) rotate(0deg);
        box-shadow: 
            -8px 6px 0 -2px black, 8px 6px 0 -2px black,
            -8px 6px 2px 0 rgba(255,255,255,0.3), 8px 6px 2px 0 rgba(255,255,255,0.3),
            -4px 22px 0 -1px black, 4px 22px 0 -1px black,
            -4px 22px 2px 0 rgba(255,255,255,0.2), 4px 22px 2px 0 rgba(255,255,255,0.2),
            0 0 8px rgba(255,255,255,0.2);
    }
}

/* Container des projets */
.collectibles-container {
    flex: 1;
    display: flex;
    align-items: flex-start; /* Alignement en haut au lieu du centre */
    justify-content: center;
    padding: 20px 100px; /* Ajout de padding vertical */
    overflow: visible; /* Permettre le débordement */
    min-height: 0; /* Permettre la contraction */
}

.project-showcase {
    max-width: 90vw; /* 90% de la largeur d'écran - naturellement responsive */
    width: 100%;
    min-height: auto; /* Hauteur s'adapte au contenu */
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2vh; /* Espacement vertical basé sur la hauteur d'écran */
    padding: 2vw; /* Padding basé sur la largeur d'écran */
    box-sizing: border-box;
}

.project-item {
    position: relative;
    width: 100%;
    height: auto; /* Hauteur s'adapte au contenu */
    min-height: 35vh; /* Minimum 35% de la hauteur d'écran */
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1vw; /* Border-radius basé sur la largeur d'écran */
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s ease;
    backdrop-filter: blur(10px);
    margin-bottom: 1vh; /* Marge basée sur la hauteur d'écran */
    flex-grow: 1;
    padding: 1.5vw; /* Padding naturellement responsive */
    box-sizing: border-box;
}

/* Tous les project-item sont maintenant visibles par défaut */

/* Header pour chaque projet */
.project-header {
    width: 100%;
    padding: 20px 0 10px 0;
    text-align: center;
}

.project-number {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 10px 20px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: inline-block;
}

.project-info {
    flex: 1;
    padding: 40px;
    color: white;
    font-family: 'Kindergarten', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-info h3 {
    font-size: 1.3rem; /* Taille unifiée */
    margin-bottom: 20px;
    color: #f0f0f0;
}

.project-description {
    font-size: 1rem;
    line-height: 1.4; /* Réduction de l'interligne pour moins d'espacement */
    color: #ccc;
    margin-bottom: 30px;
}

.project-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: white;
}

/* Navigation des projets */


.project-nav-btn {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 10px 20px;
    font-family: 'Kindergarten', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.project-dots {
    display: flex;
    gap: 15px;
}

.project-dot {
    width: 12px;
    height: 12px;
    border: 1px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-dot.active {
    background: white;
}

.project-dot:hover {
    transform: scale(1.2);
}

/* Animations pour les sliders - Supprimées pour un rendu mat */
@keyframes sliderGribouillage {
    0%, 100% {
        background-position: 0% 0%, 0% 0%;
        opacity: 0.7;
    }
    25% {
        background-position: 25% 25%, 25% 0%;
        opacity: 0.9;
    }
    50% {
        background-position: 50% 50%, 50% 0%;
        opacity: 0.6;
    }
    75% {
        background-position: 75% 75%, 75% 0%;
        opacity: 0.8;
    }
}

@keyframes sliderTremblement {
    0%, 100% { 
        transform: translate(0, 0) scaleY(1);
    }
    25% { 
        transform: translate(0.2px, -0.1px) scaleY(1.02);
    }
    50% { 
        transform: translate(-0.1px, 0.2px) scaleY(0.98);
    }
    75% { 
        transform: translate(-0.2px, -0.1px) scaleY(1.01);
    }
}

/* Icônes blanches */
.option-item .icon,
.sound-icon,
.volume-icon {
    filter: brightness(0) invert(1); /* Rendre les icônes blanches */
    opacity: 0.9;
}

.option-item select {
    background: rgba(0, 0, 0, 0.8); /* Fond noir pour le select */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Bordure blanche */
    color: #ffffff; /* Texte blanc */
    padding: 5px;
    border-radius: 5px;
}

.option-item select:focus {
    border-color: rgba(255, 255, 255, 0.8);
    outline: none;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.option-item select option {
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
}

/* === EFFET LOUPE CURSEUR === */

/* Curseur loupe pour les papiers - version élégante */
.magnifying-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="10" cy="10" r="7" stroke="white" stroke-width="1.5" fill="none" opacity="0.9"/><circle cx="10" cy="10" r="4" stroke="rgba(255,255,255,0.7)" stroke-width="1" fill="rgba(255,255,255,0.1)"/><line x1="16" y1="16" x2="25" y2="25" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/><line x1="15.5" y1="16.5" x2="24.5" y2="25.5" stroke="rgba(255,255,255,0.6)" stroke-width="1" stroke-linecap="round"/></svg>') 14 14, auto !important;
}

/* Priorité absolue pour le curseur loupe sur les papiers */
.cv-paper.magnifying-cursor,
.contact-paper.magnifying-cursor,
.cv-paper.magnifying-cursor *,
.contact-paper.magnifying-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="10" cy="10" r="7" stroke="white" stroke-width="1.5" fill="none" opacity="0.9"/><circle cx="10" cy="10" r="4" stroke="rgba(255,255,255,0.7)" stroke-width="1" fill="rgba(255,255,255,0.1)"/><line x1="16" y1="16" x2="25" y2="25" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/><line x1="15.5" y1="16.5" x2="24.5" y2="25.5" stroke="rgba(255,255,255,0.6)" stroke-width="1" stroke-linecap="round"/></svg>') 14 14, auto !important;
}

/* Zone de loupe qui apparaît au survol */
.magnifier-overlay {
    position: fixed;
    width: 150px;
    height: 150px;
    border: 3px solid #333;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(1px);
    pointer-events: none;
    z-index: 15000;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.3),
        inset 0 0 5px rgba(255, 255, 255, 0.8),
        0 0 0 2px rgba(255, 255, 255, 0.9);
}

.magnifier-overlay.active {
    opacity: 1;
}

/* === CURSEUR LOUPE === */
/* Curseur personnalisé quand la loupe est activée */
.magnifier-cursor-enabled {
    cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iOCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuOSkiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiYSgwLDAsMCwwLjIpIi8+CjxjaXJjbGUgY3g9IjEzIiBjeT0iMTMiIHI9IjUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjcpIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPgo8bGluZSB4MT0iMTkiIHkxPSIxOSIgeDI9IjI2IiB5Mj0iMjYiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K') 16 16, auto !important;
}

/* Papiers avec curseur loupe quand activé */
.magnifier-cursor-enabled .cv-paper,
.magnifier-cursor-enabled .contact-paper,
.magnifier-cursor-enabled .cv-interactive-overlay {
    cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iOCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuOSkiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiYSgwLDAsMCwwLjIpIi8+CjxjaXJjbGUgY3g9IjEzIiBjeT0iMTMiIHI9IjUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjcpIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPgo8bGluZSB4MT0iMTkiIHkxPSIxOSIgeDI9IjI2IiB5Mj0iMjYiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K') 16 16, pointer !important;
}

/* Forcer le curseur loupe sur TOUS les éléments à l'intérieur des CV */
.magnifier-cursor-enabled .cv-paper *,
.magnifier-cursor-enabled .contact-paper *,
.magnifier-cursor-enabled .cv-interactive-overlay *,
.magnifier-cursor-enabled .cv-paper a,
.magnifier-cursor-enabled .contact-paper a,
.magnifier-cursor-enabled .cv-interactive-overlay a,
.magnifier-cursor-enabled .cv-paper button,
.magnifier-cursor-enabled .contact-paper button,
.magnifier-cursor-enabled .cv-interactive-overlay button,
.magnifier-cursor-enabled .cv-paper .clickable,
.magnifier-cursor-enabled .contact-paper .clickable,
.magnifier-cursor-enabled .cv-interactive-overlay .clickable {
    cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iOCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuOSkiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiYSgwLDAsMCwwLjIpIi8+CjxjaXJjbGUgY3g9IjEzIiBjeT0iMTMiIHI9IjUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjcpIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPgo8bGluZSB4MT0iMTkiIHkxPSIxOSIgeDI9IjI2IiB5Mj0iMjYiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K') 16 16, pointer !important;
}

/* Zone zoomée à l'intérieur de la loupe */
.magnifier-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    transform-origin: center center;
}

/* Image CV français (front) dans la loupe */
.magnifier-content.cv-zoom-front {
    background-image: url('../References_Papiers/CV/Neulinger_Clara_Cv_page-0001.jpg');
    /* Supprimer tout texte et styles de texte */
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}

/* Image Resume anglais (back) dans la loupe */
.magnifier-content.cv-zoom-back {
    background-image: url('../References_Papiers/CV/Neulinger_Clara_Resume_page-0001.jpg');
    /* Supprimer tout texte et styles de texte */
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}

/* Zoom du papier contact dans la loupe - Version simplifiée */
.magnifier-content.contact-zoom {
    background: transparent;
    overflow: hidden;
    position: relative;
}

/* Nouvelle loupe textuelle avec zoom réel */
.magnifier-content.text-zoom {
    background: transparent;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
}

/* Les styles pour le contenu dans la loupe contact sont maintenant gérés par JavaScript */

/* Effet de zoom sur le texte des papiers */
.paper-hover-zoom {
    transition: transform 0.3s ease-out;
}

.paper-hover-zoom.zoomed {
    transform: scale(1.05);
}

/* Zoom instantané pour la loupe */
.paper-hover-zoom.instant-zoom {
    transition: none !important;
    transform: scale(1.05) !important;
}

/* Styles spéciaux pour les textes dans la loupe */
.magnifier-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    animation: textPulse 2s infinite ease-in-out;
}

@keyframes textPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Reflets de loupe */
.magnifier-overlay::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    border-radius: 50%;
    pointer-events: none;
}

.magnifier-overlay::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 20px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.4) 40%, 
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* === CONTRÔLE DE LOUPE === */

/* Conteneur du contrôle de loupe */
.magnifier-control {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Bouton loupe */
.magnifier-btn {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.7); /* Rouge par défaut (OFF) */
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.magnifier-btn:hover {
    transform: scale(1.05);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* État OFF (rouge) */
.magnifier-btn[data-active="false"] {
    background: rgba(255, 0, 0, 0.8);
    border-color: rgba(255, 100, 100, 1);
    color: white;
}

.magnifier-btn[data-active="false"]:hover {
    background: rgba(255, 0, 0, 1);
    border-color: rgba(255, 150, 150, 1);
}

/* État ON (blanc) */
.magnifier-btn[data-active="true"] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.8);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.magnifier-btn[data-active="true"]:hover {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    transform: scale(1.05);
    box-shadow: 
        0 0 25px rgba(255, 255, 255, 0.8),
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Zone d'explication */
.magnifier-explanation {
    max-width: 200px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.magnifier-explanation p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    font-family: 'Kindergarten', serif;
}

/* Traits animés supplémentaires */
.rotating-traits {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.magnifier-btn[data-active="true"] .rotating-traits {
    opacity: 1;
}

.trait {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.trait-1 {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-style: solid solid none none;
    animation: rotateTraits 1.5s linear infinite, traitPulse1 2s ease-in-out infinite;
}

.trait-2 {
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-style: none solid solid none;
    animation: rotateTraits 2.5s linear infinite reverse, traitPulse2 1.8s ease-in-out infinite;
}

.trait-3 {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-style: solid none solid none;
    animation: rotateTraits 3.5s linear infinite, traitPulse3 2.2s ease-in-out infinite;
}

/* Animation du bouton actif avec traits rotatifs */
@keyframes magnifierPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

@keyframes rotateTraits {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes traitPulse1 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    33% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    66% {
        opacity: 0.5;
        transform: scale(0.9);
    }
}

@keyframes traitPulse2 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.9);
    }
    33% {
        opacity: 0.3;
        transform: scale(1);
    }
    66% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes traitPulse3 {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    33% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    66% {
        opacity: 0.9;
        transform: scale(1.15);
    }
}

/* Traits animés pour l'état actif */
.magnifier-btn[data-active="true"]::before,
.magnifier-btn[data-active="true"]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    top: 0;
    left: 0;
    animation: rotateTraits 3s linear infinite;
}

.magnifier-btn[data-active="true"]::before {
    border-style: dashed;
    border-width: 1px;
    animation: rotateTraits 2s linear infinite, traitPulse1 1.5s ease-in-out infinite;
}

.magnifier-btn[data-active="true"]::after {
    border-style: dotted;
    border-width: 2px;
    animation: rotateTraits 4s linear infinite reverse, traitPulse2 2s ease-in-out infinite;
}

/* Trait supplémentaire via pseudo-élément dans le SVG */
.magnifier-btn[data-active="true"] svg {
    animation: traitPulse3 1.8s ease-in-out infinite;
}

.magnifier-btn[data-active="true"] {
    animation: magnifierPulse 2.5s infinite ease-in-out;
}

/* === AMÉLIORATIONS PORTFOLIO === */

/* Animations pour les éléments de projet */
.project-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.project-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* STYLES UNIFORMES POUR TOUS LES PROJETS - 1000x800px */
.uniform-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    
    /* Style bordure blanche game-button */
    border-radius: 15px;
}

/* Encadrement gribouillé exactement comme game-button - Première couche */
.uniform-project::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
    pointer-events: none;
    border-radius: 16px 14px 17px 15px;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé exactement comme game-button - Deuxième couche */
.uniform-project::after {
    content: '';
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: -0.5px;
    bottom: -0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    pointer-events: none;
    border-radius: 15px 17px 14px 16px;
    transform: rotate(0.2deg);
}

.project-container {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Les éléments occupent toute la hauteur */
    width: 100%;
    height: 500px; /* Hauteur fixe pour uniformiser tous les projets */
    background: transparent;
    border-radius: 1vw; /* Border-radius proportionnel à l'écran */
    overflow: visible;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    min-height: 500px; /* Hauteur minimum identique */
    max-height: 500px; /* Hauteur maximum identique */
    gap: 2vw; /* Espacement naturel entre média et texte */
    padding: 1vw; /* Padding uniforme et responsive */
    box-sizing: border-box;
}

.project-media-wrapper {
    position: relative;
    width: 60%; /* Largeur proportionnelle simple */
    height: 100%; /* Utilise toute la hauteur du container pour uniformité */
    min-height: 480px; /* Hauteur minimum uniforme */
    max-height: 480px; /* Hauteur maximum uniforme */
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 0.5vw; /* Border-radius naturellement responsive */
    aspect-ratio: 16/10; /* Ratio maintenu pour les proportions */
}

.project-media {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Afficher l'image entière sans découpe */
    transition: transform 0.3s ease;
}

/* Styles spécifiques pour les vidéos - empêcher le plein écran */
video.project-media {
    pointer-events: auto;
    object-fit: contain;
}

/* Masquer les contrôles vidéo sur tous les navigateurs */
video.project-media::-webkit-media-controls,
video.project-media::-webkit-media-controls-panel,
video.project-media::-webkit-media-controls-play-button,
video.project-media::-webkit-media-controls-fullscreen-button,
video.project-media::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.project-media-wrapper:hover .project-media {
    transform: scale(1.05);
}

/* Style spécifique pour le projet Circus - maintenant intégré au système modulable */
/* Les styles spécifiques Circus sont maintenant gérés par les règles générales modulables */

/* Style spécifique pour le texte du projet Circus - positionné à droite du media wrapper */
.circus-project .project-info-side {
    position: static !important; /* Positionnement normal dans le flux */
    flex: 1 !important; /* Prend l'espace restant */
    margin-left: 30px !important; /* Padding entre la vidéo et le texte */
    width: auto !important; /* Largeur automatique */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.circus-project .project-info-side h3 {
    text-align: center !important;
}

.circus-project .project-info-side .project-description {
    text-align: center !important;
}

.circus-project .project-info-side .project-tags {
    justify-content: center !important;
}

.circus-project .project-info-side .project-hint {
    text-align: center !important;
}

/* Overlay uniforme pour tous les projets */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.project-media-wrapper:hover .project-overlay {
    opacity: 1;
}

.project-overlay-text {
    text-align: center;
    color: white;
}

.project-overlay-text span {
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    font-family: 'Kindergarten', serif;
    display: block;
    margin-bottom: 8px;
}

/* Informations du projet uniformisées */
.project-info-container {
    text-align: center;
    max-width: 1000px;
    padding: 20px;
}

/* Informations latérales dans le container */
.project-info-side {
    position: static;
    flex: 1; /* Prend naturellement l'espace restant */
    margin: 0;
    width: auto;
    min-width: 30%; /* Largeur minimum simple */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    padding: 1.5vw; /* Padding proportionnel et naturel */
    box-sizing: border-box;
    gap: 1vh; /* Espacement vertical naturel */
}

.project-info-side h3 {
    color: #ffffff;
    font-size: 1.3rem; /* Taille unifiée */
    margin-bottom: 20px;
    font-family: 'Kindergarten', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    text-align: center; /* Centré comme le projet Circus */
}

.project-info-side .project-description {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.4; /* Réduction de l'interligne pour cohérence */
    margin-bottom: 25px;
    text-align: center; /* Centré comme le projet Circus */
}

.project-info-side .project-description-additional {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
}

.project-info-side .project-description-additional p {
    margin: 0;
    color: #cccccc;
}

.project-info-side .project-tags {
    display: flex;
    justify-content: center; /* Centré comme le projet Circus */
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.project-info-side .project-hint {
    text-align: center; /* Centré comme le projet Circus */
}

.project-info-container h3 {
    color: #ffffff;
    font-size: 1.3rem; /* Taille unifiée */
    margin-bottom: 15px;
    font-family: 'Kindergarten', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.project-description {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.4; /* Réduction de l'interligne pour cohérence */
    margin-bottom: 20px;
    text-align: center;
}

.project-tags {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.project-tags .tag {
    background: rgba(0, 170, 255, 0.2);
    color: #00aaff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 170, 255, 0.3);
    font-family: 'Kindergarten', serif;
}

.project-hint {
    margin-top: 10px;
    text-align: center;
}

.project-hint small {
    color: #cccccc;
    font-size: 0.8rem;
    font-style: italic;
    font-family: 'Kindergarten', serif;
}

/* Fallback pour images manquantes */
.placeholder-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #2a2a2a;
    color: #ffffff;
    text-align: center;
}

.placeholder-fallback p {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #ffffff;
    font-family: 'Kindergarten', serif;
}

.placeholder-fallback span {
    font-size: 1rem;
    color: #cccccc;
}



/* PROTECTION CONTRE COMING SOON SEULEMENT */
.coming-soon-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Amélioration des dots de navigation */
.project-dot {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(0, 170, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.project-dot:hover {
    background: rgba(0, 170, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.6);
}

.project-dot.active {
    background: #00aaff;
    border-color: #ffffff;
    box-shadow: 
        0 0 20px rgba(0, 170, 255, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
}

.project-tags .tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
    margin: 2px 4px;
}

.project-tags .tag:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.3);
}

/* Animation d'entrée pour le portfolio */
#portfolio-window {
    animation: portfolioFadeIn 0.5s ease-out;
}

@keyframes portfolioFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animations de navigation des projets */
.project-showcase {
    position: relative;
    overflow: hidden;
}

.project-item {
    position: relative;
    z-index: 1;
}

/* Effet de glow sur les boutons de navigation */
.project-nav-btn:hover {
    background: rgba(0, 170, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.4);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Style pour l'image principale du projet */
.project-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Style pour la vidéo principale du projet */
.project-main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.project-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Overlay d'information sur l'image */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-overlay-text {
    text-align: center;
    color: white;
    font-family: 'Kindergarten', sans-serif;
}

.project-overlay-text span {
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    display: block;
    margin-bottom: 8px;
}

.project-overlay-text p {
    font-size: 1.1rem;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    font-weight: 500;
}

/* Styles pour les projets avec preview images */
.project-preview-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="20" font-size="20" fill="white">💡</text></svg>') 12 12, pointer;
}

.project-preview-image img {
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    transform: scale(1.1);
}

.project-3d-viewer:hover .project-preview-image img {
    transform: scale(1.2);
}

.placeholder-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #2a2a2a;
    color: #ffffff;
    text-align: center;
}

.placeholder-fallback p {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #ffffff;
}

.placeholder-fallback span {
    font-size: 0.9rem;
    color: #cccccc;
}

/* Hints pour tous les projets */
.project-hint {
    margin-top: 10px;
    text-align: center;
}

.project-hint small {
    color: #cccccc;
    font-size: 0.8rem;
    font-style: italic;
    font-family: 'Kindergarten', serif;
}

/* ======= MODAL PROJET STYLE ENFANTIN NOIR & BLANC ======= */

.project-details-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    z-index: 99999 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    animation: modalFadeIn 0.4s ease-out;
    pointer-events: all !important;
}

/* Effet gribouillage sur le fond */
.project-details-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px, 60px 60px;
    pointer-events: none;
    z-index: 1;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content {
    background: linear-gradient(135deg, #f5f1e8 0%, #f0ead5 50%, #ebe3c8 100%);
    border: none;
    border-radius: 0;
    width: 95%;
    max-width: 1400px;
    height: 95%;
    max-height: 1000px;
    overflow: hidden;
    position: relative;
    z-index: 100000;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.8),
        0 0 100px rgba(0, 0, 0, 0.5);
}

/* Overlay très léger pour préserver l'image de fond */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.01);
    pointer-events: none;
    z-index: 1;
}

/* Coins usés style collectible */
.modal-content::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid rgba(139, 69, 19, 0.3);
    border-radius: 25px;
    pointer-events: none;
    z-index: 2;
    background: 
        linear-gradient(45deg, 
            transparent 0%, 
            transparent 45%, 
            rgba(139, 69, 19, 0.1) 50%, 
            transparent 55%, 
            transparent 100%);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: none;
    position: relative;
    z-index: 10;
}

/* Suppression des décorations pour laisser voir l'image de fond */
.modal-header::before,
.modal-header::after {
    display: none;
}

.modal-header h2 {
    color: #2c1810;
    font-family: 'Kindergarten', sans-serif;
    font-size: 2.8rem;
    margin: 0;
    text-shadow: 
        2px 2px 0px rgba(255, 255, 255, 0.8),
        1px 1px 3px rgba(139, 69, 19, 0.3);
    transform: rotate(-0.8deg);
    position: relative;
    background: 
        linear-gradient(45deg, 
            #2c1810 0%, 
            #654321 50%, 
            #2c1810 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Soulignage vintage */
.modal-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -15px;
    right: -15px;
    height: 4px;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            rgba(139, 69, 19, 0.6) 10%,
            rgba(139, 69, 19, 0.8) 50%, 
            rgba(139, 69, 19, 0.6) 90%,
            transparent 100%);
    transform: rotate(0.5deg);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.close-modal {
    background: 
        linear-gradient(135deg, 
            rgba(139, 69, 19, 0.8) 0%, 
            rgba(160, 82, 45, 0.9) 100%);
    border: 4px solid #2c1810;
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 15px;
    font-size: 2.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transform: rotate(4deg);
    font-weight: bold;
    box-shadow: 
        0 6px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.close-modal:hover {
    background: 
        linear-gradient(135deg, 
            rgba(160, 82, 45, 0.9) 0%, 
            rgba(139, 69, 19, 1) 100%);
    transform: rotate(0deg) scale(1.1);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    border-color: #1a0f08;
}

.modal-body {
    height: calc(100% - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.01);
}

/* Style de la scrollbar enfantin */
.modal-body::-webkit-scrollbar {
    width: 12px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    border: 1px solid #000;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #333;
}

/* ======= RESPONSIVE MODAL ENFANTINE ======= */

@media (max-width: 768px) {
    .modal-content {
        width: 98%;
        height: 98%;
        border-radius: 12px;
    }
    
    .modal-header {
        padding: 15px 20px;
    }
    
    .modal-header h2 {
        font-size: 1.8rem;
    }
    
    .close-modal {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .modal-body {
        padding: 20px;
        gap: 20px;
    }
    
    .project-info-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .gallery-image {
        height: 120px;
    }
}

/* ======= RESPONSIVE COLLECTIBLES - MOBILE & TABLETTE ======= */

@media (max-width: 1024px) {
    /* Header collectibles responsive */
    .collectibles-header {
        padding: 20px 30px;
        flex-direction: column;
        gap: 20px;
    }
    
    .collectibles-title {
        order: 1;
        margin-bottom: 10px;
    }
    
    .collectibles-title h2 {
        font-size: 2rem;
    }
    
    /* Navigation responsive */
    .nav-arrow {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    /* Container principal */
    .collectibles-container {
        padding: 20px;
        gap: 30px;
    }
    
    /* Projet showcase responsive */
    .project-showcase {
        max-width: 100%;
        padding: 20px;
    }
    
    .uniform-project {
        max-width: 100%;
    }
    
    .project-container {
        flex-direction: column;
        gap: 20px;
        height: auto !important; /* Annuler la hauteur fixe sur mobile */
        min-height: auto !important;
        max-height: none !important;
    }
    
    .project-media-wrapper {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        min-height: 250px !important; /* Hauteur réduite sur mobile */
        max-height: 300px !important;
        height: auto !important;
    }
    
    .project-info-side {
        width: 100%;
        text-align: center;
        padding: 20px;
        display: block !important; /* S'assurer que le texte s'affiche */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .project-info-side h3 {
        font-size: 1.5rem;
    }
    
    .project-description {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .project-tags .tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    /* Navigation projet responsive */

    
    .project-nav-btn {
        padding: 12px 25px;
        font-size: 1rem;
        min-width: 150px;
    }
    
    .project-dots {
        gap: 10px;
        justify-content: center;
    }
    
    .project-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 768px) {
    /* Header encore plus compact */
    .collectibles-header {
        padding: 15px 20px;
    }
    
    .collectibles-title h2 {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
    

    
    .category-counter {
        font-size: 0.9rem;
    }
    
    /* Navigation plus petite */
    .nav-arrow {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    /* Conteneur principal mobile */
    .collectibles-container {
        padding: 15px;
        gap: 20px;
    }
    
    /* Projet showcase mobile */
    .project-showcase {
        padding: 15px;
    }
    
    .project-media-wrapper {
        min-height: 25vh;
        border-radius: 8px;
    }
    
    .project-info-side {
        padding: 15px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(26, 26, 26, 0.8); /* Fond pour améliorer la lisibilité */
        border-radius: 8px;
        margin-top: 10px;
    }
    
    .project-info-side h3 {
        font-size: 1.3rem;
        margin-bottom: 12px;
        color: #e8dcc0 !important;
    }
    
    .project-description {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    
    .project-tags {
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .project-tags .tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .project-hint {
        margin-top: 15px;
    }
    
    .project-hint small {
        font-size: 0.8rem;
    }
    
    /* Navigation projet mobile */
    .project-navigation {
        padding: 20px 15px;
        gap: 15px;
    }
    
    .project-nav-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 120px;
    }
    
    .project-dots .project-dot {
        width: 10px;
        height: 10px;
    }
    
    /* Séparateur mobile */
    .collectibles-separator {
        margin: 0 20px 20px 20px;
        height: 6px;
    }
    
    /* Stick figure plus petit sur mobile */
    .collectibles-separator .stick-figure {
        font-size: 25px;
        width: 25px;
        height: 35px;
        top: -35px;
    }
}

@media (max-width: 480px) {
    /* Très petits écrans */
    .collectibles-header {
        padding: 10px 15px;
    }
    
    .collectibles-title h2 {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .project-info-side h3 {
        font-size: 1.3rem;
    }
    
    .project-description {
        font-size: 0.9rem;
    }
    
    .project-tags .tag {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    
    .project-nav-btn {
        padding: 8px 15px;
        font-size: 0.85rem;
        min-width: 100px;
    }
}

/* ======= FIN RESPONSIVE COLLECTIBLES ======= */

/* Styles spécifiques Circus supprimés - utilise maintenant le système universel */

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.viewer-controls {
    margin: 25px 0;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.viewer-controls button {
    background: #fff;
    border: 3px solid #000;
    color: #000;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    transform: rotate(-1deg);
}

.viewer-controls button:nth-child(even) {
    transform: rotate(1deg);
}

.viewer-controls button:hover {
    transform: translateY(-3px) rotate(0deg) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: #f0f0f0;
}

.viewer-status {
    margin-top: 20px;
    padding: 12px;
    background: rgba(0, 255, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-style: dashed;
}

.viewer-status span {
    color: #000;
    font-size: 1rem;
    font-weight: bold;
}

/* ======= SECTION INFORMATIONS + GALERIE ======= */

.project-info-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    width: 100%;
    position: relative;
    padding: 20px;
}

/* Coins usés style collectible vintage */
.project-info-section::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 25px;
    height: 25px;
    background: 
        radial-gradient(circle, 
            rgba(139, 69, 19, 0.4) 0%, 
            rgba(139, 69, 19, 0.6) 60%,
            transparent 60%);
    border-radius: 50%;
    z-index: 1;
}

.project-info-section::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: 
        radial-gradient(circle, 
            rgba(139, 69, 19, 0.3) 0%, 
            rgba(139, 69, 19, 0.5) 70%,
            transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

/* ======= INFORMATIONS PROJET ======= */

.project-full-description {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(1px);
    transform: rotate(-0.3deg);
    z-index: 15;
}

/* Timbre vintage sur l'info */
.project-full-description::before {
    content: '★ INFO ★';
    position: absolute;
    top: -12px;
    left: 30px;
    background: 
        linear-gradient(45deg, 
            rgba(139, 69, 19, 0.8) 0%, 
            rgba(160, 82, 45, 0.9) 100%);
    color: #fff;
    padding: 8px 20px;
    font-family: 'Kindergarten', sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 12px;
    transform: rotate(-2deg);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    border: 2px solid rgba(139, 69, 19, 0.9);
}

.project-full-description h3 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    color: #2c1810;
    font-family: 'Kindergarten', sans-serif;
    text-shadow: 
        2px 2px 0px rgba(255, 255, 255, 0.8),
        1px 1px 3px rgba(139, 69, 19, 0.3);
    transform: rotate(-0.8deg);
    position: relative;
    background: 
        linear-gradient(45deg, 
            #2c1810 0%, 
            #654321 50%, 
            #2c1810 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Soulignage vintage */
.project-full-description h3::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -15px;
    right: -15px;
    height: 4px;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            rgba(139, 69, 19, 0.6) 10%,
            rgba(139, 69, 19, 0.8) 50%, 
            rgba(139, 69, 19, 0.6) 90%,
            transparent 100%);
    transform: rotate(0.5deg);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.project-full-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2c1810;
    margin-bottom: 25px;
    font-family: 'Kindergarten', sans-serif;
    text-align: justify;
    position: relative;
    padding: 20px;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.6) 0%, 
            rgba(248, 245, 240, 0.8) 100%);
    border-radius: 15px;
    border: 2px dashed rgba(139, 69, 19, 0.4);
    box-shadow: inset 0 0 15px rgba(139, 69, 19, 0.05);
}

/* Citation vintage */
.project-full-description p::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 3rem;
    color: rgba(139, 69, 19, 0.3);
    line-height: 1;
    font-family: serif;
}

.project-full-description p::after {
    content: '"';
    position: absolute;
    bottom: -15px;
    right: 15px;
    font-size: 3rem;
    color: rgba(139, 69, 19, 0.3);
    line-height: 1;
    font-family: serif;
}

.project-specs h4 {
    font-size: 1.6rem;
    margin: 30px 0 20px 0;
    color: #2c1810;
    font-family: 'Kindergarten', sans-serif;
    position: relative;
    padding-bottom: 15px;
    transform: rotate(-0.3deg);
    background: 
        linear-gradient(45deg, 
            #2c1810 0%, 
            #654321 50%, 
            #2c1810 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        2px 2px 0px rgba(255, 255, 255, 0.5),
        1px 1px 2px rgba(139, 69, 19, 0.2);
}

/* Soulignage vintage décoratif */
.project-specs h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10px;
    right: -10px;
    height: 3px;
    background: 
        repeating-linear-gradient(90deg, 
            rgba(139, 69, 19, 0.7) 0px, 
            rgba(139, 69, 19, 0.7) 15px, 
            transparent 15px, 
            transparent 25px);
    transform: rotate(0.4deg);
    border-radius: 2px;
}

.specs-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.spec-item {
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.8) 0%, 
            rgba(248, 245, 240, 0.9) 100%);
    padding: 18px;
    border-radius: 12px;
    border: 3px solid rgba(139, 69, 19, 0.5);
    font-size: 1rem;
    color: #2c1810;
    font-family: 'Kindergarten', sans-serif;
    transform: rotate(0.2deg);
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 0 15px rgba(139, 69, 19, 0.05);
}

/* Puce décorative vintage */
.spec-item::before {
    content: '•';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    background: 
        radial-gradient(circle, 
            rgba(139, 69, 19, 0.8) 0%, 
            rgba(160, 82, 45, 0.9) 100%);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    border: 2px solid rgba(139, 69, 19, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.spec-item:nth-child(even) {
    transform: rotate(-0.3deg);
}

.spec-item:nth-child(even)::before {
    content: '★';
    font-size: 0.9rem;
}

.spec-item:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 0 20px rgba(139, 69, 19, 0.1);
    border-color: rgba(139, 69, 19, 0.7);
}

.spec-item strong {
    color: #000;
    display: inline-block;
    min-width: 100px;
    font-weight: bold;
}

/* ======= GALERIE D'IMAGES IMPORTANTE ======= */

.project-gallery {
    background: #fff;
    border: 0.3vw solid #000; /* Bordure responsive */
    border-radius: 1.5vw; /* Border-radius responsive */
    padding: 2.5vw; /* Padding responsive */
    position: relative;
    box-shadow: 
        0 0.6vw 2vw rgba(0, 0, 0, 0.1),
        inset 0 0 1.5vw rgba(0, 0, 0, 0.02);
}

/* Titre décoratif */
.project-gallery::before {
    content: '🖼️ Galerie';
    position: absolute;
    top: -12px;
    left: 20px;
    background: #fff;
    padding: 5px 12px;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    border: 2px solid #000;
    border-radius: 6px;
    transform: rotate(-1deg);
}

.project-gallery h3 {
    color: #000;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1.3rem; /* Taille unifiée */
    margin-bottom: 2vh; /* Marge verticale responsive */
    text-shadow: 0.1vw 0.1vw 0.2vw rgba(255, 255, 255, 0.8);
    transform: rotate(0.3deg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Colonnes naturellement responsives */
    gap: 2.5vw; /* Espacement responsive */
    max-height: none;
    overflow: visible;
    padding: 2vw; /* Padding responsive */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1.8vw; /* Border-radius responsive */
    border: 0.2vw solid rgba(0, 0, 0, 0.2); /* Bordure responsive */
    box-shadow: 
        0 0.8vw 2.5vw rgba(0, 0, 0, 0.1),
        inset 0 0 2.5vw rgba(255, 255, 255, 0.05);
    transform: rotate(0.2deg);
    position: relative;
    z-index: 15;
    backdrop-filter: blur(0.1vw);
}

/* Étiquette vintage sur la galerie */
.gallery-grid::before {
    content: 'GALLERY';
    position: absolute;
    top: -12px;
    left: 40px;
    background: 
        linear-gradient(45deg, 
            rgba(139, 69, 19, 0.8) 0%, 
            rgba(160, 82, 45, 0.9) 100%);
    color: #fff;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 12px;
    transform: rotate(-2deg);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    border: 2px solid rgba(139, 69, 19, 0.9);
}

.gallery-image {
    width: 100%;
    height: 18vh; /* Hauteur responsive basée sur la hauteur d'écran */
    object-fit: cover;
    border-radius: 1.5vw; /* Border-radius responsive */
    border: 0.5vw solid rgba(139, 69, 19, 0.6); /* Bordure responsive */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0.6vw 1.8vw rgba(0, 0, 0, 0.25),
        inset 0 0 1.5vw rgba(255, 255, 255, 0.1);
    transform: rotate(-1deg);
    position: relative;
    background: 
        linear-gradient(135deg, 
            rgba(248, 245, 240, 0.3) 0%, 
            rgba(255, 252, 248, 0.2) 100%);
    z-index: 20;
    display: block;
}

/* Coin vintage sur les images */
.gallery-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 15px;
    height: 15px;
    background: 
        radial-gradient(circle, 
            rgba(139, 69, 19, 0.6) 0%, 
            rgba(139, 69, 19, 0.8) 70%,
            transparent 70%);
    border-radius: 50%;
    z-index: 2;
}

.gallery-image:nth-child(even) {
    transform: rotate(1deg);
}

.gallery-image:nth-child(even)::before {
    top: -3px;
    right: -3px;
    left: auto;
}

.gallery-image:nth-child(3n) {
    transform: rotate(-0.5deg);
}

.gallery-image:hover {
    transform: rotate(0deg) scale(1.05);
    border-color: rgba(139, 69, 19, 0.8);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    z-index: 10;
    position: relative;
}

/* Mode fullscreen amélioré style collectible */
.gallery-image.fullscreen {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: auto !important;
    height: 85vh !important;
    max-width: 95vw !important;
    z-index: 999999 !important;
    border: 8px solid rgba(139, 69, 19, 0.8) !important;
    box-shadow: 
        0 0 100px rgba(139, 69, 19, 0.4),
        0 0 200px rgba(0, 0, 0, 0.8),
        inset 0 0 50px rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    cursor: pointer;
    background: 
        linear-gradient(135deg, 
            rgba(248, 245, 240, 0.1) 0%, 
            rgba(255, 252, 248, 0.05) 100%);
}

/* Overlay vintage pour fermer l'image fullscreen */
.gallery-image.fullscreen::after {
    content: '✕ Cliquer pour fermer';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: 
        linear-gradient(45deg, 
            rgba(139, 69, 19, 0.9) 0%, 
            rgba(160, 82, 45, 0.95) 100%);
    color: #fff;
    padding: 12px 25px;
    border-radius: 25px;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    pointer-events: none;
    border: 3px solid rgba(139, 69, 19, 0.7);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

/* ======= MARMOSET VIEWER MODAL ======= */
.marmoset-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: stretch;
    justify-content: stretch; /* Étire le contenu */
    animation: fadeIn 0.3s ease;
    padding: 1vh 1vw; /* Marge globale légère uniquement ici */
    box-sizing: border-box;
    overflow: hidden;
}

.marmoset-modal-content {
    width: 100%;
    max-width: none; /* Suppression de la limite pour utiliser tout l'espace */
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vh; /* Espacement entre titre, header et contenu */
    margin: 0; /* Suppression de toute marge */
    padding: 1vh 1vw; /* Padding léger responsive */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Titre principal responsive */
.marmoset-page-title {
    position: relative; /* Position relative au lieu de fixed */
    width: 100%;
    padding: 2vh 0 1vh 0; /* Padding responsive */
    z-index: 10001;
    text-align: center;
    order: -2; /* Place le titre en premier dans le flex container */
}

/* Version desktop : repositionnement du bouton sur la même ligne que le titre */
@media (min-width: 1025px) {
    .marmoset-header {
        position: absolute; /* Position absolue uniquement sur desktop */
        top: 2vh; /* Même hauteur que le titre */
        left: 2vw; /* Position à gauche comme demandé */
        width: auto;
        padding: 0; /* Pas de padding supplémentaire */
        z-index: 10002; /* Au-dessus du titre */
    }
    
    .marmoset-page-title {
        padding: 2vh 0 1vh 0; /* Maintient le padding du titre */
    }
    
    /* Restaurer position normale du titre */
    .marmoset-page-title {
        padding: 2vh 0 1vh 0; /* Maintient le padding du titre */
        display: block; /* Revenir au display normal */
    }
    
    /* Bouton retour monté de 50% vers le haut */
    .back-to-collectibles {
        position: fixed !important; /* Position fixe */
        top: 5vh !important; /* Monté à 5% de la hauteur (50% de 10vh) */
        left: 2vw !important; /* À gauche avec marge des bords */
        margin: 0 !important; /* Supprime tout margin */
        padding: 0.8vh 1.2vw !important; /* Taille parfaite déjà validée */
        z-index: 999999 !important; /* Au-dessus de tout */
    }
    
    /* Dimensions fixes marmosetUI pour desktop - 340x650 */
    #marmosetUI, [id^="marmosetUI"] {
        width: 340px !important; /* Largeur fixe 340px au lieu de 316px */
        height: 650px !important; /* Hauteur fixe 650px au lieu de 853px */
        transform-origin: center center !important; /* Centrage */
        margin: 0 auto !important; /* Centrage horizontal */
    }
    
    /* Box info-panel avec ENCADREMENTS BLANCS style marmoset-gallery-panel - 50% / 50% */
    .marmoset-info-panel {
        height: 20%; /* Hauteur normale */
        padding: 1.5vw; /* Même padding que marmoset-gallery-panel */
        top: 70%; /* Position normale */
        overflow: hidden; /* Contient dans la box */
        background: #1a1a1a !important; /* Arrière-plan gris comme marmoset-gallery-panel */
        display: flex; /* Flex pour alignement horizontal */
        flex-direction: row; /* Direction horizontale */
        align-items: center; /* Centrage vertical */
        justify-content: space-between; /* Répartition équilibrée */
        gap: 0; /* Pas d'espacement - contrôle par width */
        border: none !important;
        position: relative !important;
        box-sizing: border-box; /* Inclut le padding dans les dimensions */
    }
    
    /* Encadrement gribouillé style marmoset-gallery-panel - Première couche fine */
    .marmoset-info-panel::before {
        content: '';
        position: absolute;
        top: 0.05vw; /* Positif pour rester visible */
        left: 0.05vw;
        right: 0.05vw;
        bottom: 0.05vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.4); /* Bordure responsive */
        z-index: 1;
        pointer-events: none;
        border-radius: 0;
        transform: rotate(-0.3deg);
    }
    
    /* Encadrement gribouillé style marmoset-gallery-panel - Deuxième couche fine superposée */
    .marmoset-info-panel::after {
        content: '';
        position: absolute;
        top: 0.1vw; /* Positif pour rester visible */
        left: 0.1vw;
        right: 0.1vw;
        bottom: 0.1vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.5); /* Bordure responsive */
        z-index: 2;
        pointer-events: none;
        border-radius: 0;
        transform: rotate(0.2deg);
    }
    
    /* Zone titre - 50% de l'espace À GAUCHE */
    .marmoset-info-panel .title-zone {
        width: 50% !important;
        flex: 0 0 50% !important; /* Fixe à 50% */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Alignement à gauche du titre */
        padding: 0 1vw !important; /* Padding équilibré */
        order: 1 !important; /* PREMIER - titre à gauche */
    }
    
    /* Zone logos - 50% de l'espace À DROITE */
    .marmoset-info-panel .logos-zone {
        width: 50% !important;
        flex: 0 0 50% !important; /* Fixe à 50% */
        display: flex !important;
        flex-wrap: wrap !important; /* Passage à la ligne si nécessaire */
        align-items: center !important;
        justify-content: center !important; /* Centrage des logos */
        gap: 0.4vw !important; /* Espacement entre logos */
        padding: 0 1vw !important;
        order: 2 !important; /* DEUXIÈME - logos à droite */
    }
    
    /* Titre H3 "Logiciels :" dans la zone titre - DESKTOP CENTRÉ */
    .marmoset-info-panel h3,
    .marmoset-info-panel .title-zone h3 {
        content: "Logiciels :"; /* Titre avec deux points */
        font-family: 'Kindergarten', serif !important;
        font-size: 1.2vw !important; /* Taille adaptée */
        color: white !important;
        font-weight: bold !important;
        white-space: nowrap !important; /* Pas de retour à la ligne */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        text-align: center !important; /* Centrage du texte desktop */
        width: 100% !important; /* Utilise toute la largeur pour centrage */
    }
    
    /* SUPPRESSION des anciens selectors incompatibles */
    .marmoset-info-panel .info-title,
    .marmoset-info-panel .info-content,
    .marmoset-info-panel .logos-container {
        display: none !important;
        border-radius: 0 !important;
    }
    
    /* ANCIEN système logo-wrapper - REMPLACÉ par title-zone/logos-zone */
    .marmoset-info-panel .logo-wrapper {
        display: none !important; /* Désactivé - remplacé par logos-zone */
    }
    
    /* Compatibilité avec l'ancien système */
    .marmoset-info-panel .logo-wrapper .logo-item {
        display: none !important; /* Désactivé */
    }
    
    /* Logos PNG sans arrière-plan - disposition flexible dans zone 30% */
    .marmoset-info-panel .logos-zone .logo-item {
        display: block !important; /* Affichage en bloc FORCÉ */
        visibility: visible !important; /* Visibilité FORCÉE */
        opacity: 1 !important; /* Opacité FORCÉE */
        width: 2.2vw !important; /* Largeur optimisée */
        height: 2.2vw !important; /* Hauteur optimisée */
        max-width: 2.5vw !important; /* Limite maximum */
        max-height: 2.5vw !important; /* Limite maximum */
        min-width: 1.8vw !important; /* Minimum viable */
        min-height: 1.8vw !important; /* Minimum viable */
        flex-shrink: 1 !important; /* Peut se réduire si nécessaire */
        /* PNG transparent - AUCUN arrière-plan */
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0.1vw !important; /* Petit espacement */
        object-fit: contain !important; /* Respect des proportions */
        image-rendering: crisp-edges !important; /* Netteté PNG */
        /* DEBUGGING - ajout temporaire pour visualisation */
        z-index: 10 !important;
        position: relative !important;
    }
    
    /* Images PNG dans les logos - transparence parfaite */
    .marmoset-info-panel .logo-item img,
    .marmoset-info-panel .logos-zone img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: transparent !important;
        border: none !important;
        display: block !important;
    }
    
    /* Espacement optimal entre logos pour remplir l'espace */
    .marmoset-info-panel .logo-wrapper {
        gap: 0.5vw !important; /* Espacement équilibré pour bonne répartition */
        flex-wrap: wrap !important; /* Permet retour à la ligne si besoin */
    }
    
    /* Réactive tous les éléments enfants */
    .marmoset-info-panel * {
        display: revert !important; /* Restaure l'affichage par défaut */
        visibility: visible !important; /* Réactive la visibilité */
    }
}

/* ========================================
   TEMPLATE RÉUTILISABLE : VISUALISATEUR DE MATÉRIAUX
   ========================================
   Components: .marmoset-extra-panel + .arch-slider-external
   Usage: Archway (actuel) - Peut être étendu à d'autres projets
   Features: Asset viewer avec slider interactif, encadrement gribouillé, responsive
   ======================================== */

/* Encadrement supplémentaire pour projets avec assets - À DROITE DE LA VIDÉO */
.marmoset-extra-panel {
    height: 55%; /* Hauteur agrandie */
    padding: 1.3vw; /* Padding augmenté */
    top: 15%; /* Position ajustée */
    right: 2vw; /* Position maintenue */
    width: 27%; /* Largeur agrandie */
    overflow: hidden; /* Contenu contenu dans les limites */
    background: #1a1a1a !important; /* Même arrière-plan gris */
    border: none !important;
    position: absolute !important; /* Position absolue DESKTOP seulement */
    box-sizing: border-box;
    z-index: 5; /* S'assure qu'il soit au-dessus */
}

/* Encadrement gribouillé - Première couche fine */
.marmoset-extra-panel::before {
    content: '';
    position: absolute;
    top: 0.05vw;
    left: 0.05vw;
    right: 0.05vw;
    bottom: 0.05vw;
    border: 0.05vw solid rgba(255, 255, 255, 0.4);
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé - Deuxième couche fine superposée */
.marmoset-extra-panel::after {
    content: '';
    position: absolute;
    top: 0.1vw;
    left: 0.1vw;
    right: 0.1vw;
    bottom: 0.1vw;
    border: 0.05vw solid rgba(255, 255, 255, 0.5);
    z-index: 2;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(0.2deg);
}

/* Contenu du panel supplémentaire */
.marmoset-extra-panel h3 {
    font-family: 'Kindergarten', Arial, sans-serif;
    font-size: 1.3rem; /* Taille demandée */
    color: #ffffff;
    margin: 0 0 1vw 0;
    text-shadow: none;
    font-weight: bold;
    z-index: 3;
    position: relative;
    text-align: center; /* Centrer le titre */
}

.marmoset-extra-panel .extra-content {
    z-index: 3;
    position: relative;
}

.marmoset-extra-panel .extra-content p {
    font-family: 'Kindergarten', Arial, sans-serif;
    font-size: 1vw;
    color: #cccccc;
    margin: 0.5vw 0;
    line-height: 1.4;
}

.marmoset-extra-panel .extra-content strong {
    color: #ffffff;
}

/* Styles pour le slider d'assets Archway */
.asset-slider-container {
    z-index: 3;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

.asset-type-selector {
    display: flex;
    gap: 0.2vw;
    margin-bottom: 0.5vw;
    justify-content: center; /* Centrer les boutons */
}

.asset-type-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #cccccc;
    padding: 0.18vw 0.35vw; /* Padding légèrement augmenté */
    font-size: 0.55vw; /* Police légèrement plus grande */
    font-family: 'Kindergarten', Arial, sans-serif;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.asset-type-btn.active,
.asset-type-btn:hover {
    background: rgba(255, 255, 255, 0.25); /* Moins visible */
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(255, 255, 255, 0.3); /* Ombre réduite */
    transform: scale(1.02); /* Scale plus petit */
}

.asset-preview-container {
    width: 100%;
    height: 78%; /* Hauteur augmentée pour profiter de l'espace */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 0.8vw; /* Marge légèrement augmentée */
}

.asset-preview-container img {
    max-width: 95%; /* Légèrement réduit pour éviter les débordements */
    max-height: 95%;
    object-fit: contain;
    border-radius: 4px;
}

/* Les styles pour asset-type-btn sont déjà définis plus haut dans le fichier pour Archway */
/* Le panneau Gun/Plasma Pistol utilise les mêmes styles que Archway */

.asset-sequence-slider {
    display: flex;
    align-items: center;
    gap: 0.3vw;
    margin: 0.5vw 0;
    width: 100%;
    box-sizing: border-box;
}

.slider-container {
    flex: 1;
    position: relative;
    margin: 0.3vw 0;
    max-width: calc(100% - 3vw); /* Assurer qu'il reste dans le cadre */
    padding: 0.5vw; /* Zone de clic plus large autour du slider */
    cursor: pointer; /* Indique que la zone est interactive */
}

.sequence-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.18vw 0.35vw; /* Padding légèrement augmenté */
    font-size: 0.65vw; /* Police légèrement plus grande */
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
    min-width: 1.3vw; /* Largeur minimale légèrement augmentée */
    flex-shrink: 0;
}

.sequence-btn:hover {
    background: rgba(0, 170, 255, 0.2);
    border-color: #00aaff;
}

#asset-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.6vw; /* Plus épais pour être plus facile à cliquer */
    background: linear-gradient(to right, 
        #ffffff 0%, #ffffff 25%, 
        #bfbfbf 25%, #bfbfbf 50%, 
        #7f7f7f 50%, #7f7f7f 75%, 
        #2f2f2f 75%, #2f2f2f 100%
    ); /* Dégradé intensifié : blanc → gris clair → gris moyen → gris foncé */
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

#asset-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.2vw; /* Plus grand pour être plus facile à saisir */
    height: 1.2vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    transition: all 0.15s ease; /* Transition plus rapide */
    position: relative;
    z-index: 100; /* S'assure qu'il est au-dessus */
}

#asset-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #f8f8f8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    border: 3px solid #555;
}

#asset-slider::-moz-range-thumb {
    width: 1vw;
    height: 1vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Styles améliorés pour le slider Gun/Plasma Pistol */
#gun-asset-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.6vw; /* Plus épais pour être plus facile à cliquer */
    background: linear-gradient(to right, 
        #ffffff 0%, #ffffff 16.67%, 
        #cccccc 16.67%, #cccccc 33.33%, 
        #999999 33.33%, #999999 50%, 
        #666666 50%, #666666 66.67%, 
        #333333 66.67%, #333333 83.33%, 
        #1a1a1a 83.33%, #1a1a1a 100%
    ); /* Dégradé intensifié : blanc → gris clair → gris moyen → gris foncé → gris très foncé → noir */
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

#gun-asset-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.2vw; /* Plus grand pour être plus facile à saisir */
    height: 1.2vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    transition: all 0.15s ease; /* Transition plus rapide */
}

#gun-asset-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #f8f8f8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    border: 3px solid #555;
}

#gun-asset-slider::-moz-range-thumb {
    width: 1vw;
    height: 1vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Styles identiques pour le slider Telephone Booth */
#telephone-asset-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.4vw;
    background: linear-gradient(to right, 
        #ffffff 0%, #ffffff 20%, 
        #cccccc 20%, #cccccc 40%, 
        #999999 40%, #999999 60%, 
        #666666 60%, #666666 80%, 
        #333333 80%, #333333 100%
    );
    outline: none;
    border-radius: 3px;
    cursor: pointer;
}

#telephone-asset-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1vw;
    height: 1vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}

#telephone-asset-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

#telephone-asset-slider::-moz-range-thumb {
    width: 1vw;
    height: 1vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Styles pour le slider Room - Template Archway */
#room-asset-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.4vw;
    background: linear-gradient(to right, 
        #ffffff 0%, #ffffff 16.67%, 
        #cccccc 16.67%, #cccccc 33.33%, 
        #999999 33.33%, #999999 50%, 
        #666666 50%, #666666 66.67%, 
        #333333 66.67%, #333333 83.33%, 
        #000000 83.33%, #000000 100%
    );
    outline: none;
    border-radius: 3px;
    cursor: pointer;
}

#room-asset-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1vw;
    height: 1vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}

#room-asset-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

#room-asset-slider::-moz-range-thumb {
    width: 1vw;
    height: 1vw;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.slider-zones {
    display: none; /* Cacher complètement les zones */
}

.zone-label {
    display: none; /* Cacher complètement les labels */
}

/* Repositionnement SPÉCIFIQUE pour éléments Telephone Booth - juste à côté de la galerie */
#telephone-asset-preview {
    /* Agrandir ÉNORMÉMENT l'image du visualisateur Telephone */
    width: 200% !important;
    height: 200% !important;
    object-fit: cover !important;
    display: block;
}

/* Visualisateur décalé de 22.5% au total (38% - 0.5% vers la gauche) et agrandi de 15% au total */
.marmoset-extra-panel:has(#telephone-asset-preview) {
    left: 37.5% !important;
    right: auto !important;
    top: 15% !important;
    position: absolute !important;
    transform: scale(1.15) !important;
    transform-origin: top left !important;
}

/* Slider décalé de 22.5% au total, même position que le visualisateur et agrandi de 15% au total */
.arch-slider-external:has(#telephone-asset-slider) {
    left: 37.5% !important;
    right: auto !important;
    top: 72% !important;
    position: absolute !important;
    transform: scale(1.15) !important;
    transform-origin: top left !important;
}

/* Box logiciels reste à sa position par défaut */
.marmoset-extra-panel:has(#telephone-asset-preview) ~ .marmoset-info-panel {
    left: auto !important;
    right: 2vw !important;
    top: 15% !important;
    position: absolute !important;
}



/* Slider externe pour projets avec assets - Template réutilisable */
.arch-slider-external {
    position: absolute;
    top: 72%; /* Ajusté pour le panel plus grand */
    right: 2vw; /* Même position que le panel */
    width: 27%; /* Même largeur que le panel */
    background: #1a1a1a !important;
    border: none !important;
    border-radius: 8px;
    padding: 1vw; /* Padding augmenté */
    z-index: 6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Encadrement gribouillé pour le slider externe - IDENTIQUE au marmoset-extra-panel */
.arch-slider-external::before {
    content: '';
    position: absolute;
    top: 0.05vw;
    left: 0.05vw;
    right: 0.05vw;
    bottom: 0.05vw;
    border: 0.05vw solid rgba(255, 255, 255, 0.4);
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(-0.3deg);
}

.arch-slider-external::after {
    content: '';
    position: absolute;
    top: 0.1vw;
    left: 0.1vw;
    right: 0.1vw;
    bottom: 0.1vw;
    border: 0.05vw solid rgba(255, 255, 255, 0.5);
    z-index: 2;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(0.2deg);
}

.marmoset-page-title h1 {
    font-family: 'Kindergarten', Arial, sans-serif;
    font-size: 2.2vw; /* Taille responsive */
    color: #ffffff;
    margin: 0;
    text-shadow: none;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Badge WIP très subtil pour projets en cours */
.wip-badge {
    display: inline-block;
    margin-left: 1vw;
    vertical-align: middle;
}

.wip-text {
    font-family: 'Kindergarten', Arial, sans-serif;
    font-size: 0.7vw;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    font-style: italic;
}

.marmoset-header {
    background: transparent;
    border: none;
    border-radius: 0;
    color: white;
    padding: 1vh 2vw; /* Padding responsive */
    font-family: 'Kindergarten', Arial, sans-serif;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: none;
    position: relative;
    width: 100%;
    order: -1; /* Place le header en deuxième dans le flex container */
}

.marmoset-header h2 {
    margin: 0;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    text-align: center;
    flex: 1;
}

.back-to-collectibles {
    background: transparent !important;
    border: none;
    color: #ffffff;
    padding: 0.8vh 1.2vw; /* Padding drastiquement réduit */
    font-size: 0.9rem; /* Taille de police très réduite */
    font-family: 'Kindergarten', sans-serif;
    cursor: pointer;
    min-width: 10vw; /* Width très réduite */
    max-width: 15vw; /* Limite très réduite */
    text-align: left;
    position: relative;
    text-shadow: none;
    z-index: 3;
    outline: none;
    box-shadow: none;
    transition: transform 0.15s ease-out;
    transform-origin: left center;
    margin-left: 0; /* Suppression de la marge négative qui cache le bouton */
}

/* Encadrement gribouillé pour le bouton retour - Première couche */
.back-to-collectibles::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
    pointer-events: none;
    border-radius: 2px 0.5px 2.5px 1px;
    transform: rotate(-0.3deg);
    transition: all 0.1s ease-out;
}

/* Encadrement gribouillé pour le bouton retour - Deuxième couche */
.back-to-collectibles::after {
    content: '';
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: -0.5px;
    bottom: -0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    pointer-events: none;
    border-radius: 1px 2.5px 0.5px 1.5px;
    transform: rotate(0.2deg);
    transition: all 0.1s ease-out;
}

.back-to-collectibles:hover {
    background: transparent !important;
}

.back-to-collectibles:active {
    background: transparent !important;
    transform: scale(1.05);
}

.back-to-collectibles:hover::before {
    border-color: rgba(255, 255, 255, 0.4);
    border-width: 0.7px;
    transform: rotate(-0.5deg);
}

.back-to-collectibles:hover::after {
    border-color: rgba(255, 255, 255, 0.5);
    border-width: 0.7px;
    transform: rotate(0.4deg);
}

.back-to-collectibles .button-text {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.back-to-collectibles .button-subtitle {
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: 300;
}



.marmoset-main-container {
    flex: 1;
    position: relative;
    width: 100%; /* Utilise tout l'espace disponible */
    height: 100%; /* Utilise toute la hauteur disponible */
    margin: 0; /* Suppression de toute marge */
    padding: 1.5vw; /* Même marge interne que les autres panels */
    overflow: hidden;
    box-sizing: border-box;
    max-width: none; /* Suppression de la limite */
    transform: scale(0.92); /* Réduit pour être moins présent */
    transform-origin: center center; /* Centre le scaling */
}

/* Panneau galerie (gauche) - STYLE GAME-BUTTON AVEC ANIMATIONS */
.marmoset-gallery-panel {
    width: 31%; /* Légèrement réduite pour faire place au viewer principal */
    height: 95%; /* Presque toute la hauteur */
    background: #1a1a1a;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    position: absolute;
    left: 2%; /* Marge uniforme de la gauche */
    top: 2.5%; /* Centré verticalement */
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    flex-shrink: 0;
    z-index: 10000;
    padding: 1.5vw; /* Même marge interne que info-panel */
    box-sizing: border-box; /* Inclut le padding dans les dimensions */
}

/* Encadrement gribouillé - Première couche fine */
.marmoset-gallery-panel::before {
    content: '';
    position: absolute;
    top: 0.05vw; /* Positif pour rester visible */
    left: 0.05vw;
    right: 0.05vw;
    bottom: 0.05vw;
    border: 0.05vw solid rgba(255, 255, 255, 0.4); /* Bordure responsive */
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé - Deuxième couche fine superposée */
.marmoset-gallery-panel::after {
    content: '';
    position: absolute;
    top: 0.1vw; /* Positif pour rester visible */
    left: 0.1vw;
    right: 0.1vw;
    bottom: 0.1vw;
    border: 0.05vw solid rgba(255, 255, 255, 0.5); /* Bordure responsive */
    z-index: 2;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(0.2deg);
}

.marmoset-gallery-panel h3 {
    background: #2a2a2a;
    color: #ffffff;
    margin: 0;
    padding: 1vw 1.5vw; /* Padding proportionnel */
    font-family: 'Kindergarten', sans-serif;
    font-size: 1.3rem; /* Taille unifiée */
    font-weight: bold;
    border-bottom: 1px solid #333333;
    border-radius: 0;
    text-shadow: none;
    text-align: center;
}

/* Instructions pour la galerie */
.gallery-instructions {
    background: transparent; /* Pas de fond pour un sous-titre */
    color: rgba(255, 255, 255, 0.6); /* Blanc moins opaque */
    margin: 0;
    padding: 0.5vw 1vw; /* Padding réduit pour sous-titre */
    font-family: 'Kindergarten', sans-serif;
    font-size: 0.9rem; /* Police plus petite pour sous-titre */
    border-bottom: none; /* Suppression séparation */
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
    text-shadow: none; /* Pas d'ombre pour sous-titre */
    letter-spacing: 0.02vw; /* Espacement réduit */
    text-align: center;
    font-style: italic;
    font-weight: 300; /* Plus léger pour sous-titre */
}

/* Instructions pour les infos */
.info-instructions {
    background: rgba(42, 42, 42, 0.9);
    color: #cccccc;
    margin: 0;
    padding: 1vw 2.5vw; /* Padding responsive */
    font-family: 'Kindergarten', sans-serif;
    font-size: 0.7rem;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.3px;
    border-bottom: 1px solid #333333;
    text-align: center;
    font-style: italic;
}

/* Titre du viewer 3D */
.viewer-title {
    background: #2a2a2a;
    color: #ffffff;
    margin: 0 0 5px 0;
    padding: 12px 20px;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1.3rem; /* Taille unifiée */
    font-weight: bold;
    border-bottom: 1px solid #333333;
    border-radius: 0;
    text-shadow: none;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

.gallery-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    border-radius: 0 0 13px 13px;
}

/* Style de la scrollbar pour la galerie */
.gallery-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.gallery-scroll-container::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

.gallery-scroll-container::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.gallery-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

.gallery-item {
    position: relative;
    margin-bottom: 5px;
    border: none;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    opacity: 0.9;
}

.gallery-item:hover {
    border: none;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
    opacity: 1;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Style pour les images agrandies */
.gallery-item.enlarged {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 999999;
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.gallery-item.enlarged img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Image Viewer avec navigation */
.image-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.image-viewer-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    gap: 20px;
}

.image-viewer-img {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.image-viewer-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.image-viewer-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.image-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.image-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.image-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Container pour l'image dans la modal */
.image-container-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bouton précédent à gauche de l'image - Version ordinateur */
.image-nav-left {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
}

/* Masquer les boutons mobile-only sur desktop */
.mobile-only {
    display: none;
}



/* Classe pour masquer sur mobile/tablette */
.desktop-only {
    display: flex;
}

.image-viewer-info {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Kindergarten', serif;
    font-size: 14px;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 5px 8px;
    font-size: 0.7rem;
    text-align: center;
}

/* Viewer central - Environnement au centre */
.marmoset-viewer-container {
    width: 36%; /* Largeur légèrement réduite */
    height: 60%; /* Hauteur légèrement réduite */
    background: #2a2a2a !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: absolute;
    left: 34%; /* Déplacé vers la droite pour équilibrer les espacements */
    top: 2.5%; /* Aligné avec galerie */
    transform: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    padding: 0.8vw; /* Padding réduit pour éviter débordement marmosetUI */
    box-sizing: border-box; /* Inclut le padding dans les dimensions */
    z-index: 10000;
    overflow: hidden; /* Contient parfaitement marmosetUI */
    opacity: 1;
    transform: scale(0.9);
}

/* Panneau d'informations - Sous le viewer environnement */
.marmoset-info-panel {
    width: 25%; /* Largeur réduite */
    height: 20%; /* Hauteur légèrement augmentée pour les logos agrandis */
    background: rgba(42, 42, 42, 0.95); /* Fond gris foncé non-violet */
    border: 0.15vw solid #666;
    border-radius: 0.3vw;
    box-shadow: 0 0.3vw 0.9vw rgba(0, 0, 0, 0.3); /* Ombre normale */
    overflow: hidden; /* Contient parfaitement les logos */
    position: absolute;
    left: 41.5%; /* Position recentrée : 34% + (40% - 25%)/2 = 41.5% */
    top: 70%; /* Sous le viewer principal (2.5% + 65% + 2.5% espacement) */
    transform: none;
    padding: 0.6vw; /* Padding réduit pour box plus petite */
    font-family: 'Kindergarten', serif;
    color: white;
    transform: none;
    z-index: 1; /* Z-index normal */
    
    /* Style pour centrer directement les logos */
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne - tous sur la même ligne */
    gap: 0.4vw; /* Gap pour séparer les logos */
    justify-content: center; /* Centrage parfait */
    align-items: center;
}

/* Bordures blanches style game-button pour le panneau infos - Première couche */
.marmoset-info-panel::before {
    content: '';
    position: absolute;
    top: 1px; /* Positif pour rester visible */
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
    pointer-events: none;
    border-radius: 2px 0.5px 2.5px 1px;
    transform: rotate(-0.3deg);
}

/* Bordures blanches style game-button pour le panneau infos - Deuxième couche */
.marmoset-info-panel::after {
    content: '';
    position: absolute;
    top: 0.5px; /* Positif pour rester visible */
    left: 0.5px;
    right: 0.5px;
    bottom: 0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    pointer-events: none;
    border-radius: 1px 2.5px 0.5px 1.5px;
    transform: rotate(0.2deg);
}

/* Ancienne règle de lignes supprimée - remplacée par l'encadrement gribouillé */

.marmoset-info-panel .info-title {
    background: transparent;
    color: white;
    margin: 6px 0 15px 0;
    padding: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    text-align: center;
    position: relative;
    z-index: 10;
}

.marmoset-info-panel .info-content {
    position: relative;
    z-index: 10;
    line-height: 1.8;
    font-size: 0.9rem;
    margin-left: 80px;
}

.marmoset-info-panel .info-content p {
    margin: 0 0 23px 0;
    position: relative;
}

/* Effet d'écriture manuscrite */
.marmoset-info-panel .info-content p:nth-child(odd) {
    transform: rotate(-0.1deg);
}

.marmoset-info-panel .info-content p:nth-child(even) {
    transform: rotate(0.1deg);
}

/* Logos dans le panneau d'informations */
/* Style supprimé - remplacé par le style direct sur marmoset-info-panel */

.marmoset-info-panel .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px; /* Gap augmenté */
    background: rgba(255, 255, 255, 0.95); /* Fond plus opaque */
    padding: 8px; /* Padding augmenté pour encadrement plus visible */
    border-radius: 6px; /* Bordures plus arrondies */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre plus marquée */
    border: 2px solid rgba(255, 255, 255, 1); /* Encadrement blanc plus épais */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 0 0 auto; /* Taille fixe pour centrage */
    min-width: 55px; /* Taille minimum agrandie */
    max-width: 60px; /* Taille maximum agrandie */
}

.marmoset-info-panel .logo-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.marmoset-info-panel .logo-item {
    width: 42px; /* Taille agrandie pour meilleure visibilité */
    height: 42px; /* Taille agrandie pour meilleure visibilité */
    opacity: 1;
    transition: transform 0.3s ease;
    object-fit: contain; /* S'assure que l'image entière est visible */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); /* Ombre légère pour relief */
}

.marmoset-info-panel .logo-item:hover {
    transform: scale(1.05);
}

.marmoset-info-panel .logo-name {
    font-size: 0.65rem;
    color: #333;
    text-align: center;
    font-weight: bold;
    opacity: 1;
    line-height: 1.1;
}

/* === RÈGLE SPÉCIFIQUE KITCHEN - Éviter chevauchement === */
/* Repositionner la box logiciels pour éviter le chevauchement avec la box histoire */
.marmoset-modal-content:has([src*="Kitchen"]) .marmoset-info-panel {
    left: 72% !important; /* Positionné après la box histoire (35% + 35% + 2% de marge) */
    width: 26% !important; /* Largeur augmentée grâce à l'espace libéré */
}

/* === MARMOSET STORY PANEL - Panel Histoire spécifique Kitchen === */
.marmoset-story-panel {
    width: 35%; /* Largeur réduite pour économiser l'espace */
    height: auto; /* Hauteur automatique selon le contenu */
    min-height: 50vh; /* Hauteur minimum réduite */
    background: #1a1a1a;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none; /* Retour à l'original pour ne pas agrandir */
    position: absolute;
    left: 35%; /* Positionné après la galerie */
    top: 2.5%;
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    flex-shrink: 0;
    z-index: 10000;
    padding: 1.5vw; /* Retour au padding original */
    box-sizing: border-box;
    overflow-y: auto; /* Scroll si le contenu dépasse */
}

/* Encadrement gribouillé pour story panel - Première couche */
.marmoset-story-panel::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 0.5px solid rgba(255, 255, 255, 0.4);
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé pour story panel - Deuxième couche */
.marmoset-story-panel::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(0.2deg);
}

.marmoset-story-panel .story-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.marmoset-story-panel h3 {
    color: #ffffff;
    font-family: 'Kindergarten', serif;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 0 20px 0; /* Retour à la marge originale */
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.5px;
}

.marmoset-story-panel .story-text {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px; /* Espace pour la scrollbar */
}

.marmoset-story-panel .story-text p {
    color: #ffffff;
    font-family: 'Kindergarten', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 18px 0; /* Retour à la marge originale */
    text-align: justify;
    text-indent: 20px; /* Indentation première ligne */
}

.marmoset-story-panel .story-text p:first-child {
    margin-top: 0;
}

.marmoset-story-panel .story-text p:last-child {
    margin-bottom: 0;
}

.marmoset-story-panel .story-text p strong {
    color: #ffffff;
    font-weight: bold;
}

/* Scrollbar personnalisée pour le story panel - Améliorée */
.marmoset-story-panel .story-text::-webkit-scrollbar {
    width: 8px; /* Plus large pour être plus facile à saisir */
}

.marmoset-story-panel .story-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.marmoset-story-panel .story-text::-webkit-scrollbar-thumb {
    background: #ffffff; /* Blanc pour être bien visible */
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.marmoset-story-panel .story-text::-webkit-scrollbar-thumb:hover {
    background: #f0f0f0; /* Gris clair au survol */
    border: 1px solid rgba(0, 0, 0, 0.3);
}

/* Encadrement gribouillé - Première couche fine */
.marmoset-viewer-container::before {
    content: '';
    position: absolute;
    top: 1px; /* Positif pour rester visible */
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 0.5px solid rgba(255, 255, 255, 0.4);
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé - Deuxième couche fine superposée */
.marmoset-viewer-container::after {
    content: '';
    position: absolute;
    top: 0.5px; /* Positif pour rester visible */
    left: 0.5px;
    right: 0.5px;
    bottom: 0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    z-index: 2;
    pointer-events: none;
    border-radius: 0;
    transform: rotate(0.2deg);
}

.viewer-wrapper {
    width: 100%;
    height: 45vh; /* Hauteur responsive basée sur la hauteur d'écran */
    background: transparent;
    border: none;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0.5vw; /* Marge pour que marmosetUI reste dans l'encadrement */
    box-sizing: border-box;
}

#marmoset-viewer-inline {
    width: 100%;
    height: 100%;
    border: none;
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    max-width: 100% !important; /* Force la limitation */
    max-height: 100% !important; /* Force la limitation */
    box-sizing: border-box !important;
}

#marmoset-viewer-inline::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Forcer la suppression des barres de défilement sur tous les éléments du viewer */
.viewer-wrapper * {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.viewer-wrapper *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Styles spécifiques pour contenir marmosetUI */
#marmoset-chara-viewer-inline {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: #2a2a2a !important;
    overflow: hidden !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

/* Forcer tous les éléments marmosetUI à rester dans leurs containers */
#marmosetUI, [id^="marmosetUI"] {
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Forcer le fond gris pour le conteneur et contenir marmosetUI */
.marmoset-viewer-container .viewer-wrapper {
    background: #2a2a2a !important;
    width: calc(100% - 2vw); /* Réduction plus importante pour éviter débordement */
    height: calc(100% - 4vw); /* Réduction pour titre + marge */
    margin: 1vw auto;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure de debug pour voir les limites */
}

.marmoset-viewer-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2a2a2a;
    z-index: -1;
}

/* Cacher le texte de chargement blanc dans l'iframe et forcer le background gris */
#marmoset-viewer-inline p {
    display: none !important;
    background: #2a2a2a !important;
}

/* Forcer le background gris pour tout le contenu de l'iframe */
iframe[src*="Circus_Viewer.html"] {
    background: #2a2a2a !important;
}

iframe[src*="Circus_Viewer.html"] * {
    background: #2a2a2a !important;
}







.project-software {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.project-software h4 {
    margin: 0 0 5px 0;
    font-size: 0.8rem;
    color: #cccccc;
}

.software-list {
    font-size: 0.7rem;
    line-height: 1.2;
}

.software-item {
    color: #ffffff;
}

.project-details {
    padding: 10px 0;
}

.project-details h4 {
    margin: 0 0 5px 0;
    font-size: 0.8rem;
    color: #cccccc;
}

.project-details p {
    font-size: 0.7rem;
    line-height: 1.3;
    margin: 0;
}

.project-software h4 {
    color: #4CAF50;
    font-family: 'Kindergarten', sans-serif;
    margin: 0 0 10px 0;
    font-size: 0.9rem;
}

.software-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.software-item {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid #4CAF50;
    color: #4CAF50;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    text-align: center;
    font-family: 'Kindergarten', sans-serif;
}

.project-details {
    padding: 15px;
    flex: 1;
}

.project-details h4 {
    color: #4CAF50;
    font-family: 'Kindergarten', sans-serif;
    margin: 0 0 10px 0;
    font-size: 0.9rem;
}

.project-details p {
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Lightbox pour images agrandies */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInLightbox 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
}

.lightbox-content {
    position: relative;
    max-width: 60vw;
    max-height: 60vh;
    animation: scaleInContent 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: -60px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 30000;
    backdrop-filter: blur(5px);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

/* Boutons de navigation lightbox */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(1);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    opacity: 0.7;
}

.lightbox-prev {
    left: -80px;
    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.lightbox-next {
    right: -80px;
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

/* Compteur d'images */
.lightbox-counter {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Kindergarten', sans-serif;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 20px;
    border-radius: 8px;
    z-index: 30000;
    backdrop-filter: blur(5px);
}

/* Animation pour les instructions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations pour les boutons de navigation */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-30px);
    }
    to {
        opacity: 0.7;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(30px);
    }
    to {
        opacity: 0.7;
        transform: translateY(-50%) translateX(0);
    }
}

/* Animations fluides pour les éléments Marmoset */
@keyframes fadeInLightbox {
    from { 
        opacity: 0; 
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1; 
        backdrop-filter: blur(5px);
    }
}

@keyframes scaleInContent {
    from { 
        opacity: 0; 
        transform: scale(0.8) translateY(20px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* DEUXIÈME VIEWER 3D CHARA CIRCUS - À DROITE */
.marmoset-chara-viewer-container {
    width: 27%; /* Légèrement réduit pour faire place au viewer principal */
    height: 97%; /* Hauteur augmentée verticalement */
    background: #2a2a2a !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: absolute;
    left: 71%; /* Position ajustée pour le nouveau width */
    top: 1.5%; /* Position ajustée pour la hauteur augmentée */
    flex-shrink: 0;
    padding: 0.2vw; /* Padding minimal pour éviter débordement marmosetUI */
    box-sizing: border-box; /* Inclut le padding dans les dimensions */
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow: hidden; /* Contient parfaitement marmosetUI */
    opacity: 1;
    transform: scale(0.82); /* Scale encore plus réduit pour éviter débordement */
    transform-origin: center center; /* Centrage du scaling */
}

/* VERSION ORDINATEUR SEULEMENT - Container personnages plus à droite et plus grand */
@media (min-width: 1025px) {
    .marmoset-chara-viewer-container {
        left: 76%; /* Position après viewer principal (34% + 40% + 2% espacement) */
        width: 22%; /* Largeur maximale sans déborder */
        height: 100%; /* Même hauteur que la gallery pour alignement parfait */
        top: 0%; /* Aligné avec le haut de la gallery */
        transform: scale(1); /* Supprime le scale pour utiliser toute la taille */
    }
}

/* Encadrement gribouillé pour le deuxième viewer - Style game-button première couche */
.marmoset-chara-viewer-container::before {
    content: '';
    position: absolute;
    top: 1px; /* Positif pour rester visible */
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
    pointer-events: none;
    border-radius: 2px 0.5px 2.5px 1px;
    transform: rotate(-0.3deg);
}

/* Encadrement gribouillé pour le deuxième viewer - Style game-button deuxième couche */
.marmoset-chara-viewer-container::after {
    content: '';
    position: absolute;
    top: 0.5px; /* Positif pour rester visible */
    left: 0.5px;
    right: 0.5px;
    bottom: 0.5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    pointer-events: none;
    border-radius: 1px 2.5px 0.5px 1.5px;
    transform: rotate(0.2deg);
}

.marmoset-chara-viewer-container .viewer-wrapper {
    width: calc(100% - 2vw) !important; /* Réduction modérée - plus d'espace pour l'iframe */
    height: calc(80vh - 3vw) !important; /* Hauteur avec marge raisonnable */
    max-height: none !important; /* Suppression de la limite fixe */
    overflow: hidden !important;
    margin: 1vw auto !important; /* Marge RÉDUITE - plus d'espace utile */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordure de debug */
    box-sizing: border-box !important; /* Include border in size calculations */
}

/* ===== MEDIA QUERIES NATURELLES ===== */

/* Tablette : passage en layout vertical */
@media (max-width: 1024px) {
    .project-container {
        flex-direction: column;
        align-items: center;
        gap: 3vh; /* Espacement vertical naturel */
    }
    
    .project-media-wrapper {
        width: 90%; /* Largeur adaptée tablette */
        aspect-ratio: 16/9;
    }
    
    .project-info-side {
        width: 90%;
        min-width: unset;
        border-left: none;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        text-align: center;
        padding-top: 2vh;
    }
}

/* Mobile : optimisation pour petit écran */
@media (max-width: 768px) {
    .marmoset-viewer-modal {
        padding: 0; /* Pas de padding pour mobile */
        overflow-y: auto; /* Scroll automatique */
        overflow-x: hidden; /* Empêche le scroll horizontal */
        height: 100vh; /* Hauteur fixe pour permettre le scroll */
        position: fixed; /* Position fixe pour le scroll */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex; /* Revenir à flex pour organisation */
        flex-direction: column; /* Organisation verticale */
        -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
    }
    
    /* Correction flèches navigation galerie sur mobile - RADICALEMENT PLUS PETIT */
    .nav-arrow {
        width: 25px !important; /* Taille fixe très petite */
        height: 25px !important; /* Hauteur très petite */
        font-size: 12px !important; /* Police très petite */
        border: 1px solid white !important; /* Bordure très fine */
    }
    
    /* Correction bouton fermeture photos agrandies sur mobile - RADICALEMENT PLUS PETIT */
    .gallery-image.fullscreen::after {
        font-size: 10px !important; /* Taille très petite */
        padding: 4px 8px !important; /* Padding très réduit */
        top: -25px !important; /* Position ajustée pour taille réduite */
        border: 1px solid rgba(139, 69, 19, 0.7) !important; /* Bordure très fine */
    }
    
    /* Correction RADICALE boutons navigation - cercle parfait garanti */
    .image-nav-btn {
        width: 30px !important; /* Taille légèrement augmentée */
        height: 30px !important; /* Hauteur EXACTEMENT identique */
        min-width: 30px !important; /* Force dimensions minimales */
        min-height: 30px !important; /* Force dimensions minimales */
        max-width: 30px !important; /* Force dimensions maximales */
        max-height: 30px !important; /* Force dimensions maximales */
        font-size: 16px !important; /* Police lisible */
        border: 2px solid white !important; /* Bordure visible */
        border-radius: 50% !important; /* Forme ronde parfaite */
        display: flex !important; /* Flex pour centrage absolu */
        align-items: center !important; /* Centrage vertical absolu */
        justify-content: center !important; /* Centrage horizontal absolu */
        padding: 0 !important; /* Aucun padding */
        margin: 0 !important; /* Aucune marge */
        box-sizing: border-box !important; /* Inclut bordure */
        line-height: 1 !important; /* Ligne unique */
        text-align: center !important; /* Texte centré */
        overflow: hidden !important; /* Cache débordement */
        flex-shrink: 0 !important; /* Pas de réduction */
    }
    
    /* Correction RADICALE bouton fermeture - cercle parfait garanti */
    .image-viewer-close {
        width: 28px !important; /* Taille fixe */
        height: 28px !important; /* Hauteur EXACTEMENT identique */
        min-width: 28px !important; /* Force dimensions minimales */
        min-height: 28px !important; /* Force dimensions minimales */
        max-width: 28px !important; /* Force dimensions maximales */
        max-height: 28px !important; /* Force dimensions maximales */
        font-size: 14px !important; /* Police lisible */
        border: 2px solid white !important; /* Bordure visible */
        border-radius: 50% !important; /* Forme ronde parfaite */
        display: flex !important; /* Flex pour centrage absolu */
        align-items: center !important; /* Centrage vertical absolu */
        justify-content: center !important; /* Centrage horizontal absolu */
        padding: 0 !important; /* Aucun padding */
        margin: 0 !important; /* Aucune marge */
        box-sizing: border-box !important; /* Inclut bordure */
        line-height: 1 !important; /* Ligne unique */
        text-align: center !important; /* Texte centré */
        overflow: hidden !important; /* Cache débordement */
        flex-shrink: 0 !important; /* Pas de réduction */
        top: -35px !important; /* Position ajustée */
    }
    
    /* Force ABSOLUE pour modal context - RADICALEMENT ROND */
    .image-viewer-modal .image-nav-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        font-size: 16px !important;
        border: 2px solid white !important;
        border-radius: 15px !important; /* Rayon exactement la moitié */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        text-align: center !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1/1 !important; /* Ratio 1:1 parfait */
    }
    
    /* Boutons navigation mobile - SOUS l'image dans le flow */
    .image-viewer-modal .image-nav-btn.prev,
    .image-viewer-modal .image-nav-btn.next,
    .image-viewer-modal button[onclick*="navigateImage"] {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        font-size: 16px !important;
        border: 2px solid white !important;
        border-radius: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 5px !important; /* Petit espacement */
        box-sizing: border-box !important;
        line-height: 1 !important;
        text-align: center !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1/1 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        /* POSITIONNEMENT RELATIF - dans le flow après l'image */
        position: relative !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Container pour les boutons - sous l'image */
    .image-viewer-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Zone boutons navigation - après l'image */
    .image-nav-buttons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }
    
    .image-viewer-modal .image-viewer-close {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        font-size: 14px !important;
        border: 2px solid white !important;
        border-radius: 14px !important; /* Rayon exactement la moitié */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        text-align: center !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1/1 !important; /* Ratio 1:1 parfait */
        top: -35px !important;
    }
    
    /* Correction débordements marmoset sur mobile/tablette */
    .marmoset-main-container {
        padding: 5px; /* Padding réduit */
        transform: scale(0.95); /* Réduction pour éviter débordement */
        overflow: hidden; /* Contient parfaitement */
    }
    
    .marmoset-viewer-container,
    .marmoset-chara-viewer-container {
        transform: scale(0.85); /* Réduction plus importante */
        overflow: hidden; /* Contient parfaitement */
        box-sizing: border-box; /* Inclut padding et border dans dimensions */
        padding: 0.5vw; /* Padding interne pour espacement */
    }
    
    /* DIMENSIONS FIXES marmosetUI mobile - 350px pour environnement ET personnage */
    .marmoset-viewer-container #marmosetUI,
    .marmoset-viewer-container [id^="marmosetUI"],
    .marmoset-chara-viewer-container #marmosetUI,
    .marmoset-chara-viewer-container [id^="marmosetUI"] {
        width: 350px !important; /* Largeur fixe 350px (au lieu de 464 et 511) */
        height: 350px !important; /* Hauteur fixe 350px pour uniformité */
        max-width: 350px !important; /* Maximum fixe */
        max-height: 350px !important; /* Maximum fixe */
        min-width: 350px !important; /* Minimum fixe */
        min-height: 350px !important; /* Minimum fixe */
        transform-origin: center center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: auto !important; /* Centrage automatique */
        position: relative !important; /* Position relative pour centrage */
    }
    
    /* Force containment sur tous les éléments enfants */
    .marmoset-viewer-container #marmosetUI *,
    .marmoset-viewer-container [id^="marmosetUI"] *,
    .marmoset-chara-viewer-container #marmosetUI *,
    .marmoset-chara-viewer-container [id^="marmosetUI"] * {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    
    .marmoset-modal-content {
        flex: none; /* Pas de flex pour permettre expansion */
        height: auto; /* Hauteur automatique */
        overflow: visible; /* Permet le débordement pour scroll */
        padding: 1vw; /* Padding réduit pour éviter débordement */
        gap: 2vh; /* Espacement réduit entre les éléments */
        box-sizing: border-box; /* Inclut padding dans les dimensions */
        max-width: 100%; /* Limite la largeur */
    }
    
    .marmoset-main-container {
        width: 100% !important; /* Utilise tout l'espace */
        height: auto !important; /* Hauteur automatique pour permettre le scroll */
        min-height: 100vh !important; /* Au moins la hauteur de l'écran */
        margin: 0 !important; /* Aucune marge */
        padding: 1vw !important; /* Padding encore plus réduit */
        transform: none !important; /* Pas de scale sur mobile */
        position: relative !important; /* Position relative pour le layout */
        display: flex !important;
        box-sizing: border-box !important; /* Inclut padding dans les dimensions */
        flex-direction: column !important;
        gap: 4vh !important; /* Espacement entre les éléments */
        flex: none !important; /* Pas de contrainte flex */
        overflow: visible !important; /* Permet le débordement pour scroll */
    }
    
    /* Force la modal à s'adapter au contenu sur mobile */
    .marmoset-viewer-modal {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }
    
    .marmoset-modal-content {
        margin: 0;
        padding: 0;
    }
    
    .project-showcase {
        max-width: 95vw;
        padding: 3vw;
        gap: 3vh;
    }
    
    .project-item {
        padding: 3vw;
        min-height: 30vh;
        border-radius: 2vw;
    }
    
    .project-container {
        padding: 2vw;
        gap: 2vh;
    }
    
    .project-media-wrapper {
        width: 100%;
        aspect-ratio: 16/10;
        min-height: 20vh;
    }
    
    .project-info-side {
        padding: 3vw;
        gap: 1.5vh;
    }
    
    .project-info-side h3 {
        font-size: 5vw; /* Taille naturellement responsive */
    }
    
    .project-info-side .project-description {
        font-size: 3.5vw;
        line-height: 1.4;
    }
    
    /* Galerie responsive sur mobile */
    .gallery-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur mobile */
        gap: 4vw;
        padding: 4vw;
    }
    
    .gallery-image {
        height: 15vh; /* Hauteur réduite sur mobile */
    }
    
    .project-gallery h3 {
        font-size: 3.5vw; /* Taille ajustée pour mobile */
    }
    
    /* Panneaux Marmoset responsive sur mobile */
    .marmoset-gallery-panel {
        width: 95vw; /* Presque plein écran sur mobile */
        height: 80vh;
        left: 2.5vw; /* Centré sur mobile */
        top: 10vh;
        padding: 2vw; /* Marge réduite sur mobile */
    }
    
    .gallery-instructions {
        font-size: 3vw; /* Taille plus adaptée sur mobile */
        padding: 2vw 3vw;
    }
    
    .viewer-wrapper {
        height: 35vh; /* Hauteur réduite sur mobile */
    }
    
    .marmoset-chara-viewer-container .viewer-wrapper {
        height: 60vh; /* Hauteur adaptée pour les personnages sur mobile */
    }
    
    /* Layout galerie responsive sur mobile */
    /* Titre responsive sur mobile */
    .marmoset-page-title {
        order: -2; /* Place le titre en premier */
        padding: 3vh 0 2vh 0; /* Padding augmenté pour mobile */
    }
    
    .marmoset-page-title h1 {
        font-size: 6vw; /* Taille responsive pour mobile */
    }
    
    /* Header responsive sur mobile */
    .marmoset-header {
        order: -1; /* Place le header en deuxième */
        padding: 2vh 4vw; /* Padding adapté pour mobile */
        justify-content: center; /* Centré sur mobile */
    }
    
    /* Bouton retour responsive sur mobile */
    .back-to-collectibles {
        padding: 2vh 4vw; /* Padding adapté pour mobile */
        font-size: 3.5vw; /* Taille de police réduite */
        min-width: 60vw; /* Largeur réduite */
        max-width: 70vw; /* Limite réduite */
        margin: 0; /* Pas de marge dans le header */
        position: relative; /* Position relative */
        top: auto; /* Reset de la position */
        left: auto; /* Reset de la position */
        display: block; /* Block pour centrage */
        text-align: center; /* Texte centré */
    }
    
    /* Mobile : layout vertical - MARGES UNIFORMISÉES */
    .marmoset-gallery-panel {
        width: 95% !important; /* Presque pleine largeur */
        height: 30vh !important; /* Hauteur réduite pour permettre scroll */
        left: auto !important; /* Reset position */
        top: auto !important; /* Reset position */
        position: relative !important; /* Position relative dans le flex container */
        margin: 2vh auto 3vh auto !important; /* MARGE UNIFORMISÉE - même top que les autres */
        padding: 1vw !important; /* Padding uniformisé */
        flex: none !important; /* Pas de contrainte flex */
        box-sizing: border-box !important; /* Consistance */
    }
    
    .marmoset-viewer-container {
        width: 95% !important; /* Presque pleine largeur */
        height: auto !important; /* Hauteur AUTO pour s'adapter au contenu */
        min-height: 55vh !important; /* Hauteur minimum pour visibilité */
        max-height: 60vh !important; /* Hauteur maximum pour éviter débordement */
        left: auto !important; /* Reset position */
        top: auto !important; /* Reset position */
        position: relative !important; /* Position relative dans le flex container */
        margin: 2vh auto 3vh auto !important; /* MARGE UNIFORMISÉE avec les autres */
        transform: none !important; /* Supprime le scale du container */
        padding: 1vw !important; /* Padding uniformisé avec les autres */
        flex: none !important; /* Pas de contrainte flex */
        overflow: hidden !important; /* CONTIENT le contenu - évite superpositions */
        box-sizing: border-box !important; /* Inclut padding dans dimensions */
        display: block !important; /* Force l'affichage en bloc */
    }
    
    .marmoset-chara-viewer-container {
        width: 95% !important; /* Presque pleine largeur */
        height: auto !important; /* HAUTEUR AUTO pour pousser la page */
        min-height: 60vh !important; /* Hauteur minimum pour garantir la visibilité */
        left: auto !important; /* Reset position */
        top: auto !important; /* Reset position */
        position: relative !important; /* Position relative dans le flow */
        margin: 2vh auto 3vh auto !important; /* MARGE UNIFORMISÉE - cohérence visuelle */
        transform: none !important; /* Supprime le scale du container */
        padding: 1vw !important; /* Padding uniformisé avec les autres */
        flex: none !important; /* Pas de contrainte flex */
        overflow: visible !important; /* Permet de voir l'encadrement complet */
        box-sizing: border-box !important; /* Inclut padding dans dimensions */
        display: block !important; /* Force l'affichage en bloc pour pousser */
    }
    
    .marmoset-chara-viewer-container .viewer-wrapper {
        width: 100% !important; /* Utilise toute la largeur */
        height: 50vh !important; /* Hauteur contrôlée pour éviter débordement */
        max-height: 50vh !important; /* Limite stricte */
        min-height: 45vh !important; /* Hauteur minimum réduite */
        margin: 0 !important; /* Supprime les marges */
        display: block !important; /* Force l'affichage en bloc */
        position: relative !important; /* Position dans le flow */
        overflow: hidden !important; /* CONTIENT strictement le contenu */
        box-sizing: border-box !important; /* Inclut borders/padding */
    }
    
    /* Force les iframes à respecter les limites sur mobile */
    .marmoset-viewer-container iframe,
    .marmoset-chara-viewer-container iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border: none !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    /* Viewer principal mobile - CONTENU PARFAITEMENT CONTENU */
    .marmoset-viewer-container .viewer-wrapper {
        width: 100% !important; /* Utilise toute la largeur */
        height: 50vh !important; /* Hauteur fixe contrôlée */
        max-height: 50vh !important; /* Limite maximum */
        margin: 0 !important; /* Supprime les marges */
        overflow: hidden !important; /* CONTIENT le contenu - pas de débordement */
        display: block !important; /* Force l'affichage en bloc */
        position: relative !important; /* Position dans le flow */
        box-sizing: border-box !important; /* Inclut borders/padding */
    }
    
    .marmoset-info-panel {
        width: 90%; /* Largeur réduite sur mobile */
        height: auto; /* Hauteur automatique */
        min-height: 12vh; /* Hauteur minimum pour contenir titre + logos */
        left: auto; /* Reset position */
        top: auto; /* Reset position */
        position: relative; /* Position relative dans le flex container */
        margin: 0 auto 5vh auto; /* Centré avec marge en bas pour séparation */
        transform: none;
        background: #1a1a1a !important; /* Arrière-plan gris comme marmoset-gallery-panel */
        z-index: auto; /* Reset z-index */
        flex: none; /* Pas de contrainte flex */
        display: flex; /* Flex pour alignement horizontal */
        flex-direction: row; /* Direction horizontale */
        align-items: center; /* Centrage vertical */
        justify-content: space-between; /* Répartition équilibrée */
        gap: 0; /* Pas d'espacement - contrôle par width */
        padding: 1.5vw; /* Même padding que marmoset-gallery-panel */
        overflow: hidden; /* Contient parfaitement */
        border: none !important;
        box-sizing: border-box; /* Inclut le padding dans les dimensions */
    }
    
    /* Story Panel mobile - spécifique Kitchen */
    .marmoset-story-panel {
        width: 95% !important; /* Presque pleine largeur */
        height: auto !important; /* Hauteur automatique */
        min-height: 35vh !important; /* Hauteur minimum encore plus réduite */
        max-height: 50vh !important; /* Hauteur maximum réduite pour économiser l'espace */
        left: auto !important; /* Reset position */
        top: auto !important; /* Reset position */
        position: relative !important; /* Position relative dans le flex container */
        margin: 2vh auto 3vh auto !important; /* MARGE UNIFORMISÉE avec les autres */
        transform: none !important; /* Supprime le scale du container */
        padding: 3vw !important; /* Padding augmenté pour mobile */
        flex: none !important; /* Pas de contrainte flex */
        overflow-y: auto !important; /* Permet le scroll */
        box-sizing: border-box !important; /* Inclut padding dans dimensions */
        display: block !important; /* Force l'affichage en bloc */
    }
    
    .marmoset-story-panel h3 {
        color: #ffffff !important; /* Blanc pour mobile */
        font-family: 'Kindergarten', serif !important; /* Police du site */
        font-size: 1.2rem !important; /* Taille réduite pour mobile */
        margin-bottom: 15px !important;
    }
    
    .marmoset-story-panel .story-text p {
        color: #ffffff !important; /* Blanc pour mobile */
        font-family: 'Kindergarten', serif !important; /* Police du site */
        font-size: 0.85rem !important; /* Taille réduite pour mobile */
        line-height: 1.5 !important;  
        margin-bottom: 15px !important;
        text-indent: 15px !important; /* Indentation réduite */
    }
    
    .marmoset-story-panel .story-text p strong {
        color: #ffffff !important; /* Blanc pour mobile */
        font-weight: bold !important;
    }
    
    /* Encadrement gribouillé style marmoset-gallery-panel mobile - Première couche fine */
    .marmoset-info-panel::before {
        content: '';
        position: absolute;
        top: 0.05vw; /* Positif pour rester visible */
        left: 0.05vw;
        right: 0.05vw;
        bottom: 0.05vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.4); /* Bordure responsive */
        z-index: 1;
        pointer-events: none;
        border-radius: 0;
        transform: rotate(-0.3deg);
    }
    
    /* Encadrement gribouillé style marmoset-gallery-panel mobile - Deuxième couche fine superposée */
    .marmoset-info-panel::after {
        content: '';
        position: absolute;
        top: 0.1vw; /* Positif pour rester visible */
        left: 0.1vw;
        right: 0.1vw;
        bottom: 0.1vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.5); /* Bordure responsive */
        z-index: 2;
        pointer-events: none;
        border-radius: 0;
        transform: rotate(0.2deg);
    }
    
    /* Zone titre mobile - 50% À GAUCHE avec encadrements */
    .marmoset-info-panel .title-zone {
        width: 50% !important;
        flex: 0 0 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Alignement à gauche du titre */
        padding: 0 1vw !important; /* Padding équilibré */
        height: 100% !important; /* Utilise toute la hauteur */
        order: 1 !important; /* PREMIER - titre à gauche */
        z-index: 2 !important; /* Au-dessus des encadrements */
        position: relative !important;
    }
    
    /* Zone logos mobile - 50% À DROITE avec encadrements */
    .marmoset-info-panel .logos-zone {
        width: 50% !important;
        flex: 0 0 50% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important; /* Centrage des logos */
        gap: 0.8vw !important; /* Espacement optimal */
        padding: 0 1vw !important; /* Padding équilibré */
        height: 100% !important; /* Utilise toute la hauteur */
        order: 2 !important; /* DEUXIÈME - logos à droite */
        z-index: 2 !important; /* Au-dessus des encadrements */
        position: relative !important;
    }
    
    /* Titre H3 mobile - CENTRÉ et PLUS GRAND */
    .marmoset-info-panel .title-zone h3 {
        font-size: 5vw !important; /* Taille AUGMENTÉE pour mobile */
        color: white !important;
        font-family: 'Kindergarten', serif !important;
        font-weight: bold !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        text-align: center !important; /* Centrage du texte */
        line-height: 1.2 !important; /* Ligne de hauteur optimisée */
    }
    
    /* SUPPRESSION TOTALE de tous les anciens systèmes sur mobile */
    .marmoset-info-panel .logo-wrapper,
    .marmoset-info-panel .info-title,
    .marmoset-info-panel .info-content,
    .marmoset-info-panel .logos-container {
        display: none !important; /* Désactivé sur mobile */
    }
    
    /* Logos mobile COMPACTS - PNG transparents */
    .marmoset-info-panel .logos-zone .logo-item {
        display: block !important; /* Affichage en bloc */
        visibility: visible !important; /* Réactive la visibilité */
        opacity: 1 !important; /* Opacité forcée */
        width: 5vw !important; /* Largeur AUGMENTÉE pour visibilité */
        height: 5vw !important; /* Hauteur AUGMENTÉE pour visibilité */
        max-width: 6vw !important; /* Limite augmentée */
        max-height: 6vw !important; /* Limite augmentée */
        min-width: 4vw !important; /* Minimum viable */
        min-height: 4vw !important; /* Minimum viable */
        flex-shrink: 1 !important; /* Peut se réduire si nécessaire */
        /* PNG transparent - mobile */
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0.1vw !important; /* Marge réduite pour plus d'espace */
        object-fit: contain !important;
        image-rendering: crisp-edges !important;
        z-index: 10 !important; /* Force l'affichage au-dessus */
        position: relative !important;
    }
    
    /* SUPPRESSION des styles conflictuels - remplacés par title-zone/logos-zone */
    
    /* ORDRE RESTAURÉ POUR MOBILE/TABLETTE - Ne pas toucher PC */
    .marmoset-gallery-panel {
        order: 1 !important; /* 1er: Galerie */
    }
    
    .marmoset-viewer-container {
        order: 2 !important; /* 2ème: Viewer 3D */
    }
    
    .marmoset-extra-panel {
        order: 3 !important; /* 3ème: Visualiseur avec slider */
    }
    
    .marmoset-story-panel {
        order: 3 !important; /* 3ème: Histoire (spécifique Kitchen) */
    }
    
    .arch-slider-external {
        order: 4 !important; /* 3bis: Slider externe (partie du visualiseur) */
    }
    
    .marmoset-info-panel {
        order: 5 !important; /* 4ème: Logiciels */
    }
    
    /* ORDRE SPÉCIFIQUE POUR CIRCUS - Mobile */
    /* Circus n'a pas de marmoset-extra-panel ni de slider externe */
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-gallery-panel {
        order: 1 !important; /* 1er: Galerie */
    }
    
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-viewer-container {
        order: 2 !important; /* 2ème: Viewer 3D environnement */
    }
    
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-chara-viewer-container {
        order: 3 !important; /* 3ème: Viewer 3D personnage */
    }
    
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-info-panel {
        order: 4 !important; /* 4ème: Logiciels */
    }
    
    /* ORDRE SPÉCIFIQUE POUR KITCHEN - Mobile */
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-gallery-panel {
        order: 1 !important; /* 1er: Galerie */
    }
    
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-story-panel {
        order: 2 !important; /* 2ème: Histoire (spécifique Kitchen) */
    }
    
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-info-panel {
        order: 3 !important; /* 3ème: Logiciels Kitchen - DIRECTEMENT APRÈS HISTOIRE */
        display: flex !important; /* Force l'affichage */
        visibility: visible !important; /* Force la visibilité */
        width: 85% !important; /* Largeur réduite pour éviter débordement */
        max-width: 85% !important; /* Limite maximum pour éviter débordement */
        margin: 1vh auto 2vh auto !important; /* Marges réduites */
        left: auto !important; /* Reset position absolue */
        top: auto !important; /* Reset position absolue */
        position: relative !important; /* Position relative pour rester dans le flux */
        transform: none !important; /* Supprime toute transformation */
        box-sizing: border-box !important; /* Inclut padding dans la largeur */
        overflow: hidden !important; /* Évite tout débordement de contenu */
        padding: 1vw !important; /* Padding réduit */
    }
}

/* VERSION TABLETTE SEULEMENT - Correction débordements marmoset */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Correction flèches navigation galerie sur tablette */
    .nav-arrow {
        width: 50px; /* Taille intermédiaire pour tablette */
        height: 50px; /* Taille intermédiaire pour tablette */
        font-size: 1.4rem; /* Police intermédiaire pour tablette */
        border: 2px solid white; /* Bordure standard */
    }
    
    /* Correction bouton fermeture photos agrandies sur tablette */
    .gallery-image.fullscreen::after {
        font-size: 1rem; /* Taille standard */
        padding: 10px 18px; /* Padding intermédiaire */
        top: -50px; /* Position ajustée */
        border: 2.5px solid rgba(139, 69, 19, 0.8); /* Bordure standard */
    }
    
    /* Correction débordements marmoset sur tablette */
    .marmoset-main-container {
        padding: 8px; /* Padding intermédiaire */
        transform: scale(0.97); /* Réduction légère pour éviter débordement */
        overflow: hidden; /* Contient parfaitement */
    }
    
    .marmoset-viewer-container,
    .marmoset-chara-viewer-container {
        transform: scale(0.92); /* Réduction modérée */
        overflow: hidden; /* Contient parfaitement */
    }
}

/* Tablette : layout adaptatif */
@media (max-width: 1024px) and (min-width: 769px) {
    .marmoset-viewer-modal {
        padding: 1vh 1vw; /* Marge globale réduite sur tablette */
        overflow-y: auto; /* Permet le scroll vertical */
        height: 100vh; /* Hauteur fixe pour permettre le scroll */
        position: fixed; /* Position fixe pour le scroll */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Box visualisateur responsive tablette */
    .marmoset-extra-panel {
        position: relative !important; /* Changement vers relative */
        top: auto !important;
        right: auto !important;
        width: 100% !important; /* Pleine largeur sur tablette */
        height: auto !important;
        margin: 15px 0 !important;
        padding: 18px !important;
    }

    /* Slider externe tablette - Plus compact et proche du panel */
    .arch-slider-external {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 8px 0 15px 0; /* Marge réduite en haut */
        padding: 15px; /* Padding légèrement réduit */
    }
    
    /* Correction flèches navigation galerie sur tablette */
    .nav-arrow {
        width: 50px; /* Taille légèrement réduite pour tablette */
        height: 50px; /* Taille légèrement réduite pour tablette */
        font-size: 1.3rem; /* Police légèrement réduite pour tablette */
    }
    
    /* Correction bouton fermeture photos agrandies sur tablette */
    .gallery-image.fullscreen::after {
        font-size: 1rem; /* Taille légèrement réduite */
        padding: 10px 20px; /* Padding légèrement réduit */
        top: -50px; /* Position ajustée */
    }
    
    .marmoset-main-container {
        width: 100%; /* Utilise tout l'espace */
        height: auto; /* Hauteur automatique pour permettre le scroll */
        min-height: 120vh; /* Hauteur minimum pour forcer le scroll */
        margin: 0; /* Aucune marge */
        padding: 2vw; /* Padding uniforme */
        transform: scale(0.92); /* Scale ajusté pour tablette */
        display: flex;
        flex-direction: column;
        gap: 3vh; /* Espacement entre les éléments */
    }
    
    /* Titre responsive sur tablette */
    .marmoset-page-title {
        order: -2; /* Place le titre en premier */
        padding: 2vh 0 1vh 0; /* Padding adapté pour tablette */
    }
    
    .marmoset-page-title h1 {
        font-size: 4vw; /* Taille responsive pour tablette */
    }
    
    /* Header responsive sur tablette */
    .marmoset-header {
        order: -1; /* Place le header en deuxième */
        padding: 1.5vh 3vw; /* Padding adapté pour tablette */
        justify-content: center; /* Centré sur tablette */
    }
    
    /* Bouton retour responsive sur tablette */
    .back-to-collectibles {
        padding: 2vh 3vw; /* Padding adapté pour tablette */
        font-size: 2vw; /* Taille de police réduite */
        min-width: 30vw; /* Largeur réduite */
        max-width: 40vw; /* Limite réduite */
        margin: 0; /* Pas de marge dans le header */
    }
    
    .marmoset-modal-content {
        margin: 0;
        padding: 0;
    }
    
    /* Tablette : layout adapté 2 colonnes */
    .marmoset-gallery-panel {
        width: 28vw;
        height: 55vh;
        left: 2vw;
        top: 10vh;
        padding: 1.2vw; /* Marge adaptée sur tablette */
    }
    
    .marmoset-viewer-container {
        width: 40vw;
        height: 30vh;
        left: 33vw;
        top: 10vh;
        transform: scale(0.92); /* Réduction pour contenir UI */
        padding: 1vw; /* Padding réduit pour plus d'espace pour UI */
        overflow: hidden; /* Contient parfaitement */
        box-sizing: border-box; /* Inclut padding dans dimensions */
    }
    
    .marmoset-chara-viewer-container {
        width: 40vw;
        height: 35vh;
        left: 33vw;
        top: 45vh;
        transform: scale(0.92); /* Réduction pour contenir UI */
        padding: 1vw; /* Padding réduit pour plus d'espace pour UI */
        overflow: hidden; /* Contient parfaitement */
        box-sizing: border-box; /* Inclut padding dans dimensions */
    }
    
    /* Forcer containment des éléments marmoset UI sur tablette */
    .marmoset-viewer-container > *,
    .marmoset-chara-viewer-container > * {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .marmoset-info-panel {
        width: 28vw;
        height: 30vh;
        left: 2vw;
        top: 70vh;
        transform: none;
    }
    
    /* Box logiciels Kitchen tablette - éviter chevauchement */
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-info-panel {
        left: 75vw !important; /* Positionné après la story panel (33vw + 40vw + 2vw de marge) */
        width: 23vw !important; /* Largeur ajustée pour s'adapter */
    }
    
    /* Story Panel tablette - spécifique Kitchen */
    .marmoset-story-panel {
        width: 40vw !important; /* Largeur adaptée pour tablette */
        height: auto !important; /* Hauteur automatique */
        min-height: 50vh !important; /* Hauteur minimum pour tablette */
        max-height: 70vh !important; /* Hauteur maximum */
        left: 33vw !important; /* Positionné après la galerie */
        top: 10vh !important; /* Aligné avec les autres panneaux */
        position: absolute !important; /* Position absolue pour tablette */
        margin: 0 !important; /* Pas de marge en mode absolu */
        transform: scale(0.92) !important; /* Scale ajusté pour tablette */
        padding: 2vw !important; /* Padding adapté pour tablette */
        overflow-y: auto !important; /* Permet le scroll */
        box-sizing: border-box !important;
    }
    
    .marmoset-story-panel h3 {
        font-size: 1.3rem !important; /* Taille adaptée pour tablette */
    }
    
    .marmoset-story-panel .story-text p {
        font-size: 0.9rem !important; /* Taille adaptée pour tablette */
        line-height: 1.55 !important;
    }
    
    /* Adaptations curseur et éléments UI mobile */
    .custom-cursor {
        width: 3vw;
        height: 3vw;
    }
    
    .custom-cursor::before {
        border-left: 2vw solid #f5f1e8;
        border-top: 1.3vw solid transparent;
        border-bottom: 1.3vw solid transparent;
    }
    
    .custom-cursor::after {
        border-left: 1.6vw solid #e8dcc0;
        border-top: 1vw solid transparent;
        border-bottom: 1vw solid transparent;
    }
    
    .game-controls {
        max-width: 80vw;
        bottom: 2vh;
        left: 2vw;
        padding: 3vw;
        gap: 2vw;
    }
    
    .game-title {
        top: 1vh;
        right: 2vw;
        padding: 1vw;
        max-width: 80vw;
    }
    
    /* ORDRE RESTAURÉ POUR TABLETTE - Ne pas toucher PC */
    .marmoset-gallery-panel {
        order: 1 !important; /* 1er: Galerie */
    }
    
    .marmoset-viewer-container {
        order: 2 !important; /* 2ème: Viewer 3D */
    }
    
    .marmoset-extra-panel {
        order: 3 !important; /* 3ème: Visualiseur avec slider */
    }
    
    .marmoset-story-panel {
        order: 3 !important; /* 3ème: Histoire (spécifique Kitchen) */
    }
    
    .arch-slider-external {
        order: 4 !important; /* 3bis: Slider externe (partie du visualiseur) */
    }
    
    .marmoset-info-panel {
        order: 5 !important; /* 4ème: Logiciels */
    }
    
    /* ORDRE SPÉCIFIQUE POUR CIRCUS - Tablette */
    /* Circus n'a pas de marmoset-extra-panel ni de slider externe */
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-gallery-panel {
        order: 1 !important; /* 1er: Galerie */
    }
    
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-viewer-container {
        order: 2 !important; /* 2ème: Viewer 3D environnement */
    }
    
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-chara-viewer-container {
        order: 3 !important; /* 3ème: Viewer 3D personnage */
    }
    
    .marmoset-modal-content:has([src*="Circus"]) .marmoset-info-panel {
        order: 4 !important; /* 4ème: Logiciels */
    }
    
    /* ORDRE SPÉCIFIQUE POUR KITCHEN - Tablette */
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-gallery-panel {
        order: 1 !important; /* 1er: Galerie */
    }
    
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-story-panel {
        order: 2 !important; /* 2ème: Histoire (spécifique Kitchen) */
    }
    
    .marmoset-modal-content:has([src*="Kitchen"]) .marmoset-info-panel {
        order: 3 !important; /* 3ème: Logiciels Kitchen - DIRECTEMENT APRÈS HISTOIRE */
        display: flex !important; /* Force l'affichage */
        visibility: visible !important; /* Force la visibilité */
        width: 85% !important; /* Largeur réduite pour éviter débordement */
        max-width: 85% !important; /* Limite maximum pour éviter débordement */
        left: auto !important; /* Reset position absolue */
        top: auto !important; /* Position dans le flux */
        position: relative !important; /* Position relative sur tablette */
        margin: 1vh auto !important; /* Marges réduites pour séparation et centrage */
        transform: none !important; /* Supprime toute transformation */
        box-sizing: border-box !important; /* Inclut padding dans la largeur */
        overflow: hidden !important; /* Évite tout débordement de contenu */
        padding: 1vw !important; /* Padding réduit */
    }
}

/* Instructions d'interaction pour mobile/desktop */
.desktop-instruction {
    display: inline;
}

.mobile-instruction {
    display: none;
}

@media (max-width: 1024px) {
    .desktop-instruction {
        display: none;
    }
    
    .mobile-instruction {
        display: inline;
    }
    
    /* Améliorer l'overlay sur mobile pour être plus visible */
    .project-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }
    
    .project-overlay-text {
        font-size: 1.1em !important;
        font-weight: bold;
    }
    
    /* Rendre l'interaction plus claire sur mobile */
    .project-media-wrapper {
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    
    .project-media-wrapper:active {
        transform: scale(0.98);
    }
    
    /* Repositionner le bouton back-to-home sur tablette - SUPPRIMÉ - maintenant géré dans les nouvelles media queries */
    
    /* Réduire aussi les textes du bouton sur tablette */
    .back-to-home-btn .button-text {
        font-size: 0.8rem !important;
    }

    .back-to-home-btn .button-subtitle {
        font-size: 0.6rem !important;
    }
    
    /* Ajouter de l'espace pour éviter le chevauchement sur tablette */
    .collectibles-container {
        padding-bottom: 100px !important;
    }
    
    .project-showcase {
        padding-bottom: 100px !important;
    }
}

/* Optimisations spécifiques pour smartphones */
@media (max-width: 480px) {
    /* S'assurer qu'aucun élément ne dépasse */
    .collectibles-content {
        padding: 10px !important;
        gap: 15px !important;
    }
    
    .project-media-wrapper {
        max-width: 100% !important;
        min-height: 200px !important;
        max-height: 250px !important;
    }
    
    .project-overlay-text {
        font-size: 0.9em !important;
        padding: 8px !important;
    }
    
    /* Texte du projet sur smartphone */
    .project-info-side {
        padding: 12px !important;
        margin-top: 15px !important;
        background: rgba(26, 26, 26, 0.9) !important;
        border-radius: 8px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .project-info-side h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
        color: #e8dcc0 !important;
        text-align: center !important;
    }
    
    .project-description {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        color: #cccccc !important;
        text-align: left !important;
    }
    
    .project-tags {
        font-size: 0.7rem !important;
        margin-top: 8px !important;
        color: #e8dcc0 !important;
    }
    
    .project-hint {
        font-size: 0.7rem !important;
        color: #cccccc !important;
        margin-top: 6px !important;
    }
    
    /* Navigation mobile - s'assurer qu'elle ne dépasse pas */
    .mobile-nav-button {
        max-width: calc(100vw - 40px) !important;
        word-wrap: break-word;
        white-space: normal !important;
    }
    
    /* Contrôles de navigation */
    .project-controls {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .nav-arrow {
        font-size: 1.2em !important;
        padding: 8px !important;
    }
    
    /* Compteur de pages */
    .page-counter {
        font-size: 0.8em !important;
        padding: 4px 8px !important;
    }
    
    /* Bouton mobile - SUPPRIMÉ - maintenant géré dans les nouvelles media queries d'échange */
    
    /* Styles des textes réduits pour mobile */
    .back-to-home-btn .button-text {
        font-size: 0.8rem !important;
    }

    .back-to-home-btn .button-subtitle {
        font-size: 0.6rem !important;
    }
    
    /* Effet parallaxe géré par JavaScript - ne pas interférer avec les transformations */
    
    /* Retirer le padding-bottom supplémentaire car le bouton est maintenant dans le flux */
    .collectibles-container {
        padding-bottom: 20px !important;
    }
    
    .project-showcase {
        padding-bottom: 20px !important;
    }
    
    .back-to-home-btn .button-text {
        font-size: 0.9rem !important;
    }
    
    .back-to-home-btn .button-subtitle {
        font-size: 0.7rem !important;
    }
    
    /* Le bouton est maintenant dans le flux normal - pas besoin de padding spécial */
    .marmoset-viewer-modal {
        padding-bottom: 20px !important;
    }
    
    .circus-project {
        padding-bottom: 20px !important;
    }
    
    /* Retirer le padding-bottom du body */
    body {
        padding-bottom: 0 !important;
    }
}

/* Media queries pour la gestion des boutons de navigation */
@media (min-width: 1025px) {
    
    .back-to-home-btn {
        position: static !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        margin: 50px auto 20px auto !important;
    }
}

@media (max-width: 1024px) {
    /* Masquer le bouton précédent à gauche sur mobile/tablette */
    .image-nav-left {
        display: none !important;
    }
    
    /* Afficher le bouton précédent mobile en bas sur mobile/tablette */
    .mobile-only {
        display: flex !important;
    }
    

    
    /* Ajouter un padding-top au portfolio pour éviter l'empiètement */
    .collectibles-header {
        margin-top: 80px !important;
        padding-top: 20px !important;
    }
    
    /* Boutons de navigation projet - en bas de page après le contenu */

    /* === CORRECTIONS PAGE CONTACT MOBILE/TABLETTE UNIQUEMENT === */
    
    /* Conteneur des papiers sur mobile/tablette seulement */
    #contact-window .papers-container {
        position: relative !important;
        width: 100% !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Repositionner le bouton Reset Papers en haut à gauche sur mobile/tablette */
    #contact-window .reset-papers-btn {
        position: absolute !important;
        left: 30px !important;
        top: 80px !important;
        transform: none !important;
        width: 180px !important;
        height: 60px !important;
        font-size: 0.8rem !important;
        z-index: 5000 !important;
    }
    
    /* Bouton Retour Accueil juste en dessous du Reset Papers sur mobile/tablette */
    #contact-window #back-to-home {
        position: absolute !important;
        left: 30px !important;
        top: 160px !important;
        transform: none !important;
        width: 180px !important;
        height: 60px !important;
        font-size: 0.8rem !important;
        z-index: 5000 !important;
    }
    
    /* Repositionner la loupe à droite, plus bas sur mobile/tablette */
    #contact-window .magnifier-control {
        position: absolute !important;
        bottom: 150px !important;
        right: 30px !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        z-index: 5000 !important;
    }
    
    /* Ajuster la taille de la loupe sur mobile/tablette */
    #contact-window .magnifier-btn {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Masquer l'explication de la loupe sur mobile/tablette */
    #contact-window .magnifier-explanation {
        display: none !important;
    }
    
    /* Corriger le positionnement des papiers contact sur mobile/tablette - CENTRÉ */
    #contact-window .contact-paper {
        position: absolute !important;
        width: 200px !important;
        height: 250px !important;
        left: 50% !important;
        top: 50% !important;
        margin-left: -100px !important;
        margin-top: -125px !important;
        z-index: 1000 !important;
        max-width: 90vw !important;
        max-height: 60vh !important;
    }
    
    /* Ajuster la taille du CV sur mobile/tablette - CENTRÉ DERRIÈRE */
    #contact-window .cv-paper {
        position: absolute !important;
        width: 220px !important;
        height: 280px !important;
        left: 50% !important;
        top: 50% !important;
        margin-left: -110px !important;
        margin-top: -140px !important;
        z-index: 900 !important;
        max-width: 85vw !important;
        max-height: 70vh !important;
    }
    
    /* Garder les transformations 3D mais simplifiées sur mobile/tablette */
    #contact-window .contact-paper,
    #contact-window .cv-paper {
        transform-style: preserve-3d !important;
    }
    
    /* Restaurer les interactions sur mobile/tablette */
    #contact-window .cv-interactive-overlay {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    /* Ajuster le contenu des papiers sur mobile/tablette pour éviter le débordement */
    #contact-window .contact-content {
        padding: 20px !important;
        font-size: 0.9rem !important;
    }
    
    #contact-window .contact-note {
        margin-top: 15px !important;
        padding-top: 10px !important;
    }
    
    #contact-window .note-text {
        font-size: 0.7rem !important;
        margin: 4px 0 !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 768px) {
    /* Mobile : Ajustements de taille pour l'échange */
    .back-to-home-btn {
        width: 120px !important;
        height: 40px !important;
        font-size: 0.7rem !important;
    }
    
    /* Ajustement du header mobile - TOUT CENTRÉ */
    .collectibles-header {
        margin-top: 70px !important;
        padding: 15px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        text-align: center !important;
    }
    
    /* Titre en premier et centré */
    .collectibles-header .collectibles-title {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Boutons de navigation côte à côte et centrés */
    .collectibles-header .project-nav-btn {
        order: 2 !important;
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
        min-width: 100px !important;
        margin: 0 8px !important;
        display: inline-block !important;
    }
    

    
    .project-nav-btn {
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
        min-width: 100px !important;
        flex: 0 0 auto !important;
    }
    
    /* Masquer les emojis des boutons de navigation sur mobile */
    .project-nav-btn span {
        font-size: 0.75rem !important;
    }
    
    /* Remplacer le contenu des boutons sur mobile sans emoji */
    #prev-project span::before {
        content: "Précédent" !important;
    }
    
    #next-project span::before {
        content: "Suivant" !important;
    }
    
    #prev-project span,
    #next-project span {
        font-size: 0 !important; /* Masquer le texte original */
    }
    
    #prev-project span::before,
    #next-project span::before {
        font-size: 0.75rem !important; /* Afficher le nouveau texte */
    }
    
    /* Lazy loading supprimé - chargement immédiat */
    
    .gallery-item {
        transition: opacity 0.3s ease;
    }
    
    .gallery-item img {
        transition: opacity 0.3s ease;
    }
    
    .gallery-item .image-placeholder {
        background: #f5f5f5;
        border: 1px dashed #ccc;
        border-radius: 4px;
        padding: 20px;
        text-align: center;
        color: #666;
        font-size: 12px;
    }
    
    /* === AJUSTEMENTS CONTACT MOBILE UNIQUEMENT === */
    
    /* Bouton Reset Papers mobile - reste dans le conteneur */
    #contact-window .reset-papers-btn {
        width: 160px !important;
        height: 50px !important;
        font-size: 0.7rem !important;
        left: 20px !important;
        top: 60px !important;
    }
    
    /* Bouton Retour Accueil mobile - juste en dessous */
    #contact-window #back-to-home {
        width: 160px !important;
        height: 50px !important;
        font-size: 0.7rem !important;
        left: 20px !important;
        top: 130px !important;
    }
    
    /* Loupe mobile */
    #contact-window .magnifier-control {
        bottom: 120px !important;
        right: 20px !important;
    }
    
    #contact-window .magnifier-btn {
        width: 45px !important;
        height: 45px !important;
    }
    
    /* Papiers plus petits sur mobile - RESTENT CENTRÉS SANS CHEVAUCHEMENT */
    #contact-window .contact-paper {
        width: 200px !important;
        height: 250px !important;
        max-width: 80vw !important;
        max-height: 40vh !important;
        left: 50% !important;
        top: 45% !important;
        margin-left: -100px !important;
        margin-top: -125px !important;
    }
    
    #contact-window .cv-paper {
        width: 220px !important;
        height: 280px !important;
        max-width: 75vw !important;
        max-height: 45vh !important;
        left: 50% !important;
        top: 55% !important;
        margin-left: -110px !important;
        margin-top: -140px !important;
    }
    
    /* Réduire le contenu des papiers sur mobile */
    #contact-window .contact-content {
        padding: 15px !important;
        font-size: 0.8rem !important;
    }
    
    #contact-window .contact-header h2 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }
    
    #contact-window .contact-item {
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }
    
    #contact-window .cv-frame {
        transform: scale(0.8) !important;
        transform-origin: top left !important;
    }
}

/* Media query spécifique pour les vraies tablettes et mobiles */
@media (max-width: 768px) {
    /* ÉCHANGE DES POSITIONS - Mobile et Tablette uniquement */
    /* Bouton Retour Accueil va en HAUT */
    .back-to-home-btn {
        position: fixed !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: auto !important;
        z-index: 1000 !important;
        width: 140px !important;
        height: 45px !important;
        font-size: 0.75rem !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
    }

    /* Styles mobiles pour le slider d'assets */
    .slider-container {
        margin: 15px 0 10px 0;
        max-width: calc(100% - 60px);
    }

    .asset-type-btn {
        padding: 8px 12px; /* Padding mobile fixe */
        font-size: 12px; /* Taille mobile fixe */
    }

    .asset-type-btn.active,
    .asset-type-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 1px 6px rgba(255, 255, 255, 0.4);
        transform: scale(1.03); /* Scale réduit sur mobile aussi */
    }

    #asset-slider {
        height: 8px;
        background: linear-gradient(to right, 
            #333333 0%, #333333 25%, 
            #666666 25%, #666666 50%, 
            #999999 50%, #999999 75%, 
            #cccccc 75%, #cccccc 100%
        );
    }

    #asset-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    .slider-zones {
        display: none;
    }

    .zone-label {
        display: none;
    }

    /* Styles mobiles pour le slider Gun */
    #gun-asset-slider {
        height: 8px;
        background: linear-gradient(to right, 
            #ffffff 0%, #ffffff 16.67%, 
            #cccccc 16.67%, #cccccc 33.33%, 
            #999999 33.33%, #999999 50%, 
            #666666 50%, #666666 66.67%, 
            #333333 66.67%, #333333 83.33%, 
            #000000 83.33%, #000000 100%
        );
    }

    #gun-asset-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    /* Styles mobiles pour le slider Telephone */
    #telephone-asset-slider {
        height: 8px;
        background: linear-gradient(to right, 
            #ffffff 0%, #ffffff 20%, 
            #cccccc 20%, #cccccc 40%, 
            #999999 40%, #999999 60%, 
            #666666 60%, #666666 80%, 
            #333333 80%, #333333 100%
        );
    }

    #telephone-asset-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    /* Room slider responsive - même style qu'Archway */
    #room-asset-slider {
        height: 8px;
        background: linear-gradient(to right, 
            #ffffff 0%, #ffffff 16.67%, 
            #cccccc 16.67%, #cccccc 33.33%, 
            #999999 33.33%, #999999 50%, 
            #666666 50%, #666666 66.67%, 
            #333333 66.67%, #333333 83.33%, 
            #000000 83.33%, #000000 100%
        );
    }

    #room-asset-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    /* Boutons sequence plus gros sur mobile - template Archway pour tous */
    .sequence-btn {
        padding: 8px 12px; /* Taille fixe plus grande sur mobile */
        font-size: 16px; /* Taille fixe plus lisible */
        min-width: 40px; /* Largeur minimale plus grande */
        height: 40px; /* Hauteur fixe */
    }

    /* Box visualisateur responsive mobile/tablette */
    .marmoset-extra-panel {
        position: relative !important; /* Changement de absolute à relative */
        top: auto !important;
        right: auto !important;
        left: auto !important; /* Reset left pour Telephone */
        width: 100% !important; /* Pleine largeur sur mobile */
        height: auto !important; /* Hauteur automatique */
        margin: 20px 0 !important; /* Marges verticales */
        padding: 20px !important;
        transform: none !important; /* Reset transform pour Telephone */
    }

    /* Override spécifique pour Telephone sur mobile */
    .marmoset-extra-panel:has(#telephone-asset-preview) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Override spécifique pour slider Telephone sur mobile */
    .arch-slider-external:has(#telephone-asset-slider) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Container mobile pour Telephone - layout flex pour contrôler l'ordre */
    .marmoset-main-container {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Galerie Telephone en haut sur mobile */
    .marmoset-gallery-panel {
        order: 1;
    }

    /* Viewer au milieu */
    .marmoset-viewer-container {
        order: 2;
    }

    /* Panel Telephone après le viewer */
    .marmoset-extra-panel:has(#telephone-asset-preview) {
        order: 3;
    }

    /* Slider Telephone après le panel */
    .arch-slider-external:has(#telephone-asset-slider) {
        order: 4;
    }

    /* Box logiciels Telephone tout en bas */
    .marmoset-extra-panel:has(#telephone-asset-preview) ~ .marmoset-info-panel {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        order: 5; /* Tout en bas */
        margin-top: 30px !important;
    }

    /* Slider externe mobile - Plus petit et collé au panel */
    .arch-slider-external {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 5px 0 20px 0; /* Marge réduite en haut, normale en bas */
        padding: 12px; /* Padding réduit */
    }

    /* Badge WIP plus visible sur mobile */
    .wip-text {
        font-size: 2vw; /* Plus gros sur mobile */
        color: rgba(255, 255, 255, 0.8); /* Plus visible */
    }

    /* Les styles mobiles pour asset-type-btn sont déjà définis plus haut dans cette media query */
    /* Le panneau Gun/Plasma Pistol utilise les mêmes styles mobiles que Archway */

    /* Désactiver la loupe SEULEMENT sur mobile/tablette pour éviter les problèmes de performance */
    .magnifier-overlay {
        display: none !important;
    }

    .magnifier-btn {
        display: none !important;
    }

    .magnifier-control {
        display: none !important;
    }
}

/* === NOUVEAU LAYOUT MOBILE/TABLETTE CV === */
/* Masquer le nouveau layout sur desktop */
@media (min-width: 1025px) {
    .cv-mobile-container {
        display: none !important;
    }
    
    /* Masquer COMPLÈTEMENT l'overlay fullscreen sur desktop */
    .cv-fullscreen-overlay {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /* Masquer l'ancien CV 3D sur mobile/tablette */
    .cv-paper {
        display: none !important;
    }
    
    /* S'assurer que le nouveau container mobile est visible */
    .cv-mobile-container {
        display: flex !important;
    }
    
    /* Container principal pour le CV mobile */
    .cv-mobile-container {
        position: relative;
        width: 100%;
        max-width: 600px; /* Encore plus compact */
        margin: 15px auto; /* Marges réduites */
        padding: 0 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px; /* Gap réduit */
    }

    /* Container pour les images côte à côte */
    .cv-images-container {
        display: flex;
        gap: 8px; /* Gap minimal entre les images */
        width: 100%;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: nowrap; /* Pas de wrap pour forcer côte à côte */
    }

    /* Images individuelles - COMPACTES ET CÔTE À CÔTE */
    .cv-image-wrapper {
        flex: 1;
        min-width: 180px; /* Taille compacte */
        max-width: 250px; /* Taille compacte */
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    }

    .cv-image-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    .cv-image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        background: white;
    }

    /* Labels pour les images */
    .cv-image-label {
        text-align: center;
        margin-top: 8px;
        font-size: 13px; /* Légèrement plus petit pour le texte plus long */
        color: #ffffff;
        font-weight: 500;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        line-height: 1.2; /* Améliore la lisibilité */
    }

    /* Fullscreen amélioré avec navigation */
    .cv-fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }

    .cv-fullscreen-overlay.active {
        display: flex;
    }

    .cv-fullscreen-content {
        position: relative;
        max-width: 95vw;
        max-height: 85vh;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cv-fullscreen-content img {
        width: 100%;
        height: auto;
        max-width: 95vw;
        max-height: 75vh;
        object-fit: contain;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    /* Navigation pour le fullscreen */
    .cv-nav-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }

    .cv-nav-button {
        background: rgba(255, 255, 255, 0.9);
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cv-nav-button:hover {
        background: white;
        transform: scale(1.1);
    }

    .cv-nav-button:disabled {
        background: rgba(255, 255, 255, 0.5);
        color: #999;
        cursor: not-allowed;
        transform: none;
    }

    /* Indicateurs de page */
    .cv-page-indicators {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .cv-page-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cv-page-indicator.active {
        background: white;
        transform: scale(1.2);
    }

    /* Bouton fermer amélioré */
    .cv-close-button {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 50%;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        transition: all 0.2s ease;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cv-close-button:hover {
        transform: scale(1.1);
        background: white;
    }

    /* Responsive pour très petits écrans */
    @media (max-width: 600px) {
        .cv-mobile-container {
            max-width: 450px; /* Très compact */
            padding: 0 5px;
            margin: 10px auto;
        }

        .cv-images-container {
            gap: 6px; /* Gap minimal */
            /* Maintenir flex-direction: row pour garder côte à côte */
        }

        .cv-image-wrapper {
            min-width: 140px; /* Très petit mais lisible */
            max-width: 180px; /* Très petit mais lisible */
        }

        .cv-image-label {
            font-size: 11px; /* Encore plus petit sur très petits écrans */
            margin-top: 6px;
            line-height: 1.1;
        }

        .cv-fullscreen-content img {
            max-height: 70vh;
        }

        .cv-nav-button {
            width: 45px;
            height: 45px;
            font-size: 18px;
        }
    }
}

/* === POSITIONS FORCÉES DESKTOP - RÈGLES ULTRA-PRIORITAIRES === */
@media (min-width: 1025px) {
    /* Bouton Reset Papers - Position originale FORCÉE */
    .reset-papers-btn {
        position: absolute !important;
        left: 30px !important;
        top: 45% !important;
        transform: translateY(-50%) !important;
        width: 200px !important;
        height: 70px !important;
        z-index: 100 !important;
        font-size: 0.9rem !important;
        transition: transform 0.1s ease-out !important;
    }
    
    /* Animations hover pour reset-papers-btn - FORCÉES */
    .reset-papers-btn:hover {
        background: transparent !important;
        transform: translateY(-50%) scale(1.05) !important; /* Maintenir la position ET permettre les effets */
        transition: transform 0.2s ease !important;
    }
    
    .reset-papers-btn:hover::before {
        border-color: rgba(255, 255, 255, 0.4) !important;
        border-width: 0.7px !important;
        transform: rotate(-0.5deg) !important;
    }
    
    .reset-papers-btn:hover::after {
        border-color: rgba(255, 255, 255, 0.5) !important;
        border-width: 0.7px !important;
        transform: rotate(0.4deg) !important;
    }
    
    .reset-papers-btn:active {
        background: transparent !important;
        transform: translateY(-50%) scale(1.1) !important; /* Combiner la position ET le scale */
    }
    
    /* Pseudo-éléments du reset-papers-btn - FORCÉS */
    .reset-papers-btn::before {
        content: '' !important;
        position: absolute !important;
        top: -1px !important;
        left: -1px !important;
        right: -1px !important;
        bottom: -1px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 2px 0.5px 2.5px 1px !important;
        transform: rotate(-0.3deg) !important;
        transition: all 0.2s ease !important;
    }
    
    .reset-papers-btn::after {
        content: '' !important;
        position: absolute !important;
        top: -0.5px !important;
        left: -0.5px !important;
        right: -0.5px !important;
        bottom: -0.5px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 1px 2.5px 0.5px 1.5px !important;
        transform: rotate(0.2deg) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Instructions - Position originale FORCÉE */
    .papers-instructions {
        position: absolute !important;
        bottom: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 1rem !important;
        text-align: center !important;
        font-family: 'Kindergarten', sans-serif !important;
        background: rgba(0, 0, 0, 0.6) !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        backdrop-filter: blur(4px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        z-index: 10 !important;
    }
    
    /* Magnifier Control - Position originale FORCÉE */
    .magnifier-control {
        position: fixed !important;
        top: 50% !important;
        right: 30px !important;
        transform: translateY(-50%) !important;
        z-index: 5000 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    /* Logos Sociaux - Position ajustée FORCÉE */
    .social-logos-container {
        position: absolute !important;
        right: 800px !important; /* Déplacé de 200% supplémentaires vers la gauche */
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    
    /* Instruction Logos Sociaux - Position au-dessus des logos FORCÉE */
    .social-logos-instruction {
        position: absolute !important;
        right: 705px !important; /* Déplacé de 2% supplémentaires vers la droite */
        top: 22% !important; /* Déplacé de 4% encore plus haut */
        transform: translateY(-50%) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.9rem !important;
        font-family: 'Kindergarten', sans-serif !important;
        background: rgba(0, 0, 0, 0.6) !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        backdrop-filter: blur(4px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        z-index: 10 !important;
        text-align: center !important;
    }
}

/* OPTIMISATION MOBILE - Cacher le viewer personnage pour éviter surcharge */
@media (max-width: 768px) {
    .marmoset-chara-viewer-container {
        display: none !important; /* Masquer sur mobile pour performance */
    }
    
    /* Agrandir légèrement le viewer environnement pour compenser */
    .marmoset-viewer-container {
        width: 45vw !important; /* Légèrement plus large */
        height: 45vh !important; /* Légèrement plus haut */
    }
}