@import url('/assets/css/color.css');

:root {
    --radius: 12px;
}
/* ==========================================================================   DASHB   =========================/* ====   BASE STYLES   ==================body {    margin: 0;    font-family: 'Raleway', sans-s    min-height: 100vh;}      min-height: ca}/* ====================     ================================.p      justify-content: space-between    align-items: center;    margin-bottom: 2rem;      gap: 1rem;}.page-header h1 {    font-family: 'R      font-size: var(--text-2xl);    color: var(--ink);    margin: 0;}/* Header actions */.header-acti      }    margin-bottom: 2rem;    font-family: 'Ral    font-weight: var(--fw-black);    font-size: var(--text-2xl);    color: v    margin: 0 0 0.5rem 0;.dashboard-header p {    color: var(--ink-muted);    font-size: 1.1r    margin: 0;}/* ===================   BUTTONS.b    display: inline-fl    align-items: ce      padding: .8rem 1.5r    border-radius      font-weight: var(--fw-semibold);    cursor: pointe      text-decoratio    font-size: var(--text-base);}.btn-primary {    background: var(--primary);    color: white;}.btn-primary:hove    background: var    transform: translateY(-2px  }.btn-secondary {      color: var(--primary);}.btn-secondary    background: var}.btn-sm {    padding: .5rem 1rem;    font-}.btn-success {      color: white;}.btn-warning {      color: white;}.btn-danger {    }.btn-danger:hover {    background: }/* =============   CARDS   =============    background: wh    border-radius: var(    box-shadow: 0 4px 15px rgba(0,0,0,.08);    overflo}.card-header {    padding: 1.5rem;    border-bottom: 1px solid #eee;.card-header h3 {    margin: 0;    color: var(--ink);    font-size: var(--text-md);.card-body {    padding: 1.5rem;}.welcome-card {    background: white;    border-radius      margin-bottom: 0    border-left: 4px solid var(--primary);}.welcome-card h2 {    color: var(--ink);    margin: 0 0 1rem 0;}.welco    color:    line-height: 1.6;}/* ===   SEARCH   ===================================.d    background: white;    border-radius: var(--radius);}.dashboard-search-form {    display: flex;    align    flex-wrap: wrap}.dashboard-search-f    flex: 1;    min-width: 250px;    padding: .8rem 1rem;    border: 1px solid #ddd;    border-radius: 8px;}.dashboard-search-form     outline: none;    border-color: var(--r  }/* ====================   TABLES   ============.table {    width: 100%;    border-collapse: col}.table td {    padding: 1rem    border-bottom:    color: var(--ink-muted)}.t    background: #fafaf}.table tbody tr:h    background: v}/* Exception pour les.table tbody tr.empty    background: transparent}/* Table container.table-container, #    -webkit-ove}/* Table avec overflow et.products-table, .users-    background: wh        overflow: }/* Table headers avec gradient .table-header {    background: linear-gradient(135deg    color: white;    padding: 1rem;    border-bot}.table-header h3 {    margin: 0;    color: white;    font-size: 16p    font-weight: 7}/* Styles th et td complets */.table th,.table td {    padding: 1rem;    text-align: left  }.table th {    background: var    font-weight: var(--fw-semibold);      text-transform:    font-size: var(--text-sm);    letter-spacing: 0.}/* Checkbox columns */.table th:first-child,      text-align: ce}   SORTABLE HEADERS & /* En-têtes de tableau triab.sortable-header {    user-select: none;    gap: 0.5rem;    padding: 0.5rem;}.sortable-header:hover {    background: rgba(}.sortable-header.active {    background: rgb    color: var(--primary)    font-weight: var(--fw-bold);.sort-icon {    font-size: var(--text-xs);    opacity: 0.5;    transition: all 0.2s ea}    opacity: 1;}.sortable-header.activ    opacity: 1;}    pa    background: #f8f9fa;    display: flex;    align-items: center;    ga    fl}.filters-label {    font-weight: var(--fw-semibold);    font-size: 0.9r}.filte    di    gap: 0.5rem;    flex-wrap: wrap;}.filter-badge {    display: inline    al    ga    padding: 0.25re    background: var(--primary);    color: white;    font-size: var(--text-sm);    font-weight: var(--fw-medium);}    background: non    border: none;    color: white    cursor: pointer;    pa    margin-left: 0.25rem;    li}


