/* ============================================================
   PROJET : Grand Place Bruxelles
   FICHIER : css/style.css
   Feuille de style commune aux deux pages.
   Sommaire :
   1. Reset          2. Body et généralités
   3. Header         4. Hero (page 1)
   5. Présentation   6. Lieux d'intérêt (page 1)
   7. Drapeau        8. Flèches
   9. Footer         10. Bandeaux de titre (page 2)
   11. Cartes restaurants et bars (page 2)
   12. Vidéo (page 2)
   ============================================================ */


/* ============================================================
   1. RESET : on remet tout à zéro pour partir sur des bases
   identiques dans tous les navigateurs.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* le padding est inclus dans la largeur */
}


/* ============================================================
   2. STYLES GENERAUX DU BODY
   ============================================================ */

body {
    font-family: 'Inter', sans-serif; /* police des textes */
    color: #FFFFFF;                   /* texte blanc par défaut */
    background-color: #1E1E1E;        /* couleur de secours si l'image ne charge pas */
}

/* Image de fond de la page 1 (verrière des Galeries, déjà floutée) */

.page1 {
    background-image: url("../image/fond-page1.png");
    background-size: cover;                   /* l'image couvre tout l'écran */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;             /* l'image reste fixe quand on scrolle */
}


/* Image de fond de la page 2 */
.page2 {
    background-image: url(../image/fond-page2.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Les images ne débordent jamais de leur conteneur */
img {
    max-width: 100%;
    display: block;
}

/* Les liens n'ont pas de soulignement par défaut */
a {
    text-decoration: none;
    color: #FFFFFF;
}


/* ============================================================
   3. HEADER : barre de navigation
   ============================================================ */

.header {
    background-color: #000000;
    height: 117px;                   /* hauteur relevée sur la maquette */
    padding: 0 90px;
    display: flex;
    justify-content: space-between;  /* logo à gauche, menu à droite */
    align-items: center;             /* centrage vertical */
}

.header-logo img {
    height: 80px;
}

.header-nav {
    display: flex;
    gap: 60px;    /* espace entre les liens */
}

.header-nav a {
    font-size: 18px;
    font-weight: 400;
}

/* Petit effet au survol (facultatif mais agréable) */
.header-nav a:hover {
    color: #E1B94F; /* doré du logo */
}


/* ============================================================
   4. HERO : grande image + titre + bouton (page 1)
   ============================================================ */

.hero {
    position: relative; /* sert de repère pour positionner le contenu */
    height: 1000px;     /* hauteur relevée sur Figma (frame 1920 x 1000) */
}

/* L'image remplit toute la section sans se déformer */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le bloc titre + bouton, posé sur l'image */
.hero-contenu {
    position: absolute;
    top: 260px;
    left: 90px;
    display: flex;
    flex-direction: column;
    align-items: center; /* le bouton se centre sous le titre */
    gap: 25px;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;              /* SemiBold */
    font-size: 59px;               /* valeur relevée sur Figma : 59.4 */
    line-height: 82px;             /* valeur Figma : 81.7 */
    letter-spacing: 5px;           /* valeur Figma : 9% de 59px ≈ 5px */
    text-shadow: 4px 6px 9px #000000; /* drop shadow Figma : X 3.71, Y 5.57, flou 9.28 */
}

/* Bouton rouge "Visite Brussels" */
.bouton {
    background-color: #F62929;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.bouton:hover {
    background-color: #D41F1F; /* rouge un peu plus foncé au survol */
}


/* ============================================================
   5. SECTION PRESENTATION (page 1)
   ============================================================ */

.presentation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 180px 150px; /* grands espacements comme sur la maquette */
    gap: 100px;
}

/* Carte de texte semi-transparente */
.presentation-texte {
    background-color: rgba(12, 12, 12, 0.75); /* gris foncé transparent */
    border-radius: 8px;
    padding: 45px 40px;
    max-width: 860px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    border: 1px solid #FFFFFF;
}

.presentation-texte h2 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

.presentation-texte p {
    font-size: 16px;
    font-weight: 400;
    line-height: 2; /* interligne aéré comme sur la maquette */
}

.presentation-img {
    width: 645px;
    height: 830px;
    border-radius: 8px;
    object-fit: cover; /* l'image remplit le cadre sans se déformer */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #FFFFFF; 
}


/* ============================================================
   6. SECTION LIEUX D'INTERET (page 1)
   ============================================================ */

.section-lieux {
    display: flex;
    flex-direction: column; /* les cartes s'empilent verticalement */
    gap: 140px;             /* espace entre les cartes */
    padding: 100px 150px 200px 150px;
}

/* ---- Carte type : texte à gauche, image à droite ---- */
.card-lieu {
    background-color: rgba(13, 13, 14, 0.8);
    border-radius: 10px;
    padding: 55px 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #FFFFFF;   /* ← AJOUTE cette ligne (stroke Figma) */
   
}

.card-lieu-texte {
    max-width: 800px;
}

.card-lieu-texte h2 {
    font-size: 30px;
    font-weight: 600;
    text-decoration: underline;
    letter-spacing: 3px;
    margin-bottom: 35px;

}

.card-lieu-texte p {
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 1px;
}

.card-lieu-img {
    width: 700px;
    height: 460px;
    object-fit: cover;
    border-radius: 8px;
}

/* ---- Carte du Jardin du Petit Sablon (1 texte + 3 images) ---- */
.card-jardin {
    background-color: rgba(12, 12, 12, 0.8);
    border-radius: 10px;
    padding: 55px 45px;
    display: flex;
    flex-direction: column; /* deux rangées l'une sous l'autre */
    gap: 45px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #FFFFFF;
}

/* Rangée du haut : texte + grande image */
.card-jardin-haut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

/* Rangée du bas : deux images côte à côte */
.card-jardin-bas {
    display: flex;
    justify-content: space-between;
    gap: 45px;
}

.card-jardin-img {
    width: 530px;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}


/* ============================================================
   7. SECTION DRAPEAU : Belgique / Bruxelles (page 1)
   ============================================================ */

.drapeau {
    position: relative;   /* repère pour le texte posé dessus */
    margin: 0 120px 120px 120px;
    border: 1px solid #FFFFFF;
}

.drapeau-img {
    width: 100%;
    height: 950px;
    object-fit: cover;
}

/* Texte centré au milieu du drapeau */
.drapeau-texte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centrage vertical */
    align-items: center;     /* centrage horizontal */
}

