/*
=====================================================
 FICHIER CSS UNIFIÉ POUR VTC 2424
=====================================================
 Table des matières :
 1. Styles Généraux (Body, Polices)
 2. Barre de Navigation (Nav)
 3. Entête (Header)
 4. Styles de Section (Services, Produits)
 5. Formulaire de Réservation Moderne (Étape 2)
 6. Pied de page (Footer)
 7. Responsive (Mobile)
=====================================================
*/

/* * 1. STYLES GÉNÉRAUX 
 */
body {
    /* Police 'Acme' appliquée à tout le site */
    font-family: 'Acme', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #303030;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Helvetica', sans-serif;
}

p {
    font-size: 1.2em;
    text-align: justify;
    font-family: 'Arial', sans-serif;
}

/* * 2. BARRE DE NAVIGATION (MODERNE)
 */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    z-index: 1000;
    box-sizing: border-box;
    
    /* État initial (transparent) */
    background-color: transparent;
    box-shadow: none;
    
    /* Animation de transition */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nouvel état au scroll (ajouté par JS) */
nav.scrolled {
    background-color: #000000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Logo / Marque - CORRIGÉ POUR LE LIEN VIOLET */
.nav-brand, .nav-brand:visited {
    color: #ecb51d; /* Forcer la couleur dorée */
    font-size: 1.8em;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease;
    font-family: 'Acme', sans-serif; /* Assure la bonne police */
}
.nav-brand:hover {
    transform: scale(1.05);
}

/* Conteneur des liens */
.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: #ecb51d;
    text-decoration: none;
    margin: 0 15px;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    padding: 8px 15px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Bouton "Réservez" (CTA - Call To Action) */
.nav-cta {
    background-color: #ecb51d;
    color: #000000 !important;
    font-weight: bold;
}
.nav-cta:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

/* STYLES POUR LE BOUTON HAMBURGER (AJOUTÉ) */
.hamburger {
    display: none; /* Caché sur ordinateur par défaut */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Doit être au-dessus du menu déroulant */
}
.hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ecb51d; /* Votre couleur dorée */
    margin: 5px 0;
    transition: all 0.3s ease;
}
/* Animation du hamburger en 'X' quand il est actif */
.hamburger.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.hamburger.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* * 3. ENTÊTE (HEADER) 
 */
header {
    /* VÉRIFIEZ QUE 'couverture.png' EST BIEN SUR VOTRE SERVEUR */
    background: url('couverture.png') no-repeat center center/cover;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    flex-direction: column;
    /* Espace pour la nav fixe, doit être > hauteur de la nav */
    padding-top: 80px; 
}

.cta {
    background-color: #ecb51d;
    color: black;
    padding: 12px 24px;
    font-size: 1.5em;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
}

.cta:hover {
    background-color: #d4a31a;
}

/* * 4. STYLES DE SECTION (Services, Produits) 
 */
section {
    padding: 50px 10%;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #000000;
}

/* Section Services */
.services ul {
    list-style-type: none;
    padding: 0;
}

.services ul li {
    padding: 10px;
    background-color: #ecb51d;
    margin-bottom: 10px;
    border: 1px solid #ecb51d;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
}

/* Section Produits (Classe Eco élargie) */
.products {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.product {
    border: 2px solid #ffffff;
    padding: 20px;
    border-radius: 10px;
    background-color: #000000;
    text-align: center;
    width: 90%;
    max-width: 900px; /* Agrandissement du conteneur */
    margin: 0 auto;
}

.product img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.product p {
    font-size: 20px; /* Agrandissement du texte */
    margin-top: 10px;
    color: #fff;
    text-align: center;
}

/* * 5. FORMULAIRE DE RÉSERVATION MODERNE 
 */
.reservation-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  color: #333;
  margin-top: 80px; /* Espace pour la nav fixe */
}

.reservation-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #222;
}

/* Barre de progression (1, 2, 3) */
.step-indicator-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    padding-bottom: 15px;
}
.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;
    flex-grow: 1;
    position: relative;
}
.step-indicator:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}
.step-indicator span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    color: #aaa;
    font-weight: bold;
    margin-bottom: 8px;
    z-index: 2;
}
.step-indicator p {
    font-size: 0.9em;
    margin: 0;
    color: #aaa;
    font-weight: 600;
    text-align: center;
}
/* Étape active */
.step-indicator.active {
    color: #ecb51d;
}
.step-indicator.active span {
    background-color: #ecb51d;
    border-color: #ecb51d;
    color: #fff;
}
.step-indicator.active p {
    color: #333;
}

