@charset "UTF-8";
/*
 * Les menus du site (UX-MENUS-BETA, maquettes validées par Gabriel le 4/11) : direction A de maquette-menus-v2.html
 * (barre latérale en tuiles d'icônes, en-tête en rail) ; vues 2 et 3 de maquette-menus.html (menu du profil, visiteur).
 *
 * HABILLAGE SEUL. Les liens, pages, libellés, icônes et règles d'affichage (If Menu, réglages BuddyBoss) restent ceux de
 * WordPress : cette feuille ne fait que poser ce que le thème rend. Ses sélecteurs sont ceux du balisage BuddyBoss relevé
 * en production (barre aside.buddypanel > ul.buddypanel-menu, en-tête #masthead #primary-menu et #header-aside, menu du
 * profil .user-wrap .sub-menu, mobile .bb-mobile-header et .bb-mobile-panel-wrapper, visiteur .bb-header-buttons).
 * Chargée partout par Agolf_Assets, après le design system (Montserrat, --fj1-font). Aucune couleur en dur : couleurs.css.
 */

/* ── 1. La barre latérale et le menu mobile (même liste, ul.buddypanel-menu) ─────────────────── */
body .buddypanel,
body .bb-mobile-panel-inner {
    font-family: var(--fj1-font);
    background: var(--agolf-fond-carte);
}
body .buddypanel { border-right: 1px solid var(--agolf-filet); box-shadow: none; }

/* Les mesures d'une entrée, partagées par la barre latérale et le menu du profil (recette du 5/11 : le menu du profil
   doit être exactement à la taille de la barre). Des longueurs, pas des couleurs : elles restent ici. */
:root {
    --agolf-menu-entree: 46px;
    --agolf-menu-interieur: 6px;
    /* 5 px : l'écart réellement rendu dans la barre validée (le gabarit v2 retirait 5 px aux 10 px écrits). */
    --agolf-menu-ecart: 5px;
    --agolf-menu-texte: 14px;
    --agolf-menu-graisse: 600;
    --agolf-menu-rayon: 14px;
    --agolf-menu-tuile: 34px;
    --agolf-menu-tuile-rayon: 11px;
    --agolf-menu-icone: 18px;
}
/* Une entrée : l'icône existante posée dans une tuile de 34 px, le libellé à droite en 14 px. Le thème met chaque lien
   en position absolue, sur toute la largeur du panneau, dans une ligne de hauteur fixe : remis dans le flux. */
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) { height: auto; min-height: 0; }
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--agolf-menu-ecart);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: var(--agolf-menu-entree);
    margin: 2px 0;
    padding: var(--agolf-menu-interieur);
    color: var(--agolf-texte);
    font-family: var(--fj1-font);
    font-size: var(--agolf-menu-texte);
    font-weight: var(--agolf-menu-graisse);
    line-height: 1.25;
    text-decoration: none;
    background: transparent;
    border-radius: var(--agolf-menu-rayon);
    transition: background .2s, box-shadow .2s;
}
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a > i:first-child,
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a > img:first-child {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--agolf-menu-tuile);
    min-width: var(--agolf-menu-tuile);
    max-width: var(--agolf-menu-tuile);
    height: var(--agolf-menu-tuile);
    margin: 0;
    padding: 0;
    color: var(--agolf-ui-encre);
    font-size: var(--agolf-menu-icone);
    line-height: 1;
    background: var(--agolf-lav-pale);
    border: 1px solid var(--agolf-ui-lav);
    border-radius: var(--agolf-menu-tuile-rayon);
    transition: background .2s, color .2s;
}
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a > img:first-child { padding: 7px; object-fit: contain; }
/* Le libellé prend toute la place qui reste, aligné à gauche, en entier (le thème le coupe en « … »). */
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a > span {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    text-align: left;
}
/* Le gabarit v2 du thème (template-v2.min.css, chargé APRÈS le plugin : seule la spécificité compte) rétrécissait
   chaque entrée à environ 128 px : li décalé de 12 px, lien en calc(100% - 45px), libellé de 75 px sur 2 à 4 lignes. */
