/* ==========================================================================
   1. RÉINITIALISATION ET STYLES GLOBAUX
   ========================================================================== */

/* Nettoyage des marges par défaut de tous les navigateurs */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Permet aux bordures de ne pas élargir les éléments */
    font-family: 'Arial', sans-serif;
}

/* Force la barre de défilement à droite pour éviter les sauts d'écran entre les pages */
html {
    overflow-y: scroll;
}



/* ==========================================================================
   2. MENU DE NAVIGATION (NAVBAR)
   ========================================================================== */

/* Barre de navigation principale (fixée tout en haut) */
.navbar {
    width: 100%;
    background-color: #1a1a1a; /* Gris très foncé */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Reste toujours au-dessus du reste du contenu */
    border-bottom: 1px solid #222222;
    display: flex;         
    justify-content: center;
    overflow: visible !important;
}

/* Zone intérieure du menu (bridée en largeur pour s'aligner avec le site) */
.nav-container {
    width: 100%;
    max-width: 800px; /* Aligné sur la largeur max du contenu */
    padding: 20px 40px;    
    display: flex;
    justify-content: space-between; /* Logo à gauche, liens à droite */
    align-items: center;
}

/* Style du Logo textuel MEUBLETIK. */
.nav-logo {
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px; /* Écarte un peu les lettres */
}

/* Couleur du "TIK" dans le logo */
.nav-logo span {
    color: #d8ff26; /* Vert néon signature */
}

/* Remplacement Logo textuel par image */
.logo-img {
    height: 40px; 
    width: auto;   
    display: block; 
}

/* Conteneur des 4 liens du menu */
.nav-links {
    display: flex;
    gap: 35px; /* Espace entre chaque lien */
}

/* Style de base des liens du menu */
.nav-links a {
    color: #999999;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase; /* Force les majuscules */
    letter-spacing: 1px;
    transition: color 0.3s ease; /* Transition douce pour le survol */
}

/* Changement de couleur quand la souris survole un lien */
.nav-links a:hover {
    color: #d8ff26;
}

/* Style unique pour l'onglet de la page en cours (souligné) */
.nav-links a.active,
.dropdown > a.active {
    color: #ffffff !important;
    border-bottom: 2px solid #d8ff26 !important; /* Petite ligne verte sous le lien */
    padding-bottom: 5px !important;
}
/* Conteneur du menu déroulant */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Le contenu du menu (caché par défaut) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1a1a1a;
    border: 1px solid #222222;
    min-width: 180px;
    z-index: 1000;
}

/* Si la classe is-open est présente (via JS), on affiche */
.dropdown.is-open .dropdown-content {
    display: block;
}

/* On garde le hover pour le confort sur ordinateur */
.dropdown:hover .dropdown-content {
    display: block;
}
/* Liens à l'intérieur du menu déroulant */
.dropdown-content a {
    color: #999999;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-transform: none; /* Plus lisible pour des sous-liens */
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
}

/* Effet survol sous-liens */
.dropdown-content a:hover {
    background-color: #222222;
    color: #d8ff26;
}

/* Afficher le menu au survol du parent */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Petit effet visuel sur le bouton parent quand on survole le menu */
.dropdown:hover > a {
    color: #d8ff26;
}

/* Garder le style "active" sur le parent si un sous-élément est survolé ou actif */
.dropdown:hover > a,
.dropdown:focus-within > a {
    color: #ffffff;
    border-bottom: 2px solid #d8ff26;
    padding-bottom: 5px;
}




/* ==========================================================================
   4. PAGE D'ACCUEIL (INDEX)
   ========================================================================== */

/* Encadré du logo sur l'accueil */
.logo-container {
    margin-top: -50px;
    margin-bottom: 10px;
}

/* Ajustement de l'image du gros logo central */
.logo {
    max-width: 800px;
    height: auto;
}

/* Zone qui gère la position des boutons sous le logo */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 65px;
    align-items: center;
    margin-top: -80px;
}

