/* =========================================
   1. GLOBAL & FONDS (L'antidote Mobile Safari/Chrome)
   ========================================= */

@font-face {
    font-family: "Diduell";
    src: url('polices/Super\ Wonder.ttf')
}
@font-face {
    font-family: "poch";
    src: url("polices/Stadium1951-Regular.otf");
}

/* 1. L'astuce pour forcer les mobiles à lire la vraie hauteur */
html {
    height: -webkit-fill-available;
}

body {
    margin: 0; 
    font-family: "Diduell", Arial, sans-serif;
    
    display: flex; 
    flex-direction: column; 
    
    /* 2. On utilise la hauteur classique, ET la hauteur corrigée pour mobile */
    min-height: 100vh; 
    min-height: -webkit-fill-available; 
    
    overflow-x: hidden;
}

.main-bg, .fixed-bg {
    background-image: url("images/background.png");
    background-repeat: repeat; 
    background-size: 120px;
}

/* 3. On autorise les contenus principaux à s'étirer */
main, .product-page, #cart-container, #empty-cart-msg { 
    flex: 1 0 auto; 
}

/* 4. Le footer absorbe tout le vide pour se clouer en bas */
.footer {
    margin-top: auto !important;
    flex-shrink: 0;
    width: 100%;
}


/* =========================================
   2. HEADER (Empilement sécurisé)
   ========================================= */
.header {
    background: #FFD700; width: 100%; display: flex; align-items: center;
    justify-content: space-between; box-sizing: border-box; padding: 0 20px;
    position: relative; z-index: 100; /* Plane au-dessus du fond */
}

.header-poch {
    background: #3a3a3a; width: 100%; display: flex; align-items: center;
    justify-content: space-between; box-sizing: border-box; padding: 0 20px;
    position: relative; z-index: 100; /* Plane au-dessus du fond */
}

.logo { height: 60px; cursor: pointer;}
.menu-icon { cursor: pointer; font-size: 24px; }
.side-menu {
    position: fixed; left: -250px; top: 0; width: 250px; height: 100%;
    background: white; transition: 0.3s; padding: 20px; z-index: 3000; box-sizing: border-box;
}
.side-menu.active { left: 0; }
.side-menu a { display: block; margin: 15px 0; text-decoration: none; color: black; font-size: 18px; }
.close-btn { cursor: pointer; text-align: right; font-size: 24px; font-weight: bold; }
.side-menu-search { display: none; } /* masqué par défaut (desktop) */
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 2500; }
#overlay.active { display: block; }

/* =========================================
   3. RECHERCHE & SUGGESTIONS
   ========================================= */