body.bb-template-v2 ul.buddypanel-menu.side-panel-menu.has-section-menu:not(.mobile-menu) > li.menu-item:not(.bb-menu-section) { margin-left: 0; margin-right: 0; }
body.bb-template-v2 aside.buddypanel ul.buddypanel-menu.side-panel-menu > li.menu-item:not(.bb-menu-section) > a { width: 100%; }
/* Et le libellé n'est plus tiré de 5 px vers la tuile (.bb-template-v2 … > i ~ span, même poids que la règle générale). */
body.bb-template-v2 ul.buddypanel-menu.side-panel-menu > li.menu-item:not(.bb-menu-section) > a > span { margin: 0; }
/* Le même gabarit pâlit l'icône des entrées non courantes (opacity: .5) : la tuile garde son icône pleine. */
body.bb-template-v2 aside.buddypanel ul.buddypanel-menu.side-panel-menu > li.menu-item:not(.bb-menu-section) > a > i:first-child { opacity: 1; }
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a:hover,
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a:focus-visible {
    color: var(--agolf-texte);
    background: var(--agolf-lav-pale);
}
body ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a:focus-visible { outline: 3px solid var(--agolf-ui-lav); outline-offset: 2px; }

/* L'entrée active : carte blanche surélevée, libellé en encre violette et gras, tuile en dégradé, icône blanche. */
body ul.buddypanel-menu.side-panel-menu > li.current-menu-item:not(.bb-menu-section) > a,
body ul.buddypanel-menu.side-panel-menu > li.current-menu-item:not(.bb-menu-section) > a:hover {
    color: var(--agolf-ui-encre);
    font-weight: 700;
    background: var(--agolf-fond-carte);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--agolf-ui-encre) 45%, transparent), 0 0 0 1px var(--agolf-filet);
}
body ul.buddypanel-menu.side-panel-menu > li.current-menu-item:not(.bb-menu-section) > a > i:first-child,
body ul.buddypanel-menu.side-panel-menu > li.current-menu-item:not(.bb-menu-section) > a > img:first-child {
    color: var(--agolf-bouton-texte);
    background: var(--agolf-bouton-fond);
    border-color: transparent;
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--agolf-ui-violet) 70%, transparent);
}

/* Les titres de catégorie : petites capitales espacées, gris doux, un filet fin jusqu'au bord. */
body ul.buddypanel-menu.side-panel-menu > li.bb-menu-section { height: auto; min-height: 0; }
body ul.buddypanel-menu.side-panel-menu > li.bb-menu-section > a {
    position: static;
    height: auto;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 20px 6px 8px;
    padding: 0;
    color: var(--agolf-texte-pale);
    font-family: var(--fj1-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: 1;
}
body ul.buddypanel-menu.side-panel-menu > li.bb-menu-section:first-child > a { margin-top: 4px; }
body ul.buddypanel-menu.side-panel-menu > li.bb-menu-section > a::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--agolf-filet);
}
/* Le thème décale le texte (-10 px) et lui donne une marge droite qui écrasait le filet à 0 px (barre d'ordinateur). */
body ul.buddypanel-menu.side-panel-menu > li.bb-menu-section > a .link-text { min-width: 0; margin: 0; }

/* Ordinateur : la barre ouverte (réglage BuddyBoss, 230 px) et repliée (68 px). Repliée, seules les tuiles restent,
   centrées ; le libellé passe en bulle au survol (data-balloon du thème), le titre de catégorie devient un filet. */
@media (min-width: 800px) {
    /* 8 px de chaque côté (le thème ajoute 10 px à gauche de la barre) : 137 px pour le libellé, une ligne au plus souvent. */
    body .buddypanel .side-panel-inner { padding: 8px 8px 24px; }
    body:not(.buddypanel-open) .buddypanel .side-panel-inner { padding-left: 10px; padding-right: 10px; }
    body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a {
        justify-content: center;
        gap: 0;
        padding: 6px 0;
    }
    body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a > span { display: none; }
    body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu.side-panel-menu > li.bb-menu-section > a {
        justify-content: center;
        margin: 14px 4px 8px;
        font-size: 0;
        letter-spacing: 0;
    }
    body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu.side-panel-menu > li.bb-menu-section::after { display: none; }
}

/* ── 2. L'en-tête connecté : liens en rail, bouton plein, cloche et photo dans une pilule ─────── */
body .site-header--bb,
body .site-header--bb #primary-menu > li > a { font-family: var(--fj1-font); }
body .site-header--bb { background: var(--agolf-fond-carte); border-bottom: 1px solid var(--agolf-filet); box-shadow: none; }

