:root {
    --wc-blue: #0033A0;   /* Bleu Royal West Coast */
    --wc-gold: #FFD700;   /* Or */
    --wc-dark: #1a1a1a;
    --wc-grey: #f0f0f0;
    --font-graffiti: 'Permanent Marker', cursive;
    --font-oldenglish: 'UnifrakturMaguntia', cursive;
    --font-typewriter: 'VT323', monospace;
}

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

body {
    background-color: var(--wc-grey);
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: var(--font-typewriter);
    color: var(--wc-dark);
    overflow-x: hidden;
}

/* --- INTRO CASSETTE ANIMATION --- */
#intro-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--wc-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1s ease-out;
}

.cassette {
    width: 280px;
    height: 180px;
    background: #333;
    border-radius: 10px;
    position: relative;
    border: 4px solid #111;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    animation: shake 0.5s infinite;
}

.cassette-label {
    background: var(--wc-gold);
    height: 100px;
    margin: 15px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cassette-label span {
    font-family: var(--font-graffiti);
    font-size: 1.5rem;
    transform: rotate(-2deg);
}

.holes {
    display: flex;
    gap: 60px;
    margin-top: 10px;
}

.hole {
    width: 40px; height: 40px;
    background: var(--wc-dark);
    border-radius: 50%;
    border: 2px solid white;
    animation: spin 2s linear infinite;
}

.hole::after {
    content: ''; display: block; width: 10px; height: 10px;
    background: white; position: absolute; top: 2px; left: 14px;
}

.loading-text {
    color: var(--wc-gold);
    margin-top: 20px;
    font-size: 1.5rem;
    animation: blink 1s infinite;
}

/* --- MAIN CONTENT --- */
#app-content.hidden { display: none; }

header {
    text-align: center;
    padding: 20px;
    background: var(--wc-blue);
    color: white;
    border-bottom: 5px solid var(--wc-gold);
    margin-bottom: 20px;
}

.main-cover-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.main-cover {
    width: 100%;
    max-width: 300px;
    border: 3px solid white;
    box-shadow: 5px 5px 0px var(--wc-dark);
}

/* STICKER ADVISORY CUSTOM */
.advisory-sticker {
    position: absolute;
    bottom: 10px; right: -10px;
    background: white;
    border: 2px solid black;
    padding: 2px;
    width: 100px;
    height: 60px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    transform: rotate(-3deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.advisory-small {
    font-size: 8px;
    border-bottom: 2px solid black;
    padding-bottom: 1px;
    margin-bottom: 1px;
}

.advisory-big {
    font-size: 10px;
    line-height: 11px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    /* On change pour une police "Block" (Impact) très Hip-Hop et très lisible */
    font-family: 'Impact', var(--font-graffiti), sans-serif; 
    font-size: 3.5rem; /* Taille augmentée */
    text-transform: uppercase; /* Tout en majuscules */
    letter-spacing: 2px; /* Espacement des lettres pour la lisibilité */
    color: var(--wc-gold);
    /* Contour noir solide pour bien détacher le texte du fond */
    text-shadow: 
        -2px -2px 0 #000,  
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        4px 4px 0 rgba(0,0,0,0.5); 
    margin: 10px 0 5px 0;
    line-height: 1;
}

.subtitle {
    font-family: var(--font-graffiti);
    font-size: 1.2rem;
}

/* --- TRACKLIST --- */
.tracklist-container {
    padding: 0 15px 40px 15px;
    max-width: 600px;
    margin: 0 auto;
}

.track-card {
    background: white;
    border: 2px solid var(--wc-dark);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 3px 0px var(--wc-blue);
}

.track-header {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer; /* Clic pour ouvrir Youtube */
}

.track-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--wc-dark);
    margin-right: 15px;
}

.track-info {
    flex-grow: 1;
}

.track-title {
    font-family: var(--font-graffiti);
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--wc-blue);
}

.youtube-link {
    text-decoration: none;
    background: #ff0000;
    color: white;
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 3px;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.lyrics-btn {
    background: var(--wc-gold);
    border: none;
    border-top: 2px solid var(--wc-dark);
    padding: 8px;
    width: 100%;
    font-family: var(--font-typewriter);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}

.lyrics-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fffbea; /* Papier jauni */
    padding: 0 15px;
    font-size: 1.1rem;
    white-space: pre-wrap; /* Respecte les sauts de ligne */
}

