/* ==============================
   Variables globales
   ============================== */
:root {
    --main-color: #ffffff; /* Couleur principale (texte, boutons, titres) */
    --accent-color: #d1ac8d; /* Couleur hover, secondaire */
    --text-color: #ffffff; /* Couleur générale du texte */
    --background-image: url("../img/sand.webp"); /* Marbré bleu aquarelle */
    --nav-bg: #cfab8c; /* Couleur navbar avec transparence */
    --nav-text-color: #ffffff; /* Couleur texte navbar */
    padding: 0;

}
/* Scroll fluide sur toute la page */
html {
    scroll-behavior: smooth;
}

/* ==============================
   Ombre légère mais plus visible pour tout le texte
   ============================== */
body, h1, h2, h3, h4, h5, h6, p, label, nav a, .name, #parent-name, #left-name, #right-name {
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}


/* ==============================
       Overlay full screen
   ============================== */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5); /* optionnel si tu veux un léger fondu noir */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* au-dessus de tout */
    overflow: hidden;
    flex-direction: column;
    transition: opacity 0.8s ease;
}

/* Image en background */
#overlay .overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* garde proportions et couvre tout */
    z-index: -1; /* derrière le texte */
}

/* Contenu centré */
.overlay-content {
    text-align: center;
    color: white;
    z-index: 1;
}

.overlay-content h1 {
    font-family: "Parisienne", cursive;
    font-size: 6rem;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}


/* ==============================
   Global
   ============================== */
body {
    margin: 0;
    background-color: transparent;
    font-family: "Cormorant", serif;
    color: var(--text-color);
    text-align: center;
    line-height: 1.6;
    padding: 0;
    font-weight: 500;
}


h1, h2 {
    font-family: "Parisienne", cursive;
    font-weight: 400;
    margin: 0.5rem 0;
    color: var(--main-color);
}

h1 {
    font-size: 10rem;
}

h2 {
    font-size: 7rem;
    font-weight: bolder;
}

p {
    margin: 0.8rem 0;
    font-size: 2.9rem;
}

/* ==============================
   Header
   ============================== */
header {
    padding: 3rem 1rem;
    background-image: var(--background-image);
    background-size: cover;
}

/* ==============================
   Navbar
   ============================== */
nav {
    background: var(--nav-bg);
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 2rem; /* Hauteur navbar */
    position: relative;
    transition: all 0.3s ease; /* transition douce sur tous les changements */
}

nav a {
    color: var(--nav-text-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 2.5rem; /* Texte 3x plus gros */
}



nav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* petit effet visuel */
}

/* ==============================
   Sections
   ============================== */
section {
    padding: 4rem 2rem;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background-image: var(--background-image);
    background-size: cover;     /* l’image sera entièrement visible */
    background-repeat: no-repeat; /* pas de répétition */
    background-position: center;  /* centrée dans la section */
    scroll-margin-top: 100px;     /* marge pour le scroll */
}


/* Section image pleine largeur */
.middle-image {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.middle-image .full-image {
    width: 100%;
    height: auto; /* garde les proportions originales */
    display: block; /* supprime l’espace blanc sous l’image */
    object-fit: cover; /* remplissage complet si tu veux crop léger */
}

/* ==============================
       Countdown avec image
   ============================== */
.countdown {

    position: relative;
    width: 100%;
    overflow: hidden; /* évite que l’image déborde */
    scroll-margin-top: 120px; /* hauteur de la navbar */

}


section.countdown {
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
}

.countdown-bg {
    height: auto;   /* garde les proportions originales */
    display: block; /* supprime les espaces blancs */
}

.countdown-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 900px; /* limite si tu veux */
    color: white; /* le texte ressort mieux sur l’image */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6); /* lisibilité */
}

.countdown-content div {
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
}

.countdown-content span {
    font-size: 5rem;
    font-weight: bold;
    display: block;
    margin-bottom: 0.3rem;
}

/* ==============================
   Names
   ============================== */
