/* Ce code est une partie du logiciel GCU WEB, Une solution déveoppée par Maxime BORKOWSKI a titre privé. Ce logiciel en intégralité appartient a Maxime BORKOWSKI. Il est strictement interdit de le modifier ou de le publier. L'utilisation et l'exploitation de cette copie du logiciel original est réservé l'UFA la Briquerie pour un usage interne uniquement. Il été mis a disposition a titre gracieux sans contrepartie financière.*/

/* =========================
   Global
   ========================= */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url("/assets/background.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

/* =========================
   Bandeau supérieur
   ========================= */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #649abe;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    overflow-x: hidden;
}

.top-left {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

.top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.user-name {
    font-size: 14px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-btn, .return-btn {
    flex-shrink: 0;
    white-space: nowrap;
    background-color: #cc0000;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.2s ease-in-out;
}

.logout-btn:hover {
    background-color: #a30000;
}

.return-btn {
    background-color: #808080;
}

.return-btn:hover {
    background-color: #000000;
}

/* Boutons GCU dans le bandeau */
.top-bar .gcu-btn {
    margin-left: 20px;
    background-color: #000000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.top-bar .gcu-btn:hover {
    background-color: #808080;
}

/* =========================
   Login box (page login)
   ========================= */
.login-box {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    width: 350px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    box-sizing: border-box;
    margin: 150px auto 40px auto;
}

/* =========================
   Formulaires
   ========================= */
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

input[type="password"], input[type="text"], input[type="email"] {
    width: 94%;
    padding: 8px;
    margin: 8px 0 15px 0;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    background-color: #004c99;
}

/* =========================
   Messages
   ========================= */
.error {
    color: red;
    margin-bottom: 15px;
    text-align: center;
}

.success {
    color: green;
    margin-bottom: 15px;
    text-align: center;
}

/* =========================
   Profil utilisateur
   ========================= */
.profile-box {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    width: 950px;
    max-width: 95%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    box-sizing: border-box;
    margin: 120px auto 40px auto;
}

.profile-table-wrapper {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: auto;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background: #ffffff;
}

.profile-table th {
    width: 35%;
    padding: 14px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    text-align: left;
}

.profile-table td {
    width: 65%;
    padding: 14px;
    border: 1px solid #ddd;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5;
}

/* Disciplines */
.discipline-list {
    margin: 0;
    padding-left: 20px;
}

.discipline-list li {
    margin-bottom: 6px;
}

/* Boutons action */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}

.action-buttons button {
    width: 240px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-color: #0066cc;
    color: #fff;
}

.action-buttons button:hover {
    background-color: #004f99;
}

/* =========================
   Modales génériques
   ========================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    width: 320px;
    max-width: 95%;
}

.modal-content label {
    display: block;
    margin-top: 10px;
}

.modal-content input {
    width: 100%;
    padding: 8px;
}

.modal-actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* =========================
   Footer
   ========================= */
.site-footer {
    background-color: transparent;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #666;
    margin-top: auto;
}

/* =========================
   Page administration.php
   ========================= */

/* Conteneur principal */
.admin-box {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    width: 950px;
    max-width: 95%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    box-sizing: border-box;
    margin: 70px auto 40px auto;
}

.admin-box h2 {
    text-align: center;
}

/* Formulaire de recherche */
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 50px;
    margin-top: 50px;
    justify-content: center;
}

.search-form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-form label {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.search-form input[type="text"],
.search-form select {
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 13px;
    width: 180px;
    height: 34px;
    box-sizing: border-box;
    margin-top: 0;
}

.search-form button {
    width: auto;
    padding: 8px 20px;
    height: 34px;
    box-sizing: border-box;
    margin-top: 23px;
}

/* Barre d'actions */
.actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.actions-bar button {
    width: auto;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
}

.btn-delete {
    background-color: #cc0000;
}

.btn-delete:hover {
    background-color: #a30000;
}

.btn-create {
    margin-left: auto;
}

/* Tableau de résultats */
.result-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.result-table th {
    padding: 10px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 13px;
}

.result-table td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    font-size: 13px;
}

.result-table tr:hover {
    background: #f9f9f9;
}

.result-table tr.clickable-row {
    cursor: pointer;
}

.result-table tr.clickable-row:hover {
    background: #e8f0fe;
}

/* Statuts utilisateur */
.status-actif {
    color: green;
    font-weight: bold;
}

.status-desactive {
    color: red;
    font-weight: bold;
}

.result-count {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

/* Alertes */
.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
}

/* Modale d'édition / création */
.edit-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.edit-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    width: 450px;
    max-width: 95%;
}

.edit-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
}

.edit-box .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.edit-box label {
    font-weight: bold;
    font-size: 13px;
}

