/* =========================================================
   BRASSNET — FEUILLE DE STYLE DU LAYOUT PRINCIPAL
   Fichier : public/css/brassnet-layout.css

   Organisation :
   1. Réglages généraux et accessibilité
   2. Barre de navigation supérieure
   3. Grille principale : gauche / centre / droite
   4. Titres et navigation latérale
   5. Widgets et suggestions
   6. Alertes et pied de page
   7. Fil d'actualité
   8. Page d'accueil (Landing page)
   9. Authentification
   10. Tableau de bord et profil
   11. Pages sociales
   12. Boutons d'authentification de la navbar
   13. Messagerie
   14. Destinataires et participants
   15. Responsive : tablettes et mobiles

   IMPORTANT :
   - La grille principale est définie une seule fois.
   - Sur grand écran : menu | contenu | suggestions.
   - Sur tablette : menu | contenu.
   - Sur mobile : contenu seul, menu accessible via le bouton mobile.
   ========================================================= */


/* =========================================================
   1. RÉGLAGES GÉNÉRAUX ET ACCESSIBILITÉ
   ========================================================= */

* {
    box-sizing: border-box;
}

.bn-visually-hidden,
.bn-skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bn-skip-link:focus {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 12px;
    background: var(--bn-surface);
    color: var(--bn-text);
    border: 2px solid var(--bn-turquoise);
    border-radius: var(--bn-radius-sm);
}


/* =========================================================
   2. BARRE DE NAVIGATION SUPÉRIEURE
   ========================================================= */

.bn-navbar {
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    gap: 24px;

    min-height: 72px;
    padding: 12px 28px;

    background: var(--bn-surface);
    color: var(--bn-text);

    border-bottom: 1px solid var(--bn-border);
    box-shadow: 0 2px 8px rgb(22 59 101 / 4%);
}

/* Logo et marque */

.bn-navbar-brand {
    flex: 0 0 210px;
}

.bn-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--bn-primary);
    text-decoration: none;
}

.bn-brand:hover {
    text-decoration: none;
}

.bn-brand-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;
    background: var(--bn-primary);
    color: #FFFFFF;

    font-size: 25px;
    font-weight: 800;
}

.bn-brand-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.bn-brand-name span {
    color: var(--bn-turquoise-text);
}

html[data-theme="dark"] .bn-brand-name span {
    color: var(--bn-turquoise);
}


/* Barre de recherche */

.bn-search {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 1;
    max-width: 540px;
    min-width: 100px;

    padding: 0 14px;

    border: 1px solid var(--bn-border);
    border-radius: 10px;

    background: var(--bn-bg);
}

.bn-search-icon {
    color: var(--bn-text-muted);
    font-size: 24px;
}

.bn-search input {
    width: 100%;
    min-width: 0;

    padding: 12px 0;

    border: 0;
    outline: none;

    background: transparent;
    color: var(--bn-text);

    font: inherit;
}

.bn-search input::placeholder {
    color: var(--bn-text-muted);
}

.bn-search button {
    border: 0;
    background: transparent;
    color: var(--bn-text-muted);
    cursor: pointer;
    font: inherit;
}


/* Actions à droite de la navbar */

.bn-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-left: auto;
}

.bn-icon-button {
    position: relative;

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

    width: 40px;
    height: 40px;
    flex-shrink: 0;

    border: 1px solid var(--bn-border);
    border-radius: 10px;

    background: var(--bn-surface);
    color: var(--bn-primary);

    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
}

html[data-theme="dark"] .bn-icon-button {
    color: var(--bn-text);
}

.bn-icon-button:hover {
    background: var(--bn-surface-hover);
    text-decoration: none;
}


/* Badge de notification */

.bn-notification-button::after {
    content: "";

    position: absolute;
    top: 7px;
    right: 7px;

    display: none;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--bn-amber);
}

.bn-notification-button.has-unread::after {
    display: block;
}


/* Profil dans la navbar */

.bn-navbar-profile {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 5px 8px;

    color: var(--bn-text);
    text-decoration: none;
    white-space: nowrap;
}

.bn-navbar-profile:hover {
    text-decoration: none;
}

.bn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;
    background: var(--bn-primary);
    color: #FFFFFF;

    font-weight: 700;
}

.bn-avatar-small {
    width: 34px;
    height: 34px;
}

/* Bouton de menu mobile : caché sur ordinateur */

.bn-mobile-menu {
    display: none;
}


/* =========================================================
   3. GRILLE PRINCIPALE BRASSNET
   ========================================================= */

/*
   STRUCTURE HTML ATTENDUE :

   .bn-layout
   ├── .bn-sidebar          Menu de gauche
   ├── .bn-main             Contenu central
   └── .bn-right-sidebar    Suggestions à droite

   Les zones explicites évitent que la colonne de droite
   soit positionnée avant le contenu central.

   Sur les grands écrans :
   | 240 px | contenu flexible | 300 px |

   La largeur totale reste limitée pour préserver la lisibilité.
*/

.bn-layout {
    display: grid;

    grid-template-columns:
        240px
        minmax(0, 1fr)
        300px;

    grid-template-areas: "left main right";

    align-items: start;
    gap: 24px;

    width: 100%;
    max-width: 1600px;
    min-width: 0;

    min-height: calc(100vh - 145px);

    margin: 0 auto;
    padding: 26px 28px 40px;
}