/* Étapes du formulaire */
.form-step {
    display: none;
}
.form-step.active {
    display: block;
}
.step-title {
    text-align: center;
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Champs de formulaire (Input, Select) */
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
    font-size: 0.95em;
}
.form-group input,
.form-group select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    font-family: 'Acme', sans-serif;
}
.form-group input:focus,
.form-group select:focus {
    border-color: #ecb51d;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(236, 181, 29, 0.2);
    outline: none;
}

.form-inline {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.form-inline .form-group {
    flex: 1;
    min-width: 200px;
}

/* Boutons de navigation */
.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
.nav-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
}
.nav-btn.prev-btn {
    background-color: #e0e0e0;
    color: #555;
}
.nav-btn.prev-btn:hover {
    background-color: #ccc;
}
.nav-btn.next-btn {
    background-color: #ecb51d;
    color: white;
}
.nav-btn.next-btn:hover {
    background-color: #d4a31a;
}

/* Bouton final "Confirmer" */
.submit-btn {
    padding: 1rem;
    background-color: #ecb51d;
    color: white;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 100%;
}
.submit-btn:hover {
    background-color: #d4a31a;
}
#submitBtn {
    display: none; /* Caché par défaut */
}

/* Section Résumé (Étape 3) */
.summary {
    background-color: #f9f9ff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
}
.summary p {
    font-size: 1.1em;
    color: #333;
    margin: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    text-align: left;
    font-family: 'Acme', sans-serif;
}
.summary p:last-child {
    border-bottom: none;
}
.summary span {
    font-weight: normal;
    color: #555;
}

/* Infos de contact en bas du formulaire */
.contact-info {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: #777;
}

/* * 6. PIED DE PAGE (FOOTER) 
 */
footer {
    margin-top: auto; /* Pousse le footer en bas */
    text-align: center;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
}
footer p {
    text-align: center;
    color: #fff;
    font-family: 'Arial', sans-serif;
}
.social-icons {
    margin-top: 10px;
}
.social-icons a {
    display: inline-block;
    margin: 0 15px;
    text-decoration: none;
}
.social-icons img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}


/* * 7. RESPONSIVE (MOBILES) 
 * (SECTION MISE À JOUR POUR LE MENU HAMBURGER)
 */
@media (max-width: 768px) {
    /* Styles pour la navigation */
    nav {
        flex-direction: row; /* Logo à gauche, hamburger à droite */
        justify-content: space-between;
        align-items: center; 
        padding: 10px 5%;
    }
    
    /* Au scroll sur mobile, elle reste noire */
    nav.scrolled, nav {
        background-color: #000;
    }

    /* Conteneur des liens (le menu déroulant) */
    .nav-links {
        display: none; /* Caché par défaut */
        flex-direction: column;
        align-items: center; /* Centrer les liens */
        position: absolute; /* Se superpose au contenu */
        top: 60px; /* Espace depuis le haut (ajustez si besoin) */
        left: 0;
        width: 100%;
        background-color: #000000; /* Fond noir opaque */
        padding: 10px 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* Quand le menu est ouvert (via JS) */
    .nav-links.active {
        display: flex; /* On le montre */
    }
    
    .nav-links a {
        display: block;
        margin: 10px 20px;
        padding: 10px;
        text-align: center;
        width: 90%; /* Prend de la largeur */
    }
    
    .nav-cta {
        margin: 10px 20px;
        text-align: center;
        width: 90%;
    }

    /* On affiche le bouton hamburger */
    .hamburger {
        display: block; /* On le montre sur mobile */
    }
    
    /* Style pour les produits */
    .products {
        flex-direction: column;
        align-items: center;
    }
    
    /* Styles pour le footer */
    .social-icons img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 600px) {
  .reservation-section {
    padding: 1.5rem;
  }
  .form-inline {
    flex-direction: column;
    gap: 0;
  }
  .step-indicator p {
      font-size: 0.8em;
  }
}