/* Fichier : style.css (Version COMPLÈTE & CONSOLIDÉE avec Thème Sombre) */

/* ======================================================= */
/* I. VARIABLES CSS GLOBALES */
/* ======================================================= */
:root {
    --color-anthracite: #333333;    /* Fond principal (Cave à Vin) */
    --color-maroon: #800020;       /* Rouge Bordeaux (Accent principal) */
    --color-maroon-dark: #5c0017;   /* Rouge foncé au survol */
    --color-darker-bg: #1a1a1a;     /* Fond des filtres/en-têtes */
    --color-modal-bg: #333;         /* Fond de la modale */
    --color-text-light: #f0f0f0;    /* Texte principal clair */
    --color-text-muted: #bbb;       /* Texte secondaire/gris */
    --color-accent: #A04000;        /* Brun/Cuivré (Accent modale) */
    --color-border: #555;           /* Bordure/Séparateur sombre */
    --shadow-base: rgba(0, 0, 0, 0.7);
    --shadow-light: rgba(0, 0, 0, 0.4);
    --color-success: #5cb85c;       /* Vert de validation */
    --color-quick-filter-active: #E91E63; /* Couleur d'accentuation des filtres rapides */
}

/* ======================================================= */
/* II. STYLES GÉNÉRAUX ET STRUCTURE DE PAGE */
/* ======================================================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-anthracite);
    color: var(--color-text-light);
    overflow-x: hidden;
}

#app {
    margin-top: 80px; /* Espace pour le header fixe */
    padding: 0;
    max-width: 100%;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ======================================================= */
/* III. HEADER FIXE (EN-TÊTE) */
/* ======================================================= */
.header {
    background-color: var(--color-maroon);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 10px 0px 20px 0px;
    box-shadow: 0 2px 15px var(--shadow-base);
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.header-search-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 90%;
}

#search-input {
    width: 100%;
    margin: auto;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 1em;
}

/* --- Compteurs Multiples --- */
#total-vins-count {
    display: flex;
    gap: 15px;
    align-items: center;
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    flex-wrap: nowrap;
}

.count-item {
    display: flex;
    align-items: center;
}

.count-item .material-icons-outlined {
    font-size: 1.2em;
    margin-left: 10px;
    vertical-align: middle;
    color: #FFD700;
}

/* --- Boutons d'Action (Filtres, etc.) --- */
.header button {
    padding: 10px 15px;
    background-color: var(--color-maroon);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.header button:hover {
    background-color: var(--color-maroon-dark);
}

.header-action-btn {
    padding: 8px 10px;
    white-space: nowrap;
}

/* ======================================================= */
/* IV. FILTRES RAPIDES (QUICK-FILTERS) */
/* ======================================================= */
#quick-filters-zone {
    position: sticky;
    top: 107px; /* Sous le header fixe */
    z-index: 150;
    display: flex;
    gap: 20px;
    padding: 15px 20px;
    background-color: var(--color-darker-bg);
    border-radius: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #333;
}

/* --- Checkbox custom --- */
.quick-filter-group input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    z-index: 10;
    cursor: pointer;
}

.quick-filter-group input[type="checkbox"] + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
}

.quick-filter-group input[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #777;
    background-color: transparent;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.quick-filter-group input[type="checkbox"]:checked + label::before {
    border-color: var(--color-success);
    background-color: var(--color-success);
}

.quick-filter-group input[type="checkbox"]:checked + label::after {
    content: '\2713';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
}

/* --- Bouton d'activation de la modale de filtre avancé --- */
.filter-toggle-btn {
    padding: 8px 12px;
    margin-right: 8px;
    border: 1px solid #777;
    border-radius: 6px;
    background-color: #444;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.filter-toggle-btn.active-filter {
    background-color: var(--color-quick-filter-active) !important;
    border-color: var(--color-quick-filter-active);
    color: white;
    box-shadow: 0 0 5px rgba(233, 30, 99, 0.5);
}

.filter-toggle-btn:hover {
    background-color: #6a6a6a;
}

/* ======================================================= */
/* V. FILTRES DE CATÉGORIES (DROPDOWN) */
/* ======================================================= */
#category-filter-wrapper {
    position: relative;
    display: inline-block;
}

/* 🛑 RÈGLE RÉINTÉGRÉE 🛑 : Style du conteneur des ronds de couleur */
/* 🛑 MISE À JOUR : Baisse du conteneur de 8px (top: 100% + 8px) 🛑 */
#filter-quick-categorie-buttons {
    display: flex;
    position: absolute;
    left: 50%; 
    transform: translateX(-79%); 
    /* 🛠 L'AJUSTEMENT EST ICI : Décalage de 8 pixels vers le bas */
    top: calc(100% + 15px);  
    z-index: 100;
    padding: 10px;
    background-color: #444;
    border-radius: 5px;
    box-shadow: 0 4px 8px var(--shadow-base);
    width: max-content;
    min-width: 250px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: visibility 0s, opacity 0.2s linear, max-height 0.2s linear;
}

