/* ==========================================================================
   1. STRUCTURE DE LA BARRE (STICKY) ET NAVIGATION
   ========================================================================== */

/* Barre supérieure universelle (bannière) */
#container-top {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Deuxième barre collante (Filtres et Recherche) */
#sticky2 {
    position: sticky;
    top: 52px; /* Ajusté selon la hauteur de la bannière supérieure[cite: 16] */
    z-index: 1900;
    background: #fff;
    padding: 10px;
    border-bottom: 2px solid var(--couleur-primaire);
}

/* Bandeau de bienvenue (sous les barres collantes) */
#banniere_bas {
    background-color: #f2e6f5;
    padding: 20px;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   2. MISE EN PAGE DU BLOC DE RECHERCHE ET FILTRES
   ========================================================================== */

/* Conteneur principal flex pour aligner Gauche, Milieu et Droite[cite: 16] */
#bloc_recherche {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    padding: 5px 10px;
}

/* Groupes internes (formulaires et boutons) */
.flex-group, #bloc_recherche form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Champs de saisie texte dans la barre de recherche[cite: 16] */
#bloc_recherche input[type="text"] {
    width: 180px; 
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius);
}

/* Étiquette "Discontinué" (Bouton Rose)[cite: 16] */
.discontinue {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: pink;
    color: #000 !important;
    padding: 8px 15px;
    border-radius: var(--radius);
    height: 32px;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 14px;
    margin: 0 20px !important;
}

/* Boutons d'administration avec couleurs spécifiques[cite: 16] */
.btn-gold  { background-color: gold !important; color: #000; }
.btn-green { background-color: #62bf62 !important; color: #fff; }
.btn-blue  { background-color: #5dade2 !important; color: #fff; }

/* Bouton X (Annuler la recherche)[cite: 16] */
.btn-cancel-search, input[type="image"][name="cancel"] {
    width: 30px !important;
    height: 30px !important;
    cursor: pointer;
    transition: transform 0.2s;
    border: none !important;
    vertical-align: middle;
}

.btn-cancel-search:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   3. SYSTÈME DE GRILLE (TABLEAU DES PRODUITS)
   ========================================================================== */

/* Structure de base de la grille[cite: 16] */
.grid-container, [class^="grid-container-content"] {
    display: grid;
    grid-template-columns: 70px 110px 2fr 100px 1.5fr 90px 70px;
    border-bottom: 1px solid var(--couleur-bordure);
    background-color: #fff;
}

/* En-tête de la grille[cite: 16] */
.grid-container {
    background-color: var(--couleur-primaire);
    color: #fff;
    font-weight: bold;
}

/* Cellules de la grille[cite: 16] */
.grid-container > div, [class^="grid-container-content"] > div {
    padding: 12px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-all;
    min-width: 0;
}

/* Tailles de texte spécifiques aux colonnes[cite: 16] */
.top_18 { font-size: 18px; }
.top_10 { font-size: 14px; }

/* Aspect zébré pour la lisibilité[cite: 16] */
.grid-container-content:nth-of-type(even) > div { 
    background-color: #f9f9f9; 
}

/* Couleurs d'état pour les lignes de produits[cite: 16] */
.grid-container-content-discontinue > div { background-color: #f3afc8 !important; color: #000 !important; }
.grid-container-content-commande > div { background-color: #fff9c4 !important; }
.grid-container-content-commander > div { background-color: #e8f5e9 !important; }

/* Images des produits[cite: 16] */
[class^="grid-container-content"] img {
    width: 55px !important;
    height: 55px !important;
    object-fit: cover;
    border-radius: 4px;
}

/* ==========================================================================
   4. MESSAGES ET NOTIFICATIONS (EXTRAITS DU PHP)
   ========================================================================== */

/* Message d'inscription réussie[cite: 16] */
.message-inscription {
    background: #ccffcc; 
    color: green; 
    padding: 15px; 
    margin: 20px auto; 
    border-radius: 5px; 
    text-align: center; 
    border: 1px solid green; 
    max-width: 500px;
}

/* Message "Aucun item trouvé"[cite: 16] */
.aucun-item {
    color: red;
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
    border: 3px dashed red; 
    width: 50%;
    background: yellow;
    margin: 20px auto;
    text-align: center;
}

/* ==========================================================================
   5. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1000px) {
    .grid-container { 
        display: none; 
    }
    [class^="grid-container-content"] { 
        grid-template-columns: 1fr 1fr; /* Passage en deux colonnes sur mobile[cite: 16] */
    }
}