/* ==========================================================================
   design-system.css — Tokens + composants de base de Tavernaute
   Chargé par toutes les pages qui utilisent la bibliothèque de composants
   (components.php). Un seul fichier = un seul cache navigateur partagé
   entre toutes les pages (accueil, app, profil, kit de démo...).
   ========================================================================== */

:root{
    /* Surfaces */
    --color-bg: #FAFBFD;
    --color-surface-1: #F4F2FF;
    --color-surface-2: #FFFFFF;
    --color-surface-3: #FFFFFF;
    --color-surface-4: #F4F2FF;
    --color-surface-5: #F3F4F6;

    --color-border: #E5E7EB;
    --color-border-soft: #F3F4F6;

    /* Texte */
    --color-text-primary: #1F2937;
    --color-text-secondary: #6B7280;
    --color-text-muted: #6D7787;
    --color-text-faint: #6D7787;

    /* Accents — violet Tavernaute */
    --color-accent-1: #6C4CF1;
    --color-accent-2: #2F80ED;
    --color-accent-3: #5337D4;
    --gradient-brand: linear-gradient(90deg, #6C4CF1, #2F80ED);
    --gradient-primary: linear-gradient(90deg, #6C4CF1, #5337D4);

    --color-success: #1E8449;
    --color-success-bg: #ECFDF3;
    --color-danger: #E52525;
    --color-danger-bg: #FFF2F2;
    --color-warning: #F2C94C;
    --color-warning-bg: #FFF8E1;
    --color-info: #1872EB;
    --color-info-bg: #EAF4FF;
    --color-gold: #9F43FA;

    /* Statuts de présence */
    --status-online: #178841;
    --status-away: #A36907;
    --status-offline: #64748B;
    --status-banned: #DC2626;

    /* Rôles (hiérarchie Tavernaute) */
    --role-creator: #9F43FA;
    --role-administrateur: #CD4D0B;
    --role-coordinateur: #2563EB;
    --role-mediateur: #0870F2;
    --role-facilitateur: #8452F5;
    --role-ambassadeur: #1E8449;
    --role-sentinelle: #64748B;
    --role-member: #64748B;
    --role-invite: #64748B;

    /* Rayons */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* Espacements */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

    /* Ombres */
    --shadow-glow: 0 0 40px rgba(108,76,241,.18);
    --shadow-card: 0 10px 30px rgba(17,24,39,.08);
    --shadow-modal: 0 20px 60px rgba(17,24,39,.18);

    --font-sans: 'Poppins', sans-serif;
    --transition-fast: .15s ease;
    --transition-base: .25s ease;

    --z-menu: 500;
    --z-modal: 2000;
    --z-toast: 3000;
}

/* ==========================================================================
   Accessibilité : focus toujours visible au clavier
   ========================================================================== */

:focus-visible{
    outline: 2px solid var(--color-accent-2);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.sr-only{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement (WCAG 2.4.1) : invisible tant qu'il n'a pas le focus clavier */
.skip-link{
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 3000;
    background: var(--color-accent-1);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 14px;
    transition: top .2s;
}
.skip-link:focus{
    top: 0;
}

/* ==========================================================================
   BOUTON — .btn
   ========================================================================== */

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding: 13px 26px;
    border-radius: var(--radius-full);
    border: none;

    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: white;
    text-decoration: none;

    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"]{
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn--primary{ background: var(--gradient-primary); box-shadow: 0 0 20px rgba(108,76,241,.28); }
.btn--secondary{ background: none; border: 1px solid var(--color-border); color: var(--color-text-primary); }
.btn--secondary:hover{ background: var(--color-surface-4); color: var(--color-accent-1); border-color: var(--color-accent-1); }
.btn--ghost{ background: var(--color-surface-5); color: var(--color-text-secondary); }
.btn--ghost:hover{ background: var(--color-surface-4); }
.btn--danger{ background: var(--color-danger); }

.btn--sm{ padding: 8px 16px; font-size: 13px; }
.btn--lg{ padding: 17px 34px; font-size: 16px; }
.btn--full{ width: 100%; }
.btn--icon{ padding: 11px; border-radius: 50%; width: 42px; height: 42px; }

/* ==========================================================================
   AVATAR — .avatar
   ========================================================================== */

.avatar{
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.avatar img{
    display: block;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(123,92,255,.5);
}

.avatar--sm img{ width: 32px; height: 32px; }
.avatar--md img{ width: 44px; height: 44px; }
.avatar--lg img{ width: 64px; height: 64px; }
.avatar--xl img{ width: 96px; height: 96px; border-width: 3px; }

.avatar__status{
    position: absolute;
    bottom: 0; right: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-surface-2);
    background: var(--status-offline);
}

.avatar__status--online{ background: var(--status-online); }

.avatar__ring--gold img{ border-color: var(--color-gold); box-shadow: 0 0 12px rgba(192,132,252,.5); }

/* ==========================================================================
   BADGE — .badge
   ========================================================================== */

.badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 11px;
    border-radius: var(--radius-full);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;

    white-space: nowrap;
}

.badge--gray{ background: var(--color-surface-5); color: var(--color-text-secondary); }
.badge--info{ background: var(--color-info-bg); color: var(--color-info); border: 1px solid rgba(47,128,237,.25); }
.badge--success{ background: var(--color-success-bg); color: var(--color-success); border: 1px solid rgba(39,174,96,.25); }
.badge--warning{ background: var(--color-warning-bg); color: #966F00; border: 1px solid rgba(242,201,76,.4); }
.badge--gold{ background: rgba(192,132,252,.12); color: var(--color-gold); border: 1px solid rgba(192,132,252,.35); }

/* Étiquettes de rôle (tchat, listes de membres, admin) */
.badge--role-creator{
    background: linear-gradient(90deg, rgba(192,132,252,.18), rgba(108,76,241,.12));
    color: var(--role-creator);
    border: 1px solid rgba(192,132,252,.4);
}
.badge--role-administrateur{ background: rgba(234,88,12,.12); color: var(--role-administrateur); border: 1px solid rgba(234,88,12,.3); }
.badge--role-coordinateur{ background: rgba(37,99,235,.12); color: var(--role-coordinateur); border: 1px solid rgba(37,99,235,.3); }
.badge--role-mediateur{ background: rgba(96,165,250,.14); color: #2563EB; border: 1px solid rgba(96,165,250,.35); }
.badge--role-facilitateur{ background: rgba(139,92,246,.12); color: var(--role-facilitateur); border: 1px solid rgba(139,92,246,.3); }
.badge--role-ambassadeur{ background: var(--color-success-bg); color: var(--role-ambassadeur); border: 1px solid rgba(39,174,96,.3); }
.badge--role-sentinelle{ background: #F3F4F6; color: var(--role-sentinelle); border: 1px solid #E5E7EB; }
.badge--role-member{ background: #F3F4F6; color: var(--role-member); }
.badge--role-invite{ background: #F9FAFB; color: var(--role-invite); border: 1px dashed #E5E7EB; }

/* Badges de statut (présence, admin) */
.badge--status-online{ background: rgba(34,197,94,.12); color: var(--status-online); }
.badge--status-away{ background: rgba(245,158,11,.12); color: var(--status-away); }
.badge--status-offline{ background: #F3F4F6; color: var(--status-offline); }
.badge--status-banned{ background: rgba(220,38,38,.12); color: var(--status-banned); border: 1px solid rgba(220,38,38,.3); }

/* ==========================================================================
   CARTES — .card, .user-card, .salon-card
   ========================================================================== */

.card{
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.user-card{
    display: flex;
    align-items: center;
    gap: var(--space-4);

    background: var(--color-surface-2);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4);

    text-decoration: none;
    color: inherit;

    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.user-card:hover, .user-card:focus-visible{
    border-color: var(--color-accent-1);
    background: var(--color-surface-4);
}

.user-card__info{ min-width: 0; flex: 1; }

.user-card__name{
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__meta{
    font-size: 12.5px;
    color: var(--color-text-faint);
    margin-top: 2px;
}

.user-card__badges{
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.salon-card{
    display: block;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);

    text-decoration: none;
    color: inherit;

    position: relative;
    overflow: hidden;

    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.salon-card::before{
    content: "";
    position: absolute;
    width: 160px; height: 160px;
    background: rgba(118,88,255,.16);
    border-radius: 50%;
    top: -80px; right: -80px;
    filter: blur(40px);
}

.salon-card:hover, .salon-card:focus-visible{
    transform: translateY(-4px);
    border-color: var(--color-accent-1);
    box-shadow: var(--shadow-glow);
}

.salon-card__icon{
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    color: white;

    margin-bottom: var(--space-4);
}

.salon-card__title{
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}

.salon-card__desc{
    font-size: 13.5px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.salon-card__meta{
    font-size: 12.5px;
    color: var(--color-text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   NOTIFICATION — .notification
   ========================================================================== */

.notification{
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;

    padding: var(--space-4);
    border-radius: var(--radius-md);

    text-decoration: none;
    color: inherit;

    position: relative;
    transition: background var(--transition-fast);
}

.notification:hover, .notification:focus-visible{
    background: var(--color-surface-4);
}

.notification__icon{
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--color-surface-5);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    color: var(--color-accent-1);
    font-size: 15px;
}

.notification__title{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.notification__body{
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

.notification__time{
    font-size: 11.5px;
    color: var(--color-text-faint);
    margin-top: 4px;
}

.notification--unread::after{
    content: "";
    position: absolute;
    top: 18px; right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent-2);
}

/* ==========================================================================
   MENU (dropdown) — .menu
   ========================================================================== */

.menu{ position: relative; display: inline-block; }

.menu__list{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;

    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);

    padding: var(--space-2);
    z-index: var(--z-menu);

    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.menu__list[data-open="true"]{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.menu__item{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;

    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;

    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
    text-align: left;

    cursor: pointer;
    transition: background var(--transition-fast);
}

.menu__item:hover, .menu__item:focus-visible{
    background: var(--color-surface-5);
    color: var(--color-text-primary);
}

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

.menu__separator{
    height: 1px;
    background: var(--color-border-soft);
    margin: var(--space-2) 6px;
}

/* ==========================================================================
   PAGINATION — .pagination
   ========================================================================== */

.pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    margin-top: var(--space-6);
}

.pagination__item{
    min-width: 38px;
    height: 38px;
    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-2);

    color: var(--color-text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pagination__item:hover, .pagination__item:focus-visible{
    background: var(--color-surface-4);
    color: var(--color-accent-1);
}

.pagination__item[aria-current="page"]{
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.pagination__item:disabled, .pagination__item[aria-disabled="true"]{
    opacity: .35;
    cursor: not-allowed;
}

/* ==========================================================================
   MODAL — .modal
   ========================================================================== */

.modal-backdrop{
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);

    background: rgba(4,6,14,.75);
    backdrop-filter: blur(6px);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.modal-backdrop[hidden]{ display: none; }

.modal{
    position: relative;
    width: 420px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;

    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    padding: var(--space-8) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-modal);
}

.modal__close{
    position: absolute;
    top: 16px; right: 16px;

    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface-5);
    color: var(--color-text-secondary);
    font-size: 18px;
}

.modal__title{
    font-size: 19px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.modal__body{
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.modal__footer{
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ==========================================================================
   TOAST — .toast
   ========================================================================== */

#toastRegion{
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);

    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    max-width: 360px;
}

.toast{
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);

    padding: var(--space-4);
    border-radius: var(--radius-md);

    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);

    font-size: 13.5px;
    color: var(--color-text-secondary);

    animation: toast-in .25s ease;
}

.toast--leaving{ animation: toast-out .2s ease forwards; }

.toast__icon{ font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast--success .toast__icon{ color: var(--color-success); }
.toast--error .toast__icon{ color: var(--color-danger); }
.toast--info .toast__icon{ color: var(--color-accent-3); }

.toast__close{
    background: none; border: none;
    color: var(--color-text-faint);
    font-size: 14px;
    margin-left: auto;
    flex-shrink: 0;
}

@keyframes toast-in{
    from{ opacity: 0; transform: translateX(20px); }
    to{ opacity: 1; transform: translateX(0); }
}

@keyframes toast-out{
    to{ opacity: 0; transform: translateX(20px); }
}

/* ==========================================================================
   FIL D'ARIANE — .breadcrumb
   ========================================================================== */

.breadcrumb{
    margin-bottom: var(--space-5);
}

.breadcrumb ol{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.breadcrumb li{
    display: flex;
    align-items: center;
    font-size: 12.5px;
}

.breadcrumb a{
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumb a:hover{
    color: var(--color-accent-1);
    text-decoration: underline;
}

.breadcrumb span[aria-current="page"]{
    color: var(--color-text-secondary);
    font-weight: 600;
}

.breadcrumb span[aria-hidden="true"]{
    color: var(--color-text-faint);
    margin: 0 2px;
}

/* ==========================================================================
   Responsive — ajustements bibliothèque de composants
   ========================================================================== */

@media (max-width: 600px){

    .modal{ width: 100%; border-radius: var(--radius-lg); }

    #toastRegion{
        left: var(--space-4);
        right: var(--space-4);
        max-width: none;
    }

    .menu__list{
        right: auto;
        left: 0;
    }

}