#filter-quick-categorie-buttons.visible {
    visibility: visible;
    opacity: 1;
    max-height: 200px;
}

/* --- Boutons circulaires de catégorie (ronds de couleur) --- */
/* 🛑 RÈGLE RÉINTÉGRÉE 🛑 : Style des boutons ronds (Conteneur) */
.category-circle-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    margin-right: 8px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

/* 🛑 RÈGLE RÉINTÉGRÉE 🛑 : Style du ROND INTERNE (la couleur réelle) */
.filter-color-circle {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* 🛑 RÈGLE RÉINTÉGRÉE 🛑 : Style lorsque le bouton est ACTIF (cliqué) */
.category-circle-btn.active .filter-color-circle {
    border: 3px solid var(--color-quick-filter-active);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.7);
    transform: scale(1.1);
}

/* 🛑 RÈGLE RÉINTÉGRÉE 🛑 : Style spécifique pour le bouton "Toutes" */
.filter-color-circle.all-filter {
    background-color: transparent;
    border: 2px solid #fff;
}

/* --- DÉFINITION DES COULEURS PAR CATÉGORIE --- */
/* (Ces règles étaient présentes, je les ai conservées.) */
.category-vinrouge { background-color: #A52A2A; }
.category-vinblanc { background-color: #FFFAEA; border-color: #666; }
.category-vinrosé { background-color: #FFC0CB; }
.category-vinjaune { background-color: #FFF000; }
.category-orange { background-color: #ff8200; }
.category-pétillant { background-color: #d3b352; }
.category-liqueur { background-color: #800080; }
.category-autres { background-color: #808080; }


/* ======================================================= */
/* VI. GRILLE DES VINS */
/* ======================================================= */
#wine-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 5px;
}

/* --- Carte de Bouteille Individuelle (Superposition) --- */
.bouteille-card {
    width: 46%;
    height: 220px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-light);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* ... (Le reste des styles des cartes est conservé : image, overlay, info, stock) ... */

.bouteille-background-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}

.card-overlay {
    position: relative; z-index: 2; width: 100%; height: 100%; padding: 0px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
    color: white; text-shadow: 1px 1px 2px var(--shadow-base);
}

.top-section { display: block; width: 100%; }

.header-info {
    text-align: left; flex-grow: 1; margin: 1px 5px 0px 5px ; background-color: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 3px;
}

.header-info .wine-name {
    font-size: 0.9em; font-weight: bold; color: white; line-height: 1.1;
}

.bottom-details {
    padding-top: 5px; background-color: rgba(0, 0, 0, 0.3); padding: 10px 0 0 0;
}

.wine-info-row {
    display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin: 5px;
}

.info-left {
    display: flex; flex-direction: column; margin-right: 10px;
}

.wine-details-line {
    /* 🛑 Cible la ligne Région -> Appellation 🛑 */
    font-size: 0.75em; /* Ajustez cette taille pour la discrétion */
    text-align: left;
    width: 100%;
    margin-bottom: 5px; 
}

/* On conserve cette règle pour le Millésime et la Catégorie */
.info-left p {
    margin: 2px 0; 
    font-size: 0.85em; /* Conserver ou ajuster si vous voulez qu'ils restent plus gros que la ligne ci-dessus */
}

.stock-display {
    background-color: var(--color-maroon); border: 1px solid #000; border-radius: 50%; box-shadow: 1px 1px 5px var(--shadow-light); width: 30px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right : 10px
}

.stock-count {
    font-size: 0.8em; font-weight: normal; color: white; line-height: 1;
}


/* ======================================================= */
/* VII. MODALES (GÉNÉRAL ET DÉTAILS) */
/* ======================================================= */
/* ======================================================= */
/* VII. MODALES (GÉNÉRAL ET DÉTAILS) - VERSION CORRIGÉE */
/* ======================================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

/* Contenu de la modale de filtre avancé (Thème sombre) */
.modal-content {
    background-color: var(--color-modal-bg);
    margin: 10% auto;
    padding: 20px;
    border: 1px solid var(--color-border);
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    color: var(--color-text-light);
}

/* Bouton Fermer (x) */
.close-btn {
    color: var(--color-text-muted);
    float: none;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 250;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}
.close-btn:hover, .close-btn:focus {
    color: var(--color-text-light);
    text-decoration: none;
    cursor: pointer;
}

/* Styles spécifiques aux éléments de formulaire dans la modale de filtre */
.filter-row {
    display: flex; gap: 15px; margin-bottom: 15px;
}
.filter-group {
    flex-basis: 50%; flex-grow: 1; display: flex; flex-direction: column;
}
.filter-group label, #filter-form label {
    display: block; margin-top: 10px; font-weight: bold; color: var(--color-text-light); margin-bottom: 5px;
}
.filter-group select, #filter-form select, #filter-form input[type="number"] {
    width: 100%; padding: 8px; margin-top: 5px; background-color: #444; color: var(--color-text-light); border: 1px solid var(--color-border); border-radius: 4px; box-sizing: border-box;
}
#filter-form button {
    margin-top: 20px; padding: 10px 15px; margin-right: 10px; background-color: var(--color-maroon); color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s;
}
#filter-form button:hover {
    background-color: var(--color-maroon-dark);
}

/* --- Modale de Détails Spécifique (#details-modal) --- */

#details-modal.modal {
    background-color: var(--shadow-base);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
#details-modal .modal-content {
    background-color: var(--color-modal-bg);
    position: relative; /* S'assurer que le parent de .details-body est bien relatif */
}

/* 🛑 ANCRAGE CLÉ : Le conteneur qui contient les boutons flottants 🛑 */
/* Ajouté/Confirmé dans .details-body, PAS .modal-content (pour ne pas perturber le scroll) */
.details-body {
    position: relative; /* ANCRE pour #toggle-edit-btn et #edit-actions */
    padding-bottom: 70px; /* Espace pour les boutons flottants en bas */
}


/* 🛑 Bouton Modifier (flottant en bas à droite) 🛑 */
#toggle-edit-btn {
    position: absolute;
    bottom: 85px; /* 🛑 CORRECTION: Le positionner correctement en bas 🛑 */
    right: -15px;
    z-index: 200;
    
    padding: 10px 15px; /* Augmenter la taille pour le rendre plus visible */
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    background-color: var(--color-maroon, #800000);
    color: white;
    transition: all 0.2s;
}

/* 🛑 Actions d'édition (Centrées et Uniformes) 🛑 */
#edit-actions {
    /* 🛑 Utilisation de static, PAS relative (pour le centrage) 🛑 */
    position: static;
    z-index: 200;
    
    /* Centrage horizontal des éléments inline-block (les boutons) */
    text-align: center;
    
    display: none; /* Le JavaScript mettra ceci à 'block' */
    margin: 20px 0; /* Espacement vertical ajusté */
    padding: 0;
    width: 100%;
}
#edit-actions button {
    display: inline-block;
    
    /* Force la même taille pour tous les boutons */
    width: 120px;
    
    margin-left: 5px;
    margin-right: 5px;
    
    padding: 10px 15px;
    line-height: 1.2; /* 🛑 CORRECTION: Ajuster le line-height 🛑 */
    text-align: center;
}

