/* css/style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    background-color: #000; 
    color: #fff; 
    min-height: 100vh;
}

/* Vidéo d'arrière-plan (Accueil uniquement) */
.video-background { 
    position: fixed; /* Fixed pour rester en fond même si on scrolle un peu */
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover; 
    z-index: 0; 
    opacity: 0.6; 
}

/* Conteneur principal */
.wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    position: relative; 
    z-index: 1; 
}

/* Header */
header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 40px; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent); 
}
.logo { font-size: 24px; font-weight: bold; text-decoration: none; color: #fff; letter-spacing: 1px; }
nav { display: flex; gap: 30px; align-items: center; }
nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; }
nav a:hover { color: #ccc; }
.social-icons a { margin-left: 15px; color: #fff; text-decoration: none; font-weight: bold; }

/* Zone de contenu */
main { 
    flex-grow: 1; 
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Footer */
footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 40px; 
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); 
    font-size: 13px;
    margin-top: auto; /* Pousse le footer tout en bas */
}
footer a { color: #ccc; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: #fff; }

@media (max-width: 768px) {
    header { flex-direction: column; gap: 15px; padding: 15px; }
    nav { flex-direction: column; gap: 10px; }
    footer { padding: 15px; flex-direction: column; gap: 15px;}
    main { padding: 20px; }
}