/* Colonne gauche : navigation principale */

.bn-layout > .bn-sidebar {
    grid-area: left;

    position: sticky;
    top: 96px;

    min-width: 0;
    width: 100%;

    max-height: calc(100vh - 112px);
    overflow-y: auto;

    padding: 8px 0 16px;
}


/* Colonne centrale : contenu de la page */

.bn-layout > .bn-main {
    grid-area: main;

    min-width: 0;
    width: 100%;
}


/* Colonne droite : suggestions, actualités, communautés */

.bn-layout > .bn-right-sidebar {
    grid-area: right;

    position: sticky;
    top: 96px;

    display: flex;
    flex-direction: column;
    align-self: start;

    gap: 20px;

    min-width: 0;
    width: 100%;
}


/* =========================================================
   4. TITRES ET NAVIGATION LATÉRALE
   ========================================================= */

/* En-tête de chaque page */

.bn-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 22px;
}

.bn-eyebrow {
    margin: 0 0 6px;

    color: var(--bn-text-muted);
    font-size: 13px;
}

.bn-page-title {
    margin: 0;

    color: var(--bn-text);

    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.6px;
}


/* Titres des sections du menu */

.bn-section-label {
    margin: 0 0 10px;
    padding: 0 12px;

    color: var(--bn-text-muted);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bn-sidebar-section {
    margin-bottom: 26px;
}


/* Liens du menu */

.bn-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 43px;
    margin-bottom: 3px;
    padding: 10px 12px;

    border-radius: 9px;

    color: var(--bn-text);
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition: background-color 0.15s ease;
}

.bn-nav-item:hover {
    background: var(--bn-surface-hover);
    text-decoration: none;
}

.bn-nav-item.is-active {
    background: var(--bn-primary);
    color: #FFFFFF;
    font-weight: 650;
}

.bn-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;

    font-size: 20px;
}


/* Bloc d'aide en bas du menu */

.bn-sidebar-bottom {
    padding: 0 8px;
}

.bn-sidebar-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 14px 12px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
}

.bn-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    flex-shrink: 0;

    border-radius: 50%;

    background: var(--bn-amber);
    color: #263548;

    font-weight: 800;
}

.bn-sidebar-help strong {
    font-size: 13px;
}

.bn-sidebar-help p {
    margin: 5px 0;

    color: var(--bn-text-muted);

    font-size: 12px;
    line-height: 1.5;
}

.bn-sidebar-help a,
.bn-text-link {
    color: var(--bn-turquoise-text);

    font-size: 12px;
    font-weight: 700;
}

html[data-theme="dark"] .bn-sidebar-help a,
html[data-theme="dark"] .bn-text-link {
    color: var(--bn-turquoise);
}


/* =========================================================
   5. WIDGETS ET SUGGESTIONS
   ========================================================= */

/* Carte générique */

.bn-widget {
    padding: 18px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
    box-shadow: var(--bn-shadow);
}

.bn-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 17px;
}

.bn-widget h2 {
    margin: 0;

    color: var(--bn-text);
    font-size: 16px;
}

.bn-widget-header a {
    color: var(--bn-turquoise-text);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

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


/* Élément de découverte */

.bn-discovery-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 16px;
}

.bn-discovery-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    flex-shrink: 0;

    border-radius: 10px;

    font-weight: 800;
}

.bn-discovery-blue {
    background: var(--bn-primary);
    color: #FFFFFF;
}

.bn-discovery-turquoise {
    background: var(--bn-turquoise);
    color: #102D35;
}

.bn-discovery-content {
    min-width: 0;
}

.bn-discovery-content strong {
    display: block;

    color: var(--bn-text);
    font-size: 13px;
}

.bn-discovery-content p {
    margin: 5px 0;

    color: var(--bn-text-muted);

    font-size: 12px;
    line-height: 1.5;
}

.bn-discovery-content a {
    color: var(--bn-turquoise-text);

    font-size: 12px;
    font-weight: 700;
}

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


/* État vide d'un widget */

.bn-empty-state {
    padding: 12px 0 2px;
    text-align: center;
}

.bn-empty-icon {
    display: block;
    margin-bottom: 8px;

    color: var(--bn-turquoise-text);
    font-size: 25px;
}

.bn-empty-state p {
    margin: 0;

    color: var(--bn-text-muted);

    font-size: 12px;
    line-height: 1.6;
}


/* Widget mis en évidence */

.bn-highlight-widget {
    background: var(--bn-primary);
    border-color: var(--bn-primary);
    color: #FFFFFF;
}

.bn-highlight-widget h2 {
    margin: 8px 0;
    color: #FFFFFF;
}

.bn-highlight-widget p {
    color: #E1EAF5;

    font-size: 13px;
    line-height: 1.7;
}

.bn-highlight-symbol {
    color: var(--bn-amber);
    font-size: 25px;
}

.bn-highlight-widget .bn-text-link {
    color: #8BE8DD;
}


/* =========================================================
   6. ALERTES SYMFONY ET PIED DE PAGE
   ========================================================= */

