/* --- POLICES & VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --gold: #c5a059;
    --gold-bright: #ffd700;
    --gold-halo: rgba(197, 160, 89, 0.9);
    --gold-dim: rgba(197, 160, 89, 0.3);
    --myst-blue-halo: rgba(0, 210, 255, 0.8);
    --myst-blue-glow: rgba(0, 80, 200, 0.6);
    --paper: #f4e4bc;
    --dark: #0a0806;
    --myst-font: 'Cinzel', serif;
    --body-font: 'Cormorant Garamond', serif;
}

/* --- BASE & COMPATIBILITÉ --- */
* { box-sizing: border-box; } /* Empêche le "cassage" des layouts à cause du padding */

body {
    margin: 0;
    background: var(--dark);
    background-image: url('./images/MYST-fault.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--paper);
    font-family: var(--body-font);
    overflow: hidden;
    /* Fallbacks pour dvh (Safari/iOS) */
    height: 100vh; 
    height: 100dvh;
}

/* AJOUT CRÉATIF : Vignette pour l'immersion */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
    z-index: 1;
}

#app {
    height: 100vh;
    height: 100dvh;
    background: rgba(0,0,0,0.5);
    display: flex; /* Active le mode flex */
    flex-direction: column; /* Aligne les éléments verticalement */
    overflow: hidden; /* Empêche le scroll global indésirable */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hidden { display: none !important; }

header {
    height: 30vh;
    height: 30dvh;
    background-image: url('./images/MYST-title.png');
    max-width: 500px;
    width: 80%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto;
    -webkit-filter: drop-shadow(0 0 15px rgba(0,0,0,0.8));
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.8));
}

/* --- LIGNE D'ABONNEMENT --- */
.subscribe-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    margin: 10px 0;
}

.sub-label {
    font-family: var(--myst-font);
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.8;
}

.subscribe-icons { display: flex; gap: 25px; }