/* Le rail : chaque lien de l'en-tête dans une même bande arrondie (lavande pâle, filet) ; le bouton plein en est hors. */
body .site-header--bb #primary-menu { display: flex; align-items: center; gap: 0; height: auto; }
/* Le thème donne à chaque entrée la hauteur de la barre (76 px, en interligne) : ramenée à son contenu. */
body .site-header--bb #primary-menu > li { height: auto; line-height: normal; }
body .site-header--bb #primary-menu > li > a { height: auto; }
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])) {
    padding: 4px 2px;
    background: var(--agolf-lav-pale);
    border-top: 1px solid var(--agolf-filet);
    border-bottom: 1px solid var(--agolf-filet);
}
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])):first-child { padding-left: 4px; border-left: 1px solid var(--agolf-filet); border-radius: 999px 0 0 999px; }
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])):is(:last-child, :has(+ li > a[href*="/register/"])) {
    padding-right: 4px;
    border-right: 1px solid var(--agolf-filet);
    border-radius: 0 999px 999px 0;
}
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])):first-child:is(:last-child, :has(+ li > a[href*="/register/"])) { border-radius: 999px; }
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])) > a {
    display: block;
    padding: 9px 16px;
    color: var(--agolf-texte-doux);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    /* Les libellés sont en minuscules dans WordPress (4/11 au soir) : aucune capitale forcée. */
    text-transform: none;
    white-space: nowrap;
    line-height: 1.2;
    border-radius: 999px;
    transition: background .2s, color .2s, box-shadow .2s;
}
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])) > a:hover { color: var(--agolf-ui-encre); background: var(--agolf-lav-pale); }
body .site-header--bb #primary-menu > li:not(:has(> a[href*="/register/"])) > a:focus-visible { outline: 3px solid var(--agolf-ui-lav); outline-offset: 2px; }
/* Le lien de la page en cours (recette du 5/11) : fond lavande, encre violette en gras, même rayon que le rail, sans
   ombre ni trait (le thème souligne le lien courant d'une bordure basse de 2 px). */
body .site-header--bb #primary-menu > li.current-menu-item:not(:has(> a[href*="/register/"])) > a,
body .site-header--bb #primary-menu > li.current-menu-item:not(:has(> a[href*="/register/"])) > a:hover {
    color: var(--agolf-ui-encre);
    font-weight: 700;
    background: var(--agolf-ui-lav);
    border: 0;
    box-shadow: none;
}
body .site-header--bb #primary-menu > li > a { border-bottom: 0; }
body .site-header--bb #primary-menu > li > a::before,
body .site-header--bb #primary-menu > li > a::after { display: none; }
/* Le bouton plein (le lien vers une offre, Découverte seulement par la règle If Menu) : le seul élément plein de l'en-tête. */
body .site-header--bb #primary-menu > li:has(> a[href*="/register/"]) { margin-left: 12px; }
body .site-header--bb #primary-menu > li > a[href*="/register/"],
body .site-header--bb #primary-menu > li > a[href*="/register/"]:hover,
body .site-header--bb #primary-menu > li > a[href*="/register/"]:focus {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    color: var(--agolf-bouton-texte);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    background: var(--agolf-bouton-fond);
    border-radius: 999px;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--agolf-ui-violet) 60%, transparent);
}
/* L'ombre du bouton du site, raccourcie : l'en-tête coupe ce qui dépasse et en ferait un rectangle. */
body .site-header--bb #primary-menu > li > a[href*="/register/"]:hover { transform: var(--agolf-bouton-survol); }
body .site-header--bb #primary-menu > li > a[href*="/register/"]:focus-visible { outline: var(--agolf-bouton-focus); outline-offset: 3px; }

