/* =========================================
   1. RESET & VARIABLES
   ========================================= */
:root {
    --couleur-vin: #722F37;
    --couleur-vin-clair: #9e4752;
    --couleur-or: #cf8b0d;
    --couleur-fond: #FDFBF7;
    --couleur-texte: #2D2D2D;
    --couleur-blanc: #ffffff;
    
    --police-titre: 'Playfair Display', 'Times New Roman', serif;
    --police-texte: 'Lato', Helvetica, sans-serif;
}

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

body {
    font-family: var(--police-texte);
    color: var(--couleur-texte);
    line-height: 1.6;
    padding-top: 80px; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background-color: var(--couleur-fond);
}

/* --- CALQUE 1 : FOND FLOU --- */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    background-image: url('uploads/fondsite1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: blur(8px);
    transform: scale(1.1);
}

/* --- CALQUE 2 : IMAGES LATÉRALES --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: 
        url('uploads/bouchonliegeR.png'), 
        url('uploads/bouchonliegeL.png');
    background-position: 
        top 0px left -270px, 
        top 0px right -270px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 437px auto;
}

/* Images s'enlèvent en dessous de 1800px */
@media (max-width: 2150px) {
    body::after { display: none; }
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   2. NAVBAR (ORDINATEUR > 2150px)
   ========================================= */
header {
    background-color: #ffffffe1;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    
    /* Position de base */
    left: 10%;  
    right: 10%; 
    height: 80px; 
    z-index: 1000;
    
    display: flex;
    align-items: center; 
    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    /* Animation fluide pour l'étirement */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

header.hide { transform: translateY(-100%); }

header .container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    padding: 0 30px;
}

/* Logo & Titre */
.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    /* Transition pour que le logo glisse au centre à 1024px */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform-origin: left center;
}

.site-logo { height: 100px; width: auto; object-fit: contain; }

header h1 {
    font-family: var(--police-titre);
    font-size: 1.8rem;
    color: var(--couleur-vin);
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    /* Transition pour réduire la taille du texte doucement */
    transition: font-size 0.5s ease; 
}
header h1 span {
    font-size: 1.8rem;
    color: var(--couleur-or);
    transition: font-size 0.5s ease;
}

.nav-menu { margin-left: auto; }
.nav-menu ul { 
    display: flex; 
    gap: 55px; 
    align-items: center;
    /* Transition pour réduire l'écart entre les mots */
    transition: gap 0.5s ease;
}

.nav-menu a { 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 0.85rem; 
    letter-spacing: 0.5px;
    color: #444;
    white-space: nowrap; 
    transition: font-size 0.5s ease, color 0.3s ease;
}
.nav-menu a:hover { color: var(--couleur-vin); }