.sub-link {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

.sub-link img {
    width: 28px;
    height: 28px;
    -webkit-filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(0.9);
    filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(0.9);
    transition: filter 0.3s ease;
}

.sub-link:hover { transform: scale(1.2); }
.sub-link:hover img {
    -webkit-filter: sepia(1) saturate(5) hue-rotate(-10deg) brightness(1.2);
    filter: sepia(1) saturate(5) hue-rotate(-10deg) brightness(1.2);
}

/* --- BOUTONS MYST --- */
.myst-btn {
    font-family: var(--myst-font);
    background: rgba(197, 160, 89, 0.1);
    border: 1px solid var(--gold);
    color: var(--gold);
    margin: 10px;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.myst-btn:hover:not(:disabled) {
    background: var(--gold);
    color: var(--dark);
    box-shadow: 0 0 20px var(--gold-halo);
}

/* --- BIBLIOTHÈQUE --- */
#library-view {
    flex: 1; /* Remplace le height calc */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0; /* Important pour éviter les bugs de scroll interne */
}



.myst-title { 
    font-family: var(--myst-font); 
    color: var(--gold); 
    margin-bottom: 40px; 
    letter-spacing: 5px; 
    text-align: center;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.shelf { display: flex; gap: 40px; justify-content: center; }

.book-cover {
    width: 180px; height: 260px; 
    cursor: pointer; 
    border-radius: 4px 10px 10px 4px;
    position: relative; 
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 15px 15px 35px #000;
}

.book-cover:hover { 
    transform: rotateY(0deg) translateY(-15px) scale(1.05);
    z-index: 10;
    box-shadow: 0px 0px 50px var(--myst-blue-glow);
}

.adventure { background: #4a3423; border: 2px solid #2a1b10; background-image: url('./images/book1.jpg'); background-repeat: no-repeat; background-size: cover; }
.myst { background: #1a2a3a; border: 2px solid #0f1821; background-image: url('./images/book2.jpg'); background-repeat: no-repeat; background-size: cover; }

.cover-text {  
    text-shadow: 2px 2px 4px black; 
    color: var(--gold); 
    font-family: var(--myst-font); 
    text-align: center; 
    margin-top: 30px; 
    font-weight: bold; 
    pointer-events: none; 
}

.cover-image {
    width: 60%;
    margin: 30px auto 0 auto;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* --- VUE LECTURE --- */
#reading-view {
    flex: 1; /* Remplace le height calc */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    min-height: 0; /* Important pour le scroll du parchemin */
}

#parchment {
    width: 95%; max-width: 550px; flex: 1;
    background: var(--paper); color: #2a2119;
    padding: 30px; border-radius: 3px;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.3), 0 10px 50px rgba(0,0,0,0.7);
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden;
    background-image: url('./images/paper-fibers.png');
    position: relative;
}


#page-header {
    position: relative; /* Référentiel pour le halo */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#page-header h2 { text-align: center; font-family: var(--myst-font); font-size: 1.6rem; margin: 0 0 20px 0; color: #3a2a1f; letter-spacing: 2px; }

#page-header h2, 
#page-header .linking-container, 
#page-header p {
    position: relative; /* Indispensable pour que le z-index fonctionne */
    z-index: 2; /* Devant le halo qui est à 1 */
}

/* --- HALO & IMAGE DE LIAISON (FIX LOOP NOIR) --- */
/* --- LE CONTENEUR (Le cadre fixe) --- */
.linking-container { 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 10px auto;
    background: #000; /* Fond noir pour le loop */
    /* CRUCIAL : On permet au halo de dépasser du cadre noir */
    overflow: visible;
    
    /* On force le ratio 4/3 ici */
    width: 290px; 
    max-width: 50%; 
    aspect-ratio: 4 / 3; 
    
    /* On coupe tout ce qui dépasse pour créer la fenêtre */
    overflow: hidden; 
    
    border: 4px solid #2a2119; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    z-index: 5;
}

/* --- L'IMAGE OU VIDÉO (Le contenu qui remplit) --- */
.linking-img { 
    /* Force l'élément à prendre toute la place du cadre 4/3 */
    width: 100% !important;
    height: 100% !important;
    
    /* C'est ICI que la magie opère : l'image est zoomée pour remplir sans déformer */
    object-fit: cover; 

    /* Devant le halo */
    z-index: 10; 
    
    /* Cache ce qui dépasse de la vidéo elle-même à l'intérieur du cadre */
    border-radius: 2px;
    
    display: block;
    position: relative;
    z-index: 6;
    transition: transform 0.2s, filter 0.3s, opacity 0.8s ease-in-out;
}

.linking-img:hover { 
    transform: scale(1.05); /* Petit zoom au survol pour l'immersion */
    filter: brightness(1.2); 
}

.video-out { opacity: 0; }

/* --- LE HALO MYSTIQUE (BOOSTÉ) --- */
.halo {
    position: absolute;
    /* On force le centrage par rapport au header */
    top: 55%; 
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    
    /* On l'agrandit pour qu'il déborde généreusement */
    width: 500px;
    height: 300px;
    border-radius: 50%;
    
    /* ERREUR CORRIGÉE : Ajout de "background:" */
    background: radial-gradient(circle, 
        rgba(0, 210, 255, 1) 0%, 
        var(--myst-blue-glow) 40%, 
        var(--myst-blue-halo) 60%, 
        transparent 80%);

    z-index: 1; /* Derrière le titre et la vidéo */
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen; /* "Brûle" les couleurs sur le fond */
    filter: blur(15px);
    transition: opacity 1s ease-in-out;
}

/* CORRECTIF : Le sélecteur doit être collé car la classe est sur le même élément */
.halo.active-halo { 
    opacity: 1; 
    animation: pulseMyst 4s infinite ease-in-out; 
}

/* Animation plus ample */
@keyframes pulseMyst { 
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0.85); 
        opacity: 0.5; 
        filter: blur(20px) brightness(1);
    } 
    50% { 
        transform: translate(-50%, -50%) scale(1.1); 
        opacity: 1; 
        filter: blur(10px) brightness(1.5); /* Boost de lumière au milieu */
    }
}