/* Messages flash */

.bn-alert {
    margin-bottom: 18px;
    padding: 13px 16px;

    border-radius: var(--bn-radius-sm);

    font-size: 14px;
}

.bn-alert-success {
    background: #E6F6ED;
    color: #155D3B;
    border: 1px solid #B7E5CA;
}

.bn-alert-error {
    background: #FDECEC;
    color: #8E211A;
    border: 1px solid #F4C4C0;
}

html[data-theme="dark"] .bn-alert-success {
    background: #173C30;
    color: #A5E6C0;
    border-color: #28634B;
}

html[data-theme="dark"] .bn-alert-error {
    background: #492724;
    color: #FFB7B0;
    border-color: #753A35;
}


/* Pied de page */

.bn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 28px;

    padding: 24px 28px;

    border-top: 1px solid var(--bn-border);

    background: var(--bn-surface);
    color: var(--bn-text-muted);

    font-size: 12px;
}

.bn-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bn-footer-logo {
    color: var(--bn-primary);

    font-size: 16px;
    font-weight: 800;
}

html[data-theme="dark"] .bn-footer-logo {
    color: var(--bn-text);
}

.bn-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.bn-footer-links a {
    color: var(--bn-text-muted);
    text-decoration: none;
}

.bn-footer-links a:hover {
    color: var(--bn-turquoise-text);
    text-decoration: underline;
}

.bn-footer-copyright {
    text-align: right;
}


/* =========================================================
   7. CONTENU DU FIL D'ACTUALITÉ
   ========================================================= */

/* Zone de rédaction et publications */

.bn-composer,
.bn-feed-card {
    padding: 20px;
    margin-bottom: 18px;
}

.bn-composer-header,
.bn-feed-author {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}

.bn-composer-header strong,
.bn-feed-author strong {
    color: var(--bn-text);
    font-size: 14px;
}

.bn-composer-header p,
.bn-feed-author p {
    margin: 4px 0 0;
    font-size: 12px;
}

.bn-composer textarea {
    resize: vertical;
    min-height: 90px;
}

.bn-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 12px;
}

.bn-composer-footer .bn-muted {
    font-size: 12px;
}


/* Texte d'une publication */

.bn-feed-card > p {
    color: var(--bn-text);

    font-size: 14px;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


/* Actions sous une publication */

.bn-feed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding-top: 14px;
    margin-top: 16px;

    border-top: 1px solid var(--bn-border);
}

.bn-feed-action {
    padding: 9px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--bn-text-muted);

    font: inherit;
    font-size: 13px;

    cursor: pointer;
}

.bn-feed-action:hover {
    background: var(--bn-surface-hover);
    color: var(--bn-primary);
}

html[data-theme="dark"] .bn-feed-action:hover {
    color: var(--bn-turquoise);
}


/* =========================================================
   8. PAGE D'ACCUEIL — LANDING PAGE
   ========================================================= */

/* Section principale */

.bn-landing-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.9fr);

    gap: 48px;
    align-items: center;

    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 28px;
}

.bn-landing-badge {
    display: inline-block;

    padding: 8px 13px;

    border-radius: 30px;
    border: 1px solid var(--bn-border);

    background: var(--bn-surface);
    color: var(--bn-turquoise-text);

    font-size: 12px;
    font-weight: 800;
}

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


/* Texte de présentation */

.bn-landing-copy h1 {
    margin: 22px 0;

    color: var(--bn-text);

    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.12;
    letter-spacing: -2px;
}

.bn-landing-copy h1 span {
    color: var(--bn-turquoise-text);
}

html[data-theme="dark"] .bn-landing-copy h1 span {
    color: var(--bn-turquoise);
}

.bn-landing-copy > p {
    max-width: 600px;

    color: var(--bn-text-muted);

    font-size: 16px;
    line-height: 1.9;
}

.bn-landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 28px;
}

.bn-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 11px 20px;

    border: 1px solid var(--bn-border);
    border-radius: 9px;

    color: var(--bn-text);
    font-weight: 700;
    text-decoration: none;
}

.bn-secondary-button:hover {
    background: var(--bn-surface-hover);
    text-decoration: none;
}

.bn-landing-copy .bn-landing-note {
    margin-top: 18px;
    font-size: 12px;
}


/* Illustration de la page d'accueil */

.bn-landing-visual {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-height: 380px;
    padding: 30px;

    border-radius: 28px;

    background: linear-gradient(
        140deg,
        var(--bn-primary),
        #245B83
    );

    overflow: hidden;
}

.bn-visual-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    max-width: 340px;
    padding: 17px;

    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 15px;

    background: rgb(255 255 255 / 12%);
    color: #FFFFFF;
}

.bn-visual-main {
    display: block;

    padding: 24px;

    background: #FFFFFF;
    color: #163B65;
}

.bn-visual-icon {
    font-size: 30px;
}

.bn-visual-main h2 {
    margin: 10px 0;
    font-size: 27px;
}

.bn-visual-card p {
    margin: 5px 0 0;

    font-size: 12px;
    line-height: 1.6;
}

.bn-visual-main p {
    color: #596C80;
}

.bn-visual-business > span,
.bn-visual-community > span {
    font-size: 26px;
}