.edit-box input[type="text"],
.edit-box select {
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.edit-box .btn-bar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.edit-box .btn-bar button {
    width: auto;
    padding: 8px 20px;
}

.btn-cancel {
    background: #888;
}

.btn-cancel:hover {
    background: #666;
}

/* Vérification disponibilité du login */
.login-status {
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
    font-weight: 600;
}

.login-status-ok       { color: #155724; }
.login-status-taken    { color: #856404; }
.login-status-error    { color: #888; font-weight: 400; }
.login-status-checking { color: #4a6cf7; font-style: italic; font-weight: 400; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .profile-box {
        width: 95%;
        padding: 20px;
    }

    .action-buttons button {
        width: 45%;
    }

    .admin-box {
        width: 95%;
        padding: 20px;
    }

    .search-form input[type="text"],
    .search-form select {
        width: 140px;
    }

    .edit-box {
        width: 95%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .top-left, .user-name {
        font-size: 12px;
    }

    .logout-btn, .return-btn {
        padding: 4px 8px;
        font-size: 12px;
    }

    input[type="password"], input[type="text"], input[type="email"] {
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .action-buttons button {
        width: 100%;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form input[type="text"],
    .search-form select {
        width: 100%;
    }

    .search-form button {
        width: 100%;
        margin-top: 8px;
    }

    .actions-bar {
        flex-direction: column;
    }

    .actions-bar button {
        width: 100%;
    }

    .btn-create {
        margin-left: 0;
    }
}



/* =========================
   Sélecteur d'établissement (modale et badge bandeau)
   ========================= */
.etab-selector-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.etab-selector-box {
    background: #fff;
    border-radius: 10px;
    padding: 36px 40px 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    min-width: 340px; max-width: 480px; width: 100%;
    text-align: center;
}
.etab-selector-box h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: #1a1a2e;
}
.etab-selector-box p {
    font-size: .9rem;
    color: #555;
    margin: 0 0 20px;
}
.etab-selector-box select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 20px;
    background: #fff;
}
.etab-selector-box button {
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 32px;
    font-size: 1rem;
    cursor: pointer;
    width: auto;
}
.etab-selector-box button:hover { background: #004c99; }
.etab-selector-box .btn-annuler {
    background: #888;
    margin-left: 8px;
}
.etab-selector-box .btn-annuler:hover { background: #666; }

.etab-badge {
    display: inline-block;
    background: #e8f4fd;
    color: #004c99;
    border: 1px solid #b0c4f8;
    border-radius: 20px;
    padding: 2px 14px;
    font-size: .82rem;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
}
.etab-badge:hover { background: #cce0f5; }

/* =========================
   Pages de configuration (config box)
   ========================= */
.config-box {
    background: rgba(255,255,255,0.97);
    padding: 36px 40px;
    width: 780px;
    max-width: 95%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    box-sizing: border-box;
    margin: 75px auto 50px auto;
}
.config-box h2 {
    text-align: center;
    margin-bottom: 6px;
    font-size: 20px;
    color: #1a1a2e;
}
.config-subtitle {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-bottom: 32px;
}
.config-section {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 24px;
    overflow: hidden;
}
.config-section-header {
    background: #f5f7fa;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
}
.config-section-body {
    padding: 20px;
}
.field-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.field-row.full { grid-template-columns: 1fr; }
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.field label {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.field label .required { color: #cc0000; }
.field label .hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #999;
    font-size: 11px;
    margin-left: 6px;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field input[type="url"],
.field input[type="email"],
.field select {
    padding: 9px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 13px;
    background: #fafafa;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0,102,204,.12);
    background: #fff;
}
.field input[readonly] {
    background: #f0f0f0;
    color: #888;
    cursor: not-allowed;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}
.toggle-row .toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.toggle-row .toggle-desc {
    font-size: 11px;
    color: #888;
    font-weight: 400;
    display: block;
    margin-top: 3px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    transition: .3s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background: #fff;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .slider { background: #0066cc; }
input:checked + .slider:before { transform: translateX(20px); }

.btn-bar {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 28px;
    flex-wrap: wrap;
}
.btn {
    padding: 10px 28px;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    width: auto;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-save, .btn-primary-cfg {
    background: #0066cc;
    color: #fff;
}
.btn-save:hover, .btn-primary-cfg:hover { background: #004c99; }
.btn-test {
    background: #f0f6ff;
    color: #0066cc;
    border: 1.5px solid #0066cc;
}
.btn-test:hover { background: #ddeeff; }
.btn-danger-cfg {
    background: #fff0f0;
    color: #cc0000;
    border: 1.5px solid #cc0000;
}
.btn-danger-cfg:hover { background: #ffe5e5; }

.test-result {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.test-result.ok  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.test-result.err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.file-path-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f7fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #555;
    margin-bottom: 14px;
}

/* =========================
   Page de gestion des établissements
   ========================= */
.page-wrap {
    max-width: 960px;
    margin: 70px auto 40px;
    padding: 0 16px;
}
.section-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.09);
    margin-bottom: 28px;
    overflow: hidden;
}
.section-card .section-header {
    background: #f5f7fa;
    border-bottom: 1px solid #ddd;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.section-card .section-header h2 {
    font-size: 15px;
    color: #1a1a2e;
    margin: 0;
    font-weight: 600;
    text-align: left;
}
.section-card .section-body { padding: 20px; }

.etab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.etab-table th { background: #f3f3f3; padding: 9px 12px; border: 1px solid #ddd; text-align: left; font-size: 12px; }
.etab-table td { padding: 9px 12px; border: 1px solid #ddd; vertical-align: middle; }
.etab-table tr:hover { background: #f9f9f9; }
.etab-uai  { font-family: monospace; font-weight: 600; color: #0066cc; }
.etab-name { font-weight: 500; }
.etab-host { font-family: monospace; font-size: 11px; color: #555; }

.btn-icon { padding: 4px 10px; font-size: 11px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; width: auto; }
.btn-icon.btn-edit  { background: #e8f4fd; color: #0066cc; }
.btn-icon.btn-edit:hover  { background: #cce0f5; }
.btn-icon.btn-del   { background: #fee2e2; color: #cc0000; }
.btn-icon.btn-del:hover   { background: #fecaca; }
.btn-icon.btn-test2 { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.btn-icon.btn-test2:hover { background: #dcfce7; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 11px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .3px; }
.form-group label .req { color: #cc0000; }
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"] {
    padding: 8px 10px; border: 1px solid #bbb; border-radius: 5px;
    font-size: 13px; background: #fafafa;
    transition: border-color .15s;
}
.form-group input:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,.1); }

.toggle-group {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #f9f9f9; border-radius: 6px; border: 1px solid #e8e8e8;
}
.toggle-group label { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #333; cursor: pointer; }

.switch-wrap { position: relative; display: inline-block; width: 42px; height: 22px; flex-shrink: 0; }
.switch-wrap input { opacity: 0; width: 0; height: 0; }
.sw-slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 22px; transition: .3s; }
.sw-slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.switch-wrap input:checked + .sw-slider { background: #0066cc; }
.switch-wrap input:checked + .sw-slider:before { transform: translateX(20px); }

.btn-bar-form { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.btn-primary-etab  { padding: 9px 22px; background: #0066cc; color: #fff; border: none; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
.btn-primary-etab:hover { background: #004c99; }
.btn-secondary-etab { padding: 9px 18px; background: #f5f5f5; color: #333; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; cursor: pointer; width: auto; }
.btn-secondary-etab:hover { background: #e8e8e8; }
.btn-green-etab { padding: 9px 22px; background: #217346; color: #fff; border: none; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
.btn-green-etab:hover { background: #1a5c38; }
.btn-danger-etab { padding: 9px 18px; background: #fee2e2; color: #cc0000; border: 1px solid #fecaca; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
.btn-danger-etab:hover { background: #fecaca; }

.empty-state { text-align: center; padding: 32px 20px; color: #888; font-size: 13px; }
.local-user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.local-user-table th { background: #f3f3f3; padding: 8px 12px; border: 1px solid #ddd; font-size: 12px; }
.local-user-table td { padding: 8px 12px; border: 1px solid #ddd; }
.badge-admin { background: #fff3cd; color: #78350f; border: 1px solid #fcd34d; border-radius: 20px; padding: 1px 8px; font-size: 10px; }
.badge-user  { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 20px; padding: 1px 8px; font-size: 10px; }
.local-badge { background: #fff3cd; color: #78350f; border: 1px solid #fcd34d; border-radius: 20px; padding: 2px 12px; font-size: 11px; margin-left: 10px; }
.form-collapse { display: none; margin-top: 16px; }
.form-collapse.open { display: block; }
.form-title { font-size: 14px; font-weight: 600; color: #1a1a2e; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }

/* =========================
   Page réinitialisation mot de passe
   ========================= */
.reset-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}
.reset-box {
    background: rgba(255,255,255,0.96);
    padding: 36px 32px;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    color: #111;
}
.reset-box h1 {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 24px;
    color: #1a1a2e;
}
.reset-box label {
    font-size: .85rem;
    font-weight: 700;
    color: #333;
}
.reset-box input[type="text"],
.reset-box input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    background: #f9f9f9;
    font-size: .95rem;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.reset-box input:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0,102,204,.12);
    background: #fff;
}
.reset-box .btn-reset {
    display: block;
    width: 100%;
    padding: 11px;
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    margin-top: 8px;
}
.reset-box .btn-reset:hover { background: #004c99; }
.reset-box .btn-reset.green { background: #217346; }
.reset-box .btn-reset.green:hover { background: #1a5c38; }
.reset-back {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #555;
    font-size: .85rem;
    text-decoration: none;
}
.reset-back:hover { color: #0066cc; }

.reset-alert { padding: 10px 14px; border-radius: 6px; font-size: .88rem; margin-bottom: 16px; }
.reset-alert.success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.reset-alert.error   { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.reset-alert.warning { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }

.reset-user-card {
    background: #f0f6ff;
    border: 1px solid #c5d4f8;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: .88rem;
    color: #333;
}
.reset-user-card strong { color: #0066cc; }

.reset-etab-list { list-style: none; padding: 0; margin: 12px 0; }
.reset-etab-list li {
    padding: 10px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: .88rem;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reset-etab-list li:hover, .reset-etab-list li.sel {
    border-color: #0066cc;
    background: #eef4ff;
    color: #0066cc;
}
.reset-etab-mail { font-size: .78rem; color: #888; }

/* =========================
   Page login - badge mode auth
   ========================= */
.auth-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 16px;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}
.auth-mode-ldap  { background: #e8f4fd; color: #004c99; border: 1px solid #b0c4f8; }
.auth-mode-none  { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

/* =========================
   Responsive configs
   ========================= */
@media (max-width: 768px) {
    .config-box { padding: 20px 16px; }
    .field-row { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .etab-selector-box { min-width: unset; padding: 24px 20px; }
}

/* =========================
   Page accréditations
   ========================= */
.accred-wrap {
    width: 1050px;
    max-width: 96%;
    margin: 72px auto 50px auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

.card {
    background: rgba(255,255,255,0.97);
    border-radius: 10px;
    box-shadow: 0 2px 18px rgba(0,0,0,0.13);
    overflow: hidden;
}
.card-header {
    padding: 16px 22px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-header h2 {
    font-size: 16px;
    margin: 0;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.card-header .badge-count {
    background: #e8f4fd;
    color: #004c99;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.card-body { padding: 20px 22px; }

.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.members-table th {
    padding: 9px 12px;
    background: #f5f7fa;
    border-bottom: 2px solid #e0e0e0;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    white-space: nowrap;
}
.members-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.members-table tr:last-child td { border-bottom: none; }
.members-table tr:hover td { background: #fafbff; }

.member-name  { font-weight: 600; color: #1a1a2e; }
.member-login { font-size: 11px; color: #888; font-family: 'Courier New', monospace; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-admin { background: #fff3cd; color: #78350f; border: 1px solid #fcd34d; }
.badge-user  { background: #e8f4fd; color: #004c99; border: 1px solid #b0c4f8; }
.badge-me    { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.badge-off   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.btn-icon-accred {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 11.5px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}
.btn-toggle-adm  { background: #fff3cd; color: #78350f; border: 1px solid #fcd34d; }
.btn-toggle-adm:hover  { background: #ffe8a0; }
.btn-toggle-adm.revoke { background: #f5f5f5; color: #555; border: 1px solid #ddd; }
.btn-toggle-adm.revoke:hover { background: #e8e8e8; }
.btn-revoke { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.btn-revoke:hover { background: #f5bec3; }
.action-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-width: 110px;
}
.action-btns form { display: block; width: 100%; }

.add-search-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.add-search-form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 13px;
    box-sizing: border-box;
}
.add-search-form input:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
}
.add-search-form select {
    padding: 8px 10px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 13px;
    background: #fafafa;
}
.btn-search {
    padding: 8px 16px;
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.btn-search:hover { background: #004c99; }

.search-result-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}
.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #f9f9fb;
    border: 1px solid #eaeaea;
    border-radius: 7px;
    transition: border-color 0.15s;
}
.search-result-item:hover { border-color: #b0c0f0; background: #f0f4ff; }
.result-info .result-name  { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.result-info .result-login { font-size: 11px; color: #888; font-family: 'Courier New', monospace; }

.add-inline-form { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.add-inline-form .chk-adm { accent-color: #f0ad4e; width: 14px; height: 14px; cursor: pointer; }
.add-inline-form label { font-size: 11px; color: #666; cursor: pointer; white-space: nowrap; }
.btn-add {
    padding: 5px 12px;
    background: #217346;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
}
.btn-add:hover { background: #1a5c38; }

.no-results { text-align: center; padding: 24px 0; color: #aaa; font-size: 13px; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; }

@media (max-width: 800px) {
    .accred-wrap { grid-template-columns: 1fr; }
}