/* --- Utilisation des polices de Aegir Studio --- */
@font-face {
    font-family: 'SFFlorencesans'; 
    src: url('font/SFFlorencesans.woff2') format('woff2'), url('font/SFFlorencesans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SFFlorencesans';
    src: url('font/SFFlorencesans-Bold.woff2') format('woff2'), url('font/SFFlorencesans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* --- Palette de couleurs partagée avec style.css --- */
:root {
    --color-accent: rgba(149, 6, 6, 1);
    --color-text: rgba(223, 223, 223, 0.75); /* Renommé depuis --color-text-light */
    --color-text-hover: rgba(136, 136, 136, 1);
    --color-background: rgba(18, 18, 18, 1);
    --color-border: rgba(136, 136, 136, 1);
    --color-button-text: rgba(223, 223, 223, 1);
}

/* --- Styles Généraux --- */
* { box-sizing: border-box; }
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'SFFlorencesans', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative; /* <-- AJOUTEZ CETTE LIGNE */
}

/* --- Bouton Retour --- */
.back-button-container { position: fixed; top: 20px; left: 20px; z-index: 10000; }
.back-button-link {
    font-family: 'SFFlorencesans', sans-serif;
    background-color: rgba(18, 18, 18, 0.7);
    color: var(--color-text-hover); /* Utilise le gris pour le texte */
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}
.back-button-link:hover {
    background-color: var(--color-accent);
    color: var(--color-button-text); /* Utilise le blanc cassé solide */
}

/* --- Conteneur Vidéo --- */
.video-wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background: transparent; }
.video-container {
    width: 100%;
    max-width: min(95vw, 1600px);
    background: #000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Style du Lecteur Video.js --- */
.video-js {
    width: 100%;
    height: auto;
    background: transparent;
    color: var(--color-text);
}

/* Gros bouton Play central */
.video-js .vjs-big-play-button {
    background-color: transparent !important;
    border: none !important; box-shadow: none !important;
    width: auto !important; height: auto !important;
    color: var(--color-accent) !important;
    font-size: 7em !important;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: color 0.3s ease;
}
.video-js .vjs-big-play-button:hover {
    color: var(--color-button-text) !important;
    background-color: transparent !important;
}

/* Barre de contrôle */
.video-js .vjs-control-bar {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
    backdrop-filter: blur(5px);
}
.video-js .vjs-control { color: var(--color-text-hover); transition: color 0.3s ease; }
.video-js .vjs-control:hover { color: var(--color-button-text); }

/* Barre de progression */
.video-js .vjs-play-progress { background-color: var(--color-accent) !important; }
.video-js .vjs-progress-holder { background-color: rgba(136, 136, 136, 0.2) !important; }
.video-js .vjs-load-progress { background: rgba(136, 136, 136, 0.4) !important; }

/* Contrôle du volume */
.video-js .vjs-volume-level { background-color: var(--color-accent) !important; }
.video-js .vjs-volume-bar { background-color: rgba(136, 136, 136, 0.3) !important; }

/* --- Message d'Erreur --- */
.video-error-message {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(10, 10, 10, 0.9);
    color: var(--color-text);
    padding: 30px; border-radius: 4px; text-align: center;
    z-index: 1000;
    border: 1px solid var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}
.error-content h3 { color: var(--color-accent); margin: 0 0 15px 0; font-size: 20px; }
.error-content p { margin: 0 0 20px 0; font-size: 14px; line-height: 1.5; opacity: 0.9; }
.home-button {
    display: inline-block;
    background: transparent;
    color: var(--color-text-hover);
    border: 1px solid var(--color-border);
    padding: 10px 20px; border-radius: 4px; font-size: 14px;
    cursor: pointer; transition: all 0.3s ease; text-transform: uppercase;
    text-decoration: none;
}
.home-button:hover {
    background: var(--color-accent);
    color: var(--color-button-text);
    border-color: var(--color-accent);
}
/* --- AJOUT : Fond animé et effet de grain --- */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    background-image: url('assets/img/Aegir-Background.webp');
    background-size: cover;
    background-position: center;
    animation: kenBurns 20s infinite alternate;
}

body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
    opacity: 0.1;
    mix-blend-mode: overlay;
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}