/* Boutons */
.btn-admin, .btn-logout {
    background-color: var(--couleur-vin);
    color: var(--couleur-blanc) !important;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.85rem;
    display: inline-block;
    transition: all 0.3s ease;
}
.btn-admin:hover { background-color: var(--couleur-vin-clair); transform: translateY(-2px); }
.btn-logout { background-color: #444; }
.btn-logout:hover { background-color: #000; }

/* Cadenas Rond */
.btn-login {
    background-color: var(--couleur-vin);
    color: var(--couleur-blanc) !important;
    width: 45px; height: 45px;
    border-radius: 50%;
    padding: 0 !important;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.btn-login:hover {
    background-color: var(--couleur-vin-clair);
    transform: rotate(360deg);
}

.hamburger, .hamburger + label { display: none; }


/* =========================================
   3. RESPONSIVE : BARRE PLEINE LARGEUR (1500px)
   ========================================= */
@media (max-width: 2150px) {
    header {
        left: 0;
        right: 0;
        border-radius: 0;
    }
}

/* =========================================
   4. ZONE TAMPON (1700px -> 1025px)
   Réduit tout doucement pour ne pas toucher le titre
   ========================================= */
@media (max-width: 1700px) {
    /* On commence à réduire le titre */
    header h1, header h1 span { font-size: 1.6rem; }
    
    /* On resserre un peu le menu */
    .nav-menu ul { gap: 20px; }
}

@media (max-width: 1350px) {
    /* On réduit encore le titre */
    header h1, header h1 span { font-size: 1.4rem; }
    
    /* On réduit la taille des liens du menu */
    .nav-menu a { font-size: 0.75rem; letter-spacing: 0; }
    .nav-menu ul { gap: 15px; }
    
    /* On réduit le logo */
    .site-logo { height: 100px; }
    
    /* Boutons admin plus petits */
    .btn-admin, .btn-logout { padding: 8px 15px; font-size: 0.75rem; }
}


/* =========================================
   5. RESPONSIVE MOBILE & ANIMATION (1024px)
   ========================================= */
@media (max-width: 1130px) {
    
    /* --- HEADER & LOGO CENTRÉ --- */
    header { height: 70px; padding: 0; }
    
    header .container {
        justify-content: center; /* Centre le logo */
        position: relative;      
    }

    .logo-link { 
        margin-right: 0; 
        /* Animation : Logo glisse au milieu */
        transform: translateX(0); 
    }
    
    .site-logo { height: 80px; top: 0; margin-top: 5px; } 
    header h1 { font-size: 1.4rem; }
    
    /* --- BOUTON HAMBURGER (ANIMÉ) --- */
    .hamburger { display: block; position: absolute; left: -9999px; opacity: 0; }
    
    .hamburger + label { 
        display: flex;
        position: absolute;
        right: 20px;
        top: 50%;            
        transform: translateY(-50%);
        z-index: 2005;
        width: 45px; height: 45px;
        cursor: pointer;
        align-items: center; justify-content: center;
        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

        /* L'ANIMATION : Arrive de la droite en tournant */
        animation: slideInBurger 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .hamburger + label span {
        background: var(--couleur-vin);
        width: 25px; height: 3px;
        position: relative; display: block;
        transition: background 0.3s; border-radius: 2px;
    }

    .hamburger + label span::before,
    .hamburger + label span::after {
        content: ""; position: absolute;
        background: var(--couleur-vin);
        width: 100%; height: 100%; left: 0;
        transition: top 0.3s, transform 0.3s; border-radius: 2px;
    }

    .hamburger + label span::before { top: -8px; }
    .hamburger + label span::after { top: 8px; }

    /* Croix quand ouvert */
    .hamburger:checked + label span { background: transparent; }
    .hamburger:checked + label span::before { top: 0; transform: rotate(45deg); }
    .hamburger:checked + label span::after { top: 0; transform: rotate(-45deg); }
    
    /* --- MENU DÉROULANT (PLUS DE FLASH) --- */
    .nav-menu { 
        display: block; position: absolute; 
        top:65px; 
        
        /* Collé à droite */
        right: 0; 
        left: auto; /* Annule l'étirement */
        width: 200px; /* Largeur fixe */
        
        background: white; 
        padding: 20px; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 2000;
        border-radius: 0 0 0 15px; 
        
        /* État caché (Invisible pour éviter le flash) */
        transform: translatex(100%);
        opacity: 0;
        visibility: hidden;
        
        /* Transition Fermeture (avec délai sur visibility) */
        transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s 0.4s;
        
        pointer-events: none;
        text-align: center;
    }
    
    /* État Ouvert */
    .hamburger:checked ~ .nav-menu {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        
        /* Transition Ouverture (immédiate) */
        transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s 0s;
        
        pointer-events: auto;
    }
    
    .nav-menu ul { flex-direction: column; gap: 2px; }
    
    .nav-menu a { 
        white-space: normal; display: block;
        padding: 7px 0; border-bottom: 1px solid #eee;
        font-size: 1rem; /* On remet une taille normale pour mobile */
        letter-spacing: 0.5px;
    }
    
    .nav-menu .btn-login, .nav-menu .btn-admin {
        display: inline-flex; margin-top: 10px; border-bottom: none !important;
    }
}

/* Animation Keyframes Burger */
@keyframes slideInBurger {
    0% { opacity: 0; transform: translateY(-50%) translateX(50px) rotate(-180deg); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0) rotate(0deg); }
}


/* =========================================
   6. CONTENU & GRILLES
   ========================================= */

.hero-une {
    position: relative;
    height: 50vh; min-height: 500px;
    max-width: 1000px; margin: 0 auto 60px;
    border-radius: 15px; overflow: hidden;
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.hero-content { position: relative; z-index: 2; color: var(--couleur-blanc); max-width: 800px; padding: 20px; }
.hero-tag { background: var(--couleur-or); color: #fff; padding: 8px 16px; font-weight: bold; display: inline-block; margin-bottom: 15px; }
.hero-title { font-family: var(--police-titre); font-size: 3.5rem; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.corner-link {
    position: absolute; bottom: 0; right: 0;
    background: var(--couleur-or); color: var(--couleur-vin);
    padding: 15px 30px; font-weight: bold; z-index: 10;
    border-top-left-radius: 15px;
}

.double-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; margin-bottom: 10px;
}
.featured-card {
    position: relative; height: 450px; border-radius: 12px; overflow: hidden;
    display: flex; align-items: flex-end; box-shadow: 0 10px 30px rgba(0,0,0,0.1); cursor: pointer;
}
.card-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.6s ease; z-index: 1;
}
.featured-card:hover .card-bg { transform: scale(1.1); }
.card-content {
    position: relative; z-index: 2; padding: 40px 30px; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); pointer-events: none;
}
.card-content h3 { font-family: var(--police-titre); font-size: 2.2rem; margin-top: 10px; color: white; }
.card-label { color: var(--couleur-or); font-weight: bold; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }

.categories-bar {
    text-align: center; margin: 30px auto; padding: 20px 40px; max-width: 800px;
    background-color: rgba(255, 255, 255, 0.95); border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex; justify-content: center; align-items: center; gap: 20px;
    
}
.cat-link { font-family: var(--police-titre); font-size: 1.5rem; color: var(--couleur-vin); font-weight: bold; display: flex; align-items: center; gap: 10px; }
.cat-link:hover { color: var(--couleur-or); transform: scale(1.05); }
.categories-bar span { font-size: 1.5rem; color: #ccc; font-weight: 300; }

.about-block {
    position: relative; height: 400px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; text-align: center;
    margin-bottom: 80px; border-radius: 12px; overflow: hidden;
}
.about-text { position: relative; z-index: 2; color: white; max-width: 700px; padding: 20px; }
.about-text h2 { font-size: 3rem; font-family: var(--police-titre); margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* --- GRILLES VINS & RESTAURANTS --- */
.vins-grid, .resto-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.vin-card, .resto-card {
    background: white; border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); border: 1px solid #eee;
    display: flex; flex-direction: column;
}
.vin-image, .resto-img {
    height: 200px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #f9f9f9;
}
.vin-image img, .resto-img img { width: 100%; height: 100%; object-fit: cover; }
.vin-info, .resto-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.vin-info h3, .resto-title { color: var(--couleur-vin); font-family: var(--police-titre); font-size: 1.1rem; margin-bottom: 5px; }

/* Boutons Filtres */
.filter-btn {
    padding: 8px 20px; border: 1px solid var(--couleur-vin); border-radius: 30px;
    color: var(--couleur-vin); font-weight: bold; font-size: 0.9rem; transition: 0.3s;
    background-color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.filter-btn:hover, .filter-btn.active { background-color: var(--couleur-vin); color: white; }

/* Sliders */
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.8); border-radius: 50%;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: 0.2s; border:none; color: var(--couleur-vin);
}
.vin-card:hover .slider-arrow, .resto-card:hover .slider-arrow { opacity: 1; }
.slider-arrow.left { left: 5px; } .slider-arrow.right { right: 5px; }

/* =========================================
   7. MEDIA QUERIES (CONTENU)
   ========================================= */

@media (max-width: 1500px) {
    .vins-grid, .resto-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1350px) {
    .double-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } 
}

@media (max-width: 1024px) {
    .vins-grid, .resto-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .hero-une { height: auto; min-height: 280px; margin: 0 15px 40px; border-radius: 15px; }
    .hero-title { font-size: 2.2rem; }
    .vins-grid, .resto-grid { gap: 10px; }
    .vin-image, .resto-img { height: 110px; }
    .vin-info, .resto-content { padding: 10px; }
    .vin-info h3, .resto-title { font-size: 0.9rem; }
    .categories-bar { flex-direction: column; width: 90%; font-size: 0.9rem; margin-top: 5%; }
    .categories-bar span { display: none; }

}

@media (max-width: 450px) {
    .vins-grid, .resto-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 300px) {
    .vins-grid, .resto-grid { grid-template-columns: repeat(1, 1fr); }
}

/* =========================================
   8. ADMIN, MODAL, FOOTER
   ========================================= */
.admin-form, .login-container {
    background: var(--couleur-blanc); padding: 40px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); max-width: 1000px; margin: 60px auto;
    border-left: 5px solid var(--couleur-vin);
}
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 6px;
}
.btn-submit {
    background-color: var(--couleur-vin); color: white; border: none;
    padding: 15px; width: 100%; font-weight: bold; cursor: pointer;
}