/* La cloche et la photo dans une pilule blanche à filet. */
body .site-header--bb #header-aside .header-aside-inner:has(.user-wrap) {
    align-self: center;
    height: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 8px;
    background: var(--agolf-fond-carte);
    border: 1px solid var(--agolf-filet);
    border-radius: 999px;
}
body .site-header--bb #header-aside .notification-wrap > a.notification-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--agolf-texte-doux);
    border-radius: 50%;
}
body .site-header--bb #header-aside .notification-wrap > a.notification-link:hover { color: var(--agolf-ui-encre); background: var(--agolf-lav-pale); }
/* Le compteur de notifications : un petit point au coin de la cloche, sa couleur gardée (orange). */
body .site-header--bb #header-aside .notification-wrap > a.notification-link .count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background: var(--agolf-orange-mi-parcours);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--agolf-fond-carte);
}
/* Le thème donne au bloc de la photo la hauteur de la barre : ramené à la pilule. */
body .site-header--bb #header-aside .header-aside-inner > .user-wrap,
body .site-header--bb #header-aside .header-aside-inner > .notification-wrap { height: auto; line-height: normal; align-self: center; }
body .site-header--bb #header-aside .user-wrap > a.user-link {
    height: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 0 4px;
    color: var(--agolf-texte);
    font-family: var(--fj1-font);
    font-size: 14px;
    font-weight: 600;
}
body .site-header--bb #header-aside .user-wrap > a.user-link img.avatar { width: 36px; height: 36px; margin: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--agolf-ui-lav); }

/* La carte des notifications (au clic) suit la même règle : 4 px sous la pilule, bord droit sur celui de la pilule. Elle
   se place donc par rapport à la pilule, pas à la cloche (le thème : right -15 ou -38 px, top calc(100% - 15px)). */
body .site-header--bb #header-aside .header-aside-inner:has(.user-wrap) { position: relative; }
/* Sans la cloche (réglage du thème désactivé pour la beta), le nom ouvre la pilule : ni l'espacement prévu entre la cloche
   et le nom (8 px du thème, 14 px de marge du gabarit v2), ni vide à gauche ; 15 px avant le nom, l'arrondi de la pilule. */
body .site-header--bb #header-aside .header-aside-inner:has(> .user-wrap:first-child) { padding-left: 10px; }
body .site-header--bb #header-aside .header-aside-inner > .user-wrap:first-child { margin-left: 0; padding-left: 0; }
body .site-header--bb #header-aside .header-aside-inner > #header-notifications-dropdown-elem { position: static; }
body .site-header--bb #header-aside #header-notifications-dropdown-elem .notification-dropdown {
    top: calc(100% + 5px);
    right: -1px;
    margin: 0;
}

/* ── 3. Le menu du profil (vue 2) : carte arrondie, tête avec l'offre, entrées en tuiles, Déconnexion à part ── */
/* La carte commence 4 px sous la pilule, son bord droit sur celui de la pilule (recette du 5/11). La pilule déborde
   la photo de 5 px (4 px d'espacement, 1 px de filet) en bas et à droite : le sous-menu reste collé à la photo
   (top: 100 %) et descend la carte par 9 px d'espacement transparent, une zone qui garde le survol. */
body .site-header--bb #header-aside .user-wrap .sub-menu {
    top: 100%;
    right: -5px;
    /* 228 px fixes (recette du 5/11 : 174 px ajustés au contenu trop étroit, 280 px trop large). */
    box-sizing: border-box;
    width: 228px;
    min-width: 0;
    padding: 9px 0 0;
    font-family: var(--fj1-font);
    background: transparent;
    border: 0;
    box-shadow: none;
}
body .site-header--bb #header-aside .user-wrap .sub-menu .wrapper {
    padding: 6px;
    background: var(--agolf-fond-carte);
    border: 1px solid var(--agolf-filet);
    border-radius: 20px;
    box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--agolf-ui-encre) 35%, transparent);
}
/* Le thème fixe la liste à 187 px : elle prend la largeur de la carte, « Passer à Staff Swing » n'est plus coupé. */
body .site-header--bb #header-aside .user-wrap .sub-menu-inner { width: auto; min-width: 0; margin: 0; padding: 0; }
body .site-header--bb #header-aside .user-wrap .sub-menu-inner > li:first-child > a.user-link {
    display: flex;
    align-items: center;
    gap: var(--agolf-menu-ecart);
    margin: 0 0 4px;
    padding: 8px var(--agolf-menu-interieur) 10px;
    border-bottom: 1px solid var(--agolf-filet);
}
/* L'en-tête de la carte à l'échelle des entrées : photo de 36 px, nom en 15 px, identifiant et pastille plus discrets. */
body .site-header--bb #header-aside .user-wrap .sub-menu-inner > li:first-child > a.user-link img.avatar { width: 36px; height: 36px; margin: 0; border-radius: 50%; }
body .site-header--bb #header-aside .user-wrap .sub-menu-inner > li:first-child .user-name { display: block; color: var(--agolf-texte); font-size: 15px; font-weight: 700; line-height: 1.25; }
body .site-header--bb #header-aside .user-wrap .sub-menu-inner > li:first-child .user-mention { display: block; color: var(--agolf-texte-pale); font-size: 12px; font-weight: 500; line-height: 1.3; }
/* L'offre en pastille lavande, sous l'identifiant (classe d'offre du body, posée par Agolf_Assets::classe_offre). */
body[class*="agolf-offre--"] .site-header--bb #header-aside .user-wrap .sub-menu-inner > li:first-child .user-mention::after,
body[class*="agolf-offre--"] .bb-mobile-panel-header .user-wrap .user-name::after {
    display: table;
    margin-top: 4px;
    padding: 3px 9px;
    color: var(--agolf-ui-encre);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    background: var(--agolf-ui-lav);
    border-radius: 999px;
}
/* Dans la carte de l'ordinateur, la pastille suit l'échelle de l'en-tête ; celle du menu mobile reste telle quelle. */
body[class*="agolf-offre--"] .site-header--bb #header-aside .user-wrap .sub-menu-inner > li:first-child .user-mention::after {
    margin-top: 3px;
    padding: 2px 7px;
    font-size: 10px;
    letter-spacing: .05em;
}
body.agolf-offre--decouverte :is(.user-wrap .sub-menu-inner > li:first-child .user-mention, .bb-mobile-panel-header .user-wrap .user-name)::after { content: "D\E9 couverte"; }
body.agolf-offre--staff_swing :is(.user-wrap .sub-menu-inner > li:first-child .user-mention, .bb-mobile-panel-header .user-wrap .user-name)::after { content: "Staff Swing"; }
body.agolf-offre--staff_integral :is(.user-wrap .sub-menu-inner > li:first-child .user-mention, .bb-mobile-panel-header .user-wrap .user-name)::after { content: "Staff Int\E9 gral"; }