.filter-badge button:hover {



    opacity: 1;



}







/* Checkbox styles */



.product-checkbox, #selectAllProducts, .user-checkbox, #selectAllUsers {



    width: 16px;



    height: 16px;



    cursor: pointer;



    accent-color: var(--primary);



}







/* Compteur sélection */



#selectedCount {



    font-weight: var(--fw-semibold);



    color: var(--ink);



    font-size: var(--text-base);



}







/* ==========================================================================



   ACTION BUTTONS



   ========================================================================== */







.action-buttons {



    display: flex;



    gap: 0.5rem;



}







/* ==========================================================================



   BADGES & STATUS



   ========================================================================== */







.status-badge {



    padding: 0.25rem 0.75rem;



    border-radius: 999px;



    font-size: var(--text-sm);



    font-weight: var(--fw-semibold);



}







.status-active {



    background: rgba(34, 197, 94, 0.1);



    color: var(--success);



}







.status-inactive {



    background: rgba(239, 68, 68, 0.1);



    color: var(--danger);



}







.status-error {



    background: rgba(251, 191, 36, 0.1);



    color: #f59e0b;



    border: 1px solid rgba(251, 191, 36, 0.3);



}







.role-badge {



    padding: 0.25rem 0.75rem;



    border-radius: 999px;



    font-size: var(--text-sm);



    font-weight: var(--fw-semibold);



}







.role-admin {



    background: linear-gradient(135deg, var(--primary), var(--primary-dark));



    color: white;



}







.role-user {



    background: rgba(159, 179, 200, 0.2);



    color: var(--ink-muted);



}







/* ==========================================================================



   PAGINATION



   ========================================================================== */







.pagination {



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 1rem;



    padding: 1.5rem;



    background: white;



    border-radius: var(--radius);



    box-shadow: 0 4px 15px rgba(0,0,0,.08);



    margin-bottom: 1.5rem;



}







.pagination-info {



    color: var(--ink-muted);



    font-weight: var(--fw-medium);



}







/* ==========================================================================



   MODALS



   ========================================================================== */







.modal {



    display: none;



    position: fixed;



    inset: 0;



    background: rgba(0,0,0,0.5);



    z-index: 1000;



    align-items: center;



    justify-content: center;



    padding: 2rem;



}







.modal.active {



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 2rem;



}







.modal-content {



    background: white;



    border-radius: var(--radius);



    max-width: 500px;



    width: 100%;



    padding: 2rem;



    box-shadow: var(--shadow);



    max-height: 90vh;



    overflow-y: auto;



}







.modal-header {



    display: flex;



    justify-content: space-between;



    align-items: center;



    margin-bottom: 1.5rem;



    padding: 0;



    border: none;



}







.modal-header h3 {



    margin: 0;



    color: var(--ink);



}







.modal-close {



    background: none;



    border: none;



    font-size: var(--text-lg);



    cursor: pointer;



    color: var(--ink-muted);



    padding: 0;



    width: 30px;



    height: 30px;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: all 0.3s ease;



}







.modal-close:hover {



    color: var(--ink);



}







.modal-body {



    padding: 0;



}







.modal-body p {



    margin: 0 0 1.5rem 0;



    color: var(--ink-muted);



}







.modal-actions {



    display: flex;



    justify-content: center;



    gap: 1rem;



    margin-top: 1.5rem;



    padding: 0;



    border: none;



}







/* Modal avec .show class pour compatibilité */



.modal.show {



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 2rem;



}







.modal-footer {



    display: flex;



    justify-content: flex-end;



    gap: 1rem;



    margin-top: 1.5rem;



}







/* ==========================================================================



   EMPTY STATES



   ========================================================================== */







.empty-state {



    text-align: center;



    padding: 4rem 2rem;



    color: var(--ink-muted);



}