/* Gros boutons de l'accueil (Histoire / Créations) */
.btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: #d8ff26; /* Fond vert néon */
    color: #121212; /* Texte noir */
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Boutons très arrondis */
    box-shadow: 0 4px 15px rgba(216, 255, 38, 0.3); /* Lueur verte discrète */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Effet dynamique au survol des gros boutons */
.btn:hover {
    background-color: #ffffff; /* Devient blanc */
    color: #d8ff26; /* Le texte passe au vert */
    box-shadow: 0 0 20px rgba(216, 255, 38, 0.6); /* La lueur s'accentue */
    transform: translateY(-3px); /* Le bouton monte de 3 pixels */
}

/* Petit bouton de contact par mail discret tout en bas de l'accueil */
a.btn.btn-mail {
    background-color: transparent;
    padding: 0;
    color: #999999;
    font-weight: normal;
    text-transform: none;
    text-decoration: none;
    border-bottom: 1px dashed #555555; /* Petite ligne pointillée dessous */
    margin-top: 5px;
    box-shadow: none;
}

/* Survol du bouton mail discret */
a.btn.btn-mail:hover {
    background-color: transparent;
    color: #ffffff;
    border-bottom-color: #ffffff;
    transform: none;
    box-shadow: none;
}


/* ==========================================================================
   5. PAGE HISTOIRE
   ========================================================================== */

/* Titres principaux (H1) des pages de contenu */
.container h1 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* Paragraphes de texte de présentation */
.container p {
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.6;
    text-align: left; /* Texte aligné à gauche pour le confort de lecture */
    max-width: 700px;
    margin: 0 auto; /* Centre le bloc de texte au milieu de l'écran */
    white-space: pre-line; /* Respecte les sauts de ligne faits dans le HTML */
}

/* Liste des engagements (bloc global) */
.histoire-liste {
    list-style: none; /* Supprime les vilains points noirs par défaut */
    max-width: 700px;
    margin: 20px auto;
    padding-left: 20px;
    text-align: left;
}

/* Chaque ligne d'engagement dans la liste */
.histoire-liste li {
    color: #e0e0e0;
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px; /* Laisse de la place à gauche pour l'icône de coche */
}

