:root {
    --primary-color: #007bff;
    --bg-color: #f4f4f9;
    --card-bg: #ffffff;
    --text-color: #333333;
    
    --color-depart: #c2edf7;
    --color-transport: #288eaf;
    --color-restauration: #fcb600;
    --color-meal-breakfast: #ddaa5a;
    --color-meal-lunch: #df9d1b;
    --color-meal-dinner: #d86f1a;
    --color-meal-snack: #fcb600;
    --color-hebergement: #7350b3;
    --color-visite: #779412;
    --color-sport: #536b00;
    --color-activite: #17a2b8;
    --color-bonus: #e4cd00;
    --color-page: #959fa9;
    --color-trip-main: #ad0017;
    --color-day: #3b3b3b;
    --color-autre: #6c757d;

    --pale-transport: #cce5ff;
    --pale-restauration: #fff1cc;
    --pale-hebergement: #e8dff5;
    --pale-visite: #d4edda;
    --pale-activite: #d1ecf1;
    --pale-sport: #e4ecc9;
    --pale-bonus: #fbf5c4;
    --pale-autre: #e2e3e5;
}

body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 10px clamp(14px, 4vw, 56px); 
    background: var(--bg-color); 
    color: var(--text-color);
}

/* Bandeaux du site rédigés dans Administration > Visuels. */
.site-banner { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto 14px; overflow-wrap: anywhere; }
.site-banner[hidden], body.hide-site-banners .site-banner { display: none; }
.site-banner img { max-width: 100%; height: auto; }
.site-banner > :first-child { margin-top: 0; }
.site-banner > :last-child { margin-bottom: 0; }
@media print { .site-banner { display: none; } }

.top-navbar {
    background: transparent;
    color: #0a2540;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto 20px;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    min-height: 66px;
    gap: 18px;
    box-shadow: none;
}

/* Bureau : logo à gauche, compte à droite, liens centrés sur la page. */
@media (min-width: 761px) {
    .top-navbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .nav-auth { justify-self: end; }
    .top-navbar .nav-links { margin-left: 0; justify-content: center; }
}

.brand-mark {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    text-decoration: none;
}

.brand-mark img {
    display: block;
    width: 144px;
    height: 56px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    flex: 1 1 auto;
    margin-left: 32px;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.nav-link {
    color: #29445f;
    text-decoration: none;
    cursor: pointer;
    padding: 9px 14px;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    background: #f3f6f9;
}

.nav-link:hover:not(:disabled):not(.disabled) {
    background: #e7eef5;
    color: #0a2540;
    transform: translateY(-1px);
}
.nav-link.active {
    background: #0a2540;
    border-color: #0a2540;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(10, 37, 64, 0.2);
}
.nav-link.disabled { color: #8996a3; cursor: not-allowed; opacity: 0.7; }
.nav-link.nav-admin-link,
.nav-link.nav-admin-link:hover:not(:disabled):not(.disabled) { color: #c62828; background: #fdecea; border-color: #f5c2c0; }
.nav-link.nav-admin-link[hidden] { display: none; }

.nav-auth { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.user-initials-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background-color: #007bff; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    border: 2px solid white;
    padding: 0;
    font-family: inherit;
}

.user-initials-avatar:hover { transform: scale(1.05); }

.user-preferences-button {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
    padding: 0; border: 1px solid #c8d1da; border-radius: 50%; background: #f3f6f9; color: #29445f; cursor: pointer;
}
.user-preferences-button:hover { background: #e7eef5; }
.user-preferences-button svg { width: 19px; height: 19px; }

.auth-btn-small {
    background: #0a2540; color: white; border: none;
    padding: 10px 18px; border-radius: 999px; cursor: pointer;
    font-size: 0.9rem; font-weight: bold; white-space: nowrap;
}

.auth-btn-small:hover { background: #183c5e; }

.nav-link:focus-visible,
.auth-btn-small:focus-visible,
.brand-mark:focus-visible {
    outline: 3px solid rgba(0, 123, 255, 0.45);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .top-navbar {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 8px 12px;
    }

    .brand-mark { order: 1; }
    .nav-auth { order: 2; margin-left: auto; }
    .nav-links {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        justify-content: center;
        gap: 6px;
    }

    .nav-link { padding: 8px 11px; font-size: 0.82rem; }
}

@media (max-width: 420px) {
    .nav-links { gap: 5px; }
    .nav-link { padding: 7px 9px; font-size: 0.78rem; }
}