.wave {
    position: absolute;
    border: 3px solid #00d2ff; /* Bleu cyan au lieu de gold */
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: ripple 1.2s cubic-bezier(0, 0, 0.2, 1) forwards;
    z-index: 10;
    box-shadow: 0 0 20px #00d2ff, inset 0 0 10px #00d2ff;
}
@keyframes ripple { from { width: 0; height: 0; opacity: 1; } to { width: 600px; height: 600px; opacity: 0; } }

/* --- CORRECTIF ANTI-SCROLL HORIZONTAL --- */
#full-text-content {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    /* On force la coupure des mots longs pour éviter le scroll X */
    overflow-x: hidden; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-left: 4px;
    
    padding-right: 15px;
    text-align: justify;
    line-height: 1.4;
    font-size: 1.1rem;
    box-sizing: border-box;
}

/* On s'assure que les paragraphes et images internes ne dépassent jamais */
#full-text-content div,
#full-text-content span {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* On cible la première lettre du premier paragraphe pour une compatibilité totale */
#full-text-content p:first-of-type::first-letter {
    float: left;
    font-family: var(--myst-font);
    font-size: 3.8rem;
    line-height: 0.85; /* Ajusté pour FF */
    margin: 5px 12px 0 0;
    color: #4a3423;
    /* Force le rendu en bloc pour Firefox */
    display: block; 
    /* Un petit effet de texture sur la lettre pour le style Myst */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
}

/* On s'assure que le paragraphe lui-même est bien un bloc */
#full-text-content p {
    display: block;
    margin-bottom: 1.2rem;
}

/* --- PERSONNALISATION DE L'ASCENSEUR (DISCRET) --- */

/* Pour Chrome, Edge et Safari */
#full-text-content::-webkit-scrollbar {
    width: 6px; /* Très fin */
}

#full-text-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); /* Fond presque invisible */
    border-radius: 10px;
}

#full-text-content::-webkit-scrollbar-thumb {
    background-color: var(--gold-dim); /* Or tamisé par défaut */
    border-radius: 10px;
    transition: background 0.3s ease;
}

#full-text-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--gold); /* Devient or brillant au survol */
}

/* Pour Firefox */
#full-text-content {
    scrollbar-width: thin; /* Version fine */
    scrollbar-color: var(--gold-dim) transparent; /* [Couleur curseur] [Couleur fond] */
}

#myst-player {
    display: none; 
    height: 85px; /* Sa hauteur fixe quand il est présent */
    flex-shrink: 0; /* Empêche le lecteur de s'écraser */
    background: #14100c;
    border-top: 2px solid #2a1b10;
    padding: 0 20px;
    z-index: 10;
}

#myst-player.active {
    display: block; /* Il reprend sa place dans le flux flexbox */
}

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.player-grid { display: flex; align-items: center; height: 100%; max-width: 900px; margin: 0 auto; gap: 20px; }

.track-info-zone { display: flex; align-items: center; gap: 15px; width: 300px; flex-shrink: 0; }
#mini-cover { 
    width: 50px; height: 50px; 
    border: 1px solid var(--gold-dim); 
    object-fit: cover; 
    transition: 0.3s; 
}
#mini-cover:hover { border-color: var(--gold); transform: scale(1.05); }

.text-meta { display: flex; flex-direction: column; font-family: var(--myst-font); font-size: 0.75rem; letter-spacing: 1px; }
#track-name { color: var(--gold); margin-bottom: 3px; }

.controls-zone { flex: 1; display: flex; align-items: center; gap: 20px; }

.ctrl-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease;
    width: 44px; height: 44px;
}
.ctrl-btn:hover { transform: scale(1.1); }
.ctrl-btn svg { filter: drop-shadow(0 0 5px var(--gold-dim)); }

#seek-bar { 
    flex: 1; 
    accent-color: var(--gold); 
    cursor: pointer; 
    height: 8px; 
    background: #332a20; 
}

/* --- RESPONSIVE --- */
@media (max-width: 800px) {
    .track-info-zone { display: none; }
    #parchment { width: 95%; padding: 20px; }
    .shelf { gap: 20px; }
}

@media (max-width: 500px) {
    header { height: 20vh; }
    .book-cover { width: 140px; height: 210px; transform: none; }
    .book-cover:hover { transform: translateY(-10px); }
    .linking-container { width: 200px; max-width: 80%;}
}