/* Section des fonctionnalités */

.bn-landing-features {
    padding: 65px 28px;

    background: var(--bn-surface);
    border-top: 1px solid var(--bn-border);
}

.bn-section-heading {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
}

.bn-section-heading > span {
    color: var(--bn-turquoise-text);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

html[data-theme="dark"] .bn-section-heading > span {
    color: var(--bn-turquoise);
}

.bn-section-heading h2,
.bn-landing-cta h2 {
    color: var(--bn-text);

    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: -0.7px;
}

.bn-section-heading p {
    color: var(--bn-text-muted);
    line-height: 1.8;
}

.bn-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;

    max-width: 1200px;
    margin: 0 auto;
}

.bn-feature-card {
    padding: 24px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-bg);
}

.bn-feature-card > span {
    font-size: 29px;
}

.bn-feature-card h3 {
    margin: 16px 0 9px;

    color: var(--bn-text);
    font-size: 17px;
}

.bn-feature-card p {
    margin: 0;

    color: var(--bn-text-muted);

    font-size: 13px;
    line-height: 1.8;
}


/* Appel à l'action */

.bn-landing-cta {
    padding: 65px 24px;
    text-align: center;
}

.bn-landing-cta p {
    color: var(--bn-text-muted);
    line-height: 1.8;
}

.bn-cta-button {
    display: inline-flex;
    margin-top: 12px;
    text-decoration: none;
}


/* =========================================================
   9. PAGES D'AUTHENTIFICATION
   ========================================================= */

.bn-auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    min-height: 70vh;
    padding: 48px 16px;
}

.bn-auth-card {
    width: 100%;
    max-width: 470px;

    padding: 32px;

    border: 1px solid var(--bn-border);
    border-radius: 18px;

    background: var(--bn-surface);
    box-shadow: var(--bn-shadow);
}

.bn-auth-brand {
    display: inline-block;
    margin-bottom: 20px;

    color: var(--bn-primary);

    font-size: 26px;
    font-weight: 850;
    text-decoration: none;
}

.bn-auth-brand span {
    color: var(--bn-turquoise-text);
}

html[data-theme="dark"] .bn-auth-brand span {
    color: var(--bn-turquoise);
}

.bn-auth-card h1 {
    margin: 0 0 10px;

    color: var(--bn-text);

    font-size: 27px;
    line-height: 1.3;
}

.bn-auth-description {
    margin: 0 0 24px;

    color: var(--bn-text-muted);

    font-size: 14px;
    line-height: 1.7;
}

.bn-auth-card label {
    display: block;

    margin: 16px 0 7px;

    color: var(--bn-text);

    font-size: 13px;
    font-weight: 700;
}


/* Champs de formulaire réutilisables */

.brassnet-form-control {
    display: block;

    width: 100%;
    min-height: 44px;
    padding: 11px 12px;

    border: 1px solid var(--bn-border);
    border-radius: 8px;

    background: var(--bn-bg);
    color: var(--bn-text);

    font: inherit;
}

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

.bn-auth-submit {
    width: 100%;
    justify-content: center;

    margin-top: 22px;

    cursor: pointer;
}

.bn-auth-forgot {
    margin-top: 12px;
    text-align: right;
    font-size: 12px;
}

.bn-auth-forgot a,
.bn-auth-bottom a {
    color: var(--bn-turquoise-text);
    font-weight: 700;
}

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

.bn-auth-bottom {
    margin: 22px 0 0;

    color: var(--bn-text-muted);

    font-size: 13px;
    text-align: center;
}


/* =========================================================
   10. TABLEAU DE BORD ET PROFIL DU MEMBRE
   ========================================================= */

.bn-member-dashboard {
    max-width: 1150px;
    margin: 0 auto;
}

.bn-member-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    margin-bottom: 25px;
}

.bn-member-welcome h1 {
    margin: 14px 0 8px;

    color: var(--bn-text);

    font-size: clamp(27px, 4vw, 36px);
}

.bn-member-welcome p {
    color: var(--bn-text-muted);
    line-height: 1.7;
}


/* Résumé du membre */

.bn-member-summary {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 25px;
    padding: 23px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
}

.bn-summary-avatar,
.bn-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: var(--bn-primary);
    color: #FFFFFF;

    font-size: 28px;
    font-weight: 800;

    object-fit: cover;
}

.bn-member-summary h2,
.bn-profile-heading h2 {
    margin: 0 0 6px;

    color: var(--bn-text);
    font-size: 20px;
}

.bn-member-summary p,
.bn-profile-heading p {
    margin: 4px 0 10px;

    color: var(--bn-text-muted);
    font-size: 13px;
}

.bn-member-type {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 6px;

    background: var(--bn-surface-hover);
    color: var(--bn-text);

    font-size: 11px;
    font-weight: 700;
}


/* Cartes du tableau de bord */

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

.bn-member-card {
    padding: 24px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
    color: var(--bn-text);

    text-decoration: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.bn-member-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bn-shadow);
    text-decoration: none;
}

.bn-member-card > span {
    font-size: 28px;
}

.bn-member-card h2 {
    margin: 15px 0 8px;
    font-size: 18px;
}

