/* ═══════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════ */
:root {
    --forest: #0d1f06;
    --leaf: #1e4010;
    --fern: #2c5c1a;
    --moss: #3e7a25;
    --sage: #5da038;
    --g-mist: #eaf6d8;
    --g-tint: #f2fbea;
    --gilt: #f5c518;
    --gold: #c49a0a;
    --amber: #d97010;
    --bord: #6e1515;
    --snow: #ffffff;
    --off: #f8fdf2;
    --ink: #0d1a06;
    --muted: #5e7a46;
    --faded: #8aaa6a;
    --wire: #c8e0a4;
    --line: #daeebe;
    --danger: #c0392b;
    --ok: #27ae60;
    --info: #2471a3;
    --warn: #d68910;
    --r: 9px;
    --rmd: 13px;
    --sh: 0 1px 4px rgba(10,30,5,.07), 0 4px 18px rgba(10,30,5,.07);
    --tr: .22s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    background: var(--off);
    color: var(--ink);
   
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════
   LAYOUT MODULE
═══════════════════════════════════════════════ */
.module {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════
   EN-TÊTE
═══════════════════════════════════════════════ */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.7rem;
    color: var(--ink);
    line-height: 1;
}

    .page-title em {
        color: var(--fern);
        font-style: italic;
    }

.page-sub {
    font-size: .75rem;
    color: var(--faded);
    margin-top: 5px;
    font-weight: 500;
}
/* Switcher de langue */
.lang-sw {
    display: flex;
    background: var(--g-mist);
    border: 1px solid var(--wire);
    border-radius: 20px;
    padding: 3px;
}

    .lang-sw button {
        padding: 5px 14px;
        border: none;
        border-radius: 16px;
        font-family: 'Manrope', sans-serif;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .5px;
        cursor: pointer;
        background: transparent;
        color: var(--muted);
        transition: all var(--tr);
    }

        .lang-sw button.on {
            background: var(--fern);
            color: #fff;
            box-shadow: 0 2px 8px rgba(46,92,26,.28);
        }

/* ═══════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════ */
.card {
    background: var(--snow);
    border: 1px solid var(--line);
    border-radius: var(--rmd);
    box-shadow: var(--sh);
    overflow: hidden;
}

.card-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--gilt), var(--sage));
    background-size: 200%;
    animation: barslide 4s linear infinite;
}

@keyframes barslide {
    100% {
        background-position: 200% 0;
    }
}

.card-head {
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ch-ico {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    background: var(--g-mist);
    color: var(--fern);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ch-ico svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ch-title {
    font-size: .88rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.ch-sub {
    font-size: .7rem;
    color: var(--faded);
}

/* Badge mode édition */
.edit-badge {
    display: none;
    margin-left: auto;
    padding: 4px 12px;
    background: #fff3e0;
    border: 1px solid #e67e22;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 800;
    color: #c56b1a;
}

.card-body {
    padding: 22px;
}

/* ═══════════════════════════════════════════════
   FORMULAIRE
═══════════════════════════════════════════════ */
.fg2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fg {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fg-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
}

.req {
    color: var(--amber);
    margin-left: 2px;
}

/* Input wrapper avec icône */
.iw {
    position: relative;
}

.fic {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    stroke: var(--faded);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke var(--tr);
}

.iw:focus-within .fic {
    stroke: var(--moss);
}

.fc {
    width: 100%;
    padding: 10px 12px 10px 34px;
    border: 1.5px solid var(--wire);
    border-radius: var(--r);
    font-family: 'Manrope', sans-serif;
    font-size: .83rem;
    color: var(--ink);
    background: var(--g-tint);
    outline: none;
    appearance: none;
    transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}

    .fc:focus {
        border-color: var(--fern);
        background: var(--snow);
        box-shadow: 0 0 0 3px rgba(46,92,26,.09);
    }

    .fc::placeholder {
        color: #b8d498;
    }

select.fc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aaa6a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 32px;
    cursor: pointer;
}

/* Message d'erreur (hidden, activé par le backend / votre JS) */
.err-msg {
    font-size: .68rem;
    color: var(--danger);
    display: none;
    margin-top: 2px;
    font-weight: 600;
}
    /* Ajoutez la classe .show sur .err-msg pour l'afficher */
    .err-msg.show {
        display: block;
    }
/* Ajoutez la classe .invalid sur .fc pour le bordure rouge */
.fc.invalid {
    border-color: var(--danger) !important;
    background: #fdf2f2 !important;
}

/* ═══════════════════════════════════════════════
   SÉLECTEUR DE RÔLES (pills)
═══════════════════════════════════════════════ */
.roles-section {
    margin-top: 20px;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
/* Le radio est caché */
.rc {
    display: none;
}

    .rc + label {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        border: 1.5px solid var(--wire);
        border-radius: var(--r);
        background: var(--g-tint);
        cursor: pointer;
        font-size: .78rem;
        font-weight: 600;
        color: var(--muted);
        transition: all var(--tr);
        user-select: none;
    }

.role-ico {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--g-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--tr);
}

    .role-ico svg {
        width: 12px;
        height: 12px;
        stroke: var(--fern);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke var(--tr);
    }

.rc:checked + label {
    border-color: var(--fern);
    background: var(--g-mist);
    color: var(--leaf);
    box-shadow: 0 0 0 3px rgba(46,92,26,.08);
}

    .rc:checked + label .role-ico {
        background: var(--fern);
    }

        .rc:checked + label .role-ico svg {
            stroke: #fff;
        }

/* ═══════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════ */
.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--r);
    border: none;
    font-family: 'Manrope', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tr);
    letter-spacing: .2px;
}

    .btn svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

