/* Styles de base */
:root {
    --primary-color: #333;
    --secondary-color: #f4f4f4;
    --accent-color: #e6b189; /* Or par exemple */
    --text-color: #555;
    --font-family: 'Helvetica Neue', sans-serif;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: var(--text-color);
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

h2, h3 {
    color: var(--primary-color);
    text-align: center;
}

section {
    padding: 60px 0;
    text-align: center;
}

/* masquer les sections collections et contact*/
/* */


#about .about-content{display: inline-block;width: 48%;vertical-align: middle;}
.about-content img{width: 70%;}
.about-content p{width: 80%;}

#collections, #contactForm{display: none;}
/* , #contact */


.affiche img{width: 50%;}


.whsp{display: inline-block;margin: 20px;}

/* En-tête et navigation */
header {
    /* Style initial: transparent et positionné en haut */
    background-color: transparent;
    padding: 1rem 0;
    position: fixed; /* 'fixed' est préférable à 'absolute' pour que le menu suive le défilement */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Ajoute une transition fluide pour l'animation */
}

/* Style de la barre de menu lorsqu'on fait défiler la page */
header.scrolled {
    background-color: #fff; /* Fond blanc */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* En-tête et navigation - Styles pour le bureau (par défaut) */
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
}

header nav h1 {
    margin: 0;
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Cache le bouton hamburger sur les écrans de bureau */
.hamburger {
    display: none;
}

/* Affiche les liens de navigation sur les écrans de bureau */
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0 15px;
    transition: color 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.nav-links li a:hover {
    color: var(--accent-color);
}

/* Changement de couleur du texte lorsque la classe 'scrolled' est active */
header.scrolled nav h1,
header.scrolled nav ul li a {
    /*color: #fff;*/
    color: var(--primary-color); /* Couleur sombre (par exemple, #333) */
    text-shadow: none; /* Supprime l'ombre du texte */
}

header nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

header nav ul li a {
    color: #fff; /* Couleur initiale des liens: blanc */
    text-decoration: none;
    font-weight: bold;
    padding: 0 15px;
    transition: color 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

header nav ul li a:hover {
    color: var(--accent-color);
}

main{
}


/* ==================================== */
/* Styles des Réseaux Sociaux */
/* ==================================== */
.social-links {
    margin-top: 40px;
    text-align: center;
}

.social-links h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.social-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px; /* Centre le texte verticalement */
    margin: 0 10px;
    border-radius: 50%; /* Crée un cercle pour l'icône */
    color: white; /* Couleur du texte/icône */
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Styles spécifiques (couleurs d'arrière-plan par réseau) */
.social-icon.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-icon.facebook {
    background-color: #3b5998;
}
.social-icon.twitter {
    background-color: #1da1f2;
}
.social-icon.pinterest {
    background-color: #bd081c;
}

/* Effet au survol */
.social-icon:hover {
    transform: scale(1.1); /* Petit effet de zoom */
}

.social-icon .icon-text {
    font-size: 0.9rem;
    text-indent: -9999px; /* Cache le texte pour laisser place à l'icône */
    display: block;
}

/* Mise à jour si vous n'utilisez pas de vraie icône (affichage du texte) */
/* Si vous utilisez Font Awesome, vous pouvez ignorer cette règle */
.social-icon {
    /* Si vous n'utilisez pas de Font Awesome, vous voudrez peut-être afficher le texte pour la démo */
    text-indent: 0;
    font-size: 0.8rem;
}

.social-links a i{
    font-size: 1.8rem;
    vertical-align: middle;    
}


/* Section Héro */
#hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:url('hero.TFS.bg2.png') no-repeat center center/cover;
    /*background: url('https://via.placeholder.com/1920x1080?text=Image+de+Défilé') no-repeat center center/cover;*/
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content {
    text-align: center;
    color: #fff;
    margin: 0 0 1rem;
}

.hero-content h1 {
    font-size:2.6rem;
    line-height: 2.7rem;
}

.hero-content h2 {
    font-size: 2.2rem;
    line-height: 2.2rem;
    color: #fff;
    margin: 0 0 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn {
    background-color: var(--accent-color);
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #d19f7a;
}


/* ==================================== */
/* Styles de la Galerie Photo */
/* ==================================== */
#gallery-photos {
    background-color: var(--secondary-color); /* Utilise la couleur secondaire pour un fond contrasté */
}

.photo-grid {
    display: grid;
    /* Créé une grille avec des colonnes de taille minimale 300px, adaptées à la largeur de l'écran */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    max-width: 1200px; /* Limite la largeur de la grille sur les grands écrans */
    margin: 30px auto; /* Centre la grille */
    padding: 0 20px;
}

.photo-item {
    overflow: hidden; /* Assure que l'image ne dépasse pas son conteneur */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.photo-item:hover {
    transform: scale(1.2); /* Petit zoom à l'approche de la souris */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre l'espace sans se déformer */
    display: block;
}


/* Sections de contenu */
#about p, #contact p {
    max-width: 700px;
    margin: auto;
}

/* Galerie d'images */
/* ==================================== */
/* Galerie d'images (Bureau) */
/* ==================================== */
#collections .gallery {
    display: flex; /* Affichage en ligne par défaut */
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.collection-item {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    flex: 1 1 300px;
    max-width: 300px;
}

.collection-item:hover {
    transform: translateY(-10px);
}

.collection-item img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

/* contact */
#contact{
    background-color: #fefefe;
}


/* Formulaire de contact */
#contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 500px;
    margin: auto;
}

#contact input, #contact textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#contact button {
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.hidden {
    display: none;
}

/* Pied de page */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--primary-color);
    color: #fff;
}