body .site-header--bb #header-aside ul.bb-my-account-menu { margin: 0; padding: 0; }
body #masthead.site-header--bb #header-aside ul.bb-my-account-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--agolf-menu-ecart);
    box-sizing: border-box;
    min-height: var(--agolf-menu-entree);
    padding: var(--agolf-menu-interieur);
    color: var(--agolf-texte);
    font-size: var(--agolf-menu-texte);
    font-weight: var(--agolf-menu-graisse);
    line-height: 1.25;
    white-space: nowrap;
    border-radius: var(--agolf-menu-rayon);
    /* Toute la largeur de la carte, fond et survol compris (le gabarit v2 posait margin: 0 8px sur ces liens). */
    margin: 0;
}
body #masthead.site-header--bb #header-aside ul.bb-my-account-menu > li > a > i:first-child {
    position: static;
    top: auto;
    transform: none;
    display: grid;
    place-items: center;
    flex: none;
    box-sizing: border-box;
    width: var(--agolf-menu-tuile);
    min-width: var(--agolf-menu-tuile);
    height: var(--agolf-menu-tuile);
    margin: 0;
    color: var(--agolf-ui-encre);
    font-size: var(--agolf-menu-icone);
    line-height: 1;
    background: var(--agolf-lav-pale);
    border: 1px solid var(--agolf-ui-lav);
    border-radius: var(--agolf-menu-tuile-rayon);
}
body .site-header--bb #header-aside ul.bb-my-account-menu > li > a:hover { color: var(--agolf-texte); background: var(--agolf-lav-pale); }
/* Déconnexion : séparée par un filet, en orange au survol pour la distinguer des autres actions. */
body .site-header--bb #header-aside ul.bb-my-account-menu > li.bp-logout-nav { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--agolf-filet); }
body .site-header--bb #header-aside ul.bb-my-account-menu > li.bp-logout-nav > a { color: var(--agolf-texte-doux); }
body .site-header--bb #header-aside ul.bb-my-account-menu > li.bp-logout-nav > a:hover { color: var(--agolf-orange-sortie); background: var(--agolf-orange-fond); }
body .site-header--bb #header-aside ul.bb-my-account-menu > li.bp-logout-nav > a:hover > i:first-child { color: var(--agolf-orange-sortie); background: var(--agolf-orange-fond); border-color: var(--agolf-orange-clair); }

/* ── 4. Le visiteur (vue 3) : « Se connecter » en bouton contour du site ; « S'inscrire », que le thème affiche aussi,
   en bouton plein. ──────────────────────────────────────────────────────────────────────────── */
