@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=League+Spartan:wght@700&family=EB+Garamond:wght@400;500;600&display=swap');

@font-face {
    font-family: 'Quentin';
    src: url('../Assets/Fonts/quentin_2/Quentin.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Andarilho';
    src: url('../Assets/Fonts/andarilho/andarilho-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RelationshipMelodrame';
    src: url('../Assets/Fonts/relationship_of_melodrame/Relationship of mélodrame.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'StangithDemo';
    src: url('../Assets/Fonts/stangith/Stangith Demo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NewYorkPU';
    src: url('../Assets/Fonts/newyork/NewYork PERSONAL USE.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChicRoyale';
    src: url('../Assets/Fonts/chicroyale/ChicRoyale.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* General Styles */
:root {
    --bg-color: #0c0f16;
    --bg-image: url('../Assets/Images/Background_images/Images_27.png');
    --card: rgba(255,255,255,0.06);
    --text: #f5f7ff;
    --accent: #f8d061;
    --accent-2: #e6a843;
    --muted: #bfc7d9;
    --ff-heading: 'Quentin', cursive;
    --ff-display: 'League Spartan', 'Montserrat', sans-serif;
    --ff-body: 'EB Garamond', 'Montserrat', serif;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
}

body {
    background: var(--bg-color) var(--bg-image) center/cover fixed no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--ff-body);
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: var(--text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Quentin', cursive;
    letter-spacing: 0.4px;
}

p, li, .text-muted {
    font-family: 'EB Garamond', 'Montserrat', serif;
}

/* --- UTILITAIRES DE TEXTE & COULEURS --- */
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.text-body { color: var(--text); }
.bright-text { color: #f5f7ff; }

/* --- SPACING HELPERS --- */
.mt-tight { margin-top: var(--space-sm); }
.mt-small { margin-top: var(--space-md); }
.mt-medium { margin-top: var(--space-lg); }
.mb-tight { margin-bottom: var(--space-sm); }
.mb-small { margin-bottom: var(--space-md); }
.mb-medium { margin-bottom: var(--space-lg); }
.px-compact { padding-left: var(--space-md); padding-right: var(--space-md); }

/* --- ANIMATION DE CHARGEMENT VIDÉO --- */
.video-loading {
    position: relative;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* --- LE HALO AUTOUR DE LA PAGE (HALLOW) --- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 9998;
}

/* --- ANIMATIONS GLOBALES --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
}

.hero-cta { animation: heroPulse 6s ease-in-out infinite; }
@keyframes heroPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(255, 165, 0, 0.15); transform: translateY(0); }
    50% { box-shadow: 0 14px 36px rgba(255, 165, 0, 0.26); transform: translateY(-2px); }
}


.reader-loader {
    position: fixed;
    inset: 0;
    background: #0c0f16;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-bar {
    width: 200px;
    height: 2px;
    background: rgba(248, 208, 97, 0.1);
    margin-top: 20px;
    overflow: hidden;
}

.loader-progress {
    width: 40%;
    height: 100%;
    background: #f8d061;
    animation: loaderMove 1.5s infinite ease-in-out;
}

@keyframes loaderMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}


/* --- OPTIMISATIONS MOBILE (TikTok Audience) --- */
@media (max-width: 768px) {
    /* 1. Titres plus adaptés */
    .hero-title { font-size: 2.2rem !important; }
    h2 { font-size: 1.8rem !important; }
    
    /* 2. Marges plus généreuses pour les pouces */
    .container { padding-left: 20px; padding-right: 20px; }
    
    /* 3. Boutons plus larges (Easy click) */
    .btn-primary, .btn-read { 
        width: 100%; 
        padding: 16px; 
        font-size: 1.1rem; 
        margin-bottom: 10px;
    }

    /* 4. Hero Section : On empile au lieu de mettre côte à côte */
    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .hero-cover {
        max-width: 250px; /* Plus petit sur mobile pour voir le texte */
        margin: 0 auto;
    }

    /* 5. On calme le Parallax sur mobile pour économiser la batterie */
    .parallax-band::before {
        background-attachment: scroll; /* Moins lourd que 'fixed' */
    }
}