@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap);



*{
    font-family: 'Montserrat';
    box-sizing: border-box;

}

html{
    scroll-behavior: smooth;
}


body{
    margin: 0 auto;
} 

/* LANDING PAGE */

header.header {
    display: flex;
    justify-content: space-between; /* logo à gauche, nav à droite */
    align-items: center;
    flex-wrap: wrap; /* permet de passer à la ligne si l’écran est trop petit */
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px); 
    border-radius: 0px 0px 15px 15px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); 
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem 3rem;
    position: fixed;
    top: 0;
    width: 100%;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);

}



header.header img{
    width: 6%;
    min-width: 80px; /* évite qu’il devienne trop petit */
    
}

section.top-page{
    background: linear-gradient(rgba(0, 0, 0, 0.100), rgba(0, 0, 0, 0.9)), url('../images/accueil.png');
    background-size: cover;
    color: white;
    height: 100vh;
    background-position: center;

}

/* page de bienvenue */
.landing-page {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centre horizontalement */
    justify-content:center; /* centre verticalement */
    height: 100%; 
    text-align: center; 
}

.big-title {
    color: white;
    font-size: 40px;
    max-width: 900px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-top: 13rem;
    

}

/* bouton "En savoir plus" */
.scroll-down {
    display: inline-block;
    padding: 0.75rem 1.875rem;
    background-color: #ffffff;
    color: #333;
    border-radius: 1.875rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10rem;
    transition: 0.3s ease;
}

.scroll-down:hover {
    background-color: #72acc3;
    color: #ffffff;
}

/* Menu de navigation clair*/

nav.nav {
    display: flex;                  /* met les éléments côte à côte */
    justify-content: center;        /* centre le menu dans la barre */
    align-items: center;            /* centre verticalement */
    gap: 1.875rem;                      /* espace entre les liens */
    list-style: none;               /* enlève les puces */
    padding: 0;
    margin: 0;
    flex-wrap: wrap;  
                /* permet le retour à la ligne sur petit écran */
    
}

nav.nav li a {
    padding: 20px;
    text-decoration: none;
    color: whitesmoke;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #ffffff;
}

nav.nav li:hover {
    color: #72acc3;  /* changement de couleur au survol */
    transform: scale(1.1); /* Agrandir legerement le texte */
}


/* SERVICES */

.services {
    height: 100vh; 
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 2rem; 
    background-color: #f8f8f8;
    text-align: center;
    align-items: center;
    gap: 40px;  
}
  


.services-item {
    background-color: white;       /* couleur de la box */
    padding: 1.875rem 20px;            /* espace à l’intérieur */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* ombre subtile */
    max-width: 70rem;              /* largeur maximale */
    flex: 1 1 250px;              /* flex-grow, flex-shrink, base-width */
    border-radius: 3rem;
}

.services-item i {
    color: #72acc3;
    margin-bottom: 13px;
}

.services-item h3 {
    font-size: 2.3rem;
    margin-bottom: 10px;
}

.services-item p {
    font-size: 1.5rem;
    color: #555;
}

/* BESTS TRAVEL */

.section-title {
    font-size: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* un peu plus gras pour un titre */
    position: relative;
    color: #000000; /* noir moins agressif que #000 */
}


.section-title::before {
    content: "";
    position: absolute;
    background-color: #72acc3;
    width: 50px;
    height: 7px;
    bottom: 0;
}

.bests-travel {
    margin: 100px;
}

.bests-contries {
    min-height: 500px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.contries-box {
    position: relative;
    flex: 1 1 30%;
    min-width: 300px;
    height: 500px;
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    border-radius: 10px;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    
    text-decoration: none;
    transition: transform 0.3s ease;
}

.contries-portugal {
    background-image: url('../images/portugal.avif');
}

.social-links {
    list-style: none;
    padding: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.9); 
    max-height: 200px;
    overflow-y: auto; 
}

.social-links li a {
    color: #333;
    text-decoration: none;
    font-size: 0.9em;
    display: block;
    padding: 5px 0;
}

.social-links li a:hover {
    color: #007bff;
}

.contries-italie {
    background-image: url(../images/italie.webp);
}

.contries-france {
    background-image: url(../images/marseillemob.jpg);
}

.contries-details {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center ;
    border-radius: 0 0 10px 10px;
    gap: 10px;
}

/* Nom du pays en haut centre */
.contries-name {
    position: absolute;
    top: 15px;               /* distance depuis le haut */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6); /* pour bien voir sur l’image */
}