.empty-state i {



    font-size: var(--text-3xl);



    margin-bottom: 1rem;



    opacity: 0.5;



}







.empty-state h3 {



    color: var(--ink);



    margin: 0 0 0.5rem 0;



}







/* ==========================================================================



   LOADING STATES



   ========================================================================== */







.loading {



    text-align: center;



    padding: 3rem;



    color: var(--ink-muted);



}







.loading i {



    font-size: var(--text-xl);



}







/* ==========================================================================



   BULK ACTIONS



   ========================================================================== */







.bulk-actions-bar {



    background: linear-gradient(135deg, #f8f9fa, #e9ecef);



    border: 1px solid #dee2e6;



    border-radius: var(--radius);



    padding: 1rem;



    margin-bottom: 1rem;



    box-shadow: 0 2px 8px rgba(0,0,0,0.1);



    animation: slideDown 0.3s ease;



    display: none;



}







.bulk-actions-bar.active {



    display: block;



}







.bulk-actions-content {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 1rem;



}







.bulk-actions-info {



    color: var(--ink);



    font-weight: var(--fw-semibold);



    display: flex;



    align-items: center;



    gap: 0.5rem;



}







.bulk-actions-buttons {



    display: flex;



    gap: 0.5rem;



}







/* ==========================================================================



   STATS GRID



   ========================================================================== */







.stats-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));



    gap: 1.5rem;



    margin-top: 2rem;



}







