/* --- BASES DU SITE --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #FAF8F5; /* Fond très légèrement crème comme Figma */
    color: #1A1A1A;
}

/* --- 1. LE MENU (NAVBAR) --- */
.navbar {
    display: flex;
    justify-content: space-between; /* Pousse le logo à gauche, le menu à droite */
    align-items: center;
    padding: 20px 8%; /* Crée de l'espace sur les côtés */
    background-color: #FAF8F5;
}

/* Le logo en rond noir */
.logo {
    width: 45px;
    height: 45px;
    background-color: #112233; /* Bleu très foncé/noir de ta maquette */
    border-radius: 50%; /* Rend le bloc parfaitement rond */
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo span {
    color: #ffffff;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: bold;
}

.nav-links a {
    text-decoration: none;
    color: #555555;
    font-size: 11px;
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin-left: 30px;
    transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.active {
    color: #000000;
}



.hero-section {
    width: 100%;
}


.hero-banner-container {
    width: 100%;
    height: 420px; 
    overflow: hidden;
}

.hero-banner-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center 15%; 
}


.hero-content {
    text-align: center; 
    padding: 50px 20px;
}


.hero-content h1 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 96px;
    font-weight: 600;
    color: #1B2A32;
    font-style: italic; 
    margin: 0 0 20px 0;
    
}


.hero-description {
    font-family:'Plus+Jakarta+Sans', sans-serif;
    font-size: 29px;
    font-weight: 300;
    font-style: light italic;
    color: #1B2A32;
    line-height: 1.4; 
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
}



/* --- 3. SECTION PRÉSENTATION --- */

.presentation-section {
    padding: 80px 8%; /* Crée de l'espace au-dessus, en dessous, et aligne les côtés avec le menu */
    background-color: #FAF8F5; /* Même fond crème */
}

/* Le titre "Présentation du Quartier" */
.presentation-section h2 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 50px;
    position: relative; /* Nécessaire pour placer la petite ligne en dessous */
}

/* La petite ligne rouge/terracotta sous le titre h2 */
.presentation-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px; /* Largeur de la ligne */
    height: 3px;  /* Épaisseur de la ligne */
    background-color: #DE6C52; /* Ta couleur terracotta Figma */
}

/* Le conteneur Flexbox qui met les deux colonnes côte à côte */
.presentation-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centre verticalement le texte par rapport à l'image */
    gap: 60px; /* Crée l'espace vide entre le texte et l'image */
}

/* La colonne de texte (prend 50% de la largeur) */
.presentation-text {
    flex: 1;
}

/* Le sous-titre en rouge "Une atmosphère bruxelloise unique" */
.presentation-text h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #D36B54; /* Couleur terracotta */
    font-size: 22px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Les paragraphes de texte */
.presentation-text p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* La colonne de l'image (prend 50% de la largeur) */
.presentation-image {
    flex: 1;
}

/* L'image elle-même et ses arrondis exacts */
.presentation-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px; /* Donne cet effet arrondi très moderne et "Apple style" de ton Figma */
    object-fit: cover;
}





/* --- 4. SECTION LES 3 LIEUX D'INTÉRÊT --- */

.places-section {
    padding: 80px 8%;
    background-color: #FAF8F5; /* Toujours le même fond crème global */
}

/* On réutilise le style du titre h2 avec sa petite ligne */
.places-section h2 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 50px;
    position: relative;
}

.places-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #D36B54;
}

/* Le conteneur qui aligne les 3 cartes côte à côte */
.cards-grid {
    display: flex;
    justify-content: space-between; /* Distribue l'espace uniformément */
    gap: 30px; /* Crée l'espace vide exact entre chaque carte */
}

/* Le style de chaque carte individuelle */
.place-card {
    background-color: #ffffff; /* Fond blanc pour détacher la carte du fond crème */
    flex: 1; /* Permet aux 3 cartes d'avoir exactement la même largeur équitablement */
    border-radius: 12px; /* Coins arrondis "clean style" */
    overflow: hidden; /* Empêche l'image de dépasser des coins arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Une ombre ultra-légère et subtile */
    border: 1px solid #EFEFEF; /* Une petite bordure très fine */
}