.bn-member-card p {
    min-height: 44px;

    color: var(--bn-text-muted);

    font-size: 13px;
    line-height: 1.7;
}

.bn-member-card strong {
    display: inline-block;
    margin-top: 8px;

    color: var(--bn-turquoise-text);
    font-size: 13px;
}

html[data-theme="dark"] .bn-member-card strong {
    color: var(--bn-turquoise);
}


/* Prochaines étapes du membre */

.bn-member-next {
    margin-top: 22px;
    padding: 24px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
}

.bn-member-next h2 {
    color: var(--bn-text);
    font-size: 18px;
}

.bn-member-next p {
    color: var(--bn-text-muted);

    font-size: 14px;
    line-height: 1.8;
}


/* Profil détaillé */

.bn-profile-card {
    padding: 28px;
    margin-bottom: 20px;
}

.bn-profile-heading {
    display: flex;
    align-items: center;
    gap: 20px;

    padding-bottom: 24px;

    border-bottom: 1px solid var(--bn-border);
}

.bn-profile-initial {
    font-size: 30px;
}

.bn-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    padding: 24px 0;
}

.bn-profile-details > div {
    min-width: 0;
}

.bn-profile-details span {
    display: block;
    margin-bottom: 7px;

    color: var(--bn-text-muted);
    font-size: 12px;
}

.bn-profile-details strong {
    color: var(--bn-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.bn-profile-note {
    color: var(--bn-text-muted);

    font-size: 12px;
    line-height: 1.8;
}


/* Bouton de déconnexion */

.bn-logout-button {
    padding: 11px 16px;

    border: 1px solid var(--bn-border);
    border-radius: 8px;

    background: var(--bn-surface);
    color: var(--bn-text);

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.bn-logout-button:hover {
    border-color: var(--bn-amber);
}


/* =========================================================
   11. PAGES SOCIALES ET ESPACES EN CONSTRUCTION
   ========================================================= */

.bn-social-placeholder {
    max-width: 760px;

    margin: 30px auto;
    padding: 42px 28px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);

    text-align: center;
}

.bn-social-placeholder-icon {
    display: block;
    margin-bottom: 16px;
    font-size: 42px;
}

.bn-social-placeholder h1 {
    margin: 10px 0;

    color: var(--bn-text);
    font-size: 30px;
}

.bn-social-placeholder > p:not(.bn-eyebrow) {
    color: var(--bn-text-muted);
    line-height: 1.8;
}

.bn-social-placeholder-note {
    margin: 25px 0;
    padding: 18px;

    border-radius: 10px;

    background: var(--bn-bg);
    text-align: left;
}

.bn-social-placeholder-note strong {
    color: var(--bn-text);
}

.bn-social-placeholder-note p {
    margin-bottom: 0;

    color: var(--bn-text-muted);

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   12. BOUTONS D'AUTHENTIFICATION DANS LA NAVBAR
   ========================================================= */

.bn-auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 16px;

    border: 1px solid transparent;
    border-radius: var(--bn-radius-md);

    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.bn-auth-button-outline {
    color: var(--bn-primary);
    background: transparent;
    border-color: var(--bn-border);
}

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

.bn-auth-button-primary {
    color: #FFFFFF;
    background: var(--bn-primary);
}

.bn-auth-button-primary:hover {
    filter: brightness(1.08);
}


/* =========================================================
   13. MESSAGERIE — CONVERSATIONS ET MESSAGES
   ========================================================= */

/* Cartes principales de la messagerie */

.bn-message-new,
.bn-message-list,
.bn-message-thread,
.bn-message-reply {
    padding: 20px;
    margin-bottom: 20px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
}

.bn-message-new h2,
.bn-message-list h2 {
    margin-top: 0;
}


/* Formulaire de message */

.bn-message-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bn-message-form label {
    font-weight: 600;
}

.bn-message-form input,
.bn-message-form textarea {
    width: 100%;
    padding: 12px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-bg);
    color: var(--bn-text);

    font: inherit;
}

.bn-message-form textarea {
    resize: vertical;
}

.bn-message-form button {
    align-self: flex-start;
    cursor: pointer;
}


/* Liste des conversations */

.bn-message-conversation {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 0;

    border-bottom: 1px solid var(--bn-border);

    color: var(--bn-text);
    text-decoration: none;
}

.bn-message-conversation:last-child {
    border-bottom: 0;
}

.bn-message-conversation:hover {
    background: var(--bn-surface-hover);
}

/* Éviter le soulignement sur tous les états du lien */

.bn-message-conversation,
.bn-message-conversation:hover,
.bn-message-conversation:focus,
.bn-message-conversation:focus-visible,
.bn-message-conversation:active {
    text-decoration: none !important;
}

.bn-message-conversation-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.bn-message-conversation-info span {
    color: var(--bn-text-muted);
    overflow-wrap: anywhere;
}

.bn-message-conversation time {
    color: var(--bn-text-muted);
    font-size: 0.8rem;
}

.bn-message-empty {
    padding: 20px 0;
    color: var(--bn-text-muted);
}

.bn-message-alert {
    padding: 12px 16px;
    margin-bottom: 16px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
}


/* Fil de discussion */

.bn-message-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bn-message-bubble {
    max-width: 78%;
    padding: 12px 16px;

    border-radius: var(--bn-radius-md);

    overflow-wrap: anywhere;
}

.bn-message-bubble p {
    margin: 8px 0;
    white-space: pre-wrap;
}

.bn-message-bubble time {
    display: block;

    color: var(--bn-text-muted);
    font-size: 0.75rem;
}

.bn-message-mine {
    align-self: flex-end;

    background: var(--bn-primary);
    color: #FFFFFF;
}

.bn-message-mine time {
    color: #EAF0FF;
}

.bn-message-theirs {
    align-self: flex-start;

    background: var(--bn-surface-hover);
    color: var(--bn-text);
}

.bn-message-author {
    font-size: 0.9rem;
    font-weight: 600;
}


/* Avatars de la messagerie */

.bn-message-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    min-width: 46px;

    border-radius: 50%;
    overflow: hidden;
}

.bn-message-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;
}