/* --- Style du champ d'édition du nom du vin --- */
#details-name {
    /* Positionnement absolu centré sur l'image */
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    width: 90%; 
    z-index: 10;
    height: auto; 
    min-height: 40px; 
    word-break: break-word; 
    
    /* 🛑 PROPRIÉTÉS UNIFIÉES (POLICE, TAILLE, GRAS, COULEUR) 🛑 */
    font-size: 1.8em; /* 🛠 Taille de police unique */
    font-weight: bold; /* 🛠 Poids de police unique */
    font-family: Arial, sans-serif; /* 🛠 Famille de police unique (Si 'inherit' ne suffit pas) */
    text-transform: uppercase; /* 🛠 Majuscule unique (Si nécessaire) */
    color: var(--color-text-light); 
    text-align: center;
}

.static-field {
    /* Positionnement pour la superposition parfaite */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: block !important; 
    width: 100%;
    
    /* Le reste est hérité de #details-name */
    margin: 0;
    padding: 5px 0; 
    line-height: 1.2;
}

/* 🛑 RÈGLE CLÉ : Masquer tous les champs d'édition par défaut 🛑 */
.edit-field {
    display: none !important;
}

/* Masquer le champ statique lorsqu'il est en mode édition */
#details-modal.edit-mode .static-field {
    display: none !important;
}

/* Afficher le champ d'édition lorsqu'il est en mode édition */
#details-modal.edit-mode .edit-field {
    display: block !important;
}

.edit-wine-name {
    /* Positionnement pour la superposition parfaite */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 🛑 HÉRITER LA POLICE ET LA TAILLE 🛑 */
    font-size: inherit; /* Hérite de 1.8em de #details-name */
    font-weight: inherit; /* Hérite de 'bold' de #details-name */
    font-family: inherit; /* Hérite de la police du parent */
    text-transform: inherit; /* Hérite de la capitalisation */
    color: var(--color-text-light); /* Utilise la même couleur de texte */
    
    /* Styles Textarea et Apparence */
    text-align: center; /* Important pour centrer le texte saisi */
    line-height: 1.2;
    
    width: 90%; /* Pour laisser une petite marge */
    padding: 5px 10px;
    
    /* Annulation des styles de fond standard pour un input */
    background-color: var(--color-modal-bg); 
    border: 2px solid var(--color-maroon);
    border-radius: 5px;
    
    resize: none; 
    overflow-y: hidden;
    box-sizing: border-box; 
    height: auto; 
    min-height: 40px;
    margin: 0;
}