.stat-card {



    background: white;



    border-radius: var(--radius);



    padding: 1.5rem;



    box-shadow: 0 4px 15px rgba(0,0,0,.08);



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.stat-card:hover {



    transform: translateY(-5px);



    box-shadow: var(--shadow);



}







.stat-icon {



    width: 48px;



    height: 48px;



    border-radius: 10px;



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 1rem;



    font-size: var(--text-lg);



}







.stat-icon.red {



    background: rgba(168, 159, 151, 0.1);



    color: var(--primary);



}







.stat-icon.green {



    background: rgba(34, 197, 94, 0.1);



    color: #22c55e;



}







.stat-icon.purple {



    background: rgba(168, 85, 247, 0.1);



    color: #a855f7;



}







.stat-icon.orange {



    background: rgba(245, 158, 11, 0.1);



    color: #f59e0b;



}







.stat-value {



    font-size: var(--text-xl);



    font-weight: var(--fw-black);



    color: var(--ink);



    margin: 0;



}







.stat-label {



    color: var(--ink-muted);



    font-size: var(--text-sm);



    margin: 0;



}







/* ==========================================================================



   ANIMATIONS



   ========================================================================== */







@keyframes fadeIn {



    from {



        opacity: 0;



        transform: translateY(20px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@keyframes slideDown {



    from {



        opacity: 0;



        transform: translateY(-10px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@keyframes spin {



    0% { 



        transform: rotate(0deg); 



    }



    100% { 



        transform: rotate(360deg); 



    }



}







@keyframes slideUp {



    from {



        transform: translateY(50px);



        opacity: 0;



    }



    to {



        transform: translateY(0);



        opacity: 1;



    }



}







@keyframes loading {



    0% {



        background-position: 200% 0;



    }



    100% {



        background-position: -200% 0;



    }



}







.fade-in {



    opacity: 0;



    transform: translateY(20px);



    transition: opacity 0.6s ease-out, transform 0.6s ease-out;



}







.fade-in.visible {



    opacity: 1;



    transform: translateY(0);



}







.loading-skeleton {



    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);



    background-size: 200% 100%;



    animation: loading 1.5s infinite;



}







/* ==========================================================================



   UTILITIES



   ========================================================================== */







.text-center { text-align: center; }



.text-left { text-align: left; }



.text-right { text-align: right; }







.mb-0 { margin-bottom: 0 !important; }



.mb-1 { margin-bottom: 0.5rem !important; }



.mb-2 { margin-bottom: 1rem !important; }



.mb-3 { margin-bottom: 1.5rem !important; }







.mt-0 { margin-top: 0 !important; }



.mt-1 { margin-top: 0.5rem !important; }



.mt-2 { margin-top: 1rem !important; }



.mt-3 { margin-top: 1.5rem !important; }







.d-none { display: none !important; }



.d-block { display: block !important; }



.d-flex { display: flex !important; }







.justify-center { justify-content: center !important; }



.justify-between { justify-content: space-between !important; }



.justify-end { justify-content: flex-end !important; }







.align-center { align-items: center !important; }







.w-100 { width: 100% !important; }







/* ==========================================================================



   FORMS



   ========================================================================== */







.form-group {



    display: flex;



    flex-direction: column;



    gap: 0.5rem;



    margin-bottom: 1.5rem;



}







.form-group label {



    font-weight: var(--fw-semibold);



    color: var(--ink-muted);



    font-size: 16px;



}







.form-group input,



.form-group select,



.form-group textarea {



    width: 100%;



    padding: 0.8rem;



    border: 1px solid #ddd;



    border-radius: 8px;



    font-size: var(--text-base);



    transition: all 0.3s ease;



    box-sizing: border-box;



}







.form-group input:focus,



.form-group select:focus,



.form-group textarea:focus {



    outline: none;



    border-color: var(--primary);



    box-shadow: 0 0 0 3px rgba(168, 159, 151, .1);



}







.form-group textarea {



    resize: vertical;



    min-height: 100px;



}







.form-group.full-width {



    grid-column: 1 / -1;



}







.form-grid {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 1.5rem;



}







.form-actions {



    display: flex;



    gap: 1rem;



    justify-content: flex-end;



    margin-top: 2rem;



    padding-top: 2rem;



    border-top: 1px solid #eee;



}







/* Headers de formulaires */



.form-header {



    display: flex;



    justify-content: space-between;



    align-items: center;



    margin-bottom: 2rem;



    flex-wrap: wrap;



    gap: 1rem;



}







.form-header h1 {



    font-family: var(--font-heading);



    font-weight: var(--fw-black);



    font-size: var(--text-2xl);



    color: var(--ink);



    margin: 0;



}







/* Cards de formulaire */



.form-card {



    background: white;



    border-radius: var(--radius);



    padding: 2rem;



    box-shadow: 0 4px 15px rgba(0,0,0,.08);



    margin-bottom: 2rem;



}







/* Bouton outline */



.btn-outline {



    background: white;



    color: var(--primary);



    border: 2px solid var(--primary);



}







.btn-outline:hover {



    background: var(--primary);



    color: white;



}







/* Messages d'état */



.error-message {



    background: #fef2f2;



    color: #dc2626;



    padding: 1rem;



    border-radius: 8px;



    margin-bottom: 1rem;



}







.success-message {



    background: #f0fdf4;



    color: #16a34a;



    padding: 1rem;



    border-radius: 8px;



    margin-bottom: 1rem;



}







/* Checkbox groups */



.checkbox-group {



    display: flex;



    align-items: center;



    gap: 0.5rem;



}







.checkbox-group input[type="checkbox"] {



    width: auto;



}







/* ==========================================================================



   IMAGES SECTION



   ========================================================================== */







.images-section {



    background: white;



    border-radius: var(--radius);



    padding: 2rem;



    box-shadow: 0 4px 15px rgba(0,0,0,.08);



    margin-top: 2rem;



    margin-bottom: 2rem;



}







.images-section h3,



.images-section h4 {



    color: var(--ink);



    margin: 0 0 1rem 0;



}







.images-section h3 {



    font-size: var(--text-lg);



    font-weight: var(--fw-bold);



    border-bottom: 1px solid #eee;



    padding-bottom: 1rem;



    margin-bottom: 2rem;



}







.main-image-section {



    margin-bottom: 2rem;



}







.image-upload-area {



    display: flex;



    gap: 1.5rem;



    align-items: flex-start;



}







.current-image {



    position: relative;



    width: 200px;



    height: 200px;



    border: 2px dashed #ddd;



    border-radius: 8px;



    display: flex;



    align-items: center;



    justify-content: center;



    overflow: hidden;



}







.current-image img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    cursor: pointer;



    transition: transform 0.3s ease;



}







.current-image img:hover {



    transform: scale(1.05);



}







.current-image .no-image {



    text-align: center;



    color: var(--ink-muted);



}







.current-image .no-image i {



    font-size: var(--text-3xl);



    margin-bottom: 0.5rem;



    opacity: 0.5;



}







.upload-controls {



    display: flex;



    flex-direction: column;



    gap: 0.5rem;



}







.images-grid {



    display: grid;



    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));



    gap: 1rem;



    margin-bottom: 1rem;



}







.additional-image {



    position: relative;



    max-width: 250px;



    max-height: 250px;



    border-radius: 8px;



    overflow: hidden;



    border: 1px solid #ddd;



    display: flex;



    align-items: center;



    justify-content: center;



}







.additional-image img {



    max-width: 100%;



    max-height: 100%;



    width: auto;



    height: auto;



    object-fit: contain;



    cursor: pointer;



    transition: transform 0.3s ease;



}







.additional-image img:hover {



    transform: scale(1.05);



}







.btn-remove-image {



    position: absolute;



    top: 8px;



    right: 8px;



    width: 32px;



    height: 32px;



    border-radius: 50%;



    background: rgba(239, 68, 68, 0.9);



    color: white;



    border: none;



    display: flex;



    align-items: center;



    justify-content: center;



    cursor: pointer;



    transition: all 0.3s ease;



}







.btn-remove-image:hover {



    background: #dc2626;



    transform: scale(1.1);



}







.additional-image .btn-remove-image {



    top: 4px;



    right: 4px;



    width: 24px;



    height: 24px;



    font-size: var(--text-xs);



}







/* Image Modal */



.image-modal {



    display: none;



    position: fixed;



    inset: 0;



    background: rgba(0,0,0,0.9);



    z-index: 1000;



    align-items: center;



    justify-content: center;



    padding: 2rem;



}







.image-modal.active {



    display: flex;



}







.image-modal img {



    max-width: 90%;



    max-height: 90%;



    object-fit: contain;



    border-radius: 8px;



}







.image-modal-close {



    position: absolute;



    top: 2rem;



    right: 2rem;



    width: 40px;



    height: 40px;



    border-radius: 50%;



    background: rgba(255,255,255,0.2);



    color: white;



    border: none;



    display: flex;



    align-items: center;



    justify-content: center;



    cursor: pointer;



    font-size: var(--text-md);



}







.image-modal-close:hover {



    background: rgba(255,255,255,0.3);



}







/* ==========================================================================



   PROFILE SECTION



   ========================================================================== */







.profile-header {



    margin-bottom: 2rem;



}







.profile-header h1 {



    font-family: var(--font-heading);



    font-weight: var(--fw-black);



    font-size: var(--text-2xl);



    color: var(--ink);



    margin: 0 0 0.5rem 0;



}







.profile-header p {



    color: var(--ink-muted);



    font-size: var(--text-md);



    margin: 0;



}







.profile-grid {



    display: grid;



    grid-template-columns: 1fr;



    gap: 2rem;



    max-width: 1000px;



}







.profile-card {



    background: white;



    border-radius: var(--radius);



    padding: 2rem;



    box-shadow: var(--shadow);



}







.profile-card h2 {



    font-family: var(--font-heading);



    font-weight: var(--fw-extrabold);



    font-size: var(--text-md);



    color: var(--ink);



    margin: 0 0 1.5rem 0;



    padding-bottom: 0.5rem;



    border-bottom: 2px solid #f0f0f0;



}







.profile-avatar {



    width: 120px;



    height: 120px;



    border-radius: 50%;



    background: linear-gradient(135deg, var(--primary), var(--primary-dark));



    display: flex;



    align-items: center;



    justify-content: center;



    color: white;



    font-size: var(--text-3xl);



    font-weight: var(--fw-bold);



    margin: 0 auto 2rem;



}







.info-row {



    display: flex;



    justify-content: space-between;



    padding: 1rem 0;



    border-bottom: 1px solid #f0f0f0;



}







.info-row:last-child {



    border-bottom: none;



}







.info-label {



    color: var(--ink-muted);



    font-weight: var(--fw-semibold);



    font-size: var(--text-sm);



}







.info-value {



    color: var(--ink);



    font-weight: var(--fw-medium);



}







.badge-admin {



    background: linear-gradient(135deg, var(--primary), var(--primary-dark));



    color: white;



    padding: 0.25rem 0.75rem;



    border-radius: 999px;



    font-size: var(--text-sm);



    font-weight: var(--fw-semibold);



}







.form-row {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 1rem;



}







/* Form styles spécifiques au profil */



.form-label {



    display: block;



    font-weight: var(--fw-semibold);



    margin-bottom: 0.5rem;



    color: var(--ink);



}







.form-input {



    width: 100%;



    padding: 0.75rem 1rem;



    border: 1px solid #ddd;



    border-radius: 8px;



    font-family: var(--font-heading);



    transition: all 0.3s ease;



    box-sizing: border-box;



}







.form-input:focus {



    outline: none;



    border-color: var(--primary);



    box-shadow: 0 0 0 3px rgba(168, 159, 151, 0.1);



}







/* Alerts */



.alert {



    padding: 1rem;



    border-radius: 8px;



    margin-bottom: 1rem;



    display: none;



}







.alert.show {



    display: block;



}







.alert-success {



    background: rgba(34, 197, 94, 0.1);



    color: var(--success);



    border: 1px solid rgba(34, 197, 94, 0.3);



}







.alert-error {



    background: rgba(239, 68, 68, 0.1);



    color: var(--danger);



    border: 1px solid rgba(239, 68, 68, 0.3);



}







/* ==========================================================================



   RESPONSIVE DESIGN - TOUTES LES MEDIA QUERIES À LA FIN



   ========================================================================== */







/* Desktop adjustments */



@media (min-width: 769px) {



    .main-content {



        margin-left: 250px;



        transition: margin-left 0.3s ease;



        display: flex;



        flex-direction: column;



        align-items: center;



    }



    



    .main-content.full {



        margin-left: 0;



    }



    



    .main-content > * {



        width: 100%;



        max-width: 1600px;



    }



}



/* Le footer pleine largeur vient après le dashboard : le contenu doit
   occuper au moins un écran pour que le footer démarre sous la zone
   visible de la sidebar fixe (sinon ils se chevauchent au chargement) */

.main-content {
    min-height: calc(100vh - var(--header-height, 143px));
}







/* Responsive pour tablettes */



@media (max-width: 992px) {



    .form-grid {



        grid-template-columns: 1fr;



        gap: 1rem;



    }



}







/* Mobile responsive */



@media (max-width: 768px) {



    .main-content {



        margin-left: 0 !important;



        padding: 1rem !important;



    }







    .page-header {



        flex-direction: column;



        align-items: stretch;



        text-align: center;



        gap: 0.5rem;



    }







    .page-header h1 {



        font-size: var(--text-xl) !important;



        text-align: center;



        margin-bottom: 0;



    }







    .header-actions {



        flex-direction: column;



        gap: 0.75rem;



        width: 100%;



    }







    .header-actions .btn {



        width: 100%;



        justify-content: center;



        padding: 1rem;



        font-size: var(--text-base);



        font-weight: var(--fw-semibold);



    }







    .dashboard-header {



        margin-bottom: 1.5rem;



        padding: 0 0.5rem;



    }







    .dashboard-header h1 {



        font-size: var(--text-lg) !important;



        text-align: center;



        word-wrap: break-word;



        line-height: 1.3;



    }







    .dashboard-header h1 i {



        font-size: var(--text-md);



        display: inline-block;



        margin-right: 0.5rem;



    }







    .dashboard-header p {



        font-size: var(--text-sm) !important;



        text-align: center;



        padding: 0 1rem;



        line-height: 1.4;



    }







    /* Search form responsive */



    .dashboard-search-section {



        padding: 1rem;



        margin-bottom: 1.5rem;



    }







    .dashboard-search-form {



        flex-direction: column;



        gap: 0.75rem;



    }







    .dashboard-search-form input {



        min-width: 100%;



        padding: 1rem;



        font-size: var(--text-base);



    }







    .dashboard-search-form button {



        width: 100%;



        padding: 1rem;



        justify-content: center;



        font-size: var(--text-base);



    }







    /* Table responsive complet */



    .products-table, .users-table {



        margin-bottom: 1rem;



    }







    .table-header {



        padding: 1rem;



    }







    .table-header h3 {



        font-size: var(--text-md);



    }







    .table-container, #productsContent, #usersContent {



        overflow-x: auto !important;



        -webkit-overflow-scrolling: touch;



    }







    .table {



        display: block;



        overflow-x: auto;



        white-space: nowrap;



        min-width: 800px;



    }







    .table th,



    .table td {



        padding: 0.75rem 0.5rem;



        font-size: var(--text-sm);



        min-width: 100px;



    }







    .table th:first-child,



    .table td:first-child {



        min-width: 40px;



        width: 40px;



    }







    .action-buttons {



        flex-direction: column;



    }







    /* Pagination responsive */



    .pagination {



        flex-direction: column;



        gap: 1rem;



        margin-bottom: 1.5rem;



    }







    .pagination .btn {



        width: 100%;



        justify-content: center;



        font-size: var(--text-base);



    }







    .pagination-info {



        text-align: center;



        font-size: var(--text-sm);



        order: -1;



    }







    /* Bulk actions responsive */



    .bulk-actions-content {



        flex-direction: column;



        gap: 1rem;



        text-align: center;



    }







    .bulk-actions-buttons {



        justify-content: center;



        gap: 0.75rem;



    }







    .bulk-actions-buttons .btn {



        flex: 1;



        min-width: 120px;



    }







    .stats-grid {



        grid-template-columns: 1fr;



    }







    .welcome-card {



        padding: 1.5rem;



        margin-bottom: 1.5rem;



    }







    .card-body, .card-header {



        padding: 1rem;



    }







    .modal {



        padding: 1rem;



    }







    .modal-content {



        max-width: 100%;



    }







    .modal-actions {



        flex-direction: column;



    }







    /* Form responsive */



    .form-header {



        flex-direction: column;



        align-items: stretch;



        text-align: center;



    }







    .form-header h1 {



        font-size: var(--text-xl) !important;



    }







    .form-grid {



        grid-template-columns: 1fr !important;



        gap: 1rem;



    }







    .form-actions {



        flex-direction: column;



        gap: 0.5rem;



    }



    



    .form-actions .btn {



        width: 100%;



        justify-content: center;



    }







    /* Images responsive */



    .image-upload-area {



        flex-direction: column;



        align-items: center;



    }







    .current-image {



        width: 150px;



        height: 150px;



    }







    /* Profile responsive */



    .profile-header {



        margin-bottom: 1.5rem;



    }







    .profile-header h1 {



        font-size: var(--text-xl) !important;



    }







    .profile-grid {



        max-width: 100%;



        padding: 0;



        margin: 0;



    }







    .profile-card {



        padding: 1.5rem;



        margin-bottom: 1rem;



    }







    .form-row {



        grid-template-columns: 1fr;



    }







    .profile-avatar {



        width: 80px;



        height: 80px;



        font-size: var(--text-xl);



    }







    .info-row {



        padding: 0.75rem 0;



        flex-direction: column;



        gap: 0.5rem;



        align-items: flex-start;



    }







    .info-label {



        font-weight: var(--fw-bold);



    }







    .info-value {



        font-size: var(--text-sm);



    }







    .form-input {



        padding: 0.6rem 0.8rem;



        font-size: 16px; /* Évite le zoom sur iOS */



    }







    /* Boutons spécifiques pour les cards et forms */



    .card .btn,



    .form-card .btn {



        width: 100%;



        padding: 0.8rem 1rem;



        justify-content: center;



    }



}