.bn-message-avatar span {
    font-weight: 700;
}


/* Avatar dans une ligne de message actualisée */

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

.bn-message-avatar-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-width: 32px;

    border-radius: 50%;
    overflow: hidden;
}

.bn-message-avatar-inline img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   14. DESTINATAIRES ET PARTICIPANTS
   ========================================================= */

/* Liste de suggestions de destinataires */

.bn-recipient-suggestions {
    max-height: 280px;
    margin-top: 6px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);

    overflow-x: hidden;
    overflow-y: auto;
}

.bn-recipient-suggestions[hidden],
.bn-recipient-selected[hidden] {
    display: none;
}

.bn-recipient-option {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 9px 12px;

    border: 0;
    border-bottom: 1px solid var(--bn-border);

    background: transparent;
    color: var(--bn-text);

    text-align: left;
    cursor: pointer;
}

.bn-recipient-option:last-child {
    border-bottom: 0;
}

.bn-recipient-option:hover,
.bn-recipient-option:focus-visible {
    background: var(--bn-bg);
}

.bn-recipient-option-name {
    min-width: 0;

    overflow-wrap: anywhere;
    font-weight: 600;
}

.bn-recipient-empty {
    padding: 12px 14px;
    color: var(--bn-text-muted);
}

.bn-recipient-selected {
    min-height: 8px;
    margin-top: 8px;

    color: var(--bn-primary);
    font-size: 0.9rem;
}


/* Avatar dans les suggestions */

.bn-recipient-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    overflow: hidden;
    border-radius: 50%;

    background: #E9EDF3;
    color: #39465B;

    font-weight: 600;
}

.bn-recipient-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Pastilles des destinataires sélectionnés */

.bn-recipient-chips,
.bn-message-participant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}

.bn-recipient-chips:empty {
    display: none;
}

.bn-recipient-chip,
.bn-message-participant {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    max-width: 100%;
    padding: 6px 10px;

    border: 1px solid var(--bn-border);
    border-radius: 999px;

    background: var(--bn-surface);
    color: var(--bn-text);

    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.bn-recipient-chip {
    gap: 7px;
}

.bn-recipient-chip button {
    flex-shrink: 0;

    border: 0;
    background: transparent;
    color: var(--bn-text-muted);

    cursor: pointer;
    font-size: 1.1rem;
}

.bn-recipient-chip button:hover {
    color: var(--bn-primary);
}

.bn-recipient-avatar-chip {
    flex-basis: 26px;
    width: 26px;
    height: 26px;

    font-size: 12px;
}

.bn-recipient-chip-name {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* Participants d'une conversation */

.bn-message-participants {
    margin: 16px 0;
    padding: 16px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-surface);
    color: var(--bn-text);
}

.bn-message-participant-list {
    gap: 8px;
    margin-top: 12px;
}

.bn-message-participant {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* =========================================================
   15. FORMULAIRE DE NOUVELLE CONVERSATION
   ========================================================= */

.bn-message-create-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    margin-top: 18px;
}

.bn-message-create-form label {
    display: block;

    margin-top: 4px;

    color: var(--bn-text);
    font-weight: 600;
}

.bn-message-create-form input[type="text"],
.bn-message-create-form textarea {
    display: block;

    width: 100%;
    max-width: 100%;
    padding: 12px 14px;

    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);

    background: var(--bn-bg);
    color: var(--bn-text);

    font: inherit;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bn-message-create-form input[type="text"]:focus,
.bn-message-create-form textarea:focus {
    outline: none;

    border-color: var(--bn-primary);

    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--bn-primary) 15%, transparent);
}

.bn-message-create-form textarea {
    min-height: 120px;
    resize: vertical;
}

