/* Coquille commune des pages connectees.

   Ces regles etaient recopiees a l'identique dans plusieurs feuilles de
   page : barre laterale, en-tete, selecteur de langue, voile mobile,
   bascule RTL. Les rassembler ici evite qu'une correction doive etre
   repetee vingt fois, et le navigateur ne telecharge le bloc qu'une
   seule fois pour tout le site.

   Charge AVANT la feuille de la page : une page qui redefinit une de
   ces regles continue de l'emporter. */

h1,h2,h3{font-family:var(--font-heading)}

button{cursor:pointer}

.brand span{display:block;color:var(--color-accent);font-size:12px}

.nav{list-style:none}

.nav a{display:flex;align-items:center;gap:13px;padding:13px 14px;margin-bottom:7px;border:1px solid transparent;border-radius:var(--radius-lg);color:var(--color-text-muted)}

.top h1{font-size:clamp(26px,3vw,38px);margin-bottom:5px}

.top p{color:var(--color-text-muted);font-size:14px}

.stat strong{color:var(--color-accent-light);font-size:28px}

.filters{display:flex;gap:10px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.overlay.show{display:flex}

.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}

.group{display:grid;gap:7px}

.group.full{grid-column:1/-1}

.group label{font-size:12px;font-weight:700}

.mobile-overlay.show{display:block}

.selecteur-langue{width:100%;margin-top:10px;padding:11px 13px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);color:var(--color-text);font:inherit;cursor:pointer}

.selecteur-langue:focus{outline:none;border-color:var(--color-accent)}

.selecteur-langue option{color:#111;background:#fff}

.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--color-accent-light);
    font-weight:700
}

.hero{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    margin-bottom:20px;
}

.hero h1{font-size:28px;margin-bottom:5px}

.hero p{color:var(--color-text-muted)}

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px
}

.stat{padding:18px}

.panel{padding:22px}

.control{
    min-height:42px;
    padding:11px 13px;
    background:var(--color-bg-elevated);
    color:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md)
}

.actions{display:flex;gap:8px}

.danger{color:var(--color-danger)}

.overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:10;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:#000c
}

.close{
    width:40px;height:40px;
    background:var(--color-bg-elevated);
    color:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md)
}

.form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px
}

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

.toast{
    position:fixed;
    right:24px;
    bottom:24px;
    padding:14px 17px;
    background:#132017;
    color:var(--color-success);
    border:1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
    border-radius:var(--radius-md);
    opacity:0;
    transform:translateY(15px);
    transition:.2s
}

.menu-button{display:none;width:44px;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);color:var(--color-text);font-size:18px;cursor:pointer}

button,input,select,textarea{font:inherit}

.search{min-width:260px}

.group textarea{min-height:100px;resize:vertical}

.brand-logo {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background:
                linear-gradient(
                    135deg,
                    var(--color-accent-light),
                    var(--color-accent)
                );
            color: #111111;
            font-size: 18px;
            font-weight: 900;
        }

.brand-text strong {
            display: block;
            font-size: 18px;
        }

.brand-text span {
            color: var(--color-accent);
            font-size: 12px;
        }

.nav-list {
            list-style: none;
        }

.nav-link {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 7px;
            padding: 13px 14px;
            border: 1px solid transparent;
            border-radius: var(--radius-lg);
            color: var(--color-text-muted);
            transition: 0.2s ease;
        }

.nav-link:hover,
        .nav-link.active {
            background: rgba(213, 173, 82, 0.11);
            border-color: rgba(213, 173, 82, 0.28);
            color: var(--color-accent-light);
        }

.sidebar-footer {
            margin-top: 32px;
            padding: 16px;
            border: 1px solid var(--color-border);
            border-radius: 15px;
            background: var(--color-bg-alt);
        }

.sidebar-footer p {
            margin-bottom: 6px;
            color: var(--color-text-muted);
            font-size: 12px;
        }

.sidebar-footer strong {
            color: var(--color-accent-light);
            font-size: 13px;
        }

.topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 28px;
        }

.topbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

.page-title p {
            color: var(--color-text-muted);
            font-size: 14px;
        }

@media (max-width: 850px) {
            .app {
                display: block;
            }

            .sidebar {
                transform: translateX(-105%);
                transition: 0.25s ease;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .mobile-overlay.show {
                display: block;
            }

            .main {
                padding: 20px 18px 40px;
            }

            .menu-button {
                display: inline-grid;
                place-items: center;
            }
        }

.page-title h1 {
            margin-bottom: 5px;
            font-size: clamp(25px, 3vw, 36px);
        }

.button:hover {
            transform: translateY(-2px);
        }

.button-primary {
            background:
                linear-gradient(
                    135deg,
                    var(--color-accent-light),
                    var(--color-accent)
                );
            color: #111111;
        }

.button-secondary {
            border-color: var(--color-border);
            background: var(--color-bg-alt);
            color: var(--color-text);
        }

.form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

.form-group {
            display: grid;
            gap: 8px;
        }

.form-group.full {
            grid-column: 1 / -1;
        }

.form-control:focus {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(213, 173, 82, 0.1);
        }