/* =========================================
   1. STYLE GÉNÉRAL (Typographie & Couleurs)
   ========================================= */
:root {
    --ap-blue: #1e3a8a;       /* Bleu Trompette Actus */
    --ap-blue-hover: #172554;
    --ap-grey-bg: #f8fafc;    
    --ap-border: #e2e8f0;     
    --ap-text-main: #334155;
    --ap-text-light: #64748b;
    --ap-shadow: 0 10px 30px rgba(0,0,0,0.08);
    --ap-radius: 12px;
}

/* =========================================
   2. CONTENEURS (Formulaire & Tableau)
   ========================================= */
.ap-form-container, 
.ap-table-responsive,
.ap-filter-wrapper {
    background: #ffffff;
    padding: 30px;
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    max-width: 1000px; /* Largeur confortable */
    margin: 0 auto 30px auto;
    border: 1px solid #f0f0f0;
}

/* =========================================
   3. BARRE DE FILTRE
   ========================================= */
.ap-filter-wrapper {
    display: flex; justify-content: center; padding: 25px; margin-bottom: 40px;
}
.ap-filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; width: 100%;
}
.ap-inputs-group {
    display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: center;
}
.ap-input-search, .ap-select-filter {
    padding: 12px 20px !important; border: 2px solid var(--ap-border) !important;
    border-radius: 8px !important; min-width: 200px; height: 50px !important;
    background-color: var(--ap-grey-bg) !important; color: var(--ap-text-main);
    font-size: 15px; margin: 0 !important;
}
.ap-input-search:focus, .ap-select-filter:focus {
    border-color: var(--ap-blue) !important; background-color: #fff !important; outline: none;
}
.ap-actions-group { display: flex; align-items: center; gap: 15px; }
.ap-btn-filter {
    height: 50px !important; padding: 0 30px !important;
    background: var(--ap-blue) !important; color: #fff !important; border: none !important;
    border-radius: 50px !important; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.ap-btn-filter:hover { background: var(--ap-blue-hover) !important; transform: translateY(-2px); }
.ap-reset-btn {
    display: flex; align-items: center; justify-content: center; width: 45px; height: 45px;
    background: #fee2e2; color: #dc2626 !important; border-radius: 50%;
    font-size: 24px; text-decoration: none !important; line-height: 1;
}
.ap-reset-btn:hover { background: #dc2626; color: #fff !important; transform: rotate(90deg); }

/* =========================================
   4. LE TABLEAU (AVEC SCROLL HORIZONTAL)
   ========================================= */
/* C'est ici que se joue le défilement */
.ap-table-responsive {
    padding: 0;
    overflow-x: auto; /* Active le scroll horizontal si ça dépasse */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
}

.ap-prof-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 700px; /* IMPORTANT : Force le tableau à être large, ce qui déclenche le scroll sur mobile */
}

/* En-tête */
.ap-prof-table thead tr {
    background-color: #ffffff;
    border-bottom: 2px solid var(--ap-border);
}
.ap-prof-table th {
    padding: 15px 20px;
    text-align: left; color: var(--ap-blue);
    font-weight: 800; text-transform: uppercase; font-size: 0.85em;
    white-space: nowrap; /* Empêche le titre de se couper sur 2 lignes */
}

/* Corps */
.ap-prof-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle; color: var(--ap-text-main);
}
.ap-prof-table tbody tr:hover { background-color: #f8fafc; }

/* Colonnes spécifiques */
.ap-col-nom { font-weight: 700; color: var(--ap-blue); font-size: 1.1em; min-width: 150px; }
.ap-sortable { cursor: pointer; }
.ap-sortable:hover { background-color: #f1f5f9; }

/* =========================================
   5. LE FORMULAIRE (Inchangé)
   ========================================= */
.ap-form-container p { color: var(--ap-text-light); margin-bottom: 25px; }
.ap-row { margin-bottom: 25px; }
.ap-row label, .ap-flex label { display: block; font-weight: 600; color: var(--ap-blue); margin-bottom: 10px; }
.ap-form-container input, .ap-form-container select, .ap-form-container textarea {
    width: 100%; padding: 14px 20px; border: 2px solid var(--ap-border);
    border-radius: 8px; background-color: var(--ap-grey-bg); box-sizing: border-box;
}
.ap-form-container input:focus, .ap-form-container select:focus {
    border-color: var(--ap-blue); background-color: #fff; outline: none;
}
.ap-flex { display: flex; gap: 30px; margin-bottom: 25px; }
.ap-submit-btn {
    background: var(--ap-blue); color: #fff; border: none; padding: 16px 40px;
    font-size: 16px; font-weight: 700; border-radius: 50px; cursor: pointer;
}
.ap-message { padding: 20px; border-radius: 8px; margin-bottom: 30px; text-align: center; font-weight: bold; }
.ap-message.success { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }
.ap-message.error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* =========================================
   6. RESPONSIVE SIMPLE
   ========================================= */
@media (max-width: 768px) {
    /* Ajustements pour le formulaire uniquement */
    .ap-flex, .ap-filter-bar, .ap-inputs-group { flex-direction: column; width: 100%; }
    .ap-input-search, .ap-select-filter, .ap-btn-filter, .ap-submit-btn { width: 100%; }
    
    /* Pour le tableau, on garde l'affichage normal, le scroll se fera grâce au .ap-table-responsive */
    .ap-prof-table th, .ap-prof-table td {
        padding: 10px 15px; /* Un peu moins d'espace pour gagner de la place */
        font-size: 14px;
    }
}