/* RESET & BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Police imposée : Papyrus (avec fallback si non dispo sur mobile) */
    font-family: 'Papyrus', 'Fantasy', cursive; 
    color: black;
    /* Simulation fond "Hêtre clair" via couleur sable/bois. 
       Idéalement, remplace l'url par une vraie texture de bois */
    background-color: #000000; 
    background-image: url('img/texturehetreclair.png'); /* Si tu as l'image */
    background-size: cover;
    min-height: 100vh;
}

/* 1. ENTÊTE - 1/3 de la page */
.main-header {
    height: 33vh;
    width: 100%;
    overflow: hidden;
    border-bottom: 3px solid #5a4a42;
}

.header-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit la zone sans être déformée */
}

/* 2. MENU - Bandeau Violet Pastel */
.main-nav {
    background-color: #D8BFD8; /* Violet Pastel (Thistle) */
    width: 100%;
    position: sticky; /* Reste en haut lors du scroll une fois l'entête passée */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

.main-nav li {
    position: relative;
}

.main-nav a {
    display: block;
    padding: 15px 25px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    transition: background 0.3s;
}

.main-nav a:hover {
    background-color: #C8A2C8; /* Violet un peu plus foncé au survol */
}

/* LISTE DÉROULANTE */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #E6E6FA; /* Lavande très clair */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    padding: 12px 16px;
    font-size: 0.9em;
    text-align: left;
}

/* 3. VITRINE */
.showcase {
    padding: 40px 20px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    /* Fond blanc semi-transparent pour lisibilité sur le bois */
    background: rgba(255, 255, 255, 0.4); 
    min-height: 50vh;
}

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

.card {
    background: rgba(255,255,255,0.8);
    padding: 15px;
    border: 1px solid #8b7355;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

/* 4. LOGO FIXE */
.fixed-logo {
    position: fixed;
    top: 80px;
    left: 20px;
    width: 80px; /* Ajuster la taille */
    height: auto;
    z-index: 9999;
}
.fixed-logo img {
    width: 100%;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}

/* CONTENEUR DES THÈMES */
.themes-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile */
    gap: 20px;
    margin: 30px auto;
    max-width: 1200px;
}

/* LA CARTE THÈME */
.theme-card {
    position: relative;
    width: 150px;       /* Taille carrée */
    height: 150px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* L'IMAGE DE FOND DU THÈME */
.theme-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* LE TITRE SUR L'IMAGE */
.theme-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(90, 74, 66, 0.8); /* Fond marron semi-transparent */
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-size: 0.9em;
    font-weight: bold;
    font-family: sans-serif;
}

/* EFFET AU SURVOL (HOVER) */
.theme-card:hover {
    transform: translateY(-5px); /* La carte remonte un peu */
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.theme-card:hover img {
    transform: scale(1.1); /* Zoom léger sur l'image */
}

/* =========================================
   VERSION MOBILE (SMARTPHONE & TABLETTE)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. LE BANDEAU D'ANNONCE */
    /* On cache les branches pour gagner de la place */
    .deco-branche {
        display: none !important;
    }
    
    /* 2. L'ENTÊTE (Header) */
    /* On réduit la hauteur car 33vh c'est trop grand sur mobile */
    .main-header {
        height: 20vh;
    }

    /* 3. LE MENU (Navigation) */
    /* On passe de horizontal à vertical */
    .main-nav ul {
        flex-direction: column;
        padding: 0;
    }
    .main-nav li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }
    .main-nav a {
        padding: 10px; /* Moins épais */
        font-size: 1em;
    }

    /* 4. LA VITRINE */
    .showcase {
        padding: 20px 10px; /* Marges réduites */
    }
    .gallery-grid {
        /* On force 1 colonne ou 2 petites colonnes selon le goût */
        grid-template-columns: 1fr; /* 1 seule colonne (grosse image) */
    }

    /* 5. LES MODALES (Panier, Connexion, Profil) - VERSION CORRIGÉE */
    .modal {
        position: fixed;       /* Reste fixe */
        width: 85% !important; /* Un peu moins large pour voir les bords */
        
        /* Technique pro pour centrer parfaitement : */
        left: 50% !important;  
        transform: translateX(-50%); 
        
        top: 80px !important;  /* On laisse de l'espace en haut (on voit le header) */
        max-height: 70vh;      /* Hauteur max : 70% de l'écran (pour ne pas toucher le bas) */
        
        overflow-y: auto;      /* Scroll intérieur si la liste est longue */
        border-radius: 12px;   /* Bords bien arrondis */
        box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Grosse ombre pour le relief */
        z-index: 10001;        /* Au-dessus de tout, même du bandeau promo */

    }

    
    /* Le bouton panier flottant - VERSION DISCRÈTE */
    #cart-btn {
        /* On annule la position ordinateur (souvent en haut) */
        top: auto !important;
        left: auto !important;
        
        /* On le place en bas à droite (Zone du pouce) */
        bottom: 20px !important; 
        right: 20px !important;
        
        /* On le rend compact */
        width: auto !important;       /* Il prend juste la taille du texte */
        padding: 10px 20px !important; /* Marges internes réduites */
        font-size: 0.9em !important;   /* Texte un peu plus petit */
        
        /* Style visuel */
        border-radius: 50px !important; /* Forme de pilule bien ronde */
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; /* Ombre pour qu'il flotte */
        z-index: 10000; /* Toujours visible */
    }
    
    /* 6. PAGE OBJET PERSO */
    .custom-header h1 { font-size: 1.5em; }
    .sub-nav-container { gap: 5px; padding: 10px; }
    .sub-nav-btn { 
        font-size: 0.8em; 
        padding: 8px 12px;
        flex: 1 1 40%; /* 2 boutons par ligne */
        text-align: center;
    }
    /* On cache le logo fixe pour laisser la place au panier */
    .fixed-logo {
        display: none !important;
    }
    
    /* 7. POLICE D'ÉCRITURE */
    /* Papyrus n'existe pas sur Android/iOS. On met une police de secours lisible */
    body {
        font-family: 'Times New Roman', serif; 
        /* Ou importe une Google Font si tu veux mieux */
    }
}

