:root {
    --gold: #c5a059;
    --dark: #2c3e50;
    --bg-light: #fcfaf7;
    --grey: #888;
    /* Remplacer l'URL ci-dessous par le lien réel de votre photo de fond */
    --hero-bg-image: url('images/Elfar.jpg');
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Montserrat', sans-serif; color: var(--dark); text-align: center; }

/* Switch de langue */
.lang-fr .es { display: none; }
.lang-es .fr { display: none; }
.lang-picker { font-size: 0.8rem; letter-spacing: 1px; color: var(--grey); cursor: pointer; }
.lang-picker span:hover { color: var(--gold); }
.lang-picker .sep { cursor: default; margin: 0 5px; color: #ddd; }

/* Navigation */
nav { background: white; padding: 20px 0; border-bottom: 1px solid #eee; }
.nav-content { max-width: 1100px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
nav ul { list-style: none; display: flex; margin: 0; padding: 0; align-items: center; }
nav ul li { margin-left: 25px; }
nav a { text-decoration: none; color: var(--dark); font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
nav a:hover, nav a.active { color: var(--gold); } /* Ajout de la classe 'active' */

/* Hero Accueil avec Image de Fond */
.hero {
    height: 85vh;
    /* Intégration de l'image de fond avec un filtre sombre par-dessus pour lire le texte */
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center; color: white;
}
/* Le cadre blanc devient semi-transparent */
.hero-box { border: 2px solid white; padding: 50px; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); }
.hero h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; margin: 0; font-weight: 700; color: white; }
.hero .date { color: var(--gold); letter-spacing: 7px; font-size: 1.3rem; margin: 20px 0; text-transform: uppercase; }
.hero .weekend-note { font-style: italic; font-size: 0.9rem; color: #eee; margin-top: 35px; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 20px; }

/* Pour les autres pages qui ne sont pas l'accueil */
.page-header { padding: 60px 20px; background: var(--bg-light); margin-bottom: 40px; }
h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin: 0; color: var(--dark); }

/* Sections */
.section-content { padding: 0 20px 80px 20px; max-width: 1000px; margin: auto; }
.bg-gold { background-color: var(--gold); color: white; max-width: 100%; padding: 100px 20px; }

/* Elements Spécifiques */
.map-container { box-shadow: 0 15px 45px rgba(0,0,0,0.1); line-height: 0; overflow: hidden; border-radius: 4px; }
.guest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; text-align: left; }
.guest-card { background: white; padding: 30px; border: 1px solid #eee; display: flex; align-items: center; }
.photo-placeholder { width: 70px; height: 70px; background: #f4f4f4; border-radius: 50%; margin-right: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; }
.guest-info h3 { margin: 0 0 10px 0; font-family: 'Playfair Display', serif; }
.guest-info p { margin: 0; font-size: 0.9rem; color: #666; }

/* Boutons */
.main-button, .rsvp-button-large { display: inline-block; padding: 18px 45px; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; transition: 0.4s; }
.main-button { background: var(--dark); color: white; }
.main-button:hover { background: var(--gold); }
.rsvp-button-large { background: white; color: var(--gold); font-weight: bold; border-radius: 4px; }
.rsvp-btn { border: 2px solid var(--gold); padding: 10px 20px !important; color: var(--gold) !important; font-weight: bold; }
.rsvp-btn:hover { background: var(--gold); color: white !important; }

/* Footer commun */
footer { padding: 40px; background: #f9f9f9; color: #999; font-size: 0.8rem; margin-top: auto; }

/* Section Thème */
.theme-section {
    padding: 100px 20px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/theme.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effet de parallaxe léger */
    color: white;
    text-align: center;
}

.theme-section h2 {
    color: white; /* Force le titre en blanc sur le fond sombre */
    margin-bottom: 20px;
}

.theme-title {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    color: var(--gold);
    margin-bottom: 30px;
}

.dress-code {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.2);
}

.dress-code p {
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin: 10px 0;
}

.forbidden {
    color: #ff8a8a; /* Un rouge léger pour souligner l'interdiction sans être agressif */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}