.bn-message-create-form button[type="submit"] {
    align-self: flex-start;

    padding: 11px 20px;

    border: 0;
    border-radius: var(--bn-radius-md);

    background: var(--bn-primary);
    color: #FFFFFF;

    font: inherit;
    font-weight: 600;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.bn-message-create-form button[type="submit"]:hover {
    opacity: 0.9;
}

.bn-message-create-form button[type="submit"]:active {
    transform: translateY(1px);
}


/* =========================================================
   16. RESPONSIVE — TABLETTES
   ========================================================= */

/*
   Entre 761 px et 1200 px :
   - Menu à gauche.
   - Contenu au centre.
   - Colonne de suggestions masquée.

   IMPORTANT :
   On définit explicitement les zones de grille afin que
   le contenu principal ne prenne jamais la place du menu
   ou de la colonne de droite.
*/

@media (min-width: 761px) and (max-width: 1200px) {

    .bn-layout {
        grid-template-columns:
            210px
            minmax(0, 1fr);

        grid-template-areas: "left main";

        gap: 20px;
        padding: 22px 20px 32px;
    }

    .bn-layout > .bn-sidebar {
        grid-area: left;
    }

    .bn-layout > .bn-main {
        grid-area: main;
    }

    .bn-layout > .bn-right-sidebar {
        display: none;
    }

    .bn-navbar-brand {
        flex-basis: 180px;
    }

    .bn-navbar {
        gap: 16px;
        padding-inline: 20px;
    }

    .bn-landing-hero {
        gap: 35px;
    }

    .bn-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   17. RESPONSIVE — MOBILES
   ========================================================= */

/*
   Jusqu'à 760 px :
   - Une seule colonne.
   - Le contenu principal occupe toute la largeur.
   - Le menu latéral est masqué par défaut.
   - Le bouton mobile peut ouvrir le menu via .is-open.
   - La colonne de droite est masquée.
*/

@media (max-width: 760px) {

    /* Navbar mobile */

    .bn-navbar {
        flex-wrap: wrap;
        gap: 10px;

        min-height: 62px;
        padding: 10px 14px;
    }

    .bn-navbar-brand {
        flex: 0 0 auto;
    }

    .bn-brand-symbol {
        width: 36px;
        height: 36px;
        font-size: 21px;
    }

    .bn-brand-name {
        font-size: 20px;
    }

    .bn-navbar-actions {
        gap: 6px;
        margin-left: auto;
    }

    .bn-icon-button {
        width: 36px;
        height: 36px;
    }

    .bn-mobile-menu {
        display: inline-flex;
    }

    .bn-profile-label {
        display: none;
    }

    /* Barre de recherche sous la première ligne */

    .bn-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    /* Grille : contenu central uniquement */

    .bn-layout {
        display: grid;

        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main";

        gap: 16px;

        width: 100%;
        min-width: 0;
        min-height: calc(100vh - 200px);

        padding: 20px 14px 28px;
    }

    .bn-layout > .bn-main {
        grid-area: main;
        width: 100%;
        min-width: 0;
    }

    /* Menu mobile ouvert par le bouton de navigation */

    .bn-layout > .bn-sidebar {
        display: none;

        position: fixed;
        z-index: 200;

        top: 0;
        bottom: 0;
        left: 0;

        width: min(300px, 86vw);
        max-height: 100dvh;

        overflow-y: auto;

        padding: 86px 16px 24px;

        border-right: 1px solid var(--bn-border);

        background: var(--bn-surface);
        box-shadow: var(--bn-shadow);
    }

    .bn-layout > .bn-sidebar.is-open {
        display: block;
    }

    /* Masquer les suggestions sur mobile */

    .bn-layout > .bn-right-sidebar {
        display: none;
    }

    /* En-tête des pages */

    .bn-page-header {
        align-items: flex-start;
        flex-wrap: wrap;

        margin-bottom: 18px;
    }

    .bn-page-title {
        font-size: 24px;
    }

    /* Pied de page */

    .bn-footer {
        align-items: flex-start;
        flex-direction: column;

        padding: 22px 16px;
    }

    .bn-footer-copyright {
        text-align: left;
    }

    /* Page d'accueil */

    .bn-landing-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;

        padding: 48px 20px;
    }

    .bn-landing-visual {
        min-height: 320px;
    }

    .bn-landing-features {
        padding: 45px 16px;
    }

    .bn-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Authentification */

    .bn-auth-page {
        padding: 32px 16px;
    }

    .bn-auth-card {
        padding: 23px 18px;
    }

    /* Tableau de bord et profil */

    .bn-member-grid,
    .bn-profile-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .bn-member-summary,
    .bn-profile-heading {
        align-items: flex-start;
    }

    .bn-profile-card {
        padding: 20px;
    }

    /* Boutons d'authentification */

    .bn-auth-button {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.8rem;
    }

    /* Messagerie */

    .bn-message-new,
    .bn-message-list,
    .bn-message-thread,
    .bn-message-reply {
        padding: 14px;
    }

    .bn-message-conversation {
        flex-wrap: wrap;
    }

    .bn-message-conversation time {
        width: 100%;
        margin-left: 48px;
    }

    .bn-message-bubble {
        max-width: 92%;
    }

    .bn-message-create-form button[type="submit"] {
        width: 100%;
        align-self: stretch;
    }
}


/* =========================================================
   18. RESPONSIVE — PETITS MOBILES
   ========================================================= */

@media (max-width: 520px) {

    .bn-brand-name {
        font-size: 18px;
    }

    .bn-navbar-actions {
        gap: 4px;
    }

    .bn-icon-button {
        width: 32px;
        height: 32px;
    }

    .bn-feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bn-landing-hero {
        padding: 36px 16px;
    }

    .bn-landing-features {
        padding: 45px 16px;
    }

    .bn-social-placeholder {
        margin: 20px auto;
        padding: 30px 18px;
    }

    .bn-social-placeholder h1 {
        font-size: 25px;
    }
}


/* =========================================================
   19. RESPONSIVE — TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 380px) {

    .bn-brand-name {
        font-size: 16px;
    }

    .bn-navbar {
        padding-inline: 10px;
    }

    .bn-navbar-actions {
        gap: 4px;
    }

    .bn-icon-button {
        width: 30px;
        height: 30px;
    }

    .bn-layout {
        padding-inline: 10px;
    }

    .bn-auth-card {
        padding: 20px 14px;
    }
}



/* =========================================
   BRASSNET — POSITIONNEMENT DES 3 COLONNES
   ========================================= */

/* Écran large : menu gauche, contenu central, panneau droit */
.bn-layout {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr) 290px;
    grid-template-areas: "left main right";
    align-items: start;
    gap: 24px;

    width: 100%;
    max-width: 1600px;
    min-width: 0;
    min-height: calc(100vh - 145px);

    margin: 0 auto;
    padding: 26px 28px 40px;
}