@media screen and (min-width: 769px){
    .nav-links {flex-direction: unset;}
    #collections .gallery {flex-direction: unset;}
}


/* ==================================== */
/* Styles pour les appareils mobiles */
/* ==================================== */

@media screen and (max-width: 768px) {

     /* Galerie Photo */
    .photo-grid {
        /* Simplifie l'affichage pour les petits écrans: une seule colonne */
        grid-template-columns: 1fr; 
        gap: 10px;
    }

    /* Cache les liens par défaut */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        /*background-color:#33333396;*/
        background-color: var(--primary-color);
        color: #fff;
        position: absolute;
        top: 60px; /* Aligne le menu sous l'en-tête */
        left: 0;
        padding: 20px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Affiche les liens lorsque la classe est active */
    .nav-links.active {
        display: flex;
    }

    header.scrolled .nav-links li a, 
    .nav-links li a {
        color: #fff;
        text-shadow: none;
        display: block;
        padding: 10px 0;
    }

    /* Styles pour le bouton hamburger */
    .hamburger {
        display: flex; /* Affiche le bouton sur mobile */
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 2000;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #fff; /* Couleur des barres du hamburger */
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* Transformations pour créer l'animation de la croix */
    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Cache le titre et le menu complet sur mobile */
    header nav h1, header nav ul {
        display: none;
    }

    /* Affiche le titre et l'icône hamburger sur mobile */
    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    header nav h1 {
        display: block;
        font-size: 1.5rem;
    }

    header nav .nav-links {
        display: none;
    }
    
    /* Règle pour le menu 'fixed' qui est transparent puis blanc */
    header.scrolled .hamburger span {
        background: var(--primary-color); /* Change la couleur des barres lorsque le menu est blanc */
    }

    /* Le reste de vos styles mobiles (galerie, sections) peut rester le même */
}
    
    /* En-tête et navigation */
    header nav {
        flex-direction: row; /* Empile les éléments du menu verticalement */
        align-items: center; /* Centre les éléments */
        text-align: center;
    }

    header nav h1 {
        margin-bottom: 10px; /* Ajoute de l'espace sous le titre */
        font-size: 1.5rem; /* Réduit la taille de la police */
    }

    header nav ul {
        flex-direction: column; /* Empile les liens verticalement */
        gap: 10px; /* Ajoute un espace entre les liens */
    }

    /* Section Héro */
    #hero{background: url('hero.TFS.bg3.png') no-repeat right 25% center/cover;}

    #hero .hero-content h2 {
        font-size: 2.3rem; /* Réduit la taille du titre */
    }
    
    #hero .hero-content p {
        font-size: 1rem; /* Réduit la taille du paragraphe */
    }

    /* Sections de contenu */
    section {
        padding: 40px 20px; /* Réduit le remplissage des sections */
    }

    /* Galerie des collections */


    #collections .gallery {
        flex-direction: column; /* Passe en colonne pour les mobiles */
        align-items: center;
    }
    
    .collection-item {
        max-width: 100%;
    }

    /* Formulaire de contact */
    #contact form {
        width: 90%; /* Ajuste la largeur du formulaire pour les petits écrans */
    }
    
    #contact input,
    #contact textarea {
        width: 100%; /* S'assure que les champs de formulaire occupent toute la largeur */
    }

    #logotfsblc{width: 90px;margin-bottom: 70px;margin-top: -50px;}

    #about .about-content{width: auto !important;}

    .about-content img {width: 100%;}
}