/* ... Le reste des styles de détails (fiche-technique, details-header, etc.) reste inchangé ... */
.fiche-technique {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 30px;
    margin: 15px 0 45px 0;
}

#details-user-notes {
    /* 🛑 C'est ici que nous ajustons l'espace 🛑 */
    margin-top: 0; /* Annule la marge que nous avions ajoutée précédemment */
    
    /* La séparation et l'espace proviendront maintenant uniquement du padding-top */
    border-top: 1px solid var(--color-border);
    padding-top: 25px; /* Augmente l'espace entre la ligne et le texte "Votre commentaire" */
    padding-bottom: 5px; 
}

/* 🛑 OPTIONNEL : Ajustement des marges du titre H4 à l'intérieur 🛑 */
#details-user-notes h4 {
    font-size: 1.1em;
    color: var(--color-accent); /* Couleur d'accentuation pour le titre */
    margin-top: 0;
    margin-bottom: 10px; 
}

#details-modal .details-header {
    /* 🛑 CLÉ : Sert de point d'ancrage pour .details-name 🛑 */
    margin-left: -20px; 
    margin-right: -20px;    
    position: relative; 
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: var(--color-darker-bg);
    border: 1px solid var(--color-border);
}

#details-modal .details-name {
position: absolute; 
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    color: white;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
    
    /* 🛠 L'AJUSTEMENT EST ICI : Réduit la taille de 2.2em à 1.6em ou 1.8em */
    font-size: 1.3em; 
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    width: 90%;
    z-index: 10;
}

#details-modal .details-image {
    width: 100%;
    max-height: 180px;
    width:100%;
    object-fit: cover;
    object-position: center 82%;
    display: block;
    opacity: 0.7; /* Légèrement transparent pour la lisibilité du texte */
}

#details-modal .fiche-item .edit-field {
    display: none;
    width: 100%;
}
#details-name .static-field {
    position: absolute;
    transform: translate(-50%, -50%);
}
/* Afficher les champs statiques par défaut */
#details-modal .fiche-item .static-field {
position: static !important; /* Force le retour au flux normal */
    transform: none !important;
}

/* 🛑 État de la modale en mode EDITION 🛑 */
#details-modal.edit-mode .fiche-item .edit-field {
    display: block; /* Afficher les champs d'input/select */
}

#details-modal.edit-mode .fiche-item .static-field {
    display: none; /* Masquer les valeurs statiques */
}

/* Styles de base pour l'input d'édition */
#details-modal .fiche-item input,
#details-modal .fiche-item select,
#details-modal .fiche-item textarea {
    /* Reprendre les styles des champs de la modale de filtres avancés */
    background-color: #444; 
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    padding: 6px;
    border-radius: 4px;
    margin-top: 2px;
}

/* Le conteneur de chaque ligne de détail (dans la grille) */
.fiche-item {
    display: flex;
    flex-direction: column; /* Empile le label au-dessus de la valeur */
    padding: 5px 0; /* Augmentons légèrement le padding vertical pour l'espace */
    border-bottom: 1px dotted var(--color-border);
}

/* 🛑 Libellé (Le titre de la donnée : Millésime, Région, etc.) 🛑 */
#details-modal .fiche-item strong {
    font-weight: bold;
    color: var(--color-text-light); /* Texte clair */
    padding-bottom: 2px; /* Petite séparation avec la valeur */
    display: block;
    font-size: 0.9em;
}

/* 🛑 Valeur (La donnée réelle : 2021, Bordeaux, etc.) 🛑 */
#details-modal .fiche-item span {
    display: block; 
    word-wrap: break-word; /* Permet aux longs textes de ne pas dépasser */
    font-size: 0.95em;
    color: var(--color-text-muted); /* Gris plus discret */
    line-height: 1.2;
}


/* ======================================================= */
/* VIII. MEDIA QUERIES (RESPONSIVE) */
/* ======================================================= */
@media (min-width: 768px) {
    #app {
        max-width: 900px; margin-left: auto; margin-right: auto;
    }
    .bouteille-card {
        width: 190px; height: 270px;
    }
}
@media (min-width: 1024px) {
    .bouteille-card {
        width: 220px; height: 300px;
    }
}
@media (max-width: 767px) {
    .header-action-btn {
        padding: 10px 14px;
        box-shadow: 0 0 5px rgba(233, 30, 99, 0.5);


    }
    .header-action-btn .btn-text {
        display: none;
    }
}