footer { background: #1a1a1a; color: #999; padding: 20px 0; margin-top: auto; font-size: 0.9rem; }
footer .container { display: flex; justify-content: space-between; align-items: center; }
footer p:nth-child(1) { text-align: left; flex:1; }
footer p:nth-child(2) { text-align: center; flex:1; }
footer p:nth-child(3) { text-align: right; flex:1; }
@media (max-width: 900px) {
    footer .container { flex-direction: column; gap: 10px; }
    footer p { text-align: center !important; }
}

/* =========================================
   STYLE DU MODAL (POPUP)
   ========================================= */

/* 1. L'arrière-plan sombre (Overlay) */
.modal-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 5000; /* TRÈS HAUT pour passer devant tout le reste */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir transparent */
    backdrop-filter: blur(5px); /* Effet de flou moderne */
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Classe pour l'afficher via JS */
.modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* 2. La boîte blanche (Contenu) */
.modal-content {
    background-color: white;
    width: 100%;
    max-width: 1000px; /* Largeur max sur PC */
    height: 600px; /* Hauteur fixe pour éviter que ça saute */
    border-radius: 15px;
    overflow: hidden; /* Pour que l'image respecte les bords arrondis */
    display: flex; /* Mise en page Flexbox (Image à gauche, Texte à droite) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1); /* Animation de zoom à l'ouverture */
}

/* 3. Colonne Image (Gauche) */
.modal-image-col {
    width: 55%; /* Prend un peu plus de la moitié */
    position: relative;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit tout sans être écrasée */
}

/* Flèches de navigation */
.modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--couleur-vin);
    font-size: 1.2rem;
    transition: 0.3s;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.modal-arrow:hover { background: white; color: var(--couleur-or); transform: translateY(-50%) scale(1.1); }