.drapeau-texte h2 {
    font-size: 170px;
    font-weight: 800; /* très gras comme sur la maquette */
    letter-spacing: 10px;
    text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.6);
}

.drapeau-texte p {
    font-size: 60px;
    font-weight: 800;
    letter-spacing: 25px; /* lettres très espacées */
    text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.6);
}


/* ============================================================
   8. FLECHES : navigation entre les pages
   ============================================================ */

.fleche {
    display: flex;
    padding: 0 90px 50px 90px;
}

/* Page 1 : la flèche seule est poussée à droite */
.fleche-droite {
    justify-content: flex-end;
}

/* Page 2 : une flèche à gauche, une flèche à droite */
.fleche-double {
    justify-content: space-between;
}

.fleche img {
    width: 55px;
    height: 55px;
}


/* ============================================================
   9. FOOTER
   ============================================================ */

.footer {
    background-color: #000000;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between; /* texte à gauche, icônes à droite */
    align-items: center;
}

.footer p {
    font-size: 14px;
    font-weight: 400;
}

.footer-reseaux {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-reseaux img {
    width: 30px;
    height: 30px;
}



/* ============================================================
   10. BANDEAUX DE TITRE (page 2)
   Barre grise semi-transparente avec petit logo + titre,
   réutilisée pour les 3 sections de la page 2.
   ============================================================ */

.bandeau-titre {
    align-self: center; /* se centre dans la section (qui est en flex column) */
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: rgba(12, 12, 12, 0.55);
    border-radius: 6px;
    padding: 8px 60px 8px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.logo-bandeau {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 6px;
}

.bandeau-titre h2 {
    font-size: 50px;
    font-weight: 600;
}

/* Variante plus petite pour le bandeau de la vidéo */
.bandeau-video {
    gap: 20px;
    padding: 6px 40px 6px 10px;
}

.bandeau-video img {
    width: 60px;
    height: 60px;
}

.bandeau-video h2 {
    font-size: 35px;
}


/* ============================================================
   11. SECTIONS ET CARTES RESTAURANTS / BARS (page 2)
   Les deux sections partagent les mêmes styles : on liste
   les sélecteurs séparés par une virgule.
   ============================================================ */

.section-restaurants,
.section-bars {
    display: flex;
    flex-direction: column; /* bandeau puis cartes, empilés */
    gap: 120px;
    padding: 60px 130px 120px 130px;
}

.card-restaurant,
.card-bar {
    background-color: rgba(0, 0, 0, 0.75); /* noir transparent */
    border-radius: 11px;
    padding: 50px 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    border: 1px solid #FFFFFF;
}

.card-texte {
    max-width: 850px;
}

.card-texte h3 {
    font-size: 26px;
    font-weight: 600;
    text-decoration: underline;
    letter-spacing: 2px;
    margin-bottom: 35px;
}

.card-texte p {
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}

/* Bloc adresse + horaires */
.card-infos {
    margin-top: 30px;
}

.card-img {
    width: 600px;
    height: 440px;
    object-fit: cover;
    border-radius: 8px;
}


/* ============================================================
   12. SECTION VIDEO (page 2)
   ============================================================ */

.section-video {
    display: flex;
    flex-direction: column;
    align-items: center; /* bandeau et vidéo centrés */
    gap: 50px;
    padding: 40px 130px 80px 130px;
}

.video {
    width: 860px;
    height: 480px;
    object-fit: cover; /* fonctionne aussi sur les vidéos ! */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.header-logo img {
    height: 80px;
    width: auto;
    display: block;
    object-fit: contain;
    
}