/* Colonne gauche : navigation */
.bn-layout > .bn-sidebar {
    grid-area: left;
    display: block;
    position: sticky;
    top: 96px;

    width: 100%;
    min-width: 0;
    max-height: calc(100vh - 112px);
    overflow-y: auto;

    padding: 8px 0 16px;
}

/* Colonne centrale : contenu de la page */
.bn-layout > .bn-main {
    grid-area: main;
    display: block;

    width: 100%;
    min-width: 0;
}

/* Colonne droite : suggestions, communautés, actualités */
.bn-layout > .bn-right-sidebar {
    grid-area: right;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 20px;

    position: sticky;
    top: 96px;

    width: 100%;
    min-width: 0;
    visibility: visible;
}

/* Écrans intermédiaires : conserver les 3 colonnes */
@media (min-width: 761px) and (max-width: 1200px) {
    .bn-layout {
        grid-template-columns: 200px minmax(0, 1fr) 250px;
        grid-template-areas: "left main right";
        gap: 16px;
        padding: 22px 20px 32px;
    }

    .bn-navbar-brand {
        flex-basis: 180px;
    }

    .bn-navbar {
        gap: 16px;
        padding-inline: 20px;
    }
}

/* Écrans plus étroits : réduire les colonnes latérales */
@media (min-width: 761px) and (max-width: 900px) {
    .bn-layout {
        grid-template-columns: 170px minmax(0, 1fr) 210px;
        gap: 12px;
        padding-inline: 14px;
    }
}

/* Mobiles : afficher le contenu central uniquement */
@media (max-width: 760px) {
    .bn-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main";
        gap: 16px;

        min-height: calc(100vh - 200px);
        padding: 20px 14px 28px;
    }

    .bn-layout > .bn-sidebar {
        display: none;
    }

    .bn-layout > .bn-main {
        grid-area: main;
        width: 100%;
    }

    .bn-layout > .bn-right-sidebar {
        display: none;
    }
}



/* =====================================================
   BRASSNET — AFFICHAGE RESPONSIVE DES COLONNES
   PC       : menu gauche + contenu + colonne droite
   Tablette : menu gauche + contenu + colonne droite
   Mobile   : contenu + colonne droite en dessous
   ===================================================== */

/* PC : trois colonnes */
.bn-layout {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr) 290px;
    grid-template-areas: "left main right";
    align-items: start;
    gap: 24px;
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin: 0 auto;
    padding: 26px 28px 40px;
}

.bn-layout > .bn-sidebar {
    grid-area: left;
    min-width: 0;
}

.bn-layout > .bn-main {
    grid-area: main;
    min-width: 0;
    width: 100%;
}

.bn-layout > .bn-right-sidebar {
    grid-area: right;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 20px;
    position: sticky;
    top: 96px;
    min-width: 0;
    width: 100%;
    visibility: visible;
    opacity: 1;
}

/* Tablettes : conserver les trois colonnes */
@media (min-width: 761px) and (max-width: 1200px) {
    .bn-layout {
        grid-template-columns: 180px minmax(0, 1fr) 230px;
        grid-template-areas: "left main right";
        gap: 14px;
        padding: 22px 16px 32px;
    }

    .bn-layout > .bn-sidebar {
        display: block;
    }

    .bn-layout > .bn-right-sidebar {
        display: flex;
        position: static;
    }

    .bn-navbar-brand {
        flex-basis: 180px;
    }

    .bn-navbar {
        gap: 16px;
        padding-inline: 16px;
    }
}

/* Smartphones : contenu principal puis colonne de droite */
@media (max-width: 760px) {
    .bn-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "right";
        gap: 20px;
        min-height: calc(100vh - 200px);
        padding: 16px 12px 28px;
    }

    .bn-layout > .bn-sidebar {
        display: none;
    }

    .bn-layout > .bn-main {
        grid-area: main;
        display: block;
        width: 100%;
        min-width: 0;
    }

    .bn-layout > .bn-right-sidebar {
        grid-area: right;
        display: flex;
        flex-direction: column;
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 8px;
    }
}



/* =========================================================
   FIN DU FICHIER
   ========================================================= */