/* --- 1. VARIABLES & RESET --- */
:root {
    --color-text: #3a3a36; 
    --color-france: #eec045; /* Jaune */
    --color-brasil: #88a883; /* Vert */
    --bg-light: #f9f9f9;
    --strip-width: 140px; /* Largeur de la bande blanche */
}

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

body {
    font-family: 'Arial', sans-serif; 
    overflow: hidden; /* Pas de scroll sur PC */
    height: 100vh;
    width: 100vw;
    background-color: #000;
}

/* --- 2. POLICE --- */
@font-face {
    font-family: 'Winterthur';
    src: url('WinterthurCondensed.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* --- 3. NAVIGATION (Coin Haut Gauche) --- */
.lang-switch-corner {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 100;
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem;
    color: #fff; /* Blanc pour être visible sur la vidéo */
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.lang-switch-corner a { text-decoration: none; color: rgba(255,255,255,0.7); transition: 0.3s; }
.lang-switch-corner a:hover { color: #fff; }
.lang-switch-corner .separator { margin: 0 5px; opacity: 0.5; }

/* --- 4. CONTENEUR PRINCIPAL --- */
.split-container {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
}

/* --- 5. LES DEUX CÔTÉS (GAUCHE & DROITE) --- */
.split {
    flex: 1; 
    position: relative; /* Indispensable pour la vidéo en absolute */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Texte en bas */
    text-decoration: none;
    overflow: hidden;
    padding-bottom: 80px;
    transition: all 0.5s ease;
    
    /* CONFIGURATION DU BACKUP PHOTO (Si la vidéo ne charge pas) */
    background-size: cover;
    background-position: center;
}

/* Définis ici tes images fixes de secours (pas les mp4) */
.split.left {
    background-image: url('france-bg.jpg'); /* IMAGE jpg/png */
    background-color: var(--color-france);
}

.split.right {
    background-image: url('bresil-bg.jpg'); /* IMAGE jpg/png */
    background-color: var(--color-brasil);
}

/* --- VIDEO : C'est ici que la magie opère --- */
/* Ce style s'applique à la balise <video> que tu dois mettre dans le HTML */
.split video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* Remplit tout l'espace */
    z-index: 0; /* Tout au fond, par dessus l'image background */
    transition: transform 0.6s ease;
}

/* Zoom léger de la vidéo au survol */
.split:hover video {
    transform: scale(1.05);
}

/* --- L'EFFET DE COULEUR AU SURVOL (OVERLAY) --- */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; 
    transition: opacity 0.4s ease;
    z-index: 1; /* Au-dessus de la vidéo */
}

.split.left:hover .overlay { background-color: var(--color-france); opacity: 0.85; }
.split.right:hover .overlay { background-color: var(--color-brasil); opacity: 0.85; }

/* --- TEXTE (France / Brésil) --- */
.content {
    position: relative;
    z-index: 10; /* Au-dessus de tout */
    text-align: center;
    color: #fff; /* Blanc par défaut sur la vidéo */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    opacity: 1; /* Toujours visible */
    transform: translateY(0);
    transition: all 0.4s ease;
}

/* Au survol, le texte devient gris foncé car le fond coloré apparait */
.split:hover .content { 
    color: var(--color-text); 
    text-shadow: none;
}

.content h2 { font-family: serif; font-size: 2.5rem; margin-bottom: 0.5rem; }
.content p { font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; font-weight: bold; }


/* --- 6. LA BANDE BLANCHE CENTRALE --- */
.center-strip {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: var(--strip-width);
    background: #ffffff;
    transform: translateX(-50%);
    z-index: 50; /* Au-dessus des vidéos */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.center-strip h1 {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-family: 'Winterthur', sans-serif;
    font-size: 5rem;
    color: var(--color-text);
    margin: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 20px;
}

.amp {
    font-family: serif; font-style: italic; font-size: 4rem; font-weight: 300;
    position: relative; top: -5px; 
}

/* --- 7. BOUTON ACCUEIL (Bas Gauche) --- */
.home-btn {
    position: absolute; bottom: 30px; left: 30px;
    z-index: 100;
    text-decoration: none;
    font-family: 'Arial', sans-serif; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 2px; font-weight: bold;
    color: #fff;
    opacity: 0.8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    transition: 0.3s;
}
.home-btn:hover { opacity: 1; text-decoration: underline; }

/* --- 8. MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    body { overflow-y: auto; overflow-x: hidden; }
    .split-container { flex-direction: column; }

    .split {
        width: 100%; height: 50vh; 
        padding-bottom: 0; align-items: center; justify-content: center;
    }

    /* Bande centrale horizontale */
    .center-strip {
        width: 100%; height: 90px;
        top: 50%; left: 0; bottom: auto;
        transform: translateY(-50%);
        border-top: 1px solid rgba(0,0,0,0.05);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .center-strip h1 { transform: rotate(0deg); font-size: 2.2rem; flex-direction: row; gap: 15px; }
    .amp { font-size: 1.8rem; top: 0; margin: 0; }

    /* Texte mobile */
    .content { margin: 0; }
    .split.left .content { margin-bottom: 60px; }
    .split.right .content { margin-top: 60px; }

    /* Pas de couleur au survol sur mobile */
    .overlay { display: none; }
}