/* ========================================================= */
/* STYLE.CSS - LE SMASHÉ (Cinzel Logo)     */
/* --------------------------------------------------------- */
/* Intégration de la police Cinzel pour le logo nav-logo */
/* ========================================================= */

/* --- 1. Variables et Réinitialisation de base (Le Fondement) --- */
:root {
    /* Palettes de couleurs inspirées du luxe : Noir, Blanc cassé, Or */
    --color-primary: #111111;      /* Noir Profond */
    --color-secondary: #fbfbfb;    /* Blanc Crème */
    --color-accent: #C39955;       /* Or Mat */
    --color-text-light: #eeeeee;
    --color-text-dark: #333333;

    /* Typographie Élégante */
    --font-logo: 'Cinzel', serif;          /* NOUVEAU : Pour le logo, style Géométrique/Luxueux */
    --font-serif: 'Playfair Display', serif; /* Titres : Élégance et sophistication */
    --font-sans: 'Roboto', sans-serif;      /* Corps : Lisibilité et modernité */
    --header-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--color-primary);
    background-color: var(--color-secondary);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: color 0.3s, opacity 0.3s; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }

section { padding: 6em 5%; max-width: 1400px; margin: 0 auto; }

.section-title {
    font-size: 3em;
    text-align: center;
    margin-bottom: 0.2em;
    padding-top: 0.5em;
}
.section-subtitle {
    text-align: center;
    font-size: 1.1em;
    font-style: italic;
    color: var(--color-text-dark);
    margin-bottom: 3em;
}

/* --- 2. Header et Navigation (Logo Cinzel Appliqué) --- */

.main-header {
    background-color: transparent;
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s, box-shadow 0.4s;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.main-header.scrolled {
    background-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 5%;
}

.nav-logo { 
    /* NOUVEAU STYLE POUR LE LOGO */
    font-family: var(--font-logo); /* Utilisation de Cinzel */
    font-size: 2.2em; 
    font-weight: 700;
    letter-spacing: 4px; /* Grand espacement pour l'effet luxe */
    color: var(--color-text-light); 
}

.nav-links { list-style: none; display: flex; }

.nav-links li { margin-left: 35px; }

.nav-links a {
    color: var(--color-text-light);
    font-size: 0.9em;
    letter-spacing: 1px;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    transition: width 0.3s ease-out;
}

.nav-links a:hover::after { width: 100%; }

/* --- 3. Section Héro (Identique) --- */

.hero-section {
    background: url('images/hero_acceuil.jpg') no-repeat center center/cover; 
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); 
}

.hero-content {
    z-index: 1;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 5em;
    margin-bottom: 0.1em;
    font-weight: 700;
    letter-spacing: 8px;
}

.hero-content h2 {
    font-size: 1.8em;
    margin-bottom: 2em;
    font-weight: 300;
    letter-spacing: 4px;
    opacity: 0.8;
}

.btn-cta {
    display: inline-block;
    padding: 18px 40px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-cta:hover { background-color: #d4b079; transform: translateY(-2px); }

/* --- 4. Section : Nos Signatures (Identique) --- */

.signatures-section {
    border-top: 1px solid #ddd;
    text-align: center;
}

.signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.signature-item {
    text-align: center;
    padding: 20px;
    transition: box-shadow 0.3s;
    border: 1px solid #eee; 
}
.signature-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.signature-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
}

.signature-item .item-title {
    font-family: var(--font-serif);
    font-size: 1.8em;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: none; 
}

.signature-item .item-description {
    font-size: 0.95em;
    color: var(--color-text-dark);
    margin-bottom: 15px;
    height: 3.5em; 
    overflow: hidden;
}

.signature-item .item-price {
    font-family: var(--font-serif);
    font-size: 1.6em;
    color: var(--color-accent);
    font-weight: 700;
    display: block;
    margin-top: 10px;
}

.full-menu-cta {
    margin-top: 4em;
}
.btn-cta-small {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s;
}
.btn-cta-small:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

/* --- 5. Section : Histoire (Biographie) (Identique) --- */

.history-section {
    background-color: var(--color-secondary); 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.history-content {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.chef-photo {
    flex: 0 0 350px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
}

.chef-img {
    width: 100%;
    height: auto;
    display: block;
}

.bio-text {
    flex-grow: 1;
    max-width: 600px;
}

.bio-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.bio-text p {
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.8;
}

.quote {
    font-family: var(--font-serif);
    font-size: 1.4em;
    color: var(--color-accent);
    font-style: italic;
    margin-top: 30px;
    padding-left: 10px;
    border-left: 2px solid var(--color-accent);
}


/* --- 6. Section Emplacement (Identique) --- */
.location-section {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-align: center;
    padding: 5em 5%;
}

.location-section .section-title { color: var(--color-text-light); }

.location-text {
    max-width: 900px;
    margin: 0 auto 40px;
    font-size: 1.2em;
    font-weight: 300;
}

.location-details {
    padding: 30px;
    border: 2px solid var(--color-accent);
    display: inline-block;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    min-width: 400px;
    font-size: 1.1em;
}

/* --- 7. Footer (Bas de Page Légal et Complexe) --- */

.main-footer {
    /* Fond Noir pour un contraste élégant */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 4em 5%;
    border-top: 1px solid var(--color-accent); /* Ligne d'accentuation Or */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* 3 colonnes: Logo large, Liens moyens, Contact moyen */
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
    text-align: left;
}

.footer-col h4 {
    font-family: var(--font-serif);
    font-size: 1.2em;
    margin-bottom: 20px;
    color: var(--color-accent); /* Titres en Or */
    letter-spacing: 1.5px;
}

.footer-branding .footer-logo {
    font-family: var(--font-logo);
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 15px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links a {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--color-text-light);
    opacity: 0.8;
}

.footer-links a:hover {
    color: var(--color-accent);
    opacity: 1;
}

.footer-contact p {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.footer-contact .footer-mail {
    color: var(--color-accent);
    text-decoration: underline;
}

.copyright-text {
    font-size: 0.8em;
    opacity: 0.5;
    margin-top: 20px;
}

/* --- 7. Footer (Bas de Page Légal et Complexe) --- */

.main-footer {
    /* Fond Noir pour un contraste élégant */
        background-color: var(--color-primary);
            color: var(--color-text-light);
                padding: 4em 5%;
                    border-top: 1px solid var(--color-accent); /* Ligne d'accentuation Or */
                    }
                    /* ... (Les styles du footer existants) ... */

                    /* ========================================================= */
                    /* --- 7.5. Styles de la Page Contact --- */
                    /* ========================================================= */

                    .page-hero-contact {
                        /* Fond minimal pour les pages secondaires */
                            background-color: var(--color-primary);
                                color: var(--color-text-light);
                                    height: 30vh; /* Moins haut que la page d'accueil */
                                        display: flex;
                                            justify-content: center;
                                                align-items: center;
                                                    text-align: center;
                                                        padding-top: var(--header-height); /* Dégage l'espace sous le header */
                                                        }

                                                        .page-hero-content h1 {
                                                            font-size: 3.5em;
                                                                font-weight: 700;
                                                                    letter-spacing: 6px;
                                                                        margin: 0;
                                                                        }

                                                                        .contact-grid-section {
                                                                            background-color: var(--color-secondary);
                                                                                padding: 6em 5%;
                                                                                }

                                                                                .contact-container {
                                                                                    display: flex;
                                                                                        gap: 80px;
                                                                                            max-width: 1200px;
                                                                                                margin: 0 auto;
                                                                                                    align-items: flex-start;
                                                                                                    }

                                                                                                    .contact-form-wrapper, .contact-details-wrapper {
                                                                                                        flex: 1;
                                                                                                        }

                                                                                                        .form-title, .details-title {
                                                                                                            font-size: 2.2em;
                                                                                                                margin-bottom: 10px;
                                                                                                                    color: var(--color-primary);
                                                                                                                        font-weight: 700;
                                                                                                                        }

                                                                                                                        .form-subtitle {
                                                                                                                            font-style: italic;
                                                                                                                                color: var(--color-text-dark);
                                                                                                                                    margin-bottom: 30px;
                                                                                                                                    }

                                                                                                                                    /* Style du Formulaire */
                                                                                                                                    .contact-form input[type="text"],
                                                                                                                                    .contact-form input[type="email"],
                                                                                                                                    .contact-form input[type="tel"],
                                                                                                                                    .contact-form select,
                                                                                                                                    .contact-form textarea {
                                                                                                                                        width: 100%;
                                                                                                                                            padding: 15px;
                                                                                                                                                margin-bottom: 20px;
                                                                                                                                                    border: 1px solid #ccc;
                                                                                                                                                        background-color: #ffffff;
                                                                                                                                                            font-family: var(--font-sans);
                                                                                                                                                                font-size: 1em;
                                                                                                                                                                    transition: border-color 0.3s;
                                                                                                                                                                    }

                                                                                                                                                                    .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
                                                                                                                                                                        border-color: var(--color-accent);
                                                                                                                                                                            outline: none;
                                                                                                                                                                            }

                                                                                                                                                                            .contact-form .btn-cta {
                                                                                                                                                                                width: 100%;
                                                                                                                                                                                    text-align: center;
                                                                                                                                                                                        margin-top: 10px;
                                                                                                                                                                                        }

                                                                                                                                                                                        /* Style des Cartes de Contact */
                                                                                                                                                                                        .contact-card {
                                                                                                                                                                                            background-color: #ffffff;
                                                                                                                                                                                                padding: 25px;
                                                                                                                                                                                                    margin-bottom: 25px;
                                                                                                                                                                                                        border-left: 3px solid var(--color-accent);
                                                                                                                                                                                                            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                                                                                                                                                                                                            }

                                                                                                                                                                                                            .contact-card .card-title {
                                                                                                                                                                                                                font-family: var(--font-serif);
                                                                                                                                                                                                                    font-size: 1.4em;
                                                                                                                                                                                                                        margin-bottom: 5px;
                                                                                                                                                                                                                            color: var(--color-primary);
                                                                                                                                                                                                                            }

                                                                                                                                                                                                                            .contact-card .card-content {
                                                                                                                                                                                                                                font-size: 0.9em;
                                                                                                                                                                                                                                    color: var(--color-text-dark);
                                                                                                                                                                                                                                        margin-bottom: 10px;
                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                        .contact-card .card-data {
                                                                                                                                                                                                                                            font-size: 1.2em;
                                                                                                                                                                                                                                                color: var(--color-accent);
                                                                                                                                                                                                                                                    margin: 5px 0;
                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                    .contact-card .card-note {
                                                                                                                                                                                                                                                        font-size: 0.8em;
                                                                                                                                                                                                                                                            opacity: 0.7;
                                                                                                                                                                                                                                                                margin-top: 10px;
                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                .map-placeholder {
                                                                                                                                                                                                                                                                    height: 200px;
                                                                                                                                                                                                                                                                        background-color: #eee;
                                                                                                                                                                                                                                                                            display: flex;
                                                                                                                                                                                                                                                                                align-items: center;
                                                                                                                                                                                                                                                                                    justify-content: center;
                                                                                                                                                                                                                                                                                        color: var(--color-text-dark);
                                                                                                                                                                                                                                                                                            font-style: italic;
                                                                                                                                                                                                                                                                                                border: 1px solid #ccc;
                                                                                                                                                                                                                                                                                                    margin-top: 20px;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    /* ========================================================= */
                                                                                                                                                                                                                                                                                                    /* --- 7.6. Styles de la Page Livraison (NOUVEAU) --- */
                                                                                                                                                                                                                                                                                                    /* ========================================================= */

                                                                                                                                                                                                                                                                                                    .page-hero-livraison {
                                                                                                                                                                                                                                                                                                        /* Mêmes styles que page-hero-contact, pour rester cohérent */
                                                                                                                                                                                                                                                                                                            background-color: var(--color-primary); 
                                                                                                                                                                                                                                                                                                                color: var(--color-text-light);
                                                                                                                                                                                                                                                                                                                    height: 30vh;
                                                                                                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                                                                                                            justify-content: center;
                                                                                                                                                                                                                                                                                                                                align-items: center;
                                                                                                                                                                                                                                                                                                                                    text-align: center;
                                                                                                                                                                                                                                                                                                                                        padding-top: var(--header-height);
                                                                                                                                                                                                                                                                                                                                            position: relative;
                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                            .page-hero-livraison h2 {
                                                                                                                                                                                                                                                                                                                                                font-size: 1.2em;
                                                                                                                                                                                                                                                                                                                                                    font-weight: 300;
                                                                                                                                                                                                                                                                                                                                                        opacity: 0.8;
                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                        .delivery-details-section {
                                                                                                                                                                                                                                                                                                                                                            padding: 6em 5%;
                                                                                                                                                                                                                                                                                                                                                                background-color: var(--color-secondary);
                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                .delivery-grid {
                                                                                                                                                                                                                                                                                                                                                                    display: flex;
                                                                                                                                                                                                                                                                                                                                                                        gap: 80px;
                                                                                                                                                                                                                                                                                                                                                                            max-width: 1200px;
                                                                                                                                                                                                                                                                                                                                                                                margin: 0 auto;
                                                                                                                                                                                                                                                                                                                                                                                    align-items: flex-start; /* Alignement en haut pour le contenu long */
                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                    .delivery-map-wrapper, .delivery-info-wrapper {
                                                                                                                                                                                                                                                                                                                                                                                        flex: 1;
                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                        .section-title-small {
                                                                                                                                                                                                                                                                                                                                                                                            font-family: var(--font-serif);
                                                                                                                                                                                                                                                                                                                                                                                                font-size: 2em;
                                                                                                                                                                                                                                                                                                                                                                                                    margin-bottom: 20px;
                                                                                                                                                                                                                                                                                                                                                                                                        letter-spacing: 1px;
                                                                                                                                                                                                                                                                                                                                                                                                            font-weight: 700;
                                                                                                                                                                                                                                                                                                                                                                                                                text-transform: uppercase;
                                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                                                .delivery-intro {
                                                                                                                                                                                                                                                                                                                                                                                                                    font-size: 1.1em;
                                                                                                                                                                                                                                                                                                                                                                                                                        margin-bottom: 30px;
                                                                                                                                                                                                                                                                                                                                                                                                                            line-height: 1.8;
                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                            /* Carte de Zone (L'encadré Or autour de l'image) */
                                                                                                                                                                                                                                                                                                                                                                                                                            .map-zone-image {
                                                                                                                                                                                                                                                                                                                                                                                                                                width: 100%;
                                                                                                                                                                                                                                                                                                                                                                                                                                    margin-bottom: 20px;
                                                                                                                                                                                                                                                                                                                                                                                                                                        border: 3px solid var(--color-accent); /* Encadrement Or */
                                                                                                                                                                                                                                                                                                                                                                                                                                            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                            .delivery-zone-img {
                                                                                                                                                                                                                                                                                                                                                                                                                                                width: 100%;
                                                                                                                                                                                                                                                                                                                                                                                                                                                    height: auto;
                                                                                                                                                                                                                                                                                                                                                                                                                                                        display: block;
                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                        .note-zone {
                                                                                                                                                                                                                                                                                                                                                                                                                                                            font-style: italic;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                font-size: 0.9em;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    color: var(--color-text-dark);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /* Cartes d'Information (Détails Encadrés) */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .delivery-card-info {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        background-color: var(--color-secondary);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            padding: 25px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                margin-bottom: 20px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    border: 1px solid #ddd;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        transition: all 0.3s;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            .delivery-card-info:hover {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                border-color: var(--color-accent);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .card-title-delivery {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        font-family: var(--font-serif);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            font-size: 1.5em;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                margin-bottom: 5px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    color: var(--color-accent);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        text-transform: none;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            letter-spacing: 0.5px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            .card-data-delivery {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                font-size: 1.3em;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    font-weight: 700;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        color: var(--color-primary);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            margin: 5px 0 10px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            .card-note-delivery {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                font-size: 0.9em;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    color: var(--color-text-dark);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .delivery-cta {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        display: block;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            text-align: center;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                margin-top: 30px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                /* --- Ajustement Responsive pour la page Livraison (à insérer dans le bloc @media existant) --- */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                /* Si vous avez déjà la section @media (max-width: 992px), ajoutez ces deux règles à l'intérieur : */

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                @media (max-width: 992px) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /* ... (règles précédentes) ... */

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        .delivery-grid {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                flex-direction: column;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        gap: 40px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .delivery-map-wrapper, .delivery-info-wrapper {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            width: 100%;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                


                                                                                                                                                                                                                                                                                                    /* --- 8. Responsive Design (Ajustements pour Contact) --- */
                                                                                                                                                                                                                                                                                                    @media (max-width: 992px) {
                                                                                                                                                                                                                                                                                                        /* ... (Règles existantes) ... */
                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                .contact-container {
                                                                                                                                                                                                                                                                                                                        flex-direction: column;
                                                                                                                                                                                                                                                                                                                                gap: 40px;
                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                        .contact-form-wrapper, .contact-details-wrapper {
                                                                                                                                                                                                                                                                                                                                                width: 100%;
                                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                    @media (max-width: 600px) {
                                                                                                                                                                                                                                                                                                                                                        /* ... (Règles existantes) ... */
                                                                                                                                                                                                                                                                                                                                                            .page-hero-content h1 { font-size: 2.5em; }
                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                            
                                                                                                             /* ========================================================= */
/* STYLE.CSS - LE SMASHÉ (Cinzel Logo)     */
/* --------------------------------------------------------- */
/* Intégration de la police Cinzel pour le logo nav-logo */
/* ========================================================= */

/* --- 1. Variables et Réinitialisation de base (Le Fondement) --- */
:root {
    /* Palettes de couleurs inspirées du luxe : Noir, Blanc cassé, Or */
    --color-primary: #111111;      /* Noir Profond */
    --color-secondary: #fbfbfb;    /* Blanc Crème */
    --color-accent: #C39955;       /* Or Mat */
    --color-text-light: #eeeeee;
    --color-text-dark: #333333;

    /* Typographie Élégante */
    --font-logo: 'Cinzel', serif;          /* NOUVEAU : Pour le logo, style Géométrique/Luxueux */
    --font-serif: 'Playfair Display', serif; /* Titres : Élégance et sophistication */
    --font-sans: 'Roboto', sans-serif;      /* Corps : Lisibilité et modernité */
    --header-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--color-primary);
    background-color: var(--color-secondary);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: color 0.3s, opacity 0.3s; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }

section { padding: 6em 5%; max-width: 1400px; margin: 0 auto; }

.section-title {
    font-size: 3em;
    text-align: center;
    margin-bottom: 0.2em;
    padding-top: 0.5em;
}
.section-subtitle {
    text-align: center;
    font-size: 1.1em;
    font-style: italic;
    color: var(--color-text-dark);
    margin-bottom: 3em;
}

/* --- 2. Header et Navigation (Logo Cinzel Appliqué) --- */

.main-header {
    background-color: transparent;
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s, box-shadow 0.4s;
    height: var(--header-height);
    
    /* MISE À JOUR : Pour le bouton Connexion/Inscription */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.main-header.scrolled {
    background-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar {
    display: flex;
    align-items: center; /* Pour aligner le logo et les liens */
    width: auto;
}

.nav-logo { 
    /* NOUVEAU STYLE POUR LE LOGO */
    font-family: var(--font-logo);
    font-size: 2.2em; 
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--color-text-light); 
}

.nav-links { list-style: none; display: flex; margin-left: 30px; }

.nav-links li { margin-left: 35px; }

.nav-links a {
    color: var(--color-text-light);
    font-size: 0.9em;
    letter-spacing: 1px;
    position: relative;
    text-transform: uppercase;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    transition: width 0.3s ease-out;
}

.nav-links a:hover::after { width: 100%; }

/* --- 3. Section Héro --- */

.hero-section {
    background: url('images/hero_acceuil.jpg') no-repeat center center/cover; 
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    z-index: 1;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 5em;
    margin-bottom: 0.1em;
    font-weight: 700;
    letter-spacing: 8px;
}

.hero-content h2 {
    font-size: 1.8em;
    margin-bottom: 2em;
    font-weight: 300;
    letter-spacing: 4px;
    opacity: 0.8;
}

.btn-cta {
    display: inline-block;
    padding: 18px 40px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-cta:hover { background-color: #d4b079; transform: translateY(-2px); }

/* --- 4. Section : Nos Signatures --- */

.signatures-section {
    border-top: 1px solid #ddd;
    text-align: center;
}

.signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.signature-item {
    text-align: center;
    padding: 20px;
    transition: box-shadow 0.3s;
    border: 1px solid #eee; 
}
.signature-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.signature-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
}

.signature-item .item-title {
    font-family: var(--font-serif);
    font-size: 1.8em;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: none;
}

.signature-item .item-description {
    font-size: 0.95em;
    color: var(--color-text-dark);
    margin-bottom: 15px;
    height: 3.5em; 
    overflow: hidden;
}

.signature-item .item-price {
    font-family: var(--font-serif);
    font-size: 1.6em;
    color: var(--color-accent);
    font-weight: 700;
    display: block;
    margin-top: 10px;
}

.full-menu-cta {
    margin-top: 4em;
}
.btn-cta-small {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s;
}
.btn-cta-small:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

/* --- 5. Section : Histoire (Biographie) --- */

.history-section {
    background-color: var(--color-secondary);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.history-content {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.chef-photo {
    flex: 0 0 350px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
}

.chef-img {
    width: 100%;
    height: auto;
    display: block;
}

.bio-text {
    flex-grow: 1;
    max-width: 600px;
}

.bio-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.bio-text p {
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.8;
}

.quote {
    font-family: var(--font-serif);
    font-size: 1.4em;
    color: var(--color-accent);
    font-style: italic;
    margin-top: 30px;
    padding-left: 10px;
    border-left: 2px solid var(--color-accent);
}


/* --- 6. Section Emplacement --- */
.location-section {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-align: center;
    padding: 5em 5%;
}

.location-section .section-title { color: var(--color-text-light); }

.location-text {
    max-width: 900px;
    margin: 0 auto 40px;
    font-size: 1.2em;
    font-weight: 300;
}

.location-details {
    padding: 30px;
    border: 2px solid var(--color-accent);
    display: inline-block;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    min-width: 400px;
    font-size: 1.1em;
}

/* --- 7. Footer --- */

.main-footer {
    /* Fond Noir pour un contraste élégant */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 4em 5%;
    border-top: 1px solid var(--color-accent); /* Ligne d'accentuation Or */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* 3 colonnes: Logo large, Liens moyens, Contact moyen */
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
    text-align: left;
}

.footer-col h4 {
    font-family: var(--font-serif);
    font-size: 1.2em;
    margin-bottom: 20px;
    color: var(--color-accent); /* Titres en Or */
    letter-spacing: 1.5px;
}

.footer-branding .footer-logo {
    font-family: var(--font-logo);
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 15px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links a {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--color-text-light);
    opacity: 0.8;
}

.footer-links a:hover {
    color: var(--color-accent);
    opacity: 1;
}

.footer-contact p {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.footer-contact .footer-mail {
    color: var(--color-accent);
    text-decoration: underline;
}

.copyright-text {
    font-size: 0.8em;
    opacity: 0.5;
    margin-top: 20px;
}

/* ========================================================= */
/* --- 7.7. Styles du Bouton d'Authentification et Modale (NOUVEAU) --- */
/* ========================================================= */

/* Style du Bouton d'Authentification (Déconnecté) */
.btn-auth {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border: none;
    padding: 10px 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 3px;
    white-space: nowrap; /* Empêche le texte de sauter de ligne */
}

/* L'icône est masquée sur PC */
.auth-icon {
    display: none; 
        font-size: 1.8em; /* Taille de l'icône */
            color: var(--color-accent); /* Couleur de l'icône (Or) */
            }

            /* Le texte est affiché sur PC */
            .auth-text {
                display: inline;
                }

                /* Quand l'utilisateur est connecté, le bouton est différent */
                .auth-button.logged-in .auth-text {
                    /* Le texte est masqué même sur PC si c'est la bulle d'initiales */
                        display: none; 
                        }

.btn-auth:hover {
    background-color: #d8b275; /* Or légèrement plus clair */
}

/* Style du Bouton d'Authentification (Connecté - Les initiales) */
.btn-auth.logged-in {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Rond */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary); /* Fond noir */
    color: var(--color-accent); /* Texte Or */
    font-size: 1.2em;
    border: 2px solid var(--color-accent);
}
.btn-auth.logged-in .auth-text {
    display: none; /* Cache le texte "Connexion" */
}

/* Style de la Fenêtre Modale (Pop-up) */
.modal {
    display: none; /* Cachée par défaut */
    position: fixed;
    z-index: 10000; /* Devant tout le reste */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Fond noir transparent */
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--color-secondary); /* Fond Blanc Crème */
    margin: 5% auto; /* Centré verticalement et horizontalement (5% du haut) */
    padding: 30px;
    border: 1px solid var(--color-accent); /* Bordure Or */
    width: 90%; 
    max-width: 500px; /* Taille maximale élégante */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-button {
    color: var(--color-primary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-button:hover,
.close-button:focus {
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

/* Styles pour les Formulaires de la Modale */
.modal-form h3 {
    font-family: var(--font-serif);
    color: var(--color-primary);
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 1.8em;
}
.modal-form form label {
    display: block;
    margin-top: 10px;
    font-weight: 700;
}
.modal-form input[type="text"], 
.modal-form input[type="email"],
.modal-form input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
    background: #f1f1f1;
    font-size: 1em;
}
.modal-form .btn-cta {
    width: 100%;
    text-align: center;
    padding: 15px;
    margin-top: 15px;
}

/* Styles de la Modale pour le Compte Connecté */
.account-details-page h3 {
    font-family: var(--font-serif);
    color: var(--color-accent);
    margin-bottom: 25px;
}
.account-details-page h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.1em;
    color: var(--color-primary);
    margin-top: 20px;
    margin-bottom: 10px;
}
.account-info p {
    margin-bottom: 8px;
    padding-left: 10px;
}
.account-info strong {
    color: var(--color-primary);
}
.order-history {
    margin-top: 30px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
.order-item {
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
    font-size: 0.9em;
}
.order-item:last-child { border-bottom: none; }
.logout-btn {
    margin-top: 30px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    width: 100%;
    text-transform: uppercase;
}
.logout-btn:hover {
    background-color: #333;
}

                                                                                                                


/* --- 8. Responsive Design --- */
@media (max-width: 992px) {       
    /* ... (Règles précédentes) ... */
    
    .main-header {
        height: auto;
        flex-direction: column;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .navbar {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    .nav-links {
        display: none; /* Cache les liens de navigation principaux sur mobile */
    }

    .hero-content h1 {
        font-size: 3em;
        letter-spacing: 5px;
    }
    
    .signature-grid {
        grid-template-columns: 1fr;
    }
    
    .history-content {
        flex-direction: column;
        text-align: center;
    }

    .chef-photo {
        flex: 0 0 100%;
        margin-bottom: 30px;
    }

    .bio-text {
        text-align: center;
    }
    
    .location-details {
        min-width: unset;
        width: 90%;
    }

    .footer-content {
        grid-template-columns: 1fr; 
        text-align: center;
        gap: 30px;
    }

    /* Responsive pour le bouton Auth */
    .btn-auth {
        position: absolute; /* Place le bouton en haut à droite */
        right: 5%;
        top: 20px;
        padding: 8px 12px;
        font-size: 0.8em;
    }
    
    .btn-auth.logged-in {
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
    
    .modal-content {
        margin: 10% auto;
    }
}
                                                                                                                                                                                                                                               


/* --- 8. Responsive Design --- */
@media (max-width: 992px) {
    /* ... (Règles précédentes) ... */
    
    .footer-content {
        grid-template-columns: 1fr; /* Empile les colonnes sur mobile */
        text-align: center;
        gap: 30px;
    }

    .footer-branding .footer-logo {
        text-align: center;
    }

    .footer-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-links li {
        margin: 0 10px;
    }
}

@media (max-width: 600px) {
    /* ... (Règles précédentes) ... */
    .footer-links li {
        margin: 0 5px;
        font-size: 0.8em;
    }
}

/* ========================================================= */
/* --- CORRECTION : Décalage de la Bannière (Page Livraison) --- */
/* ========================================================= */

.page-hero-livraison {
    /* Pousse la bannière vers le bas de la hauteur du header fixe (80px) */
        padding-top: var(--header-height);
            /* Optionnel, pour donner un peu plus d'air au-dessus */
                padding-bottom: 20px; 
                }
                /* ========================================================= */
                /* --- 9. Style pour la page Mentions Légales et Légales --- */
                /* ========================================================= */

                .page-mentions-legales {
                    padding: 50px 5%; /* Marge intérieure autour du contenu principal */
                        max-width: 1000px; /* Limite la largeur pour une meilleure lisibilité */
                            margin: 0 auto; /* Centre le bloc sur la page */
                                padding-top: 120px; /* Pousse le contenu sous le header fixe */
                                }

                                .page-mentions-legales .section-title {
                                    /* Style du H1 principal (Mentions Légales) */
                                        font-size: 2.5em;
                                            font-family: var(--font-serif);
                                                color: var(--color-primary);
                                                    text-align: center;
                                                        margin-bottom: 50px;
                                                            border-bottom: 2px solid var(--color-accent);
                                                                padding-bottom: 15px;
                                                                }

                                                                .mentions-block {
                                                                    margin-bottom: 40px;
                                                                        padding: 20px 0;
                                                                        }

                                                                        .mentions-block h2 {
                                                                            /* Style des sous-titres (H2) */
                                                                                font-family: var(--font-serif);
                                                                                    font-size: 1.5em;
                                                                                        color: var(--color-accent); /* Couleur Or pour les titres de section */
                                                                                            margin-bottom: 15px;
                                                                                            }

                                                                                            .mentions-block p {
                                                                                                font-size: 1em;
                                                                                                    line-height: 1.8;
                                                                                                        margin-bottom: 10px;
                                                                                                            color: var(--color-text-dark);
                                                                                                            }

                                                                                                            .mentions-block strong {
                                                                                                                font-weight: 700;
                                                                                                                }

                                                                                                                .mentions-block a {
                                                                                                                    color: var(--color-accent);
                                                                                                                        text-decoration: underline;
                                                                                                                        }

                                                                                                                        /* Design Responsif pour les mentions légales */
                                                                                                                        @media (max-width: 768px) {
                                                                                                                            .page-mentions-legales {
                                                                                                                                    padding: 30px 5%;
                                                                                                                                            padding-top: 100px; /* Ajustement du padding pour mobile */
                                                                                                                                                }
                                                                                                                                                    .page-mentions-legales .section-title {
                                                                                                                                                            font-size: 2em;
                                                                                                                                                                    margin-bottom: 30px;
                                                                                                                                                                        }
                                                                                                                                                                            .mentions-block h2 {
                                                                                                                                                                                    font-size: 1.3em;
                                                                                                                                                                                        }
                                                                                                                                                                                        }
                                                                                                                                                                                        /* Continuation du style pour les blocs de texte (Mentions Légales / Confidentialité / CGV) */

                                                                                                                                                                                        .mentions-block ul {
                                                                                                                                                                                            /* Style de la liste */
                                                                                                                                                                                                list-style: none; /* Supprime les puces par défaut */
                                                                                                                                                                                                    padding-left: 0;
                                                                                                                                                                                                        margin-top: 15px;
                                                                                                                                                                                                        }

                                                                                                                                                                                                        .mentions-block ul li {
                                                                                                                                                                                                            /* Ajoute une puce personnalisée élégante */
                                                                                                                                                                                                                padding-left: 20px; 
                                                                                                                                                                                                                    position: relative;
                                                                                                                                                                                                                        margin-bottom: 10px;
                                                                                                                                                                                                                        }

                                                                                                                                                                                                                        .mentions-block ul li::before {
                                                                                                                                                                                                                            /* Crée la puce Or */
                                                                                                                                                                                                                                content: "•"; 
                                                                                                                                                                                                                                    color: var(--color-accent); /* Utilisation de votre couleur Or */
                                                                                                                                                                                                                                        font-size: 1.2em;
                                                                                                                                                                                                                                            font-weight: bold;
                                                                                                                                                                                                                                                display: inline-block;
                                                                                                                                                                                                                                                    width: 1em;
                                                                                                                                                                                                                                                        margin-left: -1em;
                                                                                                                                                                                                                                                        }
                                        
/* ========================================================= */
/* --- 10. Style pour la page de Commande (commander.html) --- */
/* ========================================================= */

.page-commander {
    padding: 30px 5%;
    padding-top: 110px; /* Décalage sous le header fixe */
}

.page-hero-commander {
    /* Style spécifique au héros si besoin, sinon réutilise le style .page-hero-livraison */
    text-align: center;
    margin-bottom: 50px;
}

.category-title {
    font-family: var(--font-serif);
    font-size: 2em;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    margin-top: 40px;
}

/* --- Grille des Produits (Burgers/Frites/Desserts) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.product-item {
    background-color: var(--color-secondary);
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.product-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center 70%;
}

.product-item h3 {
    font-family: var(--font-serif);
    font-size: 1.3em;
    color: var(--color-primary);
    padding: 10px 15px 5px;
}

.product-description {
    font-size: 0.9em;
    color: var(--color-text-dark);
    padding: 0 15px 10px;
    min-height: 40px; /* Assure une hauteur minimale */
}


.product-item[data-id="frite_classique"] .product-image {
    object-position: center 20%; 
    }

.product-item[data-id="smash_fire_chili"] .product-image {
    object-position: center 60%;    
    }

.product-item[data-id="coca_cherry"] .product-image {
    object-position: center 25%;
    }  

.product-item[data-id="crinkles_fries"] .product-image {
   object-position: center 15%;
   }

.product-item[data-id="crinkles_cheddar"] .product-image {
   object-position: center 17%;
   }

.product-item[data-id="sauce_blanche"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="sauce_algerienne"] .product-image {
   object-position: center 50%;
   } 

.product-item[data-id="sauce_biggy"] .product-image {
   object-position: center 50%;
   } 

.product-item[data-id="sauce_andalouse"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="sauce_ketchup"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="sauce_mayonnaise"] .product-image {
   object-position: center 50%;
   }

.product-item[data-id="sauce_pita"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="sauce_samourai"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="sauce_harissa"] .product-image {
   object-position: center 50%;
   } 

.product-item[data-id="sauce_moutarde"] .product-image {
   object-position: center 50%;
   } 

.product-item[data-id="sauce_curry"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="tarte_daim"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="hero_cookie"] .product-image {
   object-position: center 50%;
   } 
   
.product-item[data-id="hero_muffin"] .product-image {
   object-position: center 55%;
   }    

.product-item[data-id="hero_tiramisu"] .product-image {
   object-position: center 50%;
   } 

.product-item[data-id="hero_cheesecake"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="hero_oasispcf"] .product-image {
   object-position: center 40%;
   }    

.product-item[data-id="hero_nuggetx4"] .product-image {
   object-position: center 20%;
   } 

.product-item[data-id="hero_nuggetx6"] .product-image {
   object-position: center 20%;
   }

.product-item[data-id="hero_nuggetx9"] .product-image {
   object-position: center 70%;
   } 

.product-item[data-id="hero_onionringsx4"] .product-image {
   object-position: center 20%;
   } 

.product-item[data-id="hero_onionringsx6"] .product-image {
   object-position: center 20%;
   } 

.product-item[data-id="hero_onionringsx9"] .product-image {
   object-position: center 20%;
   } 
   
.product-item[data-id="hero_tendersx4"] .product-image {
   object-position: center 20%;
   }
   
.product-item[data-id="hero_tendersx6"] .product-image {
   object-position: center 20%;
   }
   
.product-item[data-id="hero_tendersx9"] .product-image {
   object-position: center 20%;
   }
   
.product-item[data-id="hero_potatoes"] .product-image {
   object-position: center 20%;
   }    

.product-item[data-id="hero_cafeexpresso"] .product-image {
   object-position: center 50%;
   }   
   
.product-item[data-id="hero_cafeallonger"] .product-image {
   object-position: center 50%;
   }    

.product-item[data-id="hero_the"] .product-image {
   object-position: center 40%;
   }    

.product-item[data-id="hero_cappucino"] .product-image {
   object-position: center 60%;
   } 

.product-item[data-id="coca"] .product-image {
   object-position: center 25%;
   }

.product-item[data-id="coca_zero"] .product-image {
   object-position: center 15%;
   }

.product-item[data-id="oasis"] .product-image {
   object-position: center 25%;
   }
 
.product-item[data-id="hero_oasisfraiseframboise"] .product-image {
   object-position: center 35%;
   }

.product-item[data-id="hero_oasispcf"] .product-image {
   object-position: center 40%;
   }

.product-item[data-id="oasis_pomme_poire"] .product-image {
   object-position: center 25%;
   }
     
.product-item[data-id="minute_maid"] .product-image {
   object-position: center 55%;
   }
   
.product-item[data-id="fanta"] .product-image {
   object-position: center 40%;
   }

.product-item[data-id="fanta_fruit_du_dragon"] .product-image {
   object-position: center 40%;
   }   
   
.product-item[data-id="fanta_raisin"] .product-image {
   object-position: center 40%;
   }
   
.product-item[data-id="ice_tea"] .product-image {
   object-position: center 25%;
   }

.product-item[data-id="ice_tea_framboise"] .product-image {
   object-position: center 25%;
   }

.product-item[data-id="ice_tea_pasteque"] .product-image {
   object-position: center 25%;
   }
   
.product-item[data-id="dada_pomme"] .product-image {
   object-position: center 25%;
   }

.product-item[data-id="dada_litchi"] .product-image {
   object-position: center 25%;
   }

.product-item[data-id="dada_mojito"] .product-image {
   object-position: center 25%;
   }
    
.product-item[data-id="dada_fraise"] .product-image {
   object-position: center 25%;
   }
   
.product-item[data-id="red_bull"] .product-image {
   object-position: center 25%;
   }

.product-item[data-id="red_bull_mirtille"] .product-image {
   object-position: center 5%;
   }

.product-item[data-id="red_bull_peche_blanche"] .product-image {
   object-position: center 1%;
   }

.product-item[data-id="red_bull_abricot_fraise"] .product-image {
   object-position: center 15%;
   }

.product-item[data-id="red_bull_pasteque"] .product-image {
   object-position: center 5%;
   }
   
.product-item[data-id="monster"] .product-image {
   object-position: center 10%;
   }

.product-item[data-id="monster_tropical"] .product-image {
   object-position: center 10%;
   }
  
.product-item[data-id="eau"] .product-image {
   object-position: center 1%;
   }
   
.product-item[data-id="volvic_fraise"] .product-image {
   object-position: center 1%;
   }

.product-item[data-id="volvic_peche"] .product-image {
   object-position: center 1%;
   }
   
.product-item[data-id="boga_noir"] .product-image {
   object-position: center 15%;
   }

.product-item[data-id="boga_vert"] .product-image {
   object-position: center 15%;
   }
   
.product-item[data-id="selecto"] .product-image {
   object-position: center 15%;
   }

.product-item[data-id="tropico"] .product-image {
   object-position: center 1%;
   }
   
.product-item[data-id="tropico_tropical"] .product-image {
   object-position: center 1%;
   }

   


/* --- Sélecteur de Quantité et Prix --- */
.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 15px;
    border-top: 1px dashed #eee;
}

.product-price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-accent);
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s;
}

.qty-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.qty-input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 1em;
    outline: none;
    -moz-appearance: textfield; /* Cache les flèches sur Firefox */
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Cache les flèches sur Chrome/Safari */
    margin: 0;
} 


/* --- Sélecteurs de Menu --- */
.product-menu {
    border: 2px solid var(--color-accent); /* Met les menus en évidence */
}

.menu-selector {
    padding: 10px 15px;
    background-color: rgba(195, 153, 85, 0.05); /* Arrière-plan très léger */
}

.menu-selector h4 {
    font-size: 0.9em;
    margin: 10px 0 5px;
    color: var(--color-primary);
}

.menu-selector select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    background-color: white;
    font-family: var(--font-sans);
    font-size: 0.9em;
}


/* --- Grille des Boissons (Plus dense et sans image) --- */
.product-grid-boissons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes plus petites */
    gap: 15px;
    margin-bottom: 50px;
}

.product-item-boisson {
    background-color: white;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.product-item-boisson h3 {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.product-item-boisson .product-description {
    padding: 0;
    font-style: italic;
    font-size: 0.8em;
    min-height: unset;
}

.product-item-boisson .product-footer {
    padding: 5px 0 0;
    border-top: none;
}


/* --- Responsive Mobile pour la page de commande --- */
@media (max-width: 768px) {
    .page-commander {
        padding: 20px 5%;
        padding-top: 100px;
    }

    .product-grid, .product-grid-boissons {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
    
    .cart-summary {
        position: static; /* Le panier n'est plus fixe */
        width: 100%;
        margin-bottom: 30px;
    }
}
    
/* --- NOUVEAU: Style du Bouton de Panier dans le Header --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre le panier et le bouton auth */
}

.btn-cart {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    position: relative;
    transition: background-color 0.2s;
}

.btn-cart:hover {
    background-color: #ffd700;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7em;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

/* --- NOUVEAU: Style de la Modale de Panier --- */

.modal-cart {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 2000; /* Assurez-vous qu'il est au-dessus de tout */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
}

.modal-cart-content {
    background-color: var(--color-secondary);
    margin: 5% auto; /* Centré verticalement */
    padding: 30px;
    border: 1px solid var(--color-accent);
    width: 90%;
    max-width: 600px; /* Taille maximale pour desktop */
    border-radius: 10px;
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-button-cart {
    color: var(--color-primary);
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button-cart:hover, .close-button-cart:focus {
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

.cart-title {
    font-family: var(--font-serif);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 20px;
}

/* --- Styles Panier Modale (Ajouts : Quantité et Promo) --- */

.cart-item {
    display: flex;
        justify-content: space-between;
            align-items: flex-start; /* Alignement en haut pour les détails */
                padding: 10px 0;
                    border-bottom: 1px dashed #eee;
                        font-size: 0.9em;
                        }

                        .item-info {
                            flex-grow: 1;
                                padding-right: 10px;
                                }

                                /* Affichage des détails du menu */
                                .item-details {
                                    font-size: 0.8em;
                                        color: #666;
                                            margin-top: 3px;
                                                display: block;
                                                    white-space: normal;
                                                    }

                                                    /* Contrôles de quantité dans le panier */
                                                    .cart-qty-controls {
                                                        display: flex;
                                                            align-items: center;
                                                                gap: 5px;
                                                                    margin-left: 10px;
                                                                        font-weight: bold;
                                                                        }

                                                                        .cart-qty-btn {
                                                                            background: var(--color-accent);
                                                                                color: var(--color-primary);
                                                                                    border: none;
                                                                                        width: 20px;
                                                                                            height: 20px;
                                                                                                border-radius: 3px;
                                                                                                    cursor: pointer;
                                                                                                        font-size: 0.8em;
                                                                                                            font-weight: bold;
                                                                                                                line-height: 1;
                                                                                                                }

                                                                                                                .cart-item-remove {
                                                                                                                    background: none;
                                                                                                                        border: none;
                                                                                                                            color: #cc3333; /* Rouge pour la suppression */
                                                                                                                                cursor: pointer;
                                                                                                                                    font-size: 1.2em;
                                                                                                                                        margin-left: 10px;
                                                                                                                                            transition: color 0.2s;
                                                                                                                                            }

                                                                                                                                            /* --- Section Code Promo --- */
                                                                                                                                            .promo-code-section {
                                                                                                                                                padding: 15px 0;
                                                                                                                                                    border-top: 1px solid #ddd;
                                                                                                                                                        border-bottom: 1px solid #ddd;
                                                                                                                                                            margin: 15px 0;
                                                                                                                                                            }

                                                                                                                                                            .promo-code-section input {
                                                                                                                                                                width: 60%;
                                                                                                                                                                    padding: 8px 10px;
                                                                                                                                                                        border: 1px solid var(--color-accent);
                                                                                                                                                                            border-radius: 5px;
                                                                                                                                                                                background-color: var(--color-secondary);
                                                                                                                                                                                    color: var(--color-primary);
                                                                                                                                                                                        margin-right: 10px;
                                                                                                                                                                                        }

                                                                                                                                                                                        .promo-code-section button {
                                                                                                                                                                                            padding: 8px 15px;
                                                                                                                                                                                                background-color: var(--color-primary);
                                                                                                                                                                                                    color: var(--color-text-light);
                                                                                                                                                                                                        border: 1px solid var(--color-primary);
                                                                                                                                                                                                            border-radius: 5px;
                                                                                                                                                                                                                cursor: pointer;
                                                                                                                                                                                                                }
                                                                                                                                                                                                                .promo-status {
                                                                                                                                                                                                                    font-size: 0.8em;
                                                                                                                                                                                                                        margin-top: 5px;
                                                                                                                                                                                                                            text-align: left;
                                                                                                                                                                                                                            }


/* --- Sélecteur de Mode de Service --- */
.service-mode-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.btn-service {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border: 1px solid var(--color-accent);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.btn-service.active {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.service-note {
    text-align: center;
    font-size: 0.9em;
    margin-bottom: 20px;
}

/* --- Liste des Articles du Panier --- */
.cart-items-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.cart-item:last-child {
    border-bottom: none;
}

.item-info {
    flex-grow: 1;
}

.item-name {
    font-weight: 700;
    color: var(--color-primary);
}

.item-options {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

.item-quantity {
    margin-right: 15px;
    font-weight: bold;
    color: var(--color-accent);
}

.item-price {
    font-weight: 700;
}

.cart-empty-message {
    text-align: center;
    color: #999;
    font-style: italic;
}

/* --- Pied de Page du Panier --- */
.cart-summary-footer {
    padding-top: 15px;
    border-top: 2px solid var(--color-primary);
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.total-line {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-accent);
    margin-top: 15px;
}

.total-label {
    font-family: var(--font-serif);
}

.btn-checkout-modal {
    width: 100%;
    background-color: var(--color-accent);
    color: var(--color-primary);
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.2s;
}

.btn-checkout-modal:hover:not(:disabled) {
    background-color: #ffd700;
}

.btn-checkout-modal:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
         
/* ========================================================= */
/* AJOUTS POUR LA PAGE PAIEMENT (paiement.html) */
/* ========================================================= */

.payment-main-content {
    padding: 60px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.payment-container h1 {
    font-family: var(--font-serif);
    font-size: 2.5em;
    margin-bottom: 5px;
    color: var(--color-primary);
}

.service-mode-display {
    font-size: 1.1em;
    margin-bottom: 40px;
    font-weight: 300;
}

.service-mode-display strong {
    font-weight: 700;
    color: var(--color-accent);
}

.service-mode-display a {
    color: var(--color-accent);
    text-decoration: none;
    margin-left: 10px;
}

.payment-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Info/Récap plus large que Paiement */
    gap: 50px;
}

/* --- Section Récapitulatif et Adresse --- */

.payment-summary, .delivery-address-section, .payment-options {
    background-color: var(--color-secondary);
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 30px;
}

.payment-summary h2, .delivery-address-section h2, .payment-options h2 {
    font-family: var(--font-serif);
    font-size: 1.8em;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    color: var(--color-primary);
}

/* Liste des articles du panier */
#payment-items-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 15px;
}

#payment-items-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95em;
}

#payment-items-list .cart-item-name {
    flex-grow: 1;
    margin: 0 10px;
    font-weight: 500;
}

/* Totaux */
.summary-total-details p {
    display: flex;
    justify-content: space-between;
    font-size: 1em;
    padding: 5px 0;
}

#payment-delivery-row {
    border-bottom: 1px dashed #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px !important;
}

.summary-total-final {
    font-size: 1.3em !important;
    font-weight: 700;
    padding: 15px 0 !important;
    color: var(--color-accent);
}

/* --- Section Code Promotionnel --- */
.promo-code-section {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.promo-code-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.promo-input-group {
    display: flex;
}

.promo-input-group input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.btn-apply-promo {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.3s;
}

.btn-apply-promo:hover {
    background-color: var(--color-accent);
}

/* --- Formulaire d'Adresse (Delivery) --- */
#delivery-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

.city-zip-group {
    display: flex;
    gap: 15px;
}

.city-zip-group input {
    width: 50%;
}

/* --- Options de Paiement --- */

.payment-method-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
}

.tab-button {
    flex-grow: 1;
    padding: 15px 10px;
    border: none;
    background-color: #f0f0f0;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.tab-button.active {
    background-color: var(--color-secondary);
    border: 1px solid #ddd;
    border-bottom: none;
    color: var(--color-accent);
}

.payment-form {
    display: none;
    padding: 20px 0;
}

.payment-form.active {
    display: block;
}

.payment-form .form-group {
    margin-bottom: 15px;
}

.payment-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    font-weight: 500;
}

.payment-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

.card-details-group {
    display: flex;
    gap: 15px;
}

.card-details-group .expiration-date, .card-details-group .cvc {
    flex-grow: 1;
}

.btn-payment-final {
    width: 100%;
    padding: 15px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
}

.btn-payment-final:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.paypal-btn {
    background-color: #0070BA !important;
    color: white !important;
}

.paypal-btn:hover {
    background-color: #003087 !important;
}

.paypal-btn .fab {
    margin-right: 10px;
}

.secure-info {
    text-align: center;
    font-size: 0.8em;
    margin-top: 30px;
    color: #666;
}

/* --- Responsive pour la grille de paiement --- */
@media (max-width: 992px) {
    .payment-grid {
        grid-template-columns: 1fr; /* Empile les deux colonnes */
    }
}
/* --- Styles pour les Options de Menu Visuelles --- */

.options-grid {
    display: flex;
        gap: 10px;
            margin-top: 10px;
                margin-bottom: 20px;
                    overflow-x: auto; /* Permet le défilement horizontal si beaucoup d'options */
                        padding-bottom: 10px; /* Espace pour l'ombre ou la barre de défilement */
                        }

                        .option-card {
                            display: flex;
                                flex-direction: column;
                                    align-items: center;
                                        text-align: center;
                                            border: 2px solid #ddd;
                                                border-radius: 6px;
                                                    cursor: pointer;
                                                        overflow: hidden;
                                                            width: 100px; /* Largeur fixe pour la carte d'option */
                                                                min-width: 100px;
                                                                    transition: all 0.2s ease-in-out;
                                                                    }

                                                                    .option-image {
                                                                        width: 100%;
                                                                            height: 60px; /* Hauteur fixe pour l'image d'option */
                                                                                object-fit: cover; /* Les images couvrent l'espace */
                                                                                }

                                                                                .option-details {
                                                                                    padding: 5px;
                                                                                        width: 100%;
                                                                                            font-size: 0.75em;
                                                                                                background-color: var(--color-secondary);
                                                                                                }

                                                                                                .option-name {
                                                                                                    font-weight: 700;
                                                                                                        display: block;
                                                                                                        }

                                                                                                        .option-supplement {
                                                                                                            color: var(--color-accent);
                                                                                                                font-weight: 500;
                                                                                                                }

                                                                                                                /* Style lorsque l'option est sélectionnée (input radio:checked) */
                                                                                                                input[type="radio"]:checked + .option-card {
                                                                                                                    border-color: var(--color-accent);
                                                                                                                        box-shadow: 0 0 5px var(--color-accent);
                                                                                                                            background-color: rgba(195, 153, 85, 0.1); /* Arrière-plan légèrement teinté */
                                                                                                                            }

                                                                                                                            /* Style des sélecteurs (pour les sauces qui restent en <select>) */
                                                                                                                            .menu-selector select {
                                                                                                                                width: 100%;
                                                                                                                                    padding: 8px;
                                                                                                                                        border: 1px solid var(--color-accent);
                                                                                                                                            border-radius: 4px;
                                                                                                                                                background-color: white;
                                                                                                                                                    font-family: var(--font-sans);
                                                                                                                                                        font-size: 0.9em;
                                                                                                                                                            margin-bottom: 15px;
                                                                                                                                                            }

                                                                                                                                                            @media (max-width: 600px) {
                                                                                                                                                                .options-grid {
                                                                                                                                                                        flex-wrap: nowrap;
                                                                                                                                                                            }
                                                                                                                                                                            }
                                                                                                                                                                            
                                                                                                                                                                            /* ========================================================= */
/* --- 2. Header et Navigation --- */

.main-header {
    background-color: transparent;
        position: fixed;
            width: 100%;
                z-index: 1000;
                    transition: background-color 0.4s, box-shadow 0.4s;
                        height: var(--header-height);
                            display: flex;
                                align-items: center; /* Centrage vertical du contenu du header */
                                }

                                .main-header.scrolled {
                                    background-color: var(--color-primary);
                                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                                        }

                                        .navbar {
                                            display: flex;
                                                justify-content: flex-start; /* Aligne le bouton, le logo et les liens au début */
                                                    align-items: center; /* CLÉ: Assure l'alignement vertical entre le bouton et le logo */
                                                        width: 100%;
                                                            padding: 0%; /* Espace intérieur de 5% de chaque côté */
                                                                gap: 10px; /* Espacement entre le bouton et le logo */
                                                                }

                                                                .nav-logo { 
                                                                    font-family: var(--font-logo);
                                                                        font-size: 2.2em; 
                                                                            font-weight: 700;
                                                                                letter-spacing: 4px;
                                                                                    color: var(--color-text-light);
                                                                                    }

/* --- Styles spécifiques à la Page Forgerox --- */

body {
    font-family: var(--font-sans);
        color: var(--color-primary);
            
                
                

                        
                            /* 1. Chemin vers votre image (ajustez le chemin si l'image est dans un dossier) */
                                background-image: url('hero_acceuil.jpg'); 
                                    
                                        /* 2. Empêche l'image de se répéter */
                                            background-repeat: no-repeat; 
                                                
                                                    /* 3. Redimensionne l'image pour couvrir toute la zone du body */
                                                        background-size: cover; 
                                                            
                                                                /* 4. Fixe l'image pour qu'elle ne bouge pas au défilement */
                                                                    background-attachment: fixed;
                                                                        
                                                                            /* 5. Centre l'image pour un meilleur rendu */
                                                                                background-position: center center;

                                                                                    /* Le reste des styles du body... */
                                                                                        line-height: 1.6;
                                                                                            overflow-x: hidden;
                                                                                            }


.forgerox-section {
    padding: 120px 5% 50px 5%; /* Ajuster le padding haut pour le header fixe */
    text-align: center;
}

.search-description {
    font-size: 1.1em;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

.search-bar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    background-color: var(--color-background-dark); /* Fond sombre */
    border-radius: 50px; /* Bordures arrondies */
    padding: 8px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#forgerox-search-input {
    flex-grow: 1; /* Prend l'espace disponible */
    border: none;
    outline: none;
    padding: 10px 15px;
    font-size: 1em;
    background: transparent;
    color: var(--color-text-light);
    border-radius: 50px;
}

#forgerox-search-input::placeholder {
    color: var(--color-text-light-alt); /* Couleur du placeholder */
}

#forgerox-search-button {
    background-color: var(--color-accent); /* Bouton Or Mat */
    color: var(--color-primary); /* Texte sombre */
    border: none;
    border-radius: 50%; /* Bouton rond */
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}

#forgerox-search-button:hover {
    background-color: #e0b06b; /* Nuance plus claire au survol */
}

.search-results-container {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Comme les items de menu */
    gap: 30px;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.no-results-message {
    font-size: 1.2em;
    color: var(--color-text-light-alt);
    grid-column: 1 / -1; /* Prend toute la largeur si un seul élément */
}

/* Vous pouvez réutiliser les styles .menu-item pour les résultats de recherche */
/* si vous voulez qu'ils aient le même encadrement que les produits */
/* Assurez-vous que .menu-item est défini ailleurs dans votre CSS */

/* Exemple si .menu-item n'est pas défini */
.menu-item {
    background-color: var(--color-primary);
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}
.menu-item:hover {
    transform: translateY(-5px);
}
.menu-item .item-title {
    color: var(--color-secondary);
    font-size: 1.5em;
    margin-bottom: 10px;
}
.menu-item .item-description {
    color: var(--color-text-light);
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 15px;
}
.menu-item .item-price {
    font-family: var(--font-serif);
    color: var(--color-accent);
    font-size: 1.8em;
    font-weight: bold;
}
  

@media (max-width: 768px) {
        /* ... vos autres styles pour mobile ... */

            .hero-content {
                    /* Assurez-vous que les éléments sont affichés comme des blocs verticaux */
                            display: flex; 
                                    flex-direction: column; /* Force les éléments à s'empiler verticalement sur mobile */
                                            align-items: center; /* Centre les éléments */
                                                    gap: 0px; /* Ajoute un espace de 15px entre chaque élément empilé */
                                                        }

                                                            /* Si l'ajout de 'gap' dans .hero-content cause des problèmes avec d'autres éléments,
                                                                   vous pouvez cibler directement les boutons : */
                                                                       .hero-content .btn-cta {
                                                                               margin-bottom: 5px; /* Ajoute une marge sous chaque bouton (ajustez 15px au besoin) */
                                                                                       /* Si les boutons sont en ligne et que vous voulez les espacer horizontalement : */
                                                                                               /* margin-right: 15px; */
                                                                                                   }

                                                                                                       /* ... la suite de votre CSS mobile ... */
                                                                                                       }




                        
                        

/* --- STYLES GÉNÉRAUX CHECKOUT (Pages de Paiement) --- */

.checkout-page {
    padding: 100px 5% 50px 5%; /* Espace pour le header */
        max-width: 800px;
            margin: 0 auto;
            }

            .checkout-summary-box {
                background-color: var(--color-primary);
                    color: var(--color-text-light);
                        padding: 20px;
                            border-radius: 8px;
                                margin-bottom: 30px;
                                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
                                    }

                                    .checkout-summary-box h3 {
                                        color: var(--color-accent);
                                            border-bottom: 1px dashed var(--color-accent);
                                                padding-bottom: 10px;
                                                    margin-bottom: 15px;
                                                    }

                                                    .checkout-form-section h2 {
                                                        color: var(--color-primary);
                                                            margin-bottom: 25px;
                                                                text-align: center;
                                                                }

                                                                .form-group {
                                                                    margin-bottom: 20px;
                                                                    }

                                                                    .form-group label {
                                                                        display: block;
                                                                            font-weight: bold;
                                                                                margin-bottom: 5px;
                                                                                    color: var(--color-primary);
                                                                                    }

                                                                                    .form-group input, .form-group select {
                                                                                        width: 100%;
                                                                                            padding: 12px;
                                                                                                border: 1px solid #ccc;
                                                                                                    border-radius: 5px;
                                                                                                        box-sizing: border-box;
                                                                                                            font-size: 1em;
                                                                                                            }

                                                                                                            /* Style spécifique au bouton de paiement final */
                                                                                                            .btn-final-payment {
                                                                                                                width: 100%;
                                                                                                                    background-color: var(--color-accent);
                                                                                                                        color: var(--color-primary);
                                                                                                                            border: none;
                                                                                                                                padding: 18px;
                                                                                                                                    border-radius: 5px;
                                                                                                                                        font-size: 1.3em;
                                                                                                                                            font-weight: bold;
                                                                                                                                                cursor: pointer;
                                                                                                                                                    margin-top: 30px;
                                                                                                                                                    }

                                                                                                                                                    /* Liste des articles dans le résumé du checkout */
                                                                                                                                                    .checkout-items-list {
                                                                                                                                                        list-style: none;
                                                                                                                                                            padding: 0;
                                                                                                                                                                margin-bottom: 15px;
                                                                                                                                                                }
                                                                                                                                                                .checkout-items-list li {
                                                                                                                                                                    display: flex;
                                                                                                                                                                        justify-content: space-between;
                                                                                                                                                                            padding: 5px 0;
                                                                                                                                                                                border-bottom: 1px dotted #555;
                                                                                                                                                                                    font-size: 0.9em;
                                                                                                                                                                                    }
                                                                                                                                                                                    .checkout-items-list li span:first-child {
                                                                                                                                                                                        font-weight: bold;
                                                                                                                                                                                        }
  
                                                                                                                                                                                        
/* --- Style pour le Conteneur de Paiement Moderne (Stripe) --- */

#card-element-container {
    /* Style général du bloc de paiement */
        padding: 15px 20px; /* Espacement intérieur */
            margin-top: 25px;
                margin-bottom: 25px;
                    border: 1px solid #FFD700; /* Contour Jaune Doré */
                        border-radius: 8px; /* Coins arrondis */
                            background-color: #FFFCEF; /* Arrière-plan très légèrement crémeux pour le contraste */
                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Ombre légère pour le relief */
                                }

                                #card-element-container label {
                                    /* Style du titre "Informations de Carte Bancaire" */
                                        display: block;
                                            margin-bottom: 10px;
                                                font-weight: 700;
                                                    font-size: 1.1em;
                                                        color: #CC9900; /* Texte doré/marron foncé */
                                                        }

                                                        /* Style de l'élément Stripe injecté */
                                                        #card-element {
                                                            padding: 10px;
                                                                border: 1px solid #CCC;
                                                                    border-radius: 4px;
                                                                        background-color: white;
                                                                            transition: border-color 0.3s;
                                                                            }

                                                                            #card-element:focus-within {
                                                                                /* Effet lorsque l'utilisateur clique dans le champ */
                                                                                    border-color: #CC9900; /* Contour doré lors de l'édition */
                                                                                        box-shadow: 0 0 0 1px #FFD700;
                                                                                        }
                                                                                        




/* ========================================================= */
/* --- STYLES POUR LE PANNEAU ADMIN (admin-dashboard.html) --- */
/* ========================================================= */

/* --- Conteneur Général du Dashboard et Écran de Connexion --- */

/* Style pour l'écran de connexion initial */
#login-screen {
    max-width: 400px; 
    margin: 100px auto; 
    padding: 30px; 
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Style du champ de mot de passe */
#admin-password {
    width: 100%; 
    padding: 10px; 
    margin: 15px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px;
}

/* Style du bouton de connexion */
#login-screen button {
    width: 100%; 
    padding: 10px; 
    background-color: var(--color-accent); /* Utilise la couleur accent (Jaune) */
    color: var(--color-primary); /* Texte sur le bouton */
    border: none; 
    border-radius: 4px; 
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

/* Conteneur principal du dashboard */
.admin-dashboard { 
    max-width: 1200px; 
    margin: 50px auto; 
    padding: 20px; 
    background-color: white; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}

/* --- Tableau des Commandes --- */

.order-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px; 
    font-size: 0.9em;
}

.order-table th, .order-table td { 
    padding: 12px 15px; 
    text-align: left; 
    border-bottom: 1px solid #ddd; 
}

.order-table th { 
    background-color: var(--color-primary); /* En-tête bleu foncé */
    color: white; 
    font-weight: 600;
}

.order-table tr:nth-child(even) { 
    background-color: #f8f8f8; /* Lignes alternées */
}

/* Bouton pour afficher les détails */
.order-details-toggle { 
    color: var(--color-secondary); 
    cursor: pointer; 
    text-decoration: underline; 
    font-size: 0.9em; 
    margin-top: 5px;
    display: inline-block;
}

/* Ligne de détails cachée */
.order-details-content td {
    background-color: #fff9e6; /* Fond jaune pâle pour les détails */
    font-style: italic;
    border-top: none;
    border-bottom: 2px solid #FFD700;
    line-height: 1.8;
}

.order-details-content ul {
    list-style: disc;
    margin-left: 20px;
    margin-top: 5px;
    font-style: normal;
    font-size: 0.95em;
}

/* --- Styles pour les Étiquettes de Statut --- */

.status-btn { 
    padding: 5px 10px; 
    border: none; 
    border-radius: 15px; /* Forme de pilule */
    cursor: default; 
    color: white; 
    font-weight: bold; 
    font-size: 0.8em;
    min-width: 100px;
    text-align: center;
    display: inline-block;
}

.status-btn.new { background-color: #007bff; } /* Nouvelle (Bleu) */
.status-btn.preparing { background-color: #ffc107; color: #333; } /* En Préparation (Jaune) */
.status-btn.ready { background-color: #28a745; } /* Prête (Vert) */
.status-btn.delivered { background-color: #6c757d; } /* Livrée/Retirée (Gris) */ 

/* Style pour le sélecteur de statut */
select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #aaa;
}

/* Media Queries pour la Responsivité */
@media screen and (max-width: 768px) {
    .admin-dashboard {
        margin: 20px 10px;
        padding: 10px;
    }
    .order-table th, .order-table td {
        padding: 8px 10px;
    }
}
 


/* ========================================================= */
/* NOUVEAU: Style de l'Alerte de Nouvelle Commande (Admin) */
/* ========================================================= */

.new-order-alert-overlay {
    position: fixed;
        top: 0;
            left: 0;
                width: 100%;
                    height: 100%;
                        background-color: rgba(40, 167, 69); /* Vert foncé / vert succès avec opacité */
                            z-index: 9999; /* Au-dessus de tout */
                                display: flex;
                                    justify-content: center;
                                        align-items: center;
                                            text-align: center;
                                                cursor: pointer;
                                                    animation: pulse-green 1s infinite alternate; /* Animation clignotante */
                                                    }

                                                    .alert-content {
                                                        color: white;
                                                            padding: 40px;
                                                                border-radius: 10px;
                                                                    font-size: 2em;
                                                                        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
                                                                        }

                                                                        .alert-content h2 {
                                                                            font-size: 3em;
                                                                                margin: 20px 0;
                                                                                    font-weight: 900;
                                                                                    }

                                                                                    .order-icon {
                                                                                        font-size: 10em; /* Grand logo commande au milieu */
                                                                                            line-height: 1;
                                                                                                margin-bottom: 20px;
                                                                                                }

                                                                                                @keyframes pulse-green {
                                                                                                    from {
                                                                                                            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                                                                                                                }
                                                                                                                    to {
                                                                                                                            box-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
                                                                                                                                }
                                                                                                                                }

/* ========================================================= */
/* NOUVEAU: Styles des Étapes de Suivi Cochées */
/* ========================================================= */

.tracking-step {
    display: flex;
        align-items: center;
            margin-bottom: 15px;
                font-size: 1.1em;
                    color: #555;
                        font-weight: normal; /* Par défaut non gras */
                        }

                        .tracking-step .circle {
                            width: 20px;
                                height: 20px;
                                    border-radius: 50%;
                                        border: 2px solid #ccc;
                                            display: flex;
                                                justify-content: center;
                                                    align-items: center;
                                                        margin-right: 10px;
                                                            transition: all 0.3s ease; /* Transition douce */
                                                                flex-shrink: 0; /* Empêche le cercle de rétrécir */
                                                                }

                                                                .tracking-step.completed {
                                                                    font-weight: bold; /* Texte en gras quand l'étape est terminée */
                                                                        color: #28a745; /* Texte vert quand l'étape est terminée */
                                                                        }

                                                                        .tracking-step.completed .circle {
                                                                            background-color: #28a745; /* Cercle vert */
                                                                                border-color: #28a745;
                                                                                }

                                                                                .tracking-step.completed .circle::before {
                                                                                    content: '✓'; /* Symbole de coche */
                                                                                        color: white;
                                                                                            font-size: 1.2em;
                                                                                                line-height: 1;
                                                                                                }
                                                                                                


/* ========================================================= */
/* NOUVEAU: Animation de la Bulle de Statut */
/* ========================================================= */

@keyframes slideStatus {
    0% { transform: translateX(0); }
        50% { transform: translateX(20px); } /* Bouge de 20px vers la droite */
            100% { transform: translateX(0); }
            }

            .status-bubble.preparing { /* Ciblez la bulle 'En Préparation' */
                animation: slideStatus 2s ease-in-out infinite; /* Animation fluide et répétée */
                }

                /* Assurez-vous que votre bulle de statut a la classe 'status-bubble' et 'preparing' */
                /* Exemple HTML : <div class="status-bubble preparing">EN PRÉPARATION</div> */
                

/* ========================================================= */
/* ADMIN DASHBOARD - DESIGN FUTURISTE (Refonte Complète) */
/* ========================================================= */

/* --- NOUVELLES COULEURS THÈME SOMBRE --- */
:root {
    --admin-bg-dark: #131a26;       /* Fond principal très sombre */
    --admin-sidebar-dark: #0f1621;  /* Fond barre latérale encore plus sombre */
    --admin-accent-cyan: #00bcd4;   /* Bleu Cyan/Turquoise pour les accents */
    --admin-text-light: #e0f7fa;    /* Texte clair */
    --admin-card-bg: #1f2838;       /* Fond des cartes/panneaux */
    --admin-card-hover: #2b3a4e;    /* Survol */
    --admin-border-radius: 12px;
}

/* --- STRUCTURE GLOBALE (Nécessite la classe 'admin-body' sur le conteneur principal) --- */
.admin-body {
    background-color: var(--admin-bg-dark);
    color: var(--admin-text-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex !important; /* Force la disposition côte à côte */
    min-height: 100vh;
}

/* --- BARRE LATÉRALE (NAVIGATION) --- */
.admin-sidebar {
    width: 250px;
    background-color: var(--admin-sidebar-dark);
    padding: 20px 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 188, 212, 0.2);
    flex-shrink: 0;
}

.admin-logo {
    text-align: center;
    padding: 10px 0 30px;
    font-size: 1.8em;
    font-weight: bold;
    color: var(--admin-accent-cyan);
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.7); /* Effet néon */
}

/* --- ITEMS DE NAVIGATION --- */
.nav-item {
    padding: 15px 25px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s, color 0.3s, border-left 0.3s;
    border-left: 5px solid transparent;
}

.nav-item:hover {
    background-color: var(--admin-card-bg);
}

.nav-item.active {
    background-color: var(--admin-card-bg);
    color: var(--admin-accent-cyan);
    border-left-color: var(--admin-accent-cyan);
    font-weight: bold;
}

/* --- CONTENU PRINCIPAL --- */
.admin-main-content {
    flex-grow: 1; /* Prend tout l'espace restant */
    padding: 40px;
    overflow-y: auto;
}

.admin-section {
    display: none;
    animation: fadeIn 0.5s;
}

.admin-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-title {
    font-size: 2.2em;
    color: var(--admin-accent-cyan);
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

/* --- CARTES ET CADRES ROND (Futuriste) --- */
.admin-card {
    background-color: var(--admin-card-bg);
    border-radius: var(--admin-border-radius);
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 188, 212, 0.1);
    margin-bottom: 25px;
    border: 1px solid rgba(0, 0, 0, 0.6);
}

/* --- TABLEAUX DE COMMANDES --- */
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.admin-table th {
    text-align: left;
    color: var(--admin-accent-cyan);
    padding: 15px;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

.admin-table td {
    background-color: #2b3a4e; /* Une couleur de fond légèrement différente */
    padding: 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.admin-table tbody tr:hover td {
    background-color: var(--admin-card-hover);
}

/* --- DÉTAILS DE COMMANDE --- */
.order-details-content td {
    background-color: #1a222e !important; 
    border-top: 2px dashed rgba(0, 188, 212, 0.1);
    border-radius: 0 0 8px 8px;
    color: #ccc;
    font-size: 0.9em;
}
.order-details-toggle { 
    color: var(--admin-accent-cyan); 
    cursor: pointer; 
    text-decoration: underline; 
}

/* --- ÉLÉMENTS DE FORMULAIRE (Paramètres / Login) --- */
.admin-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px;
    border-radius: 5px;
    background: #1a222e; /* Fond foncé */
    color: var(--admin-text-light);
    border: 1px solid var(--admin-accent-cyan);
}
.admin-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: var(--admin-accent-cyan);
    color: var(--admin-sidebar-dark); /* Texte très foncé sur l'accent */
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}
.admin-button:hover {
    opacity: 0.9;
}

/* --- ÉCRAN DE CONNEXION (Style sombre) --- */
#login-screen {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    background: var(--admin-card-bg);
    border-radius: var(--admin-border-radius);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.2);
    color: var(--admin-text-light);
}
#login-screen button {
    background-color: var(--admin-accent-cyan); 
    color: var(--admin-sidebar-dark); 
    /* Utilise la classe admin-button pour le style */
}

/* ========================================================= */
/* NOUVEAUX STYLES STATS (Popularité & Stats) */
/* ========================================================= */

/* Nouvelle Police Futuriste (Optionnel, si vous avez une police spécifique à charger) */
/* Pour un effet instantané, on utilise une famille de polices "Techno" */
.admin-sidebar, .section-title, .stat-value, .admin-logo {
    /* Ex: 'Orbitron', sans-serif; */
        font-family: 'Consolas', 'Courier New', monospace; /* Police monospace pour un look "terminal" */
        }

        /* Conteneur Flex/Grid pour les cartes de statistiques */
        .stats-grid-container {
            display: flex; /* Utilise Flexbox pour aligner les cases */
                gap: 20px; /* Espace entre les cases */
                    margin-bottom: 20px;
                        flex-wrap: wrap; /* Assure la responsivité */
                        }

                        /* Style de la carte de statistique individuelle */
                        .admin-stat-card {
                            flex: 1 1 300px; /* Chaque carte prend au moins 300px et s'étend */
                                background-color: var(--admin-card-bg);
                                    border-radius: var(--admin-border-radius);
                                        padding: 25px;
                                            text-align: center;
                                                border: 1px solid rgba(0, 188, 212, 0.2);
                                                    box-shadow: 0 0 10px rgba(0, 188, 212, 0.1);
                                                        transition: transform 0.2s, box-shadow 0.2s;
                                                            min-width: 200px; /* Taille minimale pour ne pas être trop écrasé */
                                                            }

                                                            .admin-stat-card:hover {
                                                                transform: translateY(-5px);
                                                                    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.2);
                                                                    }

                                                                    /* Valeur Numérique (Grosse police futuriste) */
                                                                    .stat-value {
                                                                        display: block;
                                                                            font-size: 3.5em;
                                                                                font-weight: bold;
                                                                                    color: var(--admin-accent-cyan);
                                                                                        margin-bottom: 5px;
                                                                                            text-shadow: 0 0 8px rgba(0, 188, 212, 0.7); /* Effet néon */
                                                                                            }

                                                                                            /* Étiquette (Libellé) */
                                                                                            .stat-label {
                                                                                                display: block;
                                                                                                    font-size: 1.1em;
                                                                                                        color: #a0a0a0;
                                                                                                            text-transform: uppercase;
                                                                                                            }

                                                                                                            /* Accentuation pour les Commandes (couleur verte) */
                                                                                                            .admin-stat-card.accent-green .stat-value {
                                                                                                                color: #4CAF50; /* Vert futuriste */
                                                                                                                    text-shadow: 0 0 8px rgba(76, 175, 80, 0.7);
                                                                                                                    }
                                                                                                                    
/* ========================================================= */
/* STOCK INDISPONIBLE SUR LA PAGE DE COMMANDE */
/* ========================================================= */

/* 1. Rendre l'élément grisé et non cliquable */
.product-card.unavailable {
    /* Griser l'apparence */
    opacity: 0.5; 
    filter: grayscale(80%); 
    /* Interdire le clic */
    pointer-events: none; 
    position: relative; /* Nécessaire pour positionner le bandeau */
    overflow: hidden; /* Assure que le bandeau reste dans la carte */
}

/* ========================================================= */
/* STYLE SPÉCIFIQUE : Bouton de Déconnexion (Rouge)          */
/* ========================================================= */

.admin-sidebar .logout-button {
    /* Fond Rouge */
        background-color: #d9534f; /* Un rouge vif (similaire à la couleur "unavailable") */
            color: var(--color-secondary) !important; /* Texte blanc/crème */
                
                    /* Pour s'assurer qu'il reste en bas de la sidebar (facultatif si déjà en bas) */
                         
                            
                                /* Bordure/Encadrement (même couleur que le fond pour l'effet bouton) */
                                    border: 1px solid #d9534f; 
                                    }

                                    /* Effet de survol (hover) pour l'ergonomie */
                                    .admin-sidebar .logout-button:hover {
                                        background-color: #c9302c; /* Un rouge légèrement plus foncé au survol */
                                            cursor: pointer;
                                                box-shadow: 0 0 10px rgba(217, 83, 79, 0.5); /* Optionnel : Petite ombre rouge */
                                                }

                                                /* S'assurer que le texte ne devienne pas noir si l'onglet actif n'est pas utilisé pour la déconnexion */
                                                .admin-sidebar .logout-button.active {
                                                    background-color: #d9534f; 
                                                        color: var(--color-secondary) !important;
                                                        }

/* ========================================================= */
/* 🟢 NOUVEAU : Icône de Connexion Néon (PC & Mobile) */
/* ========================================================= */

/* 1. Conteneur (Le lien cliquable, doit être placé dans .header-actions) */
.account-icon-link {
    display: flex;
        align-items: center;
            justify-content: center;
                padding: 0 5px; 
                    height: var(--header-height); /* Assure l'alignement vertical */
                        text-decoration: none;
                            margin-left: 15px; /* Espace l'icône du bouton panier */
                            }

                            /* 2. Image (L'icône néon elle-même) */
                            .account-icon-image {
                                width: 80px;  
                                    height: 80px; 
                                        display: block; 
                                            cursor: pointer;
                                                
                                                    /* Effet néon - utilisez le code couleur qui vous plaît */
                                                        filter: drop-shadow(0 0 5px #ff00ff) brightness(1.2); 
                                                        }

                                                        /* 3. Effet au survol */
                                                        .account-icon-link:hover .account-icon-image {
                                                            transform: scale(1.1); 
                                                                transition: transform 0.2s ease-in-out;
                                                                    filter: drop-shadow(0 0 8px #F7BD50) brightness(1.5); /* Intensifie l'effet */
                                                                    }
/* ========================================================= */
/* 🟢 CORRECTION MOBILE : Alignement de l'icône de compte */
/* ========================================================= */
@media (max-width: 768px) {
    /* 1. Assurer que le conteneur d'actions est en Flexbox sur mobile */
        .header-actions {
                /* Cela dépend de votre structure, mais souvent on veut aligner les éléments 
                           panier et compte côte à côte. */
                                   display: flex;
                                           align-items: center;
                                                   justify-content: flex-end; /* Aligne les éléments à droite */
                                                           /* Si vous aviez un menu hamburger, il faudrait l'exclure ou ajuster ici */
                                                               }

                                                                   /* 2. Réinitialiser la position de l'icône de compte */
                                                                       .account-icon-link {
                                                                               /* On annule toute position absolue qui pourrait avoir été héritée 
                                                                                          et qui cause le décalage. */
                                                                                                  position: static !important; /* Force l'élément à reprendre sa place dans le flux normal */
                                                                                                          
                                                                                                                  /* Ajustement de l'espacement pour le mobile */
                                                                                                                          margin-left: 10px; /* Espace par rapport au bouton panier */
                                                                                                                                  padding: 0;
                                                                                                                                      }

                                                                                                                                          /* 3. Ajuster la taille de l'icône (optionnel, mais souvent utile sur mobile) */
                                                                                                                                              .account-icon-image {
                                                                                                                                                      width: 64px; /* Légèrement plus petite pour le mobile */
                                                                                                                                                              height: 64px;
                                                                                                                                                                  }
                                                                                                                                                                  }

@media (max-width: 768px) {
        .main-header {
                display: flex;
                        justify-content: space-between;
                                align-items: center;
                                        padding: 0 5px;
                                            }

                                                .navbar {
                                                        display: flex;
                                                                align-items: center;
                                                                    }

                                                                        .nav-links {
                                                                                display: none;
                                                                                    }

                                                                                        .header-actions {
                                                                                                display: flex;
                                                                                                        align-items: center;
                                                                                                            }

                                                                                                                .account-icon-link {
                                                                                                                        position: static;
                                                                                                                                margin-left: 10px; /* L'espacement de 10px entre le panier et l'icône */
                                                                                                                                        padding: 0;
                                                                                                                                            }

                                                                                                                                                /* 6. Ajuster la taille de l'icône */
                                                                                                                                                    .account-icon-image {
                                                                                                                                                            width: 64px;
                                                                                                                                                                    height: 64px;
                                                                                                                                                                        }
                                                                                                                                                                        }



/* ========================================================= */
/* 🟢 CORRECTION PC : Positionnement de l'icône tout à droite */
/* S'applique aux écrans de 769px et plus (PC) */
/* ========================================================= */
@media (min-width: 769px) {

        /* Pousse l'icône de compte tout à droite */
            .account-icon-link {
                    /* On force la position absolue par rapport à .main-header (qui doit être en relative) */
                            position: absolute; 

                                            top: 1px; /* Ajustez cette valeur pour la centrer verticalement dans votre header */
                                                    right: 20px; /* Marge à droite pour le PC */

                                                                    z-index: 1000; /* Assurez-vous qu'elle est au-dessus du reste */

                                                                                    /* On annule les marges et paddings qui pourraient la décaler */
                                                                                            margin: 0 !important;
                                                                                                    padding: 0 !important;
                                                                                                        }

                                                                                                                /* Si vous utilisez le bloc d'actions sur PC, il faut le masquer */
                                                                                                                    .header-actions {
                                                                                                                            /* Si le bouton panier/compte doit être géré par l'absolute ci-dessus, 
                                                                                                                                       masquez le conteneur d'actions pour ne pas avoir de doublon. */
                                                                                                                                               /* display: none; */ 
                                                                                                                                                       /* Si vous laissez les actions sur PC, NE PAS DÉCOMMENTER cette ligne. */
                                                                                                                                                           }
                                                                                                                                                           }

                                                                                                                                                                
                                                                    
                                                                            
                                                                                    
    
/* ========================================================= */
/* 🟢 CORRECTION MOBILE : Bouton Panier en Haut à Gauche */
/* ========================================================= */
@media (max-width: 768px) {
    /* 1. Positionnement Absolu du Bouton Panier */
        #cart-button {
                position: absolute; /* Permet de le positionner librement par rapport au header */
                        top: -10px;      /* ⬅️ Ajustez cette valeur pour la hauteur souhaitée */
                                left: 60px;     /* ⬅️ Marge à gauche (15px du bord) */
                                        right: auto;    /* Annule toute position 'right' héritée */
                                                z-index: 1000;  /* S'assure qu'il est bien visible au-dessus du reste */

                                                                /* Ajustements de taille et d'espacement pour le rendre plus compact sur mobile */
                                                                        padding: 8px; /* Réduit le padding du bouton */
                                                                                font-size: 1.1em;
                                                                                    }

                                                                                        /* 2. Réaligner le compteur du panier (le petit cercle rouge) */
                                                                                            #cart-button .cart-count {
                                                                                                    top: -5px; /* Ajustez pour positionner au-dessus ou sur le coin */
                                                                                                            right: -5px; 
                                                                                                                }

                                                                                                                    /* 3. Ajuster le conteneur .header-actions */
                                                                                                                        /* On annule le conteneur d'actions pour le bouton Panier, mais on le laisse pour l'icône de compte */
                                                                                                                            .header-actions {
                                                                                                                                    /* Assurez-vous que le conteneur ne gêne pas le bouton Panier déplacé */
                                                                                                                                            position: relative; /* ou static */
                                                                                                                                                    /* Si l'icône de compte est bien positionnée, laissez ses styles précédents intacts */
                                                                                                                                                        }

                                                                                                                                                                /* Le logo (LE SMASHÉ) est dans la nav, le bouton panier en absolute ne devrait pas le gêner */
                                                                                                                                                                }

/* ========================================================= */
/* 🟢 MISE EN PAGE : 2 Articles Côte à Côte */
/* ========================================================= */

/* Le conteneur de tous les articles (à ajuster selon votre HTML) */
.menu-list {
    display: flex; /* Active le mode Flexbox */
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
            gap: 15px;      /* ⬅️ Espace entre les cases (ajustez si besoin) */
                justify-content: space-between; /* Pour étaler les éléments ou les centrer */
                    padding: 10px 0;
                    }

                    /* ⚠️ IMPORTANT : Vous devrez peut-être ajuster le sélecteur ci-dessus (.menu-category-section) 
                       pour qu'il corresponde au conteneur réel de vos items dans commander.html.txt. 
                          Je vais utiliser .menu-item pour la suite. */
                          /* Redimensionne chaque article pour n'occuper qu'une moitié de l'espace */
                          .menu-item {
                              /* 48% ou 49% pour laisser de la place pour le gap (15px) */
                                  width: calc(50% - 7.5px); /* 50% moins la moitié de l'espace de gap (15px / 2) */
                                      
                                          /* Assurez-vous que les éléments de l'article s'adaptent bien */
                                              flex-direction: column; /* Organise le contenu verticalement si nécessaire */
                                                  /* ... Gardez les autres styles de bordure, ombre, etc. ... */
                                                  }

                                                  /* Si vous avez une version mobile/PC distincte pour la largeur, ajoutez ceci : */
                                                  @media (max-width: 768px) {
                                                      .menu-item {
                                                              /* On conserve 2 cases côte à côte aussi sur mobile, c'est ce qui est demandé */
                                                                      width: calc(50% - 7.5px);
                                                                          }
                                                                          }

                                                                          /* Ajustement pour 3 ou 4 cases sur PC (OPTIONNEL) */
                                                                          @media (min-width: 1024px) {
                                                                              /* Si vous voulez 3 cases côte à côte sur PC, vous pouvez faire : */
                                                                                  /* .menu-item {
                                                                                          width: calc(33.333% - 10px); 
                                                                                              } */
                                                                                              }

/* ========================================================= */
/* 🟢 STYLE POP-UP PROMOTIONNEL (SMASH15) */
/* ========================================================= */

/* Le fond opaque (overlay) qui masque le reste de la page */
#promo-popup.modal {
    display: none; /* Masqué par défaut (c'est le JS qui l'affiche) */
        position: fixed;
            z-index: 2000; /* Doit être très haut pour être au-dessus de tout */
                left: 0;
                    top: 0;
                        width: 100%;
                            height: 100%;
                                overflow: auto;
                                    background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
                                    }

                                    /* Le conteneur du contenu du pop-up */
                                    .promo-modal {
                                        background-color: var(--color-secondary); /* Blanc Crème */
                                            margin: 15% auto; /* Centrage vertical et horizontal */
                                                padding: 30px;
                                                    border-radius: 10px;
                                                        width: 80%; /* Largeur par défaut */
                                                            max-width: 400px; /* Limite la taille sur grand écran */
                                                                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
                                                                    text-align: center;
                                                                        position: relative;
                                                                            animation: fadeIn 0.5s;
                                                                            }
                                                                            /* Titre et texte */
                                                                            .popup-title {
                                                                                color: var(--color-accent); /* Or Mat */
                                                                                    font-family: var(--font-serif);
                                                                                        margin-bottom: 15px;
                                                                                            font-size: 1.8em;
                                                                                            }

                                                                                            .promo-code-box {
                                                                                                background-color: var(--color-primary); /* Noir Profond */
                                                                                                    color: white;
                                                                                                        padding: 15px 10px;
                                                                                                            margin: 20px 0;
                                                                                                                border-radius: 5px;
                                                                                                                    display: inline-block;
                                                                                                                    }

                                                                                                                    .promo-code-value {
                                                                                                                        font-size: 1.6em;
                                                                                                                            color: var(--color-accent); /* Or Mat */
                                                                                                                                display: block;
                                                                                                                                    margin-top: 5px;
                                                                                                                                    }

                                                                                                                                    .popup-discount-info {
                                                                                                                                        margin-top: 15px;
                                                                                                                                            font-weight: bold;
                                                                                                                                                color: var(--color-primary);
                                                                                                                                                }

                                                                                                                                                /* Bouton Fermer */
                                                                                                                                                #close-popup-btn {
                                                                                                                                                    margin-top: 25px;
                                                                                                                                                        padding: 12px 30px;
                                                                                                                                                            background-color: var(--color-accent); /* Or Mat */
                                                                                                                                                                color: var(--color-primary);
                                                                                                                                                                    border: none;
                                                                                                                                                                        cursor: pointer;
                                                                                                                                                                            font-size: 1.1em;
                                                                                                                                                                                font-weight: bold;
                                                                                                                                                                                    border-radius: 5px;
                                                                                                                                                                                    }

                                                                                                                                                                                    /* Animation d'apparition */
                                                                                                                                                                                    @keyframes fadeIn {
                                                                                                                                                                                        from { opacity: 0; transform: translateY(-20px); }
                                                                                                                                                                                            to { opacity: 1; transform: translateY(0); }
                                                                                                                                                                                            }

                                                                                                                                                                                            /* Mobile Adjustments */
                                                                                                                                                                                            @media (max-width: 600px) {
                                                                                                                                                                                                .promo-modal {
                                                                                                                                                                                                        margin: 10% auto;
                                                                                                                                                                                                                width: 90%;
                                                                                                                                                                                                                    }
                                                                                                                                                                                                                    }

  /* ========================================================= */
  /* 🟢 STYLE : Page Publique Nouveautés (nouveautes.html) */
  /* ========================================================= */
  .announcements-grid {
      display: grid;
          /* 2 colonnes par défaut sur grand écran, 1 sur mobile */
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
                  gap: 30px;
                      padding: 30px 5%;
                          max-width: 1200px;
                              margin: 0 auto;
                              }

                              .announcement-card {
                                  background-color: var(--color-secondary); 
                                      border: 1px solid rgba(0, 0, 0, 0.1);
                                          border-radius: 10px;
                                              overflow: hidden;
                                                  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
                                                      transition: transform 0.3s;
                                                      }

                                                      .announcement-card:hover {
                                                          transform: translateY(-5px);
                                                              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
                                                              }

                                                              .announcement-image {
                                                                  width: 100%;
                                                                      height: 200px;
                                                                          object-fit: cover;
                                                                              display: block;
                                                                              }

                                                                              .announcement-content {
                                                                                  padding: 20px;
                                                                                  }

                                                                                  .announcement-date {
                                                                                      display: block;
                                                                                          font-size: 0.85em;
                                                                                              color: #888;
                                                                                                  margin-bottom: 5px;
                                                                                                  }

                                                                                                  .announcement-title {
                                                                                                      font-family: var(--font-serif);
                                                                                                          color: var(--color-primary);
                                                                                                              font-size: 1.5em;
                                                                                                                  margin-bottom: 10px;
                                                                                                                  }

                                                                                                                  .announcement-message {
                                                                                                                      font-size: 1em;
                                                                                                                          color: var(--color-text-dark);
                                                                                                                          }

                                                                                                                          .no-announcement-msg {
                                                                                                                              text-align: center;
                                                                                                                                  grid-column: 1 / -1; /* Prend toute la largeur de la grille */
                                                                                                                                      padding: 50px;
                                                                                                                                          font-size: 1.2em;
                                                                                                                                              color: #666;
                                                                                                                                              }
                                                                                                                                              
/* ========================================================= */
/* 🟢 STYLE : Ajouts Admin Annonces */
/* ========================================================= */
#new-announcement-form label,
#new-announcement-form input[type="text"],
#new-announcement-form input[type="url"],
#new-announcement-form textarea {
    display: block;
        width: 100%;
            margin-bottom: 15px;
            }

            #announcements-list {
                list-style: none;
                    padding: 0;
                    }

                    #announcements-list li {
                        display: flex;
                            justify-content: space-between;
                                align-items: center;
                                    padding: 10px 0;
                                        border-bottom: 1px dotted #ccc;
                                            font-family: var(--font-sans);
                                            }

                                            .announcement-date-small {
                                                color: #888;
                                                    font-size: 0.9em;
                                                        margin-left: 10px;
                                                        }

                                                        #announcements-list .delete-btn {
                                                            background-color: #d9534f;
                                                                color: white;
                                                                    border: none;
                                                                        padding: 5px 10px;
                                                                            cursor: pointer;
                                                                                border-radius: 3px;
                                                                                    font-size: 0.85em;
                                                                                    }  
                                                                                    
/* ========================================================= */
/* STYLE POUR LES NOUVEAUX INPUTS DU DASHBOARD ADMIN (ANNONCES) */
/* ========================================================= */

/* Assure que l'input couleur est bien dimensionné et aligné avec les autres champs */
.admin-input[type="color"] {
    /* Le !important peut être nécessaire pour écraser des styles génériques si l'input[type="text"] est ciblé */
        padding: 2px; 
            border-radius: 4px;
                height: 38px !important; /* Assure l'alignement vertical */
                    width: 100%;
                        /* Retrait de la bordure double sur certains navigateurs */
                            box-sizing: border-box; 
                                border: 1px solid var(--color-text-dark); /* Bordure standard */
                                }

                                /* Style de base pour le champ de téléchargement de fichier */
                                .admin-input[type="file"] {
                                    /* Utilise les styles de bordure du thème */
                                        border: 1px solid var(--color-text-dark);
                                            padding: 8px;
                                                background-color: var(--color-secondary); 
                                                    border-radius: 4px;
                                                        width: 100%;
                                                        }
                                                        
/* ========================================================= */
/* STYLE SPÉCIFIQUE POUR L'INPUT DE FICHIER (TÉLÉCHARGEMENT D'IMAGE) */
/* ========================================================= */

.admin-input[type="file"] {
    /* Utilise les styles de bordure du thème */
        border: 1px solid var(--color-text-dark);
            padding: 8px;
                background-color: var(--color-secondary); 
                    border-radius: 4px;
                        width: 100%;
                            /* ⚠️ Cache les contrôles natifs pour certains navigateurs (optionnel) */
                                color: var(--color-text-dark); 
                                    font-family: var(--font-sans);
                                    }

                                    /* Styles pour le bouton "Choisir un fichier" à l'intérieur de l'input */
                                    /* Note: Ceci est très limité en CSS. Nous stylisons le conteneur. */
                                    .admin-input[type="file"]::-webkit-file-upload-button {
                                        background-color: var(--color-accent); 
                                            color: #007bff;
                                                padding: 6px 12px;
                                                    border: none;
                                                        border-radius: 4px;
                                                            cursor: pointer;
                                                                font-weight: bold;
                                                                    margin-right: 15px;
                                                                        transition: background-color 0.2s;
                                                                        }

                                                                        .admin-input[type="file"]::-webkit-file-upload-button:hover {
                                                                            background-color: #278ef5; /* Teinte légèrement plus foncée au survol */
                                                                            }

                                                                            /* Fallback pour Firefox */
                                                                            .admin-input[type="file"]::file-selector-button {
                                                                                background-color: var(--color-accent); 
                                                                                    color: white;
                                                                                        padding: 6px 12px;
                                                                                            border: none;
                                                                                                border-radius: 4px;
                                                                                                    cursor: pointer;
                                                                                                        font-weight: bold;
                                                                                                            margin-right: 15px;
                                                                                                                transition: background-color 0.2s;
                                                                                                                }

                                                                                                                .admin-input[type="file"]::file-selector-button:hover {
                                                                                                                    background-color: #278ef5;
                                                                                                                    }

/* ========================================= */
/* NOUVEAU: STYLE MOBILE MENU (GLOBAL)       */
/* ========================================= */

.menu-toggle {
    /* Cache le bouton hamburger par défaut (Desktop) */
        display: none;
            background: none;
                border: none;
                    color: var(--main-text-color, #FFF); /* Utiliser la couleur de votre site */
                        font-size: 1.5rem;
                            cursor: pointer;
                                margin-left: 10px;
                                    z-index: 1100; /* Assure qu'il est au-dessus de tout */
                                    }

                                    /* Conteneur des icônes à droite du header */
                                    .header-icons {
                                        display: flex;
                                            align-items: center;
                                                gap: -15px; /* Espace entre les icônes */
                                                }

                                                /* Menu latéral masqué */
                                                .mobile-menu {
                                                    position: fixed;
                                                        top: 0;
                                                            right: 0;
                                                                width: 280px; /* Largeur du menu */
                                                                    height: 100%;
                                                                        background-color: #1a1a1a; /* Fond sombre pour contraste */
                                                                            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
                                                                                transform: translateX(100%); /* Masque le menu à droite */
                                                                                    transition: transform 0.4s ease-out;
                                                                                        padding-top: 80px; /* Espace sous le header */
                                                                                            z-index: 1050;
                                                                                                overflow-y: auto;
                                                                                            }

                                                                                            .mobile-menu.is-open {
                                                                                                transform: translateX(0); /* Révèle le menu */
                                                                                                }

                                                                                                .mobile-menu ul {
                                                                                                    list-style: none;
                                                                                                        padding: 0;
                                                                                                        }

                                                                                                        .mobile-menu li a {
                                                                                                            display: block;
                                                                                                                padding: 15px 25px;
                                                                                                                    color: #EEE;
                                                                                                                        font-size: 1.1rem;
                                                                                                                            border-bottom: 1px solid #333;
                                                                                                                                transition: background-color 0.2s;
                                                                                                                                }

                                                                                                                                .mobile-menu li a:hover {
                                                                                                                                    background-color: #333;
                                                                                                                                        color: var(--main-accent-color); /* Utiliser votre couleur d'accent (doré/orange) */
                                                                                                                                        }
                                                                                                                                        /* ========================================= */
                                                                                                                                        /* MEDIA QUERY (Règles spécifiques mobile)   */
                                                                                                                                        /* ========================================= */

                                                                                                                                        @media (max-width: 768px) {
                                                                                                                                            /* 1. Cache la navigation Desktop */
                                                                                                                                                .nav-links {
                                                                                                                                                        display: none;
                                                                                                                                                            }

                                                                                                                                                                /* 2. Affiche le bouton Hamburger */
                                                                                                                                                                    .menu-toggle {
                                                                                                                                                                            display: block;
                                                                                                                                                                                }
                                                                                                                                                                                }

/* ================================================= */
/* AJUSTEMENT DE L'ESPACEMENT ENTRE LES DEUX ICONES */
/* ================================================= */

/* Cibler l'icône de connexion (l'élément à gauche) */
.header-icons .account-icon-link {
    /* Diminue la marge à droite de l'icône de connexion. 
           Ceci va rapprocher le bouton hamburger (qui est l'élément suivant). */
               margin-right: 5px !important; /* Testez avec 5px ou moins. Utilisez !important pour écraser les conflits. */
                   margin-left: 0 !important;
                   }

                   /* Vous pouvez aussi jouer sur le bouton hamburger lui-même */
                   .menu-toggle {
                       /* Si l'icône de connexion a une grande marge à droite, 
                              cette marge négative peut tirer le bouton vers la gauche. */
                                  margin-left: -5px; /* Testez des valeurs négatives (ex: -5px) si 
                                                             la marge positive ne fonctionne pas. */
                                                                 margin-right: 0;
                                                                 }

.menu-header {
    display: flex;
        justify-content: space-between;
            align-items: center;
                padding: 15px 25px;
                    /* Soulignement fin et doré */
                        border-bottom: 2px solid #ffb800; 
                            background-color: #222; /* Fond légèrement plus clair pour le header */
                            }

                            .menu-title {
                                font-size: 1.2rem;
                                    font-weight: 700;
                                        color: #ffb800; /* Titre en couleur d'accent */
                                        }

                                        .close-menu {
                                            background: none;
                                                border: none;
                                                    cursor: pointer;
                                                        font-size: 1.5rem;
                                                            color: #ffb800; /* Icône de fermeture en couleur d'accent */
                                                                transition: color 0.2s;
                                                                }

                                                                .close-menu:hover {
                                                                    color: #ffd24c; /* Légèrement plus clair au survol */
                                                                    }

                                                                    /* ---------------------- Styles des liens ---------------------- */

                                                                    .mobile-menu li a {
                                                                        /* Style plus grand et plus espacé */
                                                                            padding: 18px 25px; 
                                                                                font-size: 1.15rem;
                                                                                    color: #e0e0e0;
                                                                                        border-bottom: 1px solid #333;
                                                                                        }

                                                                                        .mobile-menu li a:hover {
                                                                                            background-color: #333;
                                                                                                color: #ffb800; 
                                                                                                }

                                                                                                /* Style pour la ligne de séparation */
                                                                                                .mobile-menu .separator {
                                                                                                    height: 10px;
                                                                                                        background-color: #222;
                                                                                                            border-bottom: none;
                                                                                                            }

/* ================================================= */
/* AJUSTEMENT SPÉCIFIQUE DES TITRES D'ACCUEIL (MOBILE) */
/* ================================================= */

@media (max-width: 768px) {
    /* ... règles du menu mobile (display: none, display: block) ... */

        /* 1. Titre Principal (Ex: L'ART DU SMASH BURGER) */
            .hero-section h1 {
                    /* Réduit la taille pour qu'elle tienne sur une seule ligne */
                            font-size: 2.5rem; 
                                    /* Peut être ajusté : 2.0rem, 2.2rem, 2.8rem, etc. */
                                        }

                                            /* 2. Sous-Titre (Ex: LE GOÛT SMASHÉ DE L'EXCELLENCE) */
                                                .hero-section h2 {
                                                        /* Réduit la taille pour le sous-titre */
                                                                font-size: 1.2rem;
                                                                        /* Assure que la marge sous le titre est bonne */
                                                                                margin-bottom: 20px; 
                                                                                    }
}

/* ================================================= */
/* AJUSTEMENT SPÉCIFIQUE DES TITRES DE LA PAGE LIVRAISON (MOBILE) */
/* ================================================= */

@media (max-width: 768px) {
    /* ... d'autres règles Media Query existantes ... */

        /* 1. Titre principal (Livraison Luxe & Express) */
            .page-hero-livraison h1 {
                    /* Réduction forte pour qu'il tienne sur l'écran */
                            font-size: 1.5rem !important; 
                                    line-height: 1.1;
                                        }

                                            /* 2. Sous-titre (Savourez l'excellence du Smash Burger...) */
                                                .page-hero-livraison h2 {
                                                        /* Réduction modérée du sous-titre */
                                                                font-size: 0.8rem !important; 
                                                                        padding: 0 10px; /* Ajoute un petit espace sur les côtés si le texte est long */
                                                                            }

                                                                                /* ... le reste de vos règles Media Query ... */
                                                                                }

/* ================================================= */
/* AJUSTEMENT SPÉCIFIQUE DES TITRES DE LA PAGE CONTACT (MOBILE) */
/* ================================================= */

@media (max-width: 768px) {
    /* ... d'autres règles Media Query existantes ... */

        /* 1. Titre principal (Livraison Luxe & Express) */
            .page-hero-contact h1 {
                    /* Réduction forte pour qu'il tienne sur l'écran */
                            font-size: 1.5rem !important; 
                                    line-height: 1.1;
                                        }

                                                                                /* ... le reste de vos règles Media Query ... */
                                                                                }

                                                                                
/* ================================================================ */
/* STYLES DES PAGES DE CONNEXION ET INSCRIPTION (login.html)        */
/* ================================================================ */

.login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alignement en haut (pour ne pas écraser le header) */
    min-height: 80vh;
    padding: 80px 20px 50px 20px;
    background-color: var(--main-bg-color, #111); /* Fond sombre */
}

.login-card {
    background-color: #222;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 400px;
}

.card-title {
    color: white;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 25px;
}

/* Onglets */
.tab-buttons {
    display: flex;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #333;
}

.tab-btn {
    flex-grow: 1;
    padding: 12px 0;
    border: none;
    background-color: #333;
    color: #AAA;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.tab-btn.active {
    background-color: var(--main-accent-color, #ffb800);
    color: #111;
    font-weight: bold;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Champs de formulaire */
.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    color: #CCC;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #333;
    color: white;
    font-size: 1rem;
}

.input-group input:focus {
    border-color: var(--main-accent-color, #ffb800);
    outline: none;
}

.forgot-password {
    display: block;
    text-align: right;
    color: #ffb800;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.verification-note, .input-group small {
    display: block;
    color: #777;
    font-size: 0.8rem;
    margin-top: 5px;
    margin-bottom: 15px;
}
    
/* ================================================================ */
/* STYLES DU TABLEAU DE BORD (dashboard.php)                        */
/* ================================================================ */

.dashboard-layout {
    display: flex;
    min-height: 80vh;
    padding: 40px 20px;
    background-color: #111;
    color: #e0e0e0;
}

/* Colonne de Navigation Gauche (Sidebar) */
.sidebar {
    width: 250px;
    padding-right: 30px;
    border-right: 1px solid #333;
}

.user-info {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
    font-size: 1.1rem;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
}

.dashboard-nav a {
    color: #ccc;
    text-decoration: none;
    padding: 12px 0;
    margin-bottom: 5px;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
}

.dashboard-nav a i {
    margin-right: 10px;
    width: 20px; /* Assure l'alignement des icônes */
    text-align: center;
}

.dashboard-nav a:hover,
.dashboard-nav a.active {
    background-color: #333;
    color: #ffb800;
}

.logout-btn {
    margin-top: 20px;
    color: #f44336; /* Rouge pour déconnexion */
}

/* Zone de Contenu Principale */
.content-area {
    flex-grow: 1;
    padding-left: 40px;
}

.loyalty-header {
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 5px solid #ffb800;
}

.loyalty-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: white;
}

#loyalty-points {
    color: #ffb800;
    font-weight: bold;
}

.dashboard-section {
    display: none;
    margin-bottom: 40px;
}

.dashboard-section.active {
    display: block;
}

.dashboard-section h3 {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #ffb800;
}

/* Styles des Commandes Passées */
#order-list {
    list-style: none;
    padding: 0;
}

#order-list li {
    background-color: #222;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 3px solid #ffb800;
}

.empty-state {
    color: #777;
    font-style: italic;
}
    
/* ... À L'INTÉRIEUR DE @media (max-width: 768px) ... */

    /* Ajustement de la carte de connexion sur mobile */
    .login-card {
        padding: 25px;
        margin-top: 20px;
    }

    /* Layout du Dashboard */
    .dashboard-layout {
        flex-direction: column; /* La sidebar passe au-dessus */
        padding: 20px 10px;
    }

    /* Sidebar devient un bloc horizontal */
    .sidebar {
        width: 100%;
        padding: 0 0 20px 0;
        border-right: none;
        border-bottom: 1px solid #333;
    }

    .user-info {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .dashboard-nav {
        flex-direction: row; /* Les liens sont côte à côte */
        flex-wrap: wrap; /* S'ils sont trop nombreux, ils passent à la ligne */
        justify-content: center;
    }
    
    .dashboard-nav a {
        padding: 8px 15px;
        margin: 5px;
        /* Pour que les liens ne prennent pas toute la largeur */
        width: auto; 
    }
    
    /* Contenu du Dashboard */
    .content-area {
        padding-left: 0;
        padding-top: 20px;
    }
    
    .loyalty-header h2 {
        font-size: 1.4rem;
    }

/* ... FIN DU BLOC @media ... */

/* ================================================================ */
/* STYLES DES BOUTONS CTA (Call To Action) généraux                 */
/* ================================================================ */

.cta-button {
    background-color: var(--main-accent-color, #ffb800);
    color: #111;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
    text-decoration: none; /* Pour les liens stylisés en bouton */
    display: inline-block;
    text-align: center;
}

.cta-button:hover {
    background-color: #ffd24c; /* Jaune plus clair au survol */
}

.full-width {
    width: 100%;
}

/* ================================================================ */
/* STYLES SPÉCIFIQUES POUR LE MOT DE PASSE (Icône Oeil)             */
/* ================================================================ */

.password-container {
    position: relative; /* Conteneur parent pour positionner l'oeil */
    display: flex;
    align-items: center;
}

.password-container input {
    width: 100%;
    /* padding-right doit laisser de la place pour l'icône */
    padding-right: 40px; 
}

.toggle-password {
    position: absolute;
    right: 15px;
    cursor: pointer;
    color: #999; /* Couleur de l'icône */
    transition: color 0.2s;
    font-size: 1.1rem;
    z-index: 10; /* Assure que l'icône est au-dessus du champ */
}

.toggle-password:hover {
    color: #ffb800;
}

/* ================================================================ */
/* STYLES DES CRITÈRES DE MOT DE PASSE (Password Strength Meter)    */
/* ================================================================ */

.password-requirements {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.password-requirements li {
    font-size: 0.9rem;
    color: #999; /* Couleur par défaut (grise) */
    margin-bottom: 5px;
    transition: color 0.3s;
}

/* Style de l'icône d'échec */
.password-requirements li .fa-times-circle {
    color: #f44336; /* Rouge */
    margin-right: 8px;
}

/* Style de l'icône de succès (quand le critère est rempli) */
.password-requirements li.passed {
    color: #4CAF50; /* Vert */
    font-weight: 500;
}

.password-requirements li.passed .fa-check-circle {
    color: #4CAF50; /* Vert */
    margin-right: 8px;
}

/* S'assurer que le bouton d'inscription désactivé soit visiblement désactivé */
#register-button:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.6;
}



/* S'assurer que le conteneur principal du formulaire est centré et occupe l'espace */
.login-container {
    display: flex; /* Utilise Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement le contenu (le login-card) */
    align-items: flex-start; /* Centre verticalement (ou aligne au début) */
    padding: 50px 20px; /* Ajout d'un peu d'espace autour */
    min-height: 80vh; /* Assure que le conteneur prend une bonne hauteur */
    width: 100%;
    box-sizing: border-box; /* Pour inclure padding et bordure dans la largeur/hauteur */
}

.login-card {
    background-color: #222; /* Fond sombre du formulaire */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 400px; /* Limiter la largeur du formulaire */
}

/* Assurer que la zone de notification n'interfère pas avec le centrage du card */
.notification-area {
    /* Laisser les styles de notification tels quels, mais s'assurer qu'ils sont bien DANS le main ou au-dessus, pas en flex avec le login-card */
}
    
/* ================================================================ */
/* 1. STYLES DES NOTIFICATIONS (Position Absolue)                   */
/* ================================================================ */

/* La zone de notification est fixée en haut et centrée. 
   Elle ne perturbe plus le centrage du login-card. */
.notification-area {
    /* Utilise la position absolue pour sortir du flux normal du document */
    position: absolute; 
    top: 100px; /* Espace depuis le haut de la page (ou ajustez selon la hauteur de votre header) */
    left: 50%; /* Centre l'élément */
    transform: translateX(-50%); /* Déplace l'élément de 50% de sa propre largeur vers la gauche pour un centrage parfait */
    
    width: 90%; /* Prend une bonne largeur sur les petits écrans */
    max-width: 400px; /* Limite la largeur sur les grands écrans (match la largeur de la carte) */
    z-index: 1000; /* Assure que la notification est au-dessus de tout le reste */
    margin: 0; /* Important: supprime toute marge qui pourrait décaler */
    padding: 0;
}

.notification {
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ajoute un peu de profondeur */
}

/* Styles de couleur pour les différents types */
.notification.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.notification.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.notification.warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

/* ================================================================ */
/* 2. STYLES DE CENTRAGE (Vérification)                             */
/* ================================================================ */

/* Assurez-vous que ce bloc est bien présent pour centrer la carte elle-même */
.login-container {
    display: flex; 
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: flex-start; /* Aligne la carte vers le haut du conteneur */
    padding: 50px 20px; 
    min-height: 80vh; 
    width: 100%;
    box-sizing: border-box;
}

.login-card {
    /* Les styles de la carte de connexion */
    max-width: 400px; 
    width: 100%;
    /* ... autres styles de la carte ... */
}
   
/* ===================================================== */
/* 1. NOUVELLES VARIABLES & BASE CLEAN                   */
/* ===================================================== */
:root {
    --primary-color: #ff5722;       /* Accent Smash Orange */
    --accent-color: #03A9F4;        /* Bleu pour les liens/actions secondaires */
    --main-bg: #f4f7f6;             /* Fond de page très clair (Gris très très clair) */
    --sidebar-bg: #ffffff;          /* Fond Sidebar (Blanc) */
    --card-bg: #ffffff;             /* Fond des cartes (Blanc) */
    --text-dark: #333333;           /* Texte principal */
    --text-muted: #888888;          /* Texte secondaire/légende */
    --border-light: #e0e0e0;        /* Bords fins et clairs */
    --sidebar-width: 260px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body.clean-body {
    font-family: 'Arial', sans-serif;
    background-color: var(--main-bg);
    color: var(--text-dark);
}

/* Boutons et Liens de base */
.action-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    font-size: 0.9em;
}
.action-btn.primary {
    background-color: var(--primary-color);
    color: white;
}
.action-btn.secondary {
    background-color: var(--border-light);
    color: var(--text-dark);
}
.action-btn.primary:hover {
    background-color: #e64a19;
}
.action-btn:disabled {
    background-color: #bdbdbd;
    cursor: not-allowed;
    color: #616161;
}
.action-btn.small {
    padding: 7px 12px;
}


/* ===================================================== */
/* 2. LAYOUT & SIDEBAR (PC)                              */
/* ===================================================== */
.dashboard-wrapper {
    display: flex;
    min-height: calc(100vh - 60px); /* Ajuster selon hauteur du header */
    margin-top: 60px; /* Espace pour le header */
}

/* --- SIDEBAR --- */
.dashboard-sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    padding: 20px 0;
    position: fixed;
    height: 100%;
    z-index: 1000;
}
.sidebar-header {
    text-align: center;
    padding: 0 20px 30px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 20px;
}
.profile-avatar-area {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    position: relative;
    cursor: pointer;
}
.profile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
}
.avatar-edit-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--sidebar-bg);
}
.user-name { font-weight: bold; margin-bottom: 2px; }
.user-email { color: var(--text-muted); font-size: 0.85em; }

.sidebar-nav { margin-bottom: 20px; }
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.2s;
}
.sidebar-nav .nav-item i { margin-right: 15px; width: 18px; }
.sidebar-nav .nav-item:hover, .sidebar-nav .nav-item.active {
    background-color: #f0f0f0;
    color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
    padding-left: 21px;
}
.sidebar-nav .return-shop {
    color: var(--accent-color);
    margin-top: 20px;
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
}
.logout-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9em;
}


/* ===================================================== */
/* 3. CONTENU PRINCIPAL & CARTES                         */
/* ===================================================== */
.dashboard-main-content {
    flex-grow: 1;
    margin-left: var(--sidebar-width);
    padding: 30px;
    background-color: var(--main-bg);
}
.content-header h1 {
    font-size: 2em;
    color: var(--text-dark);
    margin-bottom: 20px;
}
.dashboard-section {
    margin-bottom: 40px;
}
.section-title-bar h2 {
    color: var(--text-dark);
    font-size: 1.5em;
    margin-bottom: 20px;
}
.notification-banner {
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: bold;
}
.notification-banner.success {
    background-color: #e8f5e9;
    color: #4caf50;
    border-left: 5px solid #4caf50;
}

/* --- STATS GRID (Cartes du haut) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.stat-card {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--border-light);
}
.stat-card.level-card {
    border-left-color: var(--primary-color); /* Couleur dynamique via JS/PHP */
}
.stat-label {
    font-size: 0.9em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 5px;
}
.stat-value {
    font-size: 1.6em;
    font-weight: bold;
}
.stat-token-img {
    max-width: 50px;
    height: auto;
}

/* --- SECTION CARD (Contenu) --- */
.section-card {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}
.section-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 10px;
}
.profile-action-box {
    padding: 20px;
    background-color: #fffde7;
    border: 1px solid #ffeb3b;
    border-radius: 8px;
    margin-bottom: 20px;
}
.profile-action-box .description {
    color: var(--text-muted);
    margin: 10px 0;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* --- GRILLES RÉCOMPENSES & SUPPORT --- */
.reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.reward-item {
    padding: 15px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    text-align: center;
}
.support-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.support-link-card {
    display: block;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background-color: #f0f0f0;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: bold;
    transition: background-color 0.2s;
}
.support-link-card i {
    font-size: 2em;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}
.support-link-card:hover {
    background-color: #e0e0e0;
}

/* --- FORMULAIRES ET INPUTS --- */
.input-group {
    margin-bottom: 15px;
}
.input-group label {
    display: block;
    font-size: 0.9em;
    margin-bottom: 5px;
    font-weight: 600;
}
.input-group input[type="text"], .input-group input[type="password"], .input-group input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.checkbox-group input {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}
.referral-link-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-light);
    background-color: #f7f7f7;
    border-radius: 4px;
    margin-bottom: 10px;
    font-family: monospace;
}
.small-info {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 10px;
}


/* --- PROGRÈS BARRE --- */
.progress-container {
    background-color: #f0f0f0;
    border-radius: 10px;
    height: 12px;
    margin-top: 10px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}

/* ===================================================== */
/* 4. MEDIA QUERIES (Mobile) - Correction Totale         */
/* ===================================================== */
@media (max-width: 768px) {
    
    .dashboard-wrapper {
        flex-direction: column;
        margin-top: 0;
    }
    
    /* --- SIDEBAR MOBILE (Barre d'onglets) --- */
    .dashboard-sidebar {
        width: 100%;
        position: static;
        height: auto;
        padding: 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1; /* Reste sous le header */
    }
    .sidebar-header {
        display: none; /* Cache les infos de l'utilisateur sur mobile */
    }
    .sidebar-nav {
        display: flex;
        overflow-x: auto; /* Permet le défilement horizontal */
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 0;
        padding: 10px 0;
    }
    .sidebar-nav .nav-item {
        flex-shrink: 0; /* Empêche les liens de rétrécir */
        font-size: 0.9em;
        padding: 8px 15px;
        border-left: none !important;
    }
    .sidebar-nav .nav-item i {
         display: none; /* Masque les icônes pour gagner de la place */
    }
    .sidebar-nav .nav-item.active {
        border-bottom: 3px solid var(--primary-color) !important;
        border-left: none !important;
        padding-bottom: 5px; /* Ajustement pour le bord */
    }
    .logout-btn, .sidebar-nav .return-shop {
        display: none; /* Déplacer vers le menu hamburger si nécessaire */
    }
    
    /* --- CONTENU PRINCIPAL MOBILE --- */
    .dashboard-main-content {
        margin-left: 0;
        padding: 15px;
    }
    .content-header h1 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    /* --- STATS GRID MOBILE --- */
    .stats-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes par défaut */
        gap: 10px;
        margin-bottom: 25px;
    }
    /* La colonne du token et de l'ID client peuvent être groupées si besoin */
    .stat-card {
         padding: 15px;
         min-width: unset;
    }

    /* --- GRILLES DE CONTENU MOBILE --- */
    .detail-grid, .support-card-grid {
        grid-template-columns: 1fr; /* Tout passe en colonne */
    }
    .reward-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* ===================================================== */
/* STYLE SPÉCIFIQUE SMASH POINTS (Image Pièce)           */
/* ===================================================== */

/* Conteneur pour aligner l'image et le texte des points */
.stat-value.smash-points-value { 
    display: flex;
        align-items: center; /* Aligner verticalement l'image et le texte */
        }

        /* Règle pour l'image de la pièce PNG (à utiliser si vous mettez une balise <img>) */
        .stat-value.smash-points-value img {
            /* Taille maximale de l'image (ex: 35px de hauteur) */
                height: 35px; 
                    /* Largeur automatique pour maintenir les proportions */
                        width: auto; 
                            /* Marge à gauche pour séparer l'image des chiffres */
                                margin-left: 8px; 
                                    /* Éviter que l'image ne dépasse */
                                        max-width: 100%;
                                        }

/* --- Mise en page générale --- */
.stats-grid {
    display: grid;
        grid-template-columns: repeat(3, 1fr);
            gap: 20px;
                margin-bottom: 25px;
                }

                /* Redimensionnement de l'image (si vous ne voulez pas qu'elle soit trop grande) */
                .stat-value.smash-points-value { 
                    display: flex;
                        align-items: center; 
                            gap: 8px; 
                            }

                            /* Gardons cette règle, elle peut sauver votre mise en page même si vous aimez la taille de base. */
                            .stat-value.smash-points-value img {
                                /* Si l'image est trop grande, réduisez-la ici (ex: max-height: 50px;) */
                                    max-width: 100%;
                                        height: auto; 
                                        }


                                        /* =================================================== */
                                        /* MEDIA QUERY : Style Spécifique pour Mobile/Tablette */
                                        /* =================================================== */
                                        @media (max-width: 768px) {

                                                /* 1. La mise en page principale ne doit plus utiliser de grille avec la sidebar */
                                                    .dashboard-wrapper {
                                                            display: block; /* Supprime le layout grille du dashboard */
                                                                }

                                                                        /* 2. La Sidebar devient la barre d'onglets en haut */
                                                                            .dashboard-sidebar {
                                                                                    width: 100%;
                                                                                            position: static;
                                                                                                    flex-direction: column; 
                                                                                                            background-color: #fff; 
                                                                                                                    border-bottom: 1px solid #eee;
                                                                                                                        }

                                                                                                                                /* Masquer le contenu non nécessaire sur mobile (photo, nom, déconnexion) */
                                                                                                                                    .sidebar-header,
                                                                                                                                        .logout-btn,
                                                                                                                                            .dashboard-sidebar .return-shop {
                                                                                                                                                    display: none !important;
                                                                                                                                                        }

                                                                                                                                                                /* 3. Les liens de navigation deviennent horizontaux */
                                                                                                                                                                    .sidebar-nav {
                                                                                                                                                                            display: flex;
                                                                                                                                                                                    overflow-x: auto; /* Permet le défilement horizontal des onglets */
                                                                                                                                                                                            white-space: nowrap;
                                                                                                                                                                                                    padding: 0;
                                                                                                                                                                                                            border-bottom: 2px solid #ddd;
                                                                                                                                                                                                                }

                                                                                                                                                                                                                        .sidebar-nav .nav-item {
                                                                                                                                                                                                                                flex-shrink: 0; /* Empêche les liens de rétrécir */
                                                                                                                                                                                                                                        padding: 10px 12px;
                                                                                                                                                                                                                                                text-align: center;
                                                                                                                                                                                                                                                        border-bottom: 3px solid transparent;
                                                                                                                                                                                                                                                                font-size: 14px;
                                                                                                                                                                                                                                                                        transition: border-color 0.2s;
                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                    .sidebar-nav .nav-item.active {
                                                                                                                                                                                                                                                                                            border-bottom-color: #FFC107; /* Mettre en évidence l'onglet actif */
                                                                                                                                                                                                                                                                                                    color: #FFC107; 
                                                                                                                                                                                                                                                                                                            font-weight: bold;
                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                        /* 4. La Grille des statistiques devient une seule colonne */
                                                                                                                                                                                                                                                                                                                            .stats-grid {
                                                                                                                                                                                                                                                                                                                                    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
                                                                                                                                                                                                                                                                                                                                            gap: 15px;
                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                        /* 5. Le contenu principal prend toute la largeur */
                                                                                                                                                                                                                                                                                                                                                            .dashboard-main-content {
                                                                                                                                                                                                                                                                                                                                                                    padding: 15px; /* Réduire le padding général */
                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                        /* --- Réglage de l'image dans la carte "Smash Points" --- */

                                                                                                                                                                                                                                                                                                        /* 1. Assurer que le texte et l'image sont bien alignés */
                                                                                                                                                                                                                                                                                                        .stat-value.smash-points-value { 
                                                                                                                                                                                                                                                                                                            display: flex; /* Active Flexbox */
                                                                                                                                                                                                                                                                                                                align-items: center; /* Centre verticalement */
                                                                                                                                                                                                                                                                                                                    gap: 8px; /* Ajoute un petit espace entre le texte et l'image */
                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                    /* 2. Réduire la taille de l'image elle-même */
                                                                                                                                                                                                                                                                                                                    .stat-value.smash-points-value img {
                                                                                                                                                                                                                                                                                                                        height: 30px; /* Taille fixe de l'icône, ajustez si besoin */
                                                                                                                                                                                                                                                                                                                            width: auto; /* Maintient le ratio de l'image */
                                                                                                                                                                                                                                                                                                                                max-width: 100%; /* S'assure qu'elle ne dépasse pas le conteneur */
                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                /* 3. Correction de la grille sur mobile (si non fait) */
                                                                                                                                                                                                                                                                                                                                @media (max-width: 768px) {
                                                                                                                                                                                                                                                                                                                                    .stats-grid {
                                                                                                                                                                                                                                                                                                                                            grid-template-columns: 1fr; /* Une seule colonne sur mobile */
                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                }