/* Bouton "En savoir plus" en bas centre */
.contries-more {
    position: absolute;
    bottom: 15px;            /* distance depuis le bas */
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 15px;
    background-color: #72acc3;
    color: #ffffff;
    font-weight: 600;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.contries-box:hover .contries-more {
    transform: translateX(-50%) scale(1.1);
    background-color: #333;
    color: #fff;
}

footer {
    display: flex;                 
    justify-content: space-between;
    align-items: center;          
    padding: 20px 50px;
    background-color: #f8f8f8;   
}

footer img {
    max-width: 70px;
    height: auto;    
}

footer p {
    font-size: 14px;
    color: #555;
    margin: 0;
    text-align: right;
}


@media (max-width: 1024px) {
    header.header {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    nav.nav {
        flex-wrap: wrap;
        gap: 1rem;
    }

    nav.nav li a {
        padding: 10px;
        font-size: 14px;
    }

    .services {
        flex-direction: row;
        justify-content: center;
    }

    .services-item {
        flex: 1 1 40%;
        max-width: 45%;
    }

    .bests-contries {
        justify-content: center;
    }

    .contries-box {
        flex: 1 1 45%;
        min-width: 250px;
    }
}


@media (max-width: 768px) {
    header.header {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    header.header img {
        width: 20%;
        min-width: 60px;
    }

    nav.nav {
        flex-direction: column;
        gap: 0.5rem;
    }

    nav.nav li a {
        font-size: 14px;
        padding: 8px 12px;
    }

    .big-title {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .services {
        flex-direction: column;
        align-items: center;
        padding: 30px 15px;
    }

    .services-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .bests-contries {
        flex-direction: column;
        align-items: center;
    }

    .contries-box {
        flex: 1 1 100%;
        min-width: 90%;
        height: 350px;
    }
}


@media (max-width: 480px) {
    nav.nav li a {
        font-size: 12px;
        padding: 6px 10px;
    }

    .big-title {
        font-size: 22px;
    }

    .scroll-down {
        padding: 0.5rem 1.2rem;
        font-size: 14px;
    }

    .contries-box {
        height: 250px;
    }
}

/* Conteneur des pays */
.countries-contries { /* Corrigé : 'countries' */
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 80%;
    margin: 20px auto;
}

/* Boîte de chaque pays */
.countries-box {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
    height: 300px; /* Hauteur fixe par défaut */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, height 0.5s ease-in-out; 
}

/* Image de fond pour chaque pays */
.countries-italie { background-image: url(../images/drapeau-italie.jpg); }
.countries-portugal { background-image: url(../images/drapeau-portugal.jpg); }
.countries-france { background-image: url(../images/drapeau-france.jpg); }

/* Titre du pays (centré en haut) */
.countries-name {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000;
    z-index: 2;
}

/* Détails du bouton "Voir plus" (centré en bas) */
.countries-details {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0 0 10px 10px;
}

/* Bouton Voir plus */
.countries-more {
    padding: 6px 15px;
    background-color: #72acc3;
    color: #fff;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.countries-box:hover .countries-more {
    transform: scale(1.1);
    background-color: #333;
}

/* Contenu caché */
.countries-hidden-content {
    display: none; 
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    margin-top: 60px; /* Laisse de la place pour le titre en haut */
}

/* Affichage si 'expanded' (nécessite un peu de JS pour ajouter la classe) */
.countries-box.expanded {
    height: auto; 
    min-height: 300px;
}

.countries-box.expanded .countries-hidden-content {
    display: block;
}

/* Style des images à l'intérieur */
.countries-images {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.countries-images img {
    width: 100px; /* Taille fixe pour les vignettes */
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}

.countries-images img:hover {
    transform: scale(1.05);
}

/* --- RÉSEAUX SOCIAUX --- */

.social-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; 
    gap: 12px;   
    justify-content: center; 
    margin-top: 20px;
}
  
.social-links a {
    display: inline-flex; /* Changé de block à inline-flex */
    align-items: center;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1877F2;
    background-color: #f0f2f5;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
  
.social-links a:hover {
    background-color: #1877F2;
    color: #ffffff;
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}


.btn-contact {
    background-color: rgb(16, 10, 183);    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    border: 2px solid rgb(16, 10, 183);
    color: aliceblue;
    border-radius: 5px;
    margin: 10px auto;
}

p {
    text-align: center;
}

.size {
    max-width: 10px;
    height: auto;
}

.contries-description {
    color: white;
    font-size: large;
}