:root {
    /* --- COULEURS GLOBALES --- */
    --bg-color: #000000;
    --card-bg: #1a1a1a;
    --text-main: #ffffff;
    --text-muted: #888888;
    
    /* Accents */
    --netflix-red: #e50914;
    --spotify-green: #00c853;
    --alert-red: #ff4444;
    --gold: #D4AF37;
    
    /* UI */
    --border-radius: 15px;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- RESET & BASE --- */
* { box-sizing: border-box; }

body {
    background: var(--bg-color);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0; padding: 0;
    /* Pour éviter le "pull-to-refresh" sur mobile qui casse le swipe */
    overscroll-behavior: none; 
}

a { text-decoration: none; color: inherit; }

/* --- LAYOUTS --- */
.container-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100vh; padding: 20px; text-align: center;
}

.app-container {
    position: relative; z-index: 10;
    width: 100%; height: 100vh; max-width: 500px; margin: 0 auto;
    display: flex; flex-direction: column;
}

/* --- COMPOSANTS : BOUTONS --- */
.btn {
    display: block; width: 100%; padding: 15px; border-radius: 50px;
    font-weight: 900; font-size: 1.1rem; text-transform: uppercase; text-align: center;
    cursor: pointer; border: none; transition: transform 0.2s;
    margin: 10px 0;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--netflix-red); color: white; box-shadow: 0 5px 20px rgba(229, 9, 20, 0.4); }
.btn-secondary { background: #333; color: white; border: 1px solid #444; }
.btn-ghost { background: transparent; color: #666; font-size: 0.9rem; font-weight: normal; }

/* --- COMPOSANTS : FORMULAIRES --- */
.input-code {
    background: #222; border: 2px solid #333; padding: 15px;
    color: white; font-size: 1.5rem; text-align: center; border-radius: 12px;
    width: 100%; max-width: 250px;
    text-transform: uppercase; letter-spacing: 5px; font-weight: bold;
    margin-bottom: 20px; outline: none;
}
.input-code:focus { border-color: var(--netflix-red); }

/* --- MOVIE MATCHER : SETUP (Grille) --- */
.grid-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; width: 100%; }
.option-card { position: relative; }
.option-card input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.option-label {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #222; border: 1px solid #333; padding: 15px 5px; border-radius: 8px;
    cursor: pointer; transition: 0.2s; font-size: 0.85rem; height: 100%;
}
.option-card input:checked + .option-label {
    background: var(--netflix-red); color: white; border-color: var(--netflix-red); font-weight: bold;
}

/* --- MOVIE MATCHER : SWIPE & CARTE --- */
.bg-blur {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: blur(40px) brightness(0.4); z-index: 0;
}

.card-wrapper {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 70px 20px 20px 20px; perspective: 1000px;
}

/* La Carte Flip */
.flip-card-inner {
    position: relative; width: 100%; height: 100%; max-height: 65vh; aspect-ratio: 2/3;
    text-align: center; transition: transform 0.6s; transform-style: preserve-3d;
    border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.flip-card-inner.is-flipped { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 20px; overflow: hidden; background: #1a1a1a;
}

/* Face Avant */
.card-front { background-size: 100% 100%; background-position: center; }
.poster-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, transparent); padding: 20px; text-align: left;
}
.poster-title { margin: 0; font-size: 1.8rem; line-height: 1.2; text-shadow: 0 2px 4px black; }
.poster-meta { font-size: 1rem; color: #ccc; margin-top: 5px; }
.poster-rating { color: var(--netflix-red); font-weight: bold; margin-right: 10px; }

/* Face Arrière */
.card-back { transform: rotateY(180deg); display: flex; flex-direction: column; text-align: left; overflow-y: auto; }
.trailer-box { width: 100%; aspect-ratio: 16/9; background: black; flex-shrink: 0; }
.trailer-box iframe { width: 100%; height: 100%; border: none; }
.back-content { padding: 20px; }

/* Boutons Swipe */
.actions-bar {
    height: 120px; display: flex; justify-content: center; align-items: center; gap: 40px; padding-bottom: 20px;
}
.btn-circle {
    width: 75px; height: 75px; border-radius: 50%; border: none; font-size: 2.5rem;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4); transition: transform 0.1s;
}
.btn-circle:active { transform: scale(0.9); }
.btn-no { background: #222; color: var(--alert-red); border: 2px solid #333; }
.btn-yes { background: white; color: var(--spotify-green); }

/* Tampons */
.stamp { 
    position: absolute; top: 40px; padding: 5px 15px; border: 4px solid; 
    border-radius: 10px; font-size: 2.5rem; font-weight: 900; 
    text-transform: uppercase; opacity: 0; z-index: 10; 
}
.stamp-like { right: 40px; color: var(--spotify-green); border-color: var(--spotify-green); transform: rotate(15deg); }
.stamp-nope { left: 40px; color: var(--alert-red); border-color: var(--alert-red); transform: rotate(-15deg); }

/* --- MOVIE MATCHER : NAVIGATION & MENU --- */
.top-nav {
    position: absolute; top: 0; left: 0; width: 100%; height: 60px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 50;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}
.room-code { font-weight: 900; font-size: 1rem; color: var(--netflix-red); letter-spacing: 2px; text-shadow: 0 2px 4px black; }
.burger-icon { font-size: 1.8rem; cursor: pointer; text-shadow: 0 2px 4px black; }

/* Menu Overlay */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.98); z-index: 200;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transform: translateX(-100%); transition: transform 0.3s ease-out;
}
.menu-overlay.open { transform: translateX(0); }
.menu-link { color: white; font-size: 1.5rem; text-decoration: none; margin: 15px 0; text-transform: uppercase; font-weight: bold; }
.close-menu { position: absolute; top: 30px; right: 30px; font-size: 2.5rem; cursor: pointer; color: #666; }

/* --- MOVIE MATCHER : RESULTATS --- */
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; margin-top: 20px; }
.movie-thumb { 
    position: relative; border-radius: 10px; overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); aspect-ratio: 2/3; 
}
.movie-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-title {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,0.8); padding: 8px; font-size: 0.8rem; font-weight: bold;
}

/* --- POPUP MATCH --- */
#match-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 200, 83, 0.95); z-index: 300;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    animation: popIn 0.3s ease-out;
}
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* --- UTILITAIRE DE CENTRAGE --- */
.layout-center {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre Verticalement */
    align-items: center;     /* Centre Horizontalement */
    min-height: 100vh;       /* Prend toute la hauteur de l'écran */
    width: 100%;
    text-align: center;      /* Centre le texte */
    padding: 20px;           /* Marge de sécurité */
    box-sizing: border-box;
}