/* =========================================
   BRASSNET — CHARTE VISUELLE V1.0
   Thème clair par défaut + thème sombre
   ========================================= */

:root {
    color-scheme: light;

    /* Identité de marque */
    --bn-primary: #163B65;
    --bn-primary-hover: #102D4D;
    --bn-turquoise: #12A89D;
    --bn-turquoise-text: #087F76;
    --bn-amber: #F2A541;

    /* Surfaces */
    --bn-bg: #F4F7FB;
    --bn-surface: #FFFFFF;
    --bn-surface-hover: #EDF2F8;
    --bn-border: #DCE4ED;

    /* Typographie */
    --bn-text: #263548;
    --bn-text-muted: #66758A;

    /* États */
    --bn-success: #18794E;
    --bn-danger: #B42318;
    --bn-warning-text: #704500;

    /* Formes et ombres */
    --bn-radius-sm: 6px;
    --bn-radius-md: 12px;
    --bn-radius-lg: 18px;
    --bn-shadow: 0 3px 12px rgb(22 59 101 / 7%);
}

/* Thème sombre */
html[data-theme="dark"] {
    color-scheme: dark;

    --bn-primary: #163B65;
    --bn-primary-hover: #245487;
    --bn-turquoise: #55D6C8;
    --bn-turquoise-text: #55D6C8;
    --bn-amber: #F2A541;

    --bn-bg: #111C2D;
    --bn-surface: #1B2A40;
    --bn-surface-hover: #263951;
    --bn-border: #34445B;

    --bn-text: #F4F7FB;
    --bn-text-muted: #B8C5D8;

    --bn-success: #65D6A0;
    --bn-danger: #FF8B82;
    --bn-warning-text: #FFD18A;

    --bn-shadow: 0 3px 12px rgb(0 0 0 / 18%);
}

/* Base */
html {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bn-bg);
    color: var(--bn-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: var(--bn-turquoise-text);
}

html[data-theme="dark"] a {
    color: var(--bn-turquoise);
}

a:hover {
    text-decoration: underline;
}

/* Navigation */
.brassnet-navbar {
    background: var(--bn-primary);
    color: #FFFFFF;
}

.brassnet-navbar a {
    color: #FFFFFF;
    text-decoration: none;
}

.brassnet-navbar a:hover {
    color: #55D6C8;
}

/* Boutons */
.btn-brassnet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--bn-primary);
    border-radius: var(--bn-radius-sm);
    background: var(--bn-primary);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn-brassnet:hover {
    background: var(--bn-primary-hover);
    color: #FFFFFF;
}

.btn-brassnet-secondary {
    background: var(--bn-turquoise);
    border-color: var(--bn-turquoise);
    color: #102D35;
}

.btn-brassnet-secondary:hover {
    background: #0D8E85;
    color: #FFFFFF;
}

.btn-brassnet:focus-visible,
.brassnet-theme-toggle:focus-visible {
    outline: 3px solid var(--bn-amber);
    outline-offset: 3px;
}

/* Cartes et publications */
.brassnet-card {
    background: var(--bn-surface);
    color: var(--bn-text);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
    box-shadow: var(--bn-shadow);
}

.brassnet-card-muted {
    background: var(--bn-surface-hover);
    color: var(--bn-text);
}

.brassnet-muted {
    color: var(--bn-text-muted);
}

/* Accent */
.brassnet-accent {
    background: var(--bn-amber);
    color: #263548;
}

.brassnet-accent-text {
    color: var(--bn-warning-text);
}

/* Formulaires */
.brassnet-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    background: var(--bn-surface);
    color: var(--bn-text);
    font: inherit;
}

.brassnet-form-control:focus {
    outline: 2px solid var(--bn-turquoise);
    outline-offset: 1px;
}

/* Sélecteur de thème */
.brassnet-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    background: var(--bn-surface);
    color: var(--bn-text);
    font: inherit;
    cursor: pointer;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}



/* Liste des participants */
.bn-message-participant-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.bn-message-participant-card {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Avatar commun */
.bn-message-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bn-bg);
    border: 1px solid var(--bn-border);
    color: var(--bn-text);
    font-weight: 700;
}

.bn-message-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Photos des participants */
.bn-message-avatar-participant {
    width: 42px;
    height: 42px;
}

/* Photo à côté de l'auteur du message */
.bn-message-author-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.bn-message-avatar-inline {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.bn-message-author {
    font-weight: 700;
}

/* Éviter que les longues photos ou noms débordent */
.bn-message-participant {
    overflow-wrap: anywhere;
}


.bn-alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    padding: 12px 15px;
    margin-bottom: 18px;
    border-radius: 6px;
}



.bn-logout-form {
    margin: 0;
    padding: 0;
}

.bn-logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bn-logout-button:hover {
    background: rgba(127, 127, 127, 0.1);
}


/* Alertes BrassNET */
.bn-alert {
    padding: 12px 15px;
    margin-bottom: 18px;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    background: var(--bn-surface);
    color: var(--bn-text);
}

.bn-alert-success {
    color: var(--bn-success);
    border-color: var(--bn-success);
}

.bn-alert-error {
    color: var(--bn-danger);
    border-color: var(--bn-danger);
}

.bn-alert-warning {
    color: var(--bn-warning-text);
    background: var(--bn-surface);
    border-color: var(--bn-amber);
}

/* Déconnexion */
.bn-logout-form {
    margin: 0;
    padding: 0;
}

.bn-logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--bn-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bn-logout-button:hover {
    background: var(--bn-surface-hover);
}



/* Photo de profil dans la navbar */
.bn-avatar-image {
    display: block;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
}

.bn-navbar-profile .bn-avatar-image {
    width: 38px;
    height: 38px;
}

/* Photo dans le résumé du tableau de bord */
.bn-summary-avatar.bn-avatar-image {
    width: 76px;
    height: 76px;
}

/* Photo sur la page de profil */
.bn-profile-avatar.bn-avatar-image {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

/* Alignement de l'avatar et du prénom */
.bn-navbar-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}



.bn-whatsapp-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #dce5df;
    border-radius: 8px;
    color: #18794e;
    background: transparent;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .2s ease;
}

.bn-whatsapp-share:hover {
    background-color: #eaf7ef;
    color: #12663f;
}

.bn-whatsapp-share i {
    font-size: 19px;
}