/* Injection automatique de la coche verte avant le texte */
.histoire-liste li::before {
    content: "✓"; /* Le symbole coché */
    color: #d8ff26; /* Vert néon */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Zone de la grande citation de Lavoisier */
.citation {
    max-width: 600px;
    margin: 60px auto 100px auto; /* 100px en bas pour détacher le texte du bas de l'écran */
    padding-top: 30px;
    border-top: 1px solid #222222; /* Ligne de séparation fine supérieure */
    text-align: center !important;
}

/* Texte de la citation en italique */
.citation-texte {
    display: inline-block;
    color: #d8ff26;
    font-size: 22px;
    font-style: italic;
    margin-bottom: 15px;
}

/* Nom de l'auteur sous la citation */
.citation-auteur {
    display: inline-block;
    color: #888888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* ==========================================================================
   6. PAGES EN CONSTRUCTION (BOÎTES D'ATTENTE)
   ========================================================================== */

/* Boîte temporaire "Atelier en cours d'aménagement" (ex: page contact actuelle) */
.working-box {
    max-width: 600px;
    margin: 60px auto;
    padding: 20px;
}

/* Style de l'émoji scie mécanique */
.work-icon {
    font-size: 80px;
    display: inline-block;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 15px rgba(216, 255, 38, 0.4)); /* Effet néon derrière l'émoji */
}

/* Titre de la boîte en construction */
.working-box h2 {
    color: #d8ff26;
    font-size: 26px;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Texte d'attente */
.work-text {
    color: #b0b0b0 !important;
    font-size: 16px;
    line-height: 1.6;
    text-align: center !important;
}


/* ==========================================================================
   7. PAGE CATALOGUE (NOS CRÉATIONS)
   ========================================================================== */

.creations-grid {
    display: grid;
    /* Force 3 colonnes de largeur égale */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    padding: 50px; 
    margin-top: 80px;
   
    /* On laisse le max-width à 1200px pour ne pas que ce soit trop étiré */
    max-width: 1200px; 
    width: 95%;        
    margin: 0 auto;
    padding: 20px 0;
    
    /* Aligne les cartes proprement en haut de chaque ligne */
    align-items: start;
}

/* Adaptation pour tablettes (2 colonnes) */
@media (max-width: 900px) {
    .creations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

 /*Adaptation pour mobiles (1 colonne) */
@media (max-width: 600px) {
    .creations-grid {
        grid-template-columns: 1fr;
    }
}

/* Force l'affichage sur 2 colonnes maximum pour les deux univers Classique/Manga */
.creations-grid.split-attitudes {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    max-width: 900px; /* Légèrement plus resserré pour que ce soit plus élégant */
}

/* La carte entière d'un meuble (qui sert de gros lien cliquable) */
.meuble-card {
    background-color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden; /* Empêche les images de dépasser des coins arrondis */
    text-decoration: none; /* Supprime le soulignement bleu des liens */
    border: 1px solid #222222;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol d'une carte de meuble */
.meuble-card:hover {
    transform: translateY(-5px); /* Monte la carte de 5px */
    box-shadow: 0 10px 20px rgba(216, 255, 38, 0.1); /* Légère ombre verte dessous */
    border-color: #333333; /* Bordure un poil plus claire */
}

/* Boîtier qui contient la photo du catalogue (pour superposer le badge) */
.image-container {
    position: relative;
    width: 100%;
    height: 300px; /* Force tous les meubles du catalogue à avoir la même hauteur de photo */
    overflow: hidden;
    background-color: #252525;
}

/* L'image du meuble en elle-même */
.meuble-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre proprement l'image au centre sans l'écraser */
    transition: transform 0.5s ease;
}

/* Effet de zoom sur l'image quand la souris survole la carte */
.meuble-card:hover .meuble-img {
    transform: scale(1.05); /* Zoom de 5% */
}

/* --- BADGES DE STATUT SUR LES IMAGES (Disponible / Vendu...) --- */
.badge {
position: absolute; 
            top: 10px; 
            right: 10px; 
            padding: 4px 8px; /* Réduit le padding pour qu'il soit moins imposant */
            color: white; 
            border-radius: 4px; 
            font-size: 10px;   /* Réduit la taille de la police */
            font-weight: 600; 
            z-index: 10;
            text-transform: uppercase; /* Force le texte en majuscules pour un look plus compact */
            letter-spacing: 0.5px;
}

/* Badge Vert : meuble disponible */
.statut-dispo {
    background-color: #2e7d32;
    color: #ffffff;
}

/* Badge Jaune : meuble en cours d'atelier */
.statut-encours {
    background-color: #f9a825;
    color: #121212;
}

/* Badge Rouge : meuble vendu */
.statut-vendu {
    background-color: #c62828;
    color: #ffffff;
    opacity: 0.8;
}

/* --- TEXTES SOUS LA PHOTO DU MEUBLE --- */
.meuble-infos {
    padding: 20px;
    text-align: left;
}

/* Titre du meuble */
.meuble-infos h3 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Prix du meuble */
.meuble-prix {
    color: #d8ff26 !important; /* Vert néon distinctive */
    font-size: 20px !important;
    font-weight: bold;
    margin: 0 !important;
}

/* 🟢 RÈGLE MAGIQUE CATALOGUE : Si la carte de meuble contient le badge "Vendu", le prix du catalogue disparaît */
.meuble-card:has(.statut-vendu) .meuble-prix {
    display: none !important;
}

/* Conteneur de la galerie automatique */
.univers-gallery-auto {
    position: relative;
    width: 100%;
    height: 300px; /* Ajuste la hauteur selon ton design */
    overflow: hidden;
    border-radius: 8px 8px 0 0; /* Arrondit seulement le haut de la carte */
}

/* Style commun à toutes les images du défilement */
.univers-gallery-auto .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Par défaut, les images sont cachées */
    transition: opacity 0.8s ease-in-out; /* Effet de fondu doux */
}

/* L'image qui possède la classe .active devient visible */
.univers-gallery-auto .slide.active {
    opacity: 1;
}

/* Conteneur pour les groupes (Disponible / Vendu) */
.groupe-statut {
    margin-bottom: 50px;
}

.groupe-statut h2 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 20px;
}

/* La ligne avec ascenseur horizontal */
.scroll-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 20px;
    scrollbar-width: thin; /* Pour Firefox */
    scrollbar-color: #333 #121212;
}

/* Style de la scrollbar pour Chrome/Safari */
.scroll-container::-webkit-scrollbar { height: 8px; }
.scroll-container::-webkit-scrollbar-thumb { background-color: #333; border-radius: 4px; }

/* Force chaque carte à faire 1/3 de la largeur pour n'en voir que 3 */
.scroll-container .meuble-card {
    min-width: calc(33.33% - 14px); /* 33.33% = 1/3, 14px ajuste l'écart */
    max-width: calc(33.33% - 14px);
    flex: 0 0 auto;
}

/* Adaptation pour les écrans plus petits (pour que ça reste lisible) */
@media (max-width: 900px) {
    .scroll-container .meuble-card {
        min-width: calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .scroll-container .meuble-card {
        min-width: calc(90% - 10px);
        max-width: calc(90% - 10px);
    }
}





/* ==========================================================================
   8. PAGE FICHE MEUBLE (DÉTAILS ET GALERIE DU HAUT)
   ========================================================================== */

/* Bloc flexibilité qui sépare la page en deux colonnes (Image à gauche, Textes à droite) */
.product-wrapper {
    display: flex;
    flex-wrap: wrap; /* Aligne l'un sous l'autre sur les petits téléphones */
    gap: 50px; /* Espace entre la colonne image et la colonne texte */
    text-align: left;
}

/* Colonne gauche : Bloc entier contenant la grande image et ses vignettes */
.product-gallery {
    flex: 1;
    min-width: 300px;
}

/* Le grand cadre noir de la photo principale */
.main-image-box {
    position: relative;
    width: 100%;
    height: 450px; /* Hauteur fixe pour que l'écran ne bouge pas au changement d'image */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #222222;
    background-color: #1a1a1a;
}

/* La grande photo principale affichée */
#main-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* La pellicule horizontale contenant les miniatures sous la grande photo */
.thumb-filmstrip {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto; /* Permet un glissement horizontal */
    padding-bottom: 10px;
    white-space: nowrap;

  /* 1. Rendu fluide sur mobile (iPhone/Android) */
    -webkit-overflow-scrolling: touch;
    
    /* 2. Empêche la barre de défilement d'être trop imposante */
    scrollbar-width: thin; 
}

/* Style de chaque petite image vignette */
.thumb-img {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #222222;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.thumb-img:hover {
    border-color: #555555;
    transform: translateY(-2px);
}

/* La classe magique ajoutée par le JavaScript sur la vignette cliquée */
.thumb-img.active {
    border-color: #d8ff26;
}

/* Badge de statut spécifique à la page de détails (superposé en bas à droite) */
.badge-detail {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 10;
}

/* Colonne droite : Conteneur des textes et informations */
.product-details {
    flex: 1;
    min-width: 300px;
}

/* Titre du meuble dans sa fiche */
.product-title {
    color: #ffffff !important;
    font-size: 32px !important;
    margin: 0 0 10px 0 !important;
    font-weight: bold;
    text-align: left !important;
}

/* Gros affichage du prix */
.product-price {
    color: #d8ff26 !important;
    font-size: 28px !important;
    font-weight: bold;
    margin: 0 0 20px 0 !important;
}

/* Ligne de séparation fine */
.separator {
    border: 0;
    border-top: 1px solid #222222;
    margin-bottom: 25px;
}

/* Titres des encadrés (Fiche technique et Histoire) */
.specs-box h3, .history-box h3 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 12px;
}

/* Fiche technique : Liste des caractéristiques */
.specs-box ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.specs-box li {
    color: #cccccc;
    margin-bottom: 8px;
    font-size: 15px;
}
.specs-box li strong {
    color: #ffffff;
}

/* Paragraphe racontant la vie du meuble */
.history-box p {
    color: #aaaaaa !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    margin-bottom: 35px !important;
}

/* Gros bouton d'action vert "Ce meuble m'intéresse" */
.btn-interest {
    display: inline-block;
    background-color: #d8ff26;
    color: #121212;
    text-decoration: none;
    padding: 15px 30px;
    font-weight: bold;
    border-radius: 8px;
    font-size: 16px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-interest:hover {
    transform: translateY(-2px);
    background-color: #c4e822;
}

/* 🟢 RÈGLES MAGIQUES DE MASQUAGE SI VENDU */
.product-wrapper:has(.statut-vendu) .product-price {
    display: none !important;
}

.product-gallery:has(.statut-vendu) ~ .product-details .btn-interest {
    display: none !important;
}


/* ==========================================================================
   9. PAGE FICHE MEUBLE (SECTION COULISSES DE RENOVATION EN BAS)
   ========================================================================== */

.renovation-section {
    margin-top: 60px;
    margin-bottom: 80px;
    text-align: center;
}

.separator-large {
    border: 0;
    border-top: 1px solid #222222;
    margin-bottom: 50px;
}

.renovation-section h2 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 10px;
}

.renovation-subtitle {
    color: #888888 !important;
    font-size: 15px !important;
    margin-bottom: 40px !important;
}

.renovation-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.reno-step {
    text-align: left;
}

.reno-img-container {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #222222;
    background-color: #1a1a1a;
    margin-bottom: 15px;
}
.reno-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reno-step h4 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 8px;
}

.reno-step p {
    color: #aaaaaa !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}





/* ==========================================================================
   90. PIED DE PAGE (FOOTER)
   ========================================================================== */
/* 1. Assure que le body occupe toute la hauteur et empile les éléments */
body {
    min-height: 100vh; /* Hauteur minimale de l'écran */
    background-color: #121212;
    display: flex;
    flex-direction: column; /* Empile : Header -> Container -> Footer */
    margin: 0;
}

/* 2. Le conteneur prend tout l'espace disponible entre le header et le footer */
.container {
    flex: 1; /* C'est ce "flex: 1" qui pousse le footer vers le bas */
    text-align: center;
    padding: 100px 40px 40px 40px; /* Ajout d'un peu plus d'espace en haut pour la navbar fixe */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* 3. Style du footer */
.site-footer {
    width: 100%;
    padding: 30px;
    background-color: #1a1a1a;
    border-top: 1px solid #222222;
    text-align: center;
    color: #888888;
    font-size: 14px;
    margin-top: auto; /* Force le footer à se coller en bas si nécessaire */
}

.site-footer a {
    color: #d8ff26;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
}

.site-footer a:hover {
    color: #ffffff;
}





/* ==========================================================================
   99. ADAPTATION SPÉCIALE POUR MOBILE (ÉCRANS DE MOINS DE 768PX)
   ========================================================================== */

@media (max-width: 768px) {
    .container {
        padding: 80px 20px 20px 20px;
    }

    .nav-container {
        padding: 15px 10px;
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links a {
        font-size: 11px;
    }

    .logo-container {
        margin-top: 0px;
        margin-bottom: 20px;
        width: 100%;
    }

    .logo {
        max-width: 100%;
        height: auto;
    }

    .button-container {
        margin-top: 0px;
        gap: 25px;
    }

    .btn {
        padding: 12px 30px;
        font-size: 16px;
        width: 90%;
        max-width: 300px;
        text-align: center;
    }

    a.btn.btn-mail {
        margin-top: 15px;
        font-size: 14px;
    }

    .container h1 {
        font-size: 22px;
    }

    .container p {
        font-size: 15px;
    }

    .citation-texte {
        font-size: 18px;
    }

    .product-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .main-image-box {
        height: 320px;
    }

    .product-title {
        font-size: 26px !important;
    }

    .product-price {
        font-size: 24px !important;
    }

    .thumb-img {
        width: 60px;
        height: 60px;
    }
}



@media (max-width: 400px) {
    .nav-links {
        gap: 5px;
    }
    .nav-links a {
        font-size: 10px;
    }
}