/* Le rectangle gris temporaire pour l'image (si tu n'as pas encore exporté tes photos) */
.card-image-placeholder {
    background-color: #E2E2E2;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777777;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Le conteneur de texte à l'intérieur de la carte (pour créer des marges internes) */
.card-content {
    padding: 25px;
}

/* L'adresse en vert au-dessus du titre */
.card-address {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    color: #556B2F; /* Vert olive de ta maquette */
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 12px;
    font-weight: 500;}


/* Le titre de la carte */
.place-card h4 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #112233;
}

/* La description de la carte */
.place-card p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}






/* --- 5. SECTION RESTAURANTS --- */

.restaurants-section {
    padding: 80px 8%;
    background-color: #FAF8F5;
}

/* Le titre h2 des restaurants */
.restaurants-section h2 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 50px;
    position: relative;
}

.restaurants-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #D36B54;
}

/* Conteneur pour l'image du restaurant (fait office de masque) */
.card-image-container {
    width: 100%;
    height: 200px; /* Même hauteur que le placeholder précédent */
    overflow: hidden;
}

/* Style de l'image pour qu'elle s'ajuste parfaitement */
.restaurant-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre proprement l'image comme un masque Figma */
    object-position: center;
}


.bars-section {
    padding: 80px 8%; /* Le 8% redonne l'espace à gauche et à droite pour décocheter les cartes des bords de l'écran */
    background-color: #FAF8F5;
}



/* --- 7. SECTION ACCÈS --- */

.acces-section {
    padding: 80px 8%;
    background-color: #FAF8F5;
    text-align: center; /* Centre le titre h2 et le contenu */
}

/* On force la petite ligne rouge du h2 à se centrer elle aussi */
.acces-section h2::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Conteneur du texte pour limiter sa largeur (évite que ça s'étale trop) */
.acces-content {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Le texte mis en avant en rouge/terracotta */
.acces-highlight {
    color: #DE6C52; /* Ta couleur terracotta */
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Les détails des lignes de transports */
.acces-details {
    color: #DE6C52;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Le petit texte de rappel tout en bas */
.acces-subtext {
    color: #DE6C52;
    font-size: 13px;
    font-style: italic;
}




/* --- 8. SECTION CONTACT --- */

.contact-section {
    padding: 80px 8%;
    background-color: #FAF8F5;
    text-align: center;
}

/* On centre aussi la petite ligne rouge pour le titre Contact */
.contact-section h2::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Le grand encadré blanc (style Apple, épuré) */
.contact-card {
    background-color: #ffffff;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    padding: 40px;
    display: flex; /* Met les infos à gauche et le formulaire à droite */
    justify-content: space-between;
    gap: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid #EFEFEF;
    text-align: left; /* Aligne le texte à l'intérieur à gauche */
}

/* Colonne de gauche (Infos de contact) */
.contact-info {
    flex: 1;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.contact-info h3 {
    color: #D36B54; /* Couleur rouge/terracotta */
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 500;
}

.contact-info p {
    font-size: 15px;
    color:#1B2A32;
    line-height: 1.6;
    margin-bottom: 20px;
}

.contact-info p span {
    color: #1B2A32;
}

/* Colonne de droite (Le Formulaire) */
.contact-form {
    flex: 1.3; /* Donne un peu plus de largeur au formulaire qu'aux infos */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Les groupes d'inputs (Label au-dessus du champ) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input, .form-group textarea {
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 14px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background-color: #FAF8F5; /* Fond légèrement grisé/crème pour les champs */
    font-size: 15px;
    color: #2B2B2B;
    outline: none;
    transition: border-color 0.3s;
}

/* Changement de couleur quand on clique dans un champ */
.form-group input:focus, .form-group textarea:focus {
    border-color: #D36B54;
}

/* Hauteur spécifique pour la zone de message */
.form-group textarea {
    height: 120px;
    resize: none; /* Empêche l'utilisateur de déformer le champ */
}

/* Le bouton envoyer terracotta */
.submit-btn {
    background-color: #D36B54;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    padding: 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #C05A44; /* Devient un poil plus foncé au survol */
}

.submit-btn:active {
    transform: scale(0.98); /* Petit effet de clic */
}


.video-container {
    width: 100%;
    max-width: 600px;
    height: 350px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 🌟 LES DEUX LIGNES MAGIQUES POUR CENTRER LE BLOC AU MILIEU DE LA PAGE */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px; /* Ajoute un petit espace sympa sous la vidéo avant la section suivante */
}

/* Garde bien ça pour que la vidéo remplisse parfaitement le conteneur centré */
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}