body .site-header--bb .bb-header-buttons { display: flex; align-items: center; gap: 10px; }
body .site-header--bb .bb-header-buttons a.button,
body .site-header--bb .bb-header-buttons a.button:hover {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 20px;
    font-family: var(--fj1-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
}
body .site-header--bb .bb-header-buttons a.signin-button,
body .site-header--bb .bb-header-buttons a.signin-button:hover {
    color: var(--agolf-ui-encre);
    background: var(--agolf-fond-carte);
    border: 1.5px solid var(--agolf-ui-lav);
    box-shadow: none;
}
body .site-header--bb .bb-header-buttons a.signin-button:hover { border-color: var(--agolf-ui-vif); }
body .site-header--bb .bb-header-buttons a.signup,
body .site-header--bb .bb-header-buttons a.signup:hover {
    color: var(--agolf-bouton-texte);
    background: var(--agolf-bouton-fond);
    border: 0;
    box-shadow: var(--agolf-bouton-ombre);
}

/* ── 4 bis. Visiteur : pas de barre latérale (recette du 5/11) ─────────────────────────────────────────────
   Le menu « non connecté » (138) est vide et BuddyBoss n'a pas de réglage pour masquer la barre aux visiteurs : elle
   restait une colonne blanche de 230 px. Masquée, et la place que le thème réserve au contenu et à l'en-tête rendue
   (.buddypanel-open:not(.register) .site{margin-left:230px}, en-tête collant en calc(100% - 230px)). Les ids passent
   devant le thème, chargé après le plugin. Au mobile, le thème masque déjà la barre. */
@media (min-width: 800px) {
    body.bb-buddypanel:not(.logged-in) aside.buddypanel { display: none; }
    body.bb-buddypanel:not(.logged-in) #page.site { margin-left: 0; }
    body.bb-buddypanel:not(.logged-in) #page #masthead.site-header { width: 100%; }
}

/* ── 5. Mobile : la barre du haut au style de l'en-tête, le menu plein écran au style de la barre ─────── */
@media (max-width: 799px) {
    body .bb-mobile-header { background: var(--agolf-fond-carte); border-bottom: 1px solid var(--agolf-filet); }
    /* La cloche (inline-block du thème, par son id) : centrée dans les 76 px, à la hauteur du bouton de menu. */
    body .bb-mobile-header .header-aside > #header-notifications-dropdown-elem { display: flex; align-items: center; }
    body .bb-mobile-header a.bb-left-panel-mobile,
    body .bb-mobile-header .notification-wrap > a.notification-link {
        position: relative;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        color: var(--agolf-texte);
        border-radius: 12px;
    }
    body .bb-mobile-header .notification-wrap > a.notification-link .count {
        position: absolute;
        top: 9px;
        right: 9px;
        width: 8px;
        height: 8px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
        background: var(--agolf-orange-mi-parcours);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--agolf-fond-carte);
    }
    body .bb-mobile-panel-inner { width: 100%; max-width: 100vw; overflow-x: hidden; }
    body .bb-mobile-panel-inner .bb-mobile-panel-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid var(--agolf-filet);
    }
    body .bb-mobile-panel-inner .bb-mobile-panel-header .user-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
    body .bb-mobile-panel-inner .bb-mobile-panel-header .user-wrap img.avatar { width: 48px; height: 48px; margin: 0; border-radius: 50%; }
    body .bb-mobile-panel-inner .bb-mobile-panel-header .user-name { color: var(--agolf-texte); font-family: var(--fj1-font); font-size: 17px; font-weight: 800; }
    body .bb-mobile-panel-inner .bb-mobile-panel-header .my-account-link a { color: var(--agolf-texte-pale); font-family: var(--fj1-font); font-size: 13px; }
    body .bb-mobile-panel-inner a.bb-close-panel {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        margin-left: auto;
        color: var(--agolf-texte-doux);
        background: var(--agolf-lav-pale);
        border-radius: 12px;
    }
    body .bb-mobile-panel-inner nav.main-navigation { padding: 4px 16px 24px; }
    body .bb-mobile-panel-inner ul.buddypanel-menu.side-panel-menu > li:not(.bb-menu-section) > a { min-height: 48px; }
    body .bb-mobile-panel-inner ul.buddypanel-menu.side-panel-menu > li.bb-menu-section > a { margin-left: 4px; margin-right: 4px; }
}