.lyrics-content.open {
    padding: 15px;
    border-top: 1px dashed #999;
}

footer {
    text-align: center;
    padding: 20px;
    background: var(--wc-dark);
    color: var(--wc-grey);
    margin-top: 30px;
}

/* --- PAGE CREW & POKEMON CARDS STYLE --- */

.crew-page {
    padding: 20px;
    background-color: var(--wc-grey);
}

.crew-header {
    text-align: center;
    margin-bottom: 40px;
}

.back-btn {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--wc-blue);
    text-decoration: none;
    font-family: var(--font-graffiti);
    font-size: 1.2rem;
    border: 2px solid var(--wc-blue);
    padding: 5px 15px;
    border-radius: 20px;
}

.crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center;
}

/* CARD DESIGN */
.poke-card {
    background: #f4d03f; /* Jaune style carte */
    background: linear-gradient(135deg, #f4d03f 0%, #e6b0aa 100%);
    border: 8px solid #ffeaa7;
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    padding: 10px;
    font-family: 'Arial', sans-serif; /* Police lisible pour les petits textes */
    position: relative;
    transition: transform 0.2s;
}

.poke-card:hover {
    transform: translateY(-5px) rotate(1deg);
    z-index: 10;
}

.poke-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.poke-name {
    font-family: var(--font-graffiti);
    font-size: 1.4rem;
    color: var(--wc-dark);
}

.poke-hp {
    color: #c0392b;
    font-weight: 900;
}

.poke-img-container {
    background: var(--wc-dark);
    height: 180px;
    border: 4px solid #a0a0a0;
    box-shadow: inset 0 0 10px #000;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avatar généré par CSS (Lettre style Graffiti) */
.poke-avatar {
    font-family: var(--font-oldenglish);
    font-size: 6rem;
    color: var(--wc-gold);
    text-shadow: 3px 3px 0 var(--wc-blue);
}

.poke-type-bar {
    background: linear-gradient(90deg, #d4ac0d, #f1c40f);
    border-radius: 10px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    font-style: italic;
    padding: 2px 0;
    margin-bottom: 10px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.poke-moves {
    background: rgba(255,255,255,0.6);
    padding: 5px;
    border-radius: 5px;
    min-height: 150px;
}

.move {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 5px;
}

.move:last-child { border-bottom: none; }

.move-name {
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.move-desc {
    font-size: 0.85rem;
    line-height: 1.1;
    color: #333;
}

.poke-footer {
    margin-top: 5px;
    font-size: 0.6rem;
    text-align: center;
    font-style: italic;
    opacity: 0.7;
}

/* ANIMATIONS */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }

/* --- CORRECTIF FORCE VISUELS CREW --- */

/* 1. On force la grille à ne pas exploser */
.crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonnes flexibles */
    gap: 30px;
    padding-bottom: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. On sécurise la carte */
.poke-card {
    width: 100%; /* La carte prend la largeur de la colonne */
    max-width: 350px; /* Mais pas plus large que 350px */
    margin: 0 auto; /* Centrée */
    background: linear-gradient(135deg, #f4d03f 0%, #e6b0aa 100%);
    border: 8px solid #ffeaa7;
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    padding: 10px;
    box-sizing: border-box; /* Important pour les bordures */
    overflow: hidden; /* Rien ne dépasse de la carte */
}

/* 3. LE PLUS IMPORTANT : Le cadre de l'image */
.poke-img-container {
    background: var(--wc-dark);
    width: 100%;      /* Largeur totale de la carte */
    height: 200px;    /* HAUTEUR FIXE OBLIGATOIRE */
    border: 4px solid #a0a0a0;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden; /* Coupe l'image si elle est trop grande */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. L'image elle-même */
.crew-photo {
    width: 100% !important;  /* Force la largeur */
    height: 100% !important; /* Force la hauteur */
    object-fit: cover;       /* Recadre l'image sans la déformer (zoom central) */
    display: block;
}

/* --- GALERIE PORTFOLIO STYLE --- */

.gallery-page {
    padding: 20px;
    background-color: var(--wc-grey);
    min-height: 100vh;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.gallery-item {
    background: white;
    border: 4px solid var(--wc-dark);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
    transition: transform 0.2s;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}

.gallery-item:hover {
    transform: scale(1.05) rotate(1deg);
    border-color: var(--wc-blue);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1; /* Force le format carré */
    object-fit: cover;
}

.gallery-caption {
    padding: 5px;
    font-family: var(--font-typewriter);
    font-size: 0.9rem;
    background: var(--wc-dark);
    color: var(--wc-gold);
    font-weight: bold;
}

/* --- MODAL ZOOM (LIGHTBOX) --- */
.modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Fond noir quasi opaque */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal-content {
    max-width: 90%;
    max-height: 80vh;
    border: 5px solid white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: zoomIn 0.3s;
}

#modal-caption {
    margin-top: 15px;
    color: white;
    font-family: var(--font-graffiti);
    font-size: 1.5rem;
    text-align: center;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

.close-modal:hover {
    color: var(--wc-gold);
}

@keyframes zoomIn {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* --- EFFET ÉCRAN TV / SCANLINES --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none; /* Laisse passer les clics */
    z-index: 9999;
    opacity: 0.7;
}

/* --- EASTER EGG STYLE --- */
.secret-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(100, 0, 0, 0.95); /* Fond rouge sombre */
    z-index: 10000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: flashRed 2s infinite;
    text-align: center;
    cursor: pointer;
}

.secret-content {
    max-width: 90%;
    border: 5px dashed yellow;
    padding: 20px;
    background: #111;
    transform: rotate(-2deg);
}

.secret-title {
    color: yellow;
    font-family: 'Impact', sans-serif;
    font-size: 3rem;
    margin: 0;
    letter-spacing: 5px;
}

.secret-subtitle {
    color: white;
    font-family: var(--font-typewriter);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.secret-img-wrapper {
    position: relative;
    display: inline-block;
}

.secret-img {
    max-width: 100%;
    max-height: 50vh;
    border: 5px solid white;
    filter: grayscale(100%) contrast(120%); /* Effet vieille photo police */
}

.stamp {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    color: red;
    border: 5px solid red;
    padding: 10px 20px;
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.8;
    text-shadow: 1px 1px 0 black;
}

.secret-text {
    color: #ccc;
    margin-top: 15px;
    font-family: var(--font-typewriter);
    font-style: italic;
}

@keyframes flashRed {
    0%, 100% { background: rgba(100, 0, 0, 0.95); }
    50% { background: rgba(50, 0, 0, 0.95); }
}

/* --- STYLE PAGE PROFIL (THE G-FILE) --- */

.profile-page {
    background-color: #dcdcdc; /* Gris bureau */
    min-height: 100vh;
    padding: 20px;
    font-family: 'Special Elite', 'VT323', monospace; /* Police machine à écrire */
}

.file-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fdfbf7; /* Papier jauni */
    padding: 40px;
    border: 2px solid #b0b0b0;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
    position: relative;
    transform: rotate(-1deg); /* Légèrement posé de travers */
}

/* Header du rapport avec Photo + Infos */
.report-header {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
}

.mugshot-zone {
    flex: 0 0 150px;
    height: 180px;
    background: #eee;
    border: 4px solid #1a1a1a;
    padding: 5px;
}

.mugshot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(120%); /* Effet noir et blanc police */
}

.report-meta p {
    font-size: 1.4rem;
    margin: 10px 0;
    border-bottom: 1px dotted #999;
    font-family: 'Special Elite', monospace;
}

.file-divider {
    border: 0;
    border-top: 2px dashed #333;
    margin: 30px 0;
}

/* Corps du rapport */
.report-section {
    margin-bottom: 25px;
}

.report-section h3 {
    font-family: 'Permanent Marker', cursive;
    color: #0033A0; /* Bleu Stylo */
    font-size: 1.3rem;
    margin-bottom: 5px;
    text-decoration: underline;
}

.report-text {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #333;
    text-align: justify;
}

.quote {
    background: yellow; /* Surligneur */
    padding: 0 5px;
}

/* Tampons */
.stamp-top {
    position: absolute;
    top: 20px; right: 20px;
    border: 4px solid red;
    color: red;
    font-size: 2rem;
    font-weight: bold;
    padding: 5px 15px;
    transform: rotate(15deg);
    opacity: 0.7;
    font-family: Impact, sans-serif;
    letter-spacing: 2px;
}

.stamp-bottom {
    display: inline-block;
    margin-top: 30px;
    border: 4px double green;
    color: green;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 30px;
    transform: rotate(-5deg);
    opacity: 0.8;
    font-family: Impact, sans-serif;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .file-container { padding: 20px; }
    .report-header { flex-direction: column; text-align: center; }
    .report-meta p { font-size: 1.1rem; }
}