/* --- PIED DE PAGE (FOOTER) --- */
.main-footer {
    background-color: #5a4a42; /* Marron foncé */
    color: #f4e1d2;            /* Couleur sable/papier */
    padding: 20px 0;
    margin-top: 40px;          /* Espace avec le contenu */
    text-align: center;
    border-top: 4px solid #8b7355;
}

.footer-content p {
    margin: 0 0 10px 0;
    font-size: 0.9em;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* Espace entre les liens */
    flex-wrap: wrap;
}

.footer-links li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.85em;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links li a:hover {
    opacity: 1;
    text-decoration: underline;
}
/* --- CORRECTIF MONDIAL RELAY --- */
#Zone_Widget {
    width: 100%;
    height: 500px; /* Hauteur fixe nécessaire pour la carte */
    margin-top: 150px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    display: block; /* S'assure qu'il n'est pas caché par défaut */
}

/* =========================================
   GESTION DES MODALES (PANIER & CONNEXION)
   ========================================= */

/* 1. LE CADRE GÉNÉRAL (CENTRAGE) */
.modal {
    display: none; 
    position: fixed; 
    
    /* TECHNIQUE DU CENTRAGE ABSOLU */
    top: 100px;
    left: 50%;
    transform: translate(-50%); /* Centre le point milieu de la fenêtre */
    
    background: white; 
    border: 2px solid #333; 
    padding: 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Ombre marquée */
    border-radius: 8px;
    
    /* Gestion du scroll si l'écran est petit en hauteur */
    max-height: 95vh; 
    overflow-y: auto;
}

/* 2. TAILLE SPÉCIFIQUE DU PANIER (ID: #cart-modal) */
#cart-modal { 
    /* On force 600px pour que la carte Mondial Relay soit à l'aise */
    width: 800px; 
    
    /* Sécurité : ne jamais dépasser la largeur de l'écran */
    max-width: 95%; 
    z-index: 1000; 
}

/* 3. TAILLE SPÉCIFIQUE DE LA CONNEXION */
#auth-modal { 
    width: 400px; 
    max-width: 95%;
    z-index: 2000; 
}

/* --- STRUCTURE DE L'ESPACE CLIENT --- */
#profile-modal {
    display: none; 
    position: fixed; 
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Fond assombri */
}

#profile-modal .modal-content {
    background-color: #fff;
    position: absolute;
    top: 50px; /* On le remonte un peu (de 100px à 50px) pour gagner de la place */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    
    /* --- AJOUTS POUR LE BAS MASQUÉ --- */
    max-height: 85vh;    /* Hauteur max : 85% de l'écran */
    overflow-y: auto;    /* Active le scroll vertical si besoin */
    margin-bottom: 20px; /* Espace de sécurité en bas */
}

/* --- ÉLÉMENTS INTERNES --- */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}

.profile-form .row {
    display: flex;
    gap: 10px;
}

.btn-logout {
    width: 100%;
    background: #cc0000;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.close-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}