.btn-primary {
    background: var(--fern);
    color: #fff;
    box-shadow: 0 3px 14px rgba(46,92,26,.25);
}

    .btn-primary:hover {
        background: var(--leaf);
        box-shadow: 0 5px 20px rgba(46,92,26,.32);
    }

    .btn-primary:active {
        transform: scale(.97);
    }

.btn-warning {
    background: #e67e22;
    color: #fff;
    box-shadow: 0 3px 12px rgba(214,136,16,.28);
}

    .btn-warning:hover {
        background: #c56b1a;
    }

.btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--wire);
}

    .btn-ghost:hover {
        border-color: var(--fern);
        color: var(--fern);
    }

/* Bouton "Modifier" caché par défaut, activé en mode édition */
#btn-edit {
    display: none;
}

/* ═══════════════════════════════════════════════
   BARRE FILTRES TABLEAU
═══════════════════════════════════════════════ */
.tbl-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--g-tint);
    flex-wrap: wrap;
}

/* Champ de recherche */
.srch {
    position: relative;
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}

    .srch svg {
        position: absolute;
        left: 9px;
        top: 50%;
        transform: translateY(-50%);
        width: 13px;
        height: 13px;
        stroke: var(--faded);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .srch input {
        width: 100%;
        padding: 7px 10px 7px 30px;
        border: 1.5px solid var(--wire);
        border-radius: var(--r);
        font-family: 'Manrope', sans-serif;
        font-size: .78rem;
        background: var(--snow);
        outline: none;
        color: var(--ink);
        transition: border-color var(--tr);
    }

        .srch input:focus {
            border-color: var(--fern);
        }

/* Selects filtre */
.fsel {
    padding: 7px 26px 7px 10px;
    border: 1.5px solid var(--wire);
    border-radius: var(--r);
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    background: var(--snow);
    color: var(--muted);
    outline: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aaa6a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 10px;
}

.tbl-count {
    font-size: .73rem;
    color: var(--faded);
    margin-left: auto;
    font-weight: 600;
}

    .tbl-count strong {
        color: var(--fern);
    }

/* ═══════════════════════════════════════════════
   TABLEAU
═══════════════════════════════════════════════ */
/* Scroll horizontal sur petits écrans */
.tw {
    overflow-x: auto;
}

    .tw table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px; /* scroll si viewport < cette valeur */
    }

    .tw thead tr {
        background: var(--g-mist);
        border-bottom: 2px solid var(--wire);
    }

    .tw th {
        padding: 11px 14px;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        white-space: nowrap;
    }

    .tw tbody tr {
        border-bottom: 1px solid var(--line);
        transition: background var(--tr);
    }

        .tw tbody tr:last-child {
            border-bottom: none;
        }

        .tw tbody tr:hover {
            background: var(--g-tint);
        }

    .tw td {
        padding: 12px 14px;
        font-size: .8rem;
        color: var(--ink);
        vertical-align: middle;
    }

