/* style.css */
        :root {
        --couleur-principale: #7A5C3C;   /* Marron/noix plus chaud et naturel */
        --couleur-secondaire: #A37C4A;   /* Marron clair pour contraste avec le foncé */
        --couleur-troisieme: #F3E5C7;   /* Fond très clair crème */
        --couleur-texte: #333;
        --couleur-fond: #f9f9f9;
        }
        
        body {
            font-family: Arial, sans-serif, DejaVu Sans;
            background-color: var(--couleur-fond);
            color: var(--couleur-texte);
            margin: 0;
            padding: 0;
        }

        header {
            background-color: var(--couleur-principale); /* marron chaud */
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            min-height: 60px;
            text-align: center;
        }
        h1 {
            margin: 10px 0;
            text-align: center;
            font-size: clamp(1.5rem, 5vw, 2rem);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
        }
        #tableAdherents {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed; /* force la largeur des colonnes */
        }

        #tableAdherents th, #tableAdherents td {
            padding: 8px;
            border: 1px solid #ddd;
            overflow-wrap: break-word; /* découpe le texte long */
            text-align: left;
        }

        /* Pour permettre le défilement horizontal sur petits écrans */
        .table-container {
            width: 100%;
            overflow-x: auto;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: var(--couleur-principale);
            color: white;
            cursor: pointer;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .form-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .form-group label {
            /*min-width: 140px;*/
            min-width: 80px;
            font-weight: 600;
            line-height: 0.2;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        /* Input générique pour les textes larges (email, nom, etc.) */
        .form-group input.large-input {
            flex: 1;               /* prend toute la place disponible */
            max-width: none;       /* pas de limite */
            padding: 6px 8px;
            font-size: 1rem;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        @media (max-width: 480px) {
            .form-group {
                flex-direction: column;
                align-items: flex-start;
            }
            .form-group label {
                min-width: auto;
                margin-bottom: 5px;
                white-space: normal;
            }
        }
        input, select, textarea {
            background-color: white !important;
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }


        /* Appliquer la même largeur et styles aux select avec la classe small-input */
        select.small-input,
        textarea.small-input,
        input.small-input {
            max-width: 300px;      /* largeur réduite */
            padding: 6px 8px;
            font-size: 1rem;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        /* Appliquer la même largeur et styles aux select avec la classe small-input */
        select.very-small-input,
        input.very-small-input {
            max-width: 80px;      /* largeur réduite */
            padding: 6px 8px;
            font-size: 1rem;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        /* Si tu veux que les selects larges soient comme les inputs larges */
        select.large-input,
        input.large-input {
            flex: 1;
            max-width: none;
            padding: 6px 8px;
            font-size: 1rem;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="date"].small-input {
            width: 18ch;
            min-width: 8ch;
            max-width: 20ch;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
        }
        .texte-rouge {
            color: red;
            margin-bottom: 1rem;
        }
        .texte-vert {
           color: green;
           margin-bottom: 1rem;
        }
        textarea {
             font-family: inherit; /* hérite de la police de l'élément parent */
             font-size: inherit;
        }
        button {
            background-color: var(--couleur-principale);
            color: white;
            padding: 1rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;           
        }
        button:hover {
            background-color: var(--couleur-secondaire);
        }
        footer {
            background-color: var(--couleur-principale);
            color: white;
            text-align: center;
            padding: 1rem;
            /*position: fixed;
            bottom: 0;
            width: 100%;*/
        }

	footer a {color:#FFF;} 

        /* titre  **/
        .titre {
            background-color: var(--couleur-principale);
            border-radius: 12px;      /* coins plus arrondis */
            padding: 0.5rem 1rem;     /* espace autour du texte */
            display: inline-block; 
            color: white;             /* pour que le texte ressorte */
            font-weight: bold;        /* optionnel, texte en gras */
            font-size: 1.2rem;    

        }
        /* info_asso */
        .info_asso {
            background-color: var(--couleur-secondaire);
            border-radius: 12px;
            /*text-align: center;*/
            padding: 1rem 1rem;
            color: white;
        }
        /* descriptif **/
        .descriptif {
            background-color: var(--couleur-troisieme);
            border-radius: 4px;
            padding: 1rem;
            border-left: 5px solid var(--couleur-principale);
        }

        /* info_commande **/
        .info_commande {
            background-color: var(--couleur-secondaire);
            border-radius: 12px;      /* bords bien arrondis */
            display: inline-block;    /* s’adapte au contenu */
            margin-bottom: 1.5rem; /* <-- espace entre blocs */
            padding: 0rem 0.5rem; /* 0rem vertical, 0.5rem horizontal */
        }

        /* Règlement (inutile)**/
        .reglement {
            background-color: var(--couleur-secondaire);
            border: 2px solid var(--couleur-principale); /* encadrement complet */
            border-radius: 12px;                         /* coins arrondis */
            display: inline-block;    /* s’adapte au contenu */
            border-left-width: 5px;                     /* trait gauche plus épais */
            padding: 1rem;
        }
        
        /* 📦 Produits */
        .produit {
            background-color: var(--couleur-troisieme);
            border-left: 5px solid var(--couleur-principale);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            max-width: 600px;      /* plus étroit */
            border-radius: 4px;
            padding: 1rem;
            padding-bottom: 0;
            margin-bottom: 1rem;
        }
        .liste-produits {
            gap: 15px;       /* espace entre les produits */
            align-items: stretch; /* les cartes ont la même hauteur si possible */
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        }

    
        .stock {
            color: #666;
            font-size: 0.9rem;
        }
 
        .stock.epuise {
            text-decoration: line-through;
            color: grey;
            opacity: 0.7;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal.show {
           display: flex;
        }           
        .modal-button {
            text-align: center;
        }
       .modal-content {
            position: absolute; /* pour pouvoir déplacer */
            overflow-y: auto; /* scroll interne si contenu trop grand */
            cursor: move; /* montre qu’on peut déplacer */
            max-height: 80%; /* limite la hauteur pour scroll */

            background: #fff;
            padding: 20px;
            border: 1px solid #888;
            border-radius: 8px;
            width: 80%;
            max-width: 600px; /* Limite pour éviter une modale trop large sur PC */
            /*position: fixed;  Position fixe par rapport à la fenêtre */
            top: 50%;        /* Centrage vertical */
            left: 50%;
            transform: translate(-50%, -50%); /* Centrage parfait */
            z-index: 1000;   /* Assure que la modale est au-dessus du reste */
        }

        /* Style pour les écrans larges (PC) */
        @media (min-width: 768px) {
            .modal-content {
                width: 50%;   /* 50% de la largeur sur PC */
            }
        }

        /* Style pour les écrans mobiles (smartphones) */
        @media (max-width: 480px) {
            .modal-content {
                width: 300px;   /* 90% de la largeur sur mobile */
                padding: 15px;
                margin: 20% auto; /* Marge supérieure plus grande pour éviter le chevauchement */
                right: -40%;
            }
            input, select, textarea {
                width: 100%;  /* Champ de formulaire plein largeur */
            }
            .small-input {
                font-size: 0.95rem;
                padding: 6px;
            }
            button {
                font-size: 1rem;
                padding: 8px 16px;
                margin-bottom: 10px
            }
        }


        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
  
          .action-buttons {
            display: inline-flex;
            gap: 5px;
        }

        /* Centre le contenu de la cellule */
        .actions-cell {
            text-align: center;
            vertical-align: middle;
            padding: 0.5rem;
        }

        /* Conteneur des boutons en ligne, centré */
        .btn-group {
            display: inline-flex;  /* reste centré grâce à text-align du td */
            gap: 8px;
            align-items: center;
        }

        /* Styles des petits boutons icône */
        .btn-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
        }

        .btn-icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .centre {
            text-align: center;
        }
        .centre > button { /*Tous les enfants directs de centre sont en display: :inline-block (comme les boutons) */
            display: inline-block!important; 
        } 
        .produit-row input.very-small-input { /*page commandes.php */
            width: 60px;
            text-align: center;
        }
        /*Vérification du bon de commande */
        .error-message {
            display: block;
            color: #c00;
            font-size: 0.9em;
            margin-top: 4px;
        }
        input.error, select.error, textarea.error {
            border-color: #c00 !important;
        }    
        /* Affichage des ventes */
        /* Grille responsive et uniforme */
        .ventes-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            /*margin: 30px 0;*/
        }

        /* Vente en cours */
        .ventes_en_cours {
            background-color: var(--couleur-troisieme);
            color: #000;
            cursor: pointer;
        }
        .ventes_en_cours:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        /* Vente à venir */
        .ventes_a_venir {
            background-color: color-mix(in srgb, var(--couleur-troisieme) 45%, white); /* ⭐ un peu plus clair */
            color: #555;
            border: 1px solid #ddd;
            opacity: 0.95; /* légère atténuation */
        }

        /* Vente passée */
        .ventes_passees {
            background-color: color-mix(in srgb, var(--couleur-troisieme) 20%, white); /* ⭐ encore plus clair */
            color: #666;
            border: 1px solid #ddd;
            opacity: 0.8; /* pâle mais lisible */
        }

        /* Vente cachée (non publique) */
        .ventes_cachees {
            background-color: color-mix(in srgb, var(--couleur-troisieme) 20%, white); /* ⭐ encore plus clair */
            color: #666;
            border: 1px solid #ddd;
            opacity: 0.8; /* pâle mais lisible */
        }
        .ventes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 25px 0;
        }
    .vente-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        border-radius: 12px;
        padding: 15px;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        min-height: auto;
    }
    .vente-title {
        margin-top: 35px;
        margin-bottom: 10px;
        word-break: break-word;
        text-align: center;
    }
    .vente-card img {
        width:100%;
        max-height:120px;
        object-fit:cover;
        border-radius:8px;
        margin:10px 0;
    }
    .vente-dates {
        font-size: 14px;
        color: #555;
        text-align: center;
    }
    .vente-card:hover {
        transform:scale(1.03);
        box-shadow:0 6px 16px rgba(0,0,0,0.25);
    }
    .modern-tag {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 20px;
        color: #fff;
        text-transform: uppercase;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
.ventes_en_cours.modern-tag {
    background: linear-gradient(135deg, #28a745, #71dd8a); /* vert vif pour actif */
    color: #fff;
}


.ventes_a_venir.modern-tag {
    background: linear-gradient(135deg, #e0a800, #ffca2c); /* jaune doré */
    color: #fff;
}
.ventes_passees.modern-tag {
    background: linear-gradient(135deg, #fd7e14, #ffb073); /* orange pour passé */
    color: #fff;
}
.ventes_cachees.modern-tag {
    background: linear-gradient(135deg, #dc3545, #ff6b6b); /* rouge pour inactif */
    color: #fff;
}

    @media (max-width:1200px) {
        .ventes-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width:900px) {
        .ventes-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width:600px) {
        .ventes-grid { grid-template-columns: 1fr; }
        .vente-title { margin-top:25px; font-size: 16px; }
    }

/* ================================
   MENU TABS + HAMBURGER (SANS CENTRAGE)
   ================================ */

/* Menu horizontal (PC) */
.tab {
    height: auto;
    min-height: 30px;
    padding: 0;
    display: flex;                /* reste horizontal */
    justify-content: center;  
    align-items: center;
    gap: 5px;
    background-color: var(--couleur-principale);
}

/* Boutons */
.tab button {
    margin: 0;
    padding: 14px 16px;
    font-weight: bold;
    font-size: 14px;
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
    color: white;
}

.tab button:hover {
    background-color: var(--couleur-principale);
}

.tab button.active {
    background-color: var(--couleur-secondaire);
}

/* Bouton hamburger (caché sur PC) */
.hamburger {
    display: none;
    background-color: var(--couleur-principale);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 0;
}

/* ================================
   RESPONSIVE – MOBILE
   ================================ */

@media screen and (max-width: 768px) {

    .tab {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: left;             /* ❌ pas centré */
        background-color: var(--couleur-principale);
    }

    .tab button {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        color: white;
        text-align: left;             /* ❌ pas centré */
    }

    .tab.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }
}