.name {
    display: flex;
    justify-content: center;
    gap: 3rem;
    font-size: 5rem;
    margin: 1.5rem 0;
}

.name1, .name2 {
    text-align: center;
    gap: 0;

}

#parent-name {
    display: flex;
    justify-content: space-between;
    text-align: center;
    gap: 1rem;
    margin: 1.5rem 0;
    font-weight: bolder;
}

#left-name, #right-name {
    flex: 1;
    font-size: 2rem;

}

/* ==============================
   Boutons
   ============================== */
.btn {
    background: var(--accent-color);
    color:white;
    padding: 2rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bolder;
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 3rem;
    transition: background 0.3s ease;
}

.btn:hover {
    background: white;
    color: var(--accent-color);
}


/* ==============================
   animation texte
   ============================== */
/* Classe à ajouter à tes éléments animés */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px); /* commence 50px plus bas */
    transition: all 0.8s ease-out;
}

/* Classe qui s'ajoute quand l'élément est visible */
.animate-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.marge{
    margin-bottom: 10rem;
}

.litle-marge{
    margin-bottom: 7rem;
}

/* ==============================
   Musique
   ============================== */
#music-toggle {
    position: fixed;
    top: 50vh; /* 50% de la hauteur visible initiale */
    right: 0;
    transform: translateY(-50%);
    background: var(--accent-color);
    color: #ffffff;
    padding: 1rem;
    border-radius: 20px 0 0 20px;
    cursor: pointer;
    z-index: 300;
    transition: background 0.3s ease;
    font-size: 1rem;
}

#music-toggle i {
    font-size: 35px;
}

/* ==============================
   Formulaire Réponse (amélioré)
   ============================== */
#rsvp {
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 800px;
    margin: 4rem auto;
    font-weight: 600;
    text-align: left;
}

/* Groupes de champs */
.form-group {
    margin-bottom: 3.5rem;
}

.form-group label {
    display: block;
    font-size: 3rem;         /* plus grand */
    font-weight: bolder;         /* en gras */
    font-family: "Cormorant Garamond", serif;
    color: var(--main-color);
    margin-bottom: 1.2rem;
}

/* Champs texte, nombre, textarea */
#rsvp input[type="text"],
#rsvp input[type="email"],
#rsvp input[type="number"],
#rsvp textarea {
    width: 100%;
    padding: 1.6rem 2rem;       /* plus spacieux */
    font-size: 3rem;            /* plus gros texte */
    font-family: "Cormorant Garamond", serif;
    border: 2px solid var(--main-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

#rsvp input[type="text"]:focus,
#rsvp input[type="email"]:focus,
#rsvp input[type="number"]:focus,
#rsvp textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 48, 128, 0.3);
}

textarea {
    resize: vertical;
    min-height: 180px;
}

/* Radios en ligne (carrés harmonisés) */
.checkbox-group {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.checkbox-group label {
    font-size: 2.6rem;          /* texte radio plus gros */
    font-weight: bolder;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

/* Style custom pour les radios */
.checkbox-group input[type="radio"] {
    appearance: none;
    width: 26px;              /* plus grand */
    height: 26px;
    border: 2px solid var(--main-color);
    border-radius: 6px;       /* carré arrondi */
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease, border 0.3s ease;
}

.checkbox-group input[type="radio"]:checked {
    background: var(--main-color);
    border-color: var(--main-color);
}

/* Bouton submit identique aux autres boutons */
.form-submit {
    text-align: center;
    margin-top: 3.5rem;
}

.btnSubmit {
    background: var(--accent-color);
    color: white;
    padding: 1.8rem 3.5rem;   /* un peu plus gros */
    border-radius: 6px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 2.2rem;        /* plus gros texte */
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
    display: inline-block;
}

.btnSubmit:hover {
    background: white;
    color: var(--accent-color);
}

.hebrew{
    font-family: "David Libre", serif;
}



/* Bouton langue */
#lang-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    z-index: 5000;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
#lang-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}