/* Cellule utilisateur : avatar + nom + email */
.uc {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
}
/* Couleurs d'avatars — assignez via classe ou style inline */
.av-green {
    background: linear-gradient(135deg,#1e4010,#5da038);
}

.av-red {
    background: linear-gradient(135deg,#6e1515,#9c1f1f);
}

.av-blue {
    background: linear-gradient(135deg,#0e4477,#2980b9);
}

.av-gold {
    background: linear-gradient(135deg,#6d4c00,#d68910);
}

.av-teal {
    background: linear-gradient(135deg,#1a5f4a,#27ae60);
}

.u-name {
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.2;
}

.u-email {
    font-size: .7rem;
    color: var(--faded);
}

/* ── Badges ── */
.bdg {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
}
/* Rôles */
.bdg-admin {
    background: #fdecea;
    color: var(--bord);
}

.bdg-ens {
    background: #fef9e0;
    color: var(--gold);
}

.bdg-scol {
    background: var(--g-mist);
    color: var(--fern);
}

.bdg-etu {
    background: #ebf5fb;
    color: var(--info);
}

.bdg-cais {
    background: #fdf5e6;
    color: var(--warn);
}
/* Statut */
.bdg-ok {
    background: #e8f8ef;
    color: var(--ok);
}

.bdg-off {
    background: #f4f4f4;
    color: #888;
}

/* ── Boutons Activer / Désactiver ── */
.btn-act, .btn-dea {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: var(--r);
    border: 1.5px solid;
    font-family: 'Manrope', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tr);
}

.btn-act {
    background: #e8f8ef;
    color: var(--ok);
    border-color: #b2e8ca;
}

    .btn-act:hover {
        background: var(--ok);
        color: #fff;
        border-color: var(--ok);
    }

.btn-dea {
    background: #fdecea;
    color: var(--danger);
    border-color: #f5b7b1;
}

    .btn-dea:hover {
        background: var(--danger);
        color: #fff;
        border-color: var(--danger);
    }

    .btn-act svg, .btn-dea svg {
        width: 11px;
        height: 11px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Boutons icône (modifier / supprimer) ── */
.tab-acts {
    display: flex;
    gap: 5px;
}

.tab-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--g-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--tr);
}

    .tab-btn:hover {
        border-color: var(--fern);
        color: var(--fern);
    }

    .tab-btn.del:hover {
        border-color: var(--danger);
        color: var(--danger);
        background: #fdf2f2;
    }

    .tab-btn svg {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ═══════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════ */
.tbl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    border-top: 1px solid var(--line);
    background: var(--g-tint);
    flex-wrap: wrap;
    gap: 8px;
}

.pg-info {
    font-size: .72rem;
    color: var(--faded);
    font-weight: 600;
}

.pg-btns {
    display: flex;
    gap: 4px;
}

.pgb {
    width: 30px;
    height: 30px;
    border-radius: var(--r);
    border: 1.5px solid var(--wire);
    background: var(--snow);
    color: var(--muted);
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
}

    .pgb:hover, .pgb.on {
        background: var(--fern);
        color: #fff;
        border-color: var(--fern);
    }

    .pgb svg {
        width: 11px;
        height: 11px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fg2 {
        grid-template-columns: 1fr;
    }

    .roles-grid {
        grid-template-columns: 1fr 1fr;
    }

    body {
        padding: 16px 14px;
    }

    .card-body {
        padding: 16px;
    }

    .tbl-bar {
        padding: 10px 14px;
    }

    .tbl-foot {
        padding: 10px 14px;
    }

    .page-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }

    .tbl-count {
        display: none;
    }
    /* masqué sur mobile très étroit */
}