.search-container { display: flex; align-items: center; position: relative; }
.search-icon { height: 40px; cursor: pointer; }
.search-bar { 
    height: 38px; width: 220px; border: none; outline: none; padding-left: 15px; 
    background: url("images/search-bar.png") no-repeat center; 
    background-size: 100% 100%; 
    background-color: transparent; /* Rend le style de l'image natif */
}
.search-suggestions-box {
    position: absolute; top: 100%; left: 0; width: 100%; background: white;
    border-radius: 0 0 5px 5px; z-index: 9999; max-height: 300px; overflow-y: auto;
    display: none; /* Cache la barre grise par défaut */
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}
.search-suggestions-box div { display: flex; align-items: center; padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; }
.search-suggestions-box div:hover { background-color: #f0f0f0; }
.suggestion-img { width: 40px; height: 40px; object-fit: cover; margin-right: 15px; border-radius: 5px; }

/* =========================================
   4. PANIER (Bulle & Zone étendue)
   ========================================= */
.cart-icon-container { 
    position: relative; 
    padding: 10px 40px 10px 10px; /* Agrandit fortement la zone cliquable vers la droite */
    cursor: pointer; display: flex; align-items: center; 
}
.cart-icon { font-size: 26px; }
.cart-bubble { position: absolute; top: 0px; right: 25px; background: #ff4d4d; color: white; font-size: 11px; padding: 3px 6px; border-radius: 50%; min-width: 16px; text-align: center; font-weight: bold; }
.cart-animate { animation: cartBounce 0.4s ease; }
@keyframes cartBounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* =========================================
   5. LISTE PRODUITS (Accueil)
   ========================================= */
.products { display: flex; justify-content: center; padding: 40px; }
.product {
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    border-radius: 8px; transition: 0.2s;
    cursor: pointer; width: 600px;
    background: rgba(69, 69, 69, 0.6); 
    padding: 25px; border-radius: 15px;
    border: 5px solid rgba(195, 195, 195, 0.1);
}
.product:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: rgba(169, 169, 169, 0.8); padding: 40px; border-radius: 25px; border: 5px solid rgba(195, 195, 195, 1); }
.product img { width: 120px; height: 160px; object-fit: contain; }
.product-info { flex: 1; }
.price { font-weight: bold; font-size: 18px; }
.no-results { display: none; text-align: center; margin-top: 40px; background-color: #d3cdab; padding: 20px; border-radius: 8px; }

/* =========================================
   6. QUANTITÉ (Rapprochement des boutons)
   ========================================= */
.quantity { display: flex; align-items: center; gap: 5px; /* Réduit l'espacement */ }
.center-qty { justify-content: center; margin-top: 15px; }
.qty-btn { width: 30px !important; height: 30px !important; cursor: pointer; transition: transform 0.1s; }
.qty-btn:active { transform: scale(0.9); }
.qty-number {
    width: 35px; /* Boîte de saisie plus petite */
    font-size: 16px; font-weight: bold; text-align: center;
    border: 1px solid #ccc; border-radius: 5px; padding: 5px;
    appearance: textfield;
    -moz-appearance: textfield; 
}
.qty-number::-webkit-outer-spin-button, .qty-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Jeu en rupture de stock : masque "Ajouter au panier", les boutons + et - et la quantité
   (classe ajoutée par script.js et par index.php / product.php) */
.stock-hidden { display: none !important; }

/* =========================================
   7. PAGE PRODUIT ( PLEIN ÉCRAN ET HEADER SPÉCIFIQUE)
   ========================================= */

/* --- LE THÈME DE LA PAGE (Fond totalement noir/gris très foncé) --- */
.product-theme {
    background-color: #303030; 
    font-family: "poch";
    background-repeat: repeat; 
    background-size: 120px;
}

/* --- LE HEADER SPÉCIFIQUE (Uniquement sur la page poch) --- */
.product-theme .header {
    background: #cdcdcd;
}

.product-theme .footer{
    background: #cdcdcd;
}

.product-theme .footer-column a {
    color: #ececec;
}

.product-theme .footer-column h3 {
    color :#2f2f2fc8;
}

/* Changer la couleur du menu */
.product-theme .menu-icon, .product-theme .cart-icon { color: #161616; }
.product-theme .logo { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); }

/* --- LA PAGE PRODUIT FULL-WIDTH ---*/
.product-page {
    display: flex; gap: 50px; 
    width: 100%; /* Prend 100% de la largeur de l'écran */
    max-width: none; /* Annule la limite de largeur lors du dézoom */
    margin: 0; /* Supprime les marges extérieures */
    padding: 70px 60px; /* Garde l'espace intérieur pour le contenu */
    box-sizing: border-box;
    position: relative; /* Indispensable pour les murs du cadre */
    min-height: calc(100vh - 60px); /* Pousse jusqu'en bas de l'écran */
}

.frame-top, .frame-bottom {
    position: absolute; left: 0; right: 0;
    height: 40px; z-index: 5;
    background-size: 40px 40px; 
    background-repeat: round; 
}

.frame-top { top: 20px; background-image: url('images/couture.png'); }
.frame-bottom { bottom: 0; background-image: url('images/couture.png'); }

/* --- LES COLONNES PC --- */
.left-column { width: 45%; display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 10; }
.right-column { width: 55%; display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 10; }


.product-title { margin: 0; font-size: 42px; font-weight: bold; color: rgb(255, 0, 255); }
.price { font-size: 28px; font-weight: bold; color: rgb(255, 255, 255); }

.neon-box, .purchase-box {
    box-shadow: 4px 4px #000000;
    background: rgba(69, 69, 69, 0.6); 
    padding: 25px; border-radius: 15px;
    color: #FFFFFF;
    border: 5px solid rgba(195, 195, 195, 0.1);
}
.neon-box h3 {
    margin-top: 0; padding-bottom: 1px; display: inline-block; 
    color: #FFFF00;
}
.neon-box h2 {
    margin-top: 0; padding-bottom: 5px; display: inline-block; 
    color: #FFFF00;
}
.neon-box strong { color: #FFFF00; }
.purchase-box { text-align: center; }

/* Galerie (inchangée) */
.gallery-wrapper { display: flex; gap: 20px; }
.thumbnails { display: flex; flex-direction: column; gap: 10px; }
.thumb { width: 60px; height: 60px; object-fit: cover; border: 2px solid transparent; border-radius: 5px; cursor: pointer; background: white; }
.thumb.active { border-color: #FFD700; }
.main-image-container img { width: 300px; height: 400px; object-fit: contain; }
.video-placeholder { width: 100%; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.5); box-shadow: 4px 4px; }
.main-image-container { touch-action: pan-y; }
 
/*Pictogrammes*/
.pictogrammes {width:25px ; height:auto; }

/* =========================================
   8. PAGE PANIER & PROMO
   ========================================= */
.cart-list { padding: 20px; max-width: 800px; margin: 0 auto; background: white; border-radius: 15px;}
.cart-item { display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 15px 20px; }
.empty-cart-message { text-align: center; margin-top: 50px; font-size: 18px; }

.promo-container { display: flex; gap: 10px; margin-top: 20px; }
.promo-container input { padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; }
.promo-container button { background: #555; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
.promo-container button:hover { background: #333; }

.cart-bottom { display: flex; justify-content: flex-end; align-items: center; gap: 30px; padding: 20px; max-width: 800px; margin: 0 auto;}
.order-button { background: #2ecc71; border: none; padding: 12px 20px; color: white; font-size: 16px; border-radius: 8px; cursor: pointer; }
.order-button:hover { background: #27ae60; }

/* =========================================
   9. FOOTER
   ========================================= */
.footer {
    background: black; 
    color: white; 
    width: 100%; 
    padding: 40px 20px; 
    box-sizing: border-box;
    
    /* Le secret pour qu'il soit poussé tout en bas */
    margin-top: auto; 
    flex-shrink: 0; 
    
    position: relative; 
    z-index: 100; /* S'assure qu'il passe au-dessus des fonds et cadres */
}


.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
}

.footer-column {
    flex: 1;
    min-width: 250px; /* Évite que les colonnes soient trop étroites */
}

.footer-column h3 {
    color: #FFD700; /* Rappel du jaune doré du header */
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column a {
    color: #cccccc;
    text-decoration: none;
    display: block;
    margin: 10px 0;
    font-size: 14px;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-column a:hover {
    color: white;
    text-decoration: underline;
    padding-left: 2px; /* Léger effet dynamique au survol */
}

/* --- ADAPTATION MOBILE --- */
@media screen and (max-width:767px) {
    .footer-container {
        flex-direction: column;
        gap: 30px;
        text-align: center; /* Centre le texte sur écran de téléphone */
    }
    
}
#notification { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    background: #2ecc71; 
    color: white; 
    padding: 12px 18px; 
    border-radius: 10px; 
    z-index: 9999; 
    opacity: 0; 
    transition: 0.3s; 
    pointer-events: none; /* LA MAGIE EST ICI : Laisse passer les clics au travers ! */
}
/* =========================================
   10. RESPONSIVE MOBILE (Écrans < 768px)
   ========================================= */

@media screen and (max-width:767px) {
    .header { gap: 15px; padding: 15px; height:70px;}
    .header .search-container, .header-poch .search-container { display: none; }
    .cart-bubble { right: 0; }
    .product { flex-direction: column; width: 100%; text-align: center; }
    .product-info { width: 100%; }
    .quantity { justify-content: center; }

    /* --- RECADRAGE MOBILE --- */
    .product-page {
        padding: 35px 20px; gap: 20px;
        display: flex; flex-direction: column; /* Force l'affichage en une seule colonne */
    }

    /* On réduit la taille des carrés de bordure sur mobile (ex: 20px au lieu de 40px) */
    .frame-top, .frame-bottom { height: 20px; background-size: 20px 20px; }
    .frame-left, .frame-right { width: 20px; top: 20px; bottom: 20px; background-size: 20px 20px; }

    /* ASTUCE : Permet de mélanger les blocs de gauche et droite uniquement sur mobile */
    .left-column, .right-column { display: contents; }

    /* L'ORDRE EXACT DU MOBILE : Titre > Images > Vidéo > Achat > Règles > Description */
    .mobile-order-1 { order: 1; width: 100%; }
    .mobile-order-2 { order: 2; width: 80%; }
    .mobile-order-3 { order: 3; width: 100%; height: 200px; }
    .mobile-order-4 { order: 4; width: 80%; }
    .mobile-order-5 { order: 5; width: 80%; }
    .mobile-order-6 { order: 6; width: 80%; }

    /* Centrage de la galerie sur mobile */
    .gallery-wrapper { flex-direction: column-reverse; }
    .thumbnails { flex-direction: row; justify-content: center; width: 100%; }
    .main-image-container img { align-items:center ; width: 70%; height: auto; max-width: 320px;}
    .cart-bottom { flex-direction: column; text-align: center; gap: 15px; }
    .promo-container { flex-direction: column; width: 100%; }
    
    .mondial-relay-container{
        max-width:100%;
        box-sizing: border-box;
    }
    /* Barre de recherche visible uniquement dans le menu latéral */
    .side-menu-search {
        display: flex;
        align-items: center;
        gap: 0;               /* loupe et barre grise collées, comme sur ordinateur */
        margin: 20px 0 25px;
        position: relative;
    }
    .side-menu-search .search-bar { flex: 1; min-width: 0; width: auto; box-sizing: border-box; }
    .side-menu-search .search-icon { width: 40px; flex-shrink: 0; }
}
/* =========================================
   11. FORMULAIRE DE LIVRAISON
   ========================================= */
.checkout-form { 
    background: white; padding: 20px; border-radius: 15px; 
    margin: 20px auto; max-width: 800px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    display: none; /* Caché si le panier est vide */
}
.checkout-form h3 { margin-top: 0; border-bottom: 2px solid #FFD700; padding-bottom: 5px; display: inline-block; }
.checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form textarea {
    width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; 
    border-radius: 8px; box-sizing: border-box; font-family: Arial, sans-serif; font-size: 14px;
}
.checkout-form textarea { resize: vertical; min-height: 80px; }
.cgv-checkbox { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 14px; }
.cgv-checkbox input { margin: 0; cursor: pointer; width: 18px; height: 18px; }
.cgv-checkbox a { color: #2ecc71; text-decoration: none; font-weight: bold; }
.cgv-checkbox a:hover { text-decoration: underline; 
}

/* --- BOUTON AJOUTER AU PANIER --- */
.add-to-cart-btn {
    background-color: #FFD700;
    color: rgb(0, 55, 255);
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    font-family: "Diduell";
    transition: background-color 0.2s, transform 0.1s;
    text-transform: uppercase;
}
.add-to-cart-btn:hover { background-color: #ceaf00; }
.add-to-cart-btn:active { transform: scale(0.95); }

/* --- GALERIE D'IMAGES ET FLÈCHES --- */
.main-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 8px;
    z-index: 10;
    transition: background 0.2s;
}

.gallery-arrow:hover { background: #FF1493; /* Rose fluo au survol */ }
.prev-arrow { left: 10px; }
.next-arrow { right: 10px; }

/* =========================================
   12. SECTION AVIS CLIENTS
   ========================================= */
.reviews-section { margin-top: 20px; }
.reviews-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 25px; text-align: center; }
.average-rating { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 32px; color: #FFD700; font-weight: bold; }

/* La magie des demi-étoiles en CSS */
.stars-display {
    display: inline-block;
    font-size: 26px;
    font-family: Arial, sans-serif;
    line-height: 1;
}
.stars-display::before {
    content: '★★★★★';
    letter-spacing: 3px;
    /* Remplit l'étoile de couleur or selon le pourcentage, le reste en gris */
    background: linear-gradient(90deg, #FFD700 calc(var(--rating) / 5 * 100%), #555 calc(var(--rating) / 5 * 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.review-count { font-size: 16px; color: #aaa; font-weight: normal; font-family: Arial, sans-serif; }

/* Formulaire */
.review-form-container { background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.review-form-container input, .review-form-container textarea { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #555; background: #222; color: white; font-family: Arial, sans-serif; box-sizing: border-box;}
.star-rating-input { font-size: 35px; color: #555; cursor: pointer; text-align: center; user-select: none; }
.star-rating-input .star-input.active { color: #FFD700; }
/* Permet de gérer la coloration au pourcentage sur le texte */
.star-rating-input .star-input { 
    display: inline-block; 
}

/* Design de la demi-étoile */
.star-rating-input .star-input.half-active {
    background: linear-gradient(90deg, #FFD700 50%, #555 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Les cartes d'avis */
.reviews-list { display: flex; flex-direction: column; gap: 15px; font-family: Arial, sans-serif; }
.review-card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; border-left: 3px solid #00FFFF; }
.review-author { font-weight: bold; color: #00FFFF; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.review-date { font-size: 12px; color: #888; font-weight: normal; }
.review-text { font-size: 14px; color: #ddd; line-height: 1.5; margin: 0; font-style: italic; }
.review-card .stars-display { font-size: 16px; }

/* Bouton voir tout */
.see-all-btn { background: transparent; color: #FFD700; border: 1px solid #FFD700; padding: 10px; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 15px; transition: 0.2s; text-transform: uppercase; font-family: "Diduell"; letter-spacing: 1px; }
.see-all-btn:hover { background: #FFD700; color: black; }

/* =========================================
   13. CUSTOMISATION MONDIAL RELAY (Diduell Style)
   ========================================= */
.mondial-relay-container {
    border: 2px solid;
    border-radius: 12px;
}
#relais-selectionne {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    font-size: 16px;
    font-family: 'Super Wonder', sans-serif;
}