.modal-arrow.left { left: 15px; }
.modal-arrow.right { right: 15px; }

/* 4. Colonne Texte (Droite) */
.modal-text-col {
    width: 45%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Scroll si le texte est trop long */
}

/* Typographie du Modal */
.modal-tag {
    display: inline-block;
    background-color: var(--couleur-or);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 15px;
}

#modalTitle {
    font-family: var(--police-titre);
    font-size: 2rem;
    color: var(--couleur-vin);
    line-height: 1.1;
    margin-bottom: 5px;
}

#modalSubtitle {
    font-family: var(--police-texte);
    font-size: 1.1rem;
    color: #666;
    font-weight: normal;
    margin-bottom: 20px;
}

.modal-divider {
    width: 50px;
    height: 3px;
    background-color: var(--couleur-or);
    margin-bottom: 20px;
}

#modalDesc {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

/* 5. Bouton Fermer (Croix) */
.close-modal {
    position: absolute;
    top: 15px; right: 20px;
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: #999;
    cursor: pointer;
    z-index: 20;
    line-height: 1;
    transition: 0.3s;
}
.close-modal:hover { color: var(--couleur-vin); transform: rotate(90deg); }

/* =========================================
   RESPONSIVE (TÉLÉPHONE)
   ========================================= */
@media (max-width: 900px) {
    .modal-content {
        flex-direction: column; /* On empile verticalement */
        height: auto;
        max-height: 90vh; /* Max hauteur écran */
        width: 95%; /* Prend toute la largeur */
    }

    .modal-image-col {
        width: 100%;
        height: 300px; /* Hauteur fixe pour l'image */
    }

    .modal-text-col {
        width: 100%;
        padding: 25px;
    }

    #modalTitle { font-size: 1.5rem; }
    .close-modal { color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } /* Croix blanche sur l'image */
}

.contenu-lisible {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 50px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-width: 900px; margin: 40px auto;
    color: #333; text-align: left;
}

/* --- STYLES POUR LES BOUTONS D'ADMINISTRATION --- */

/* Bouton Éditer (Crayon) - Utilisé dans admin.php */
.btn-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--couleur-or); /* Fond Or */
    color: white !important;
    padding: 8px 12px;
    border-radius: 5px;
    margin-right: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-edit:hover {
    background-color: #b87a0b;
}

/* Bouton Supprimer (Poubelle) - Utilisé dans admin.php */
.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--couleur-vin); /* Fond Rouge Vin */
    color: white !important;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-delete:hover {
    background-color: #5a242b;
}

/* Bouton Général Admin (Retour, Voir le site) - Utilisé dans header */
.btn-admin { 
            background-color: #722F37; /* Fond couleur vin */
            color: white; /* Texte blanc */
            font-weight: bold; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            gap: 10px; 
            font-size: 0.95rem;
            padding: 10px 25px; 
            border-radius: 50px; /* Forme pilule */
            transition: 0.3s; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .btn-admin:hover {
            background-color: #8a3e47; 
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }

/* Bouton de Soumission de Formulaire (Enregistrer) */
.btn-submit {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--couleur-vin);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}
.btn-submit:hover {
    background-color: var(--couleur-vin-clair);
}

/* =========================================
   CORRECTIF ADMIN : LISTES LISIBLES
   ========================================= */

/* Le bloc qui contient le tableau */
.vins-list {
    background-color: #ffffff !important; /* Fond BLANC OPAQUE forcé */
    padding: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Petite ombre pour détacher du fond */
    margin-bottom: 40px; /* Espace en bas */
}

/* Le tableau lui-même */
.vins-list table {
    width: 100%;
    background-color: #ffffff; /* Double sécurité pour le fond blanc */
    border-collapse: collapse;
}

/* Les lignes du tableau */
.vins-list tr {
    background-color: #ffffff;
    border-bottom: 1px solid #eee; /* Ligne grise fine entre chaque vin */
}

/* L'entête du tableau (Titres des colonnes) */
.vins-list th {
    background-color: #f4f4f4; /* Gris clair pour distinguer l'entête */
    color: var(--couleur-vin);
    font-weight: bold;
    padding: 15px;
    text-align: left;
}

/* Les cellules (Le contenu) */
.vins-list td {
    padding: 12px 15px;
    color: #333333; /* Texte gris foncé bien lisible */
    vertical-align: middle;
}

/* Effet quand on passe la souris sur une ligne */
.vins-list tr:hover {
    background-color: #fff8e1 !important; /* Couleur crème légère au survol */
}

/* Pour la barre de recherche au dessus */
.search-admin-box {
    background-color: #f4f4f4 !important; /* Gris clair opaque */
    border: 1px solid #ddd;
    border-bottom: none; /* Collé au tableau */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 15px;
}

/* =========================================
   STYLE DE LA PAGINATION (ADMIN)
   ========================================= */

.pagination-container {
    padding: 20px;
    text-align: center; /* Centre les boutons */
    background-color: #ffffff; /* Fond blanc */
    border-top: 1px solid #eee; /* Petite ligne de séparation avec le tableau */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Style des boutons (1, 2, Suivant, Précédent) */
.pagination-container a {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px; /* Espace entre les boutons */
    background-color: #f8f9fa; /* Fond gris très clair par défaut */
    color: var(--couleur-texte);
    text-decoration: none;
    border-radius: 5px; /* Coins arrondis */
    font-weight: bold;
    border: 1px solid #ddd; /* Bordure grise fine */
    transition: all 0.3s ease;
}

/* Au survol de la souris */
.pagination-container a:hover {
    background-color: var(--couleur-or); /* Devient doré */
    color: white;
    border-color: var(--couleur-or);
    transform: translateY(-2px); /* Petit effet de levier */
}

/* Page active (celle où on est) */
.pagination-container a.active {
    background-color: var(--couleur-vin); /* Rouge Vin */
    color: white;
    border-color: var(--couleur-vin);
    cursor: default; /* Montre qu'on ne peut pas recliquer dessus */
}

/* Les trois petits points (...) */
.pagination-container .dots {
    color: #999;
    font-weight: bold;
    margin: 0 5px;
}

/* =========================================
   9. CORRECTIF RESPONSIVE ADMIN (TABLETTE)
   ========================================= */

@media (max-width: 1024px) {
    
    /* 1. La boite "Sélection semaine" passe en 1 colonne */
    .alaune-grid {
        grid-template-columns: 1fr !important; /* Force l'affichage vertical */
        gap: 15px;
    }
    
    .alaune-box {
        padding: 15px !important; /* Moins d'espace intérieur */
    }

    /* 2. Le formulaire "Ajouter" s'adapte à l'écran */
    .admin-form {
        padding: 20px !important;
        margin: 20px 0 !important;
        width: 100% !important; /* Prend juste la largeur dispo */
        box-sizing: border-box; /* Empêche le padding de dépasser */
    }

    /* 3. IMPORTANT : Le tableau devient scrollable horizontalement */
    /* C'est ça qui empêchait le site de tenir sur l'écran */
    .vins-list {
        display: block;
        width: 100%;
        overflow-x: auto; /* Ajoute une barre de défilement si trop large */
        -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
    }

    /* On force le tableau à garder une taille minime pour être lisible */
    .vins-list table {
        min-width: 600px; /* Si l'écran est plus petit que 600px, on scroll */
    }

    /* Ajustements de la barre de recherche */
    .search-admin-box {
        flex-direction: column; /* Recherche en dessous du titre */
        gap: 10px;
        align-items: stretch;
    }
    
    .search-admin-input {
        width: 100% !important; /* Barre de recherche pleine largeur */
    }

    .btn-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--couleur-or); /* Fond Or */
    color: white !important;
    padding: 8px 12px;
    border-radius: 5px;
    margin-right: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-edit:hover {
    background-color: #b87a0b;
}
}
/* =========================================
   10. BOUTON APERÇU (selection semaine)
   ========================================= */
.btn-apercu {
    display: inline-block;
    background-color: var(--couleur-or);
    color: white !important;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}