/* Valblocs — Espace communautaire.

   Accorde le pack Nouveau de BuddyPress aux styles du site, dans le même
   langage de cartes que les espaces parent et enfant. Les jetons vivent dans
   socle.css, partagé avec eux ; cette feuille ne porte que des composants.

   Enfilée depuis includes/communaute.php en dépendance de `bp-nouveau` : la
   cascade est garantie, et pas une surcharge ici n'a recours à !important. Les
   deux seuls du fichier neutralisent les animations pour qui demande à en être
   dispensé — c'est la forme convenue, et elle doit l'emporter sur tout. */

/* ══════════════════════════════════════════════════════════════════════════
   2. SOCLE
   ══════════════════════════════════════════════════════════════════════════ */

.buddypress-wrap {
  color: var(--ardoise);
  line-height: 1.6;
}

.buddypress-wrap *,
.buddypress-wrap *::before,
.buddypress-wrap *::after {
  box-sizing: border-box;
}

.buddypress-wrap h1,
.buddypress-wrap h2,
.buddypress-wrap h3,
.buddypress-wrap h4 {
  color: var(--encre);
}

.buddypress-wrap a {
  color: var(--lien);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.buddypress-wrap a:hover,
.buddypress-wrap a:focus {
  color: var(--encre);
}

/* Un seul anneau de focus pour tout l'espace, repris d'espaces.css. */
.buddypress-wrap :focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .buddypress-wrap * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. GABARIT DU THÈME
   ══════════════════════════════════════════════════════════════════════════ */

/* Divi imprime le titre de la page fantôme au-dessus de l'en-tête du membre —
   le pseudonyme s'affichait donc deux fois. On le masque à l'œil seulement :
   BuddyPress ne fournit qu'un h2, et retirer le seul h1 du document abîmerait la
   structure de titres pour qui navigue au lecteur d'écran. */
.bp-user #left-area > article > h1.entry-title.main_title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La largeur reste celle des rangées Divi : la colonne latérale ayant été
   retirée côté PHP, #left-area occupe déjà toute la .container, elle-même bornée
   par les variables du thème. Il ne reste qu'à empêcher un tableau ou une longue
   adresse de faire déborder la page.

   Le fond légèrement teinté donne aux cartes un sol sur lequel se poser. Sans
   lui, des cartes blanches sur une page blanche ne tiennent que par leur
   bordure, et le langage se lit mal. Il est posé sur #buddypress plutôt que sur
   la page : la teinte s'arrête à l'espace communautaire, et Divi garde la main
   sur le reste du document. */
#buddypress {
  max-width: 100%;
  overflow-wrap: break-word;
  padding: var(--gouttiere);
  background: var(--fond);
  border-radius: var(--rl);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. EN-TÊTE DE PROFIL
   ══════════════════════════════════════════════════════════════════════════

   Une carte, et non plus un bloc sombre plein : bandeau de couleur en haut,
   avatar à cheval sur sa bordure basse, identité en dessous sur fond clair.
   C'est la composition de BuddyBoss, et elle vaut mieux qu'un aplat — le nom et
   les méta se lisent sur du blanc, pas sur un dégradé.

   L'image de couverture est coupée côté PHP : c'est `member-header.php` qui rend
   ici, sans positionnement imposé. Le bandeau est donc dessiné, pas chargé. */

.buddypress-wrap .single-headers {
  position: relative;
  margin-bottom: var(--gouttiere);
  padding: 0 var(--pad-carte-l) var(--pad-carte-l);
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: var(--rl);
  overflow: hidden;
  text-align: center;
  color: var(--ardoise);
}

/* Le bandeau. Les marges négatives lui rendent la pleine largeur de la carte
   malgré la marge intérieure ; `overflow:hidden` sur la carte le recoupe aux
   angles arrondis. */
.buddypress-wrap .single-headers::before {
  content: '';
  display: block;
  height: 8.5rem;
  margin: 0 calc(var(--pad-carte-l) * -1) 0;
  background:
    linear-gradient(135deg, var(--encre) 0%, color-mix(in srgb, var(--encre) 55%, var(--or)) 100%);
}

/* Repli pour les navigateurs sans color-mix : le dégradé se réduit à l'encre. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .buddypress-wrap .single-headers::before {
    background: linear-gradient(135deg, var(--encre) 0%, var(--or) 140%);
  }
}

.buddypress-wrap .single-headers #item-header-avatar {
  float: none;
  margin: 0;
  padding: 0;
}

/* Le lien passe en inline-block pour se centrer avec le reste de l'en-tête. */
.buddypress-wrap .single-headers #item-header-avatar a {
  display: inline-block;
  border: 0;
}

/* La marge haute négative fait chevaucher l'avatar sur le bandeau.

   `float:none` est indispensable : le pack flotte l'image à gauche, ce qui
   annule les marges automatiques — l'avatar restait collé au bord — et décalait
   le nom et les méta vers la droite, la ligne contournant le flottant. */
.buddypress-wrap .single-headers #item-header-avatar img.avatar {
  display: block;
  float: none;
  width: 8.75rem;
  height: 8.75rem;
  margin: -4.5rem auto 1rem;
  border-radius: 50%;
  border: 4px solid var(--craie);
  background: var(--craie);
  box-shadow: var(--ombre);
}

.buddypress-wrap .single-headers #item-header-content {
  overflow: visible;
}

.buddypress-wrap .single-headers h2.user-nicename {
  margin: 0 0 .25em;
  color: var(--encre);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.buddypress-wrap .single-headers .item-meta,
.buddypress-wrap .single-headers .activity {
  margin: 0 0 .6em;
  color: var(--ardoise2);
  font-size: var(--fs-base);
}

.buddypress-wrap .single-headers .member-header-actions {
  margin-top: 1rem;
}

.buddypress-wrap .single-headers .member-header-actions a,
.buddypress-wrap .single-headers .member-header-actions button {
  background: var(--pierre);
  border: 1px solid var(--trait2);
  border-radius: var(--r);
  color: var(--encre);
  padding: .5em 1em;
}

.buddypress-wrap .single-headers .member-header-actions a:hover,
.buddypress-wrap .single-headers .member-header-actions button:hover {
  background: var(--or-pale);
  border-color: var(--or);
  color: var(--encre);
}

/* GamiPress pose le solde de Valblocs et le palier dans l'en-tête. Sans cette
   reprise, ses blocs gardent leur gris d'origine. */
.buddypress-wrap .single-headers .gamipress-buddypress-user-details {
  margin: .6em 0 .4em;
  color: var(--encre);
}

.buddypress-wrap .single-headers .gamipress-buddypress-points-type {
  display: inline-block;
  margin: 0 .35em .4em;
  padding: .35em .95em;
  background: var(--or-pale);
  border: 1px solid rgba(201,146,42,.28);
  border-radius: 999px;
  font-size: var(--fs-base);
  color: var(--ardoise);
}

/* Le solde porte la classe `activity`, comme la ligne « Actif il y a… » juste
   en dessous : sans cette reprise il en héritait le gris d'appoint, alors que
   c'est le chiffre que le membre vient lire. */
.buddypress-wrap .single-headers .gamipress-buddypress-points-type .gamipress-buddypress-user-points,
.buddypress-wrap .single-headers .gamipress-buddypress-points-type b {
  color: var(--encre);
  font-family: var(--mono);
  font-weight: 600;
}

@media screen and (max-width: 46.8em) {
  .buddypress-wrap .single-headers::before { height: 6.5rem; }

  .buddypress-wrap .single-headers #item-header-avatar img.avatar {
    width: 7rem;
    height: 7rem;
    margin-top: -3.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. NAVIGATION
   ══════════════════════════════════════════════════════════════════════════

   Onglets soulignés, à la manière de BuddyBoss. Le niveau 1 n'a ni cadre ni
   fond : l'onglet courant se signale par la couleur du texte et un filet
   d'accent posé dessous. Le niveau 2 est une rangée de pastilles, à l'intérieur
   de l'écran.

   Ce traitement remplace un onglet qui prenait la matière d'un panneau et s'y
   raccordait par un coude. C'était plus explicite, et beaucoup plus fragile :
   il fallait un recouvrement d'un pixel, une hauteur de coude calculée, et une
   présentation de repli entièrement distincte sous 750 px, parce que les
   entrées du pack sont des `inline-block` flottants dont l'arithmétique de
   ligne laisse un reliquat sous eux. Ici la même règle sert aux deux largeurs :
   les onglets qui ne tiennent pas passent simplement à la ligne.

   La sélection reste lourde — le pack et son module de repli nomment ces
   éléments par identifiant, il en faut deux pour passer devant. */

/* ── Niveau 1 ───────────────────────────────────────────────────────────── */

/* `flow-root` : les entrées sont flottantes, et sans contexte de formatage la
   barre retombe à la hauteur d'une ligne. `overflow:visible` avec, car le
   `overflow:hidden` du pack rognerait le menu des onglets repliés. */
#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs,
#buddypress.buddypress-wrap .main-navs.dir-navs {
  display: flow-root;
  overflow: visible;
  margin: 0 0 var(--gouttiere);
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  box-shadow: none;
}

#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs ul li a,
#buddypress.buddypress-wrap .main-navs.dir-navs ul li a {
  display: inline-block;
  padding: .85em 1.1em;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ardoise);
  font-weight: 500;
}

#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs li:not(.current):not(.selected) a:hover,
#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs li:not(.current):not(.selected) a:focus,
#buddypress.buddypress-wrap .main-navs.dir-navs li:not(.current):not(.selected) a:hover,
#buddypress.buddypress-wrap .main-navs.dir-navs li:not(.current):not(.selected) a:focus {
  background: none;
  color: var(--encre);
  box-shadow: inset 0 -3px 0 0 var(--trait2);
}

/* Le filet est une ombre intérieure et non une bordure : il ne prend pas de
   place, donc l'onglet ne se déplace pas d'un pixel en devenant courant. */
#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs li.current a,
#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs li.selected a,
#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs li.current a:hover,
#buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs li.selected a:hover,
#buddypress.buddypress-wrap .main-navs.dir-navs li.current a,
#buddypress.buddypress-wrap .main-navs.dir-navs li.selected a,
#buddypress.buddypress-wrap .main-navs.dir-navs li.current a:hover,
#buddypress.buddypress-wrap .main-navs.dir-navs li.selected a:hover {
  background: none;
  color: var(--encre);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 0 var(--or);
}

/* ── L'écran ────────────────────────────────────────────────────────────── */

/* Ni fond ni cadre : ce sont les composants qui portent la carte. */
#buddypress.buddypress-wrap #item-body,
#buddypress.buddypress-wrap .screen-content {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#buddypress.buddypress-wrap .bp-screen-title,
#buddypress.buddypress-wrap #item-body h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--encre);
}

/* ── Niveau 2 ───────────────────────────────────────────────────────────── */

#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs,
#buddypress.buddypress-wrap .screen-content > .subnav-filters {
  display: flow-root;
  overflow: visible;
  width: auto;
  margin: 0 0 var(--gouttiere);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs ul li a {
  display: inline-block;
  margin: 0 .35em .35em 0;
  padding: .45em 1.05em;
  background: var(--pierre);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ardoise);
  font-weight: 500;
}

#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li:not(.current):not(.selected) a:hover,
#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li:not(.current):not(.selected) a:focus {
  background: var(--pierre2);
  border-color: var(--trait2);
  color: var(--encre);
}

#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li.current a,
#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li.selected a,
#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li.current a:hover,
#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li.selected a:hover {
  background: var(--or);
  border-color: var(--or);
  color: var(--craie);
  font-weight: 600;
  box-shadow: none;
}

/* ── Compteurs ──────────────────────────────────────────────────────────── */

#buddypress.buddypress-wrap .bp-navs ul li .count {
  min-width: 1.6em;
  margin-left: .45em;
  padding: .1em .5em;
  background: var(--pierre2);
  border: 0;
  border-radius: 999px;
  color: var(--encre);
  font-family: var(--mono);
  font-size: var(--fs-base);
  line-height: 1.4;
}

#buddypress.buddypress-wrap .bp-navs li.current a .count,
#buddypress.buddypress-wrap .bp-navs li.selected a .count {
  background: var(--or);
  color: var(--craie);
}

#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li.current a .count,
#buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs li.selected a .count {
  background: var(--craie);
  color: var(--encre);
}

/* ── Repli des onglets débordants ───────────────────────────────────────── */

#buddypress.buddypress-wrap .bp-navs .primary-nav-more > ul > li > .submenu-expand,
#buddypress.buddypress-wrap .bp-navs .secondary-nav-more > ul > li > .submenu-expand,
#buddypress.buddypress-wrap .bp-navs .primary-nav-more .submenu-expand span,
#buddypress.buddypress-wrap .bp-navs .secondary-nav-more .submenu-expand span {
  border-radius: var(--r);
  color: var(--ardoise);
}

/* Sans cette reprise, le menu replié retombe au style du navigateur — blanc
   sur blanc et sans relief. C'est le seul endroit de la navigation qui flotte
   réellement au-dessus de la page, donc le seul qui porte une ombre. */
#buddypress.buddypress-wrap .bp-navs .primary-nav-more .sub-menu.hidden-items,
#buddypress.buddypress-wrap .bp-navs .secondary-nav-more .sub-menu.hidden-items {
  padding: .35em;
  background: var(--craie);
  border: 1px solid var(--trait2);
  border-radius: var(--rl);
  box-shadow: var(--ombre-flottante);
}

#buddypress.buddypress-wrap .bp-navs .primary-nav-more .sub-menu.hidden-items a,
#buddypress.buddypress-wrap .bp-navs .secondary-nav-more .sub-menu.hidden-items a {
  border-radius: var(--r);
  color: var(--ardoise);
  white-space: nowrap;
  box-shadow: none;
}

#buddypress.buddypress-wrap .bp-navs .primary-nav-more .sub-menu.hidden-items a:hover,
#buddypress.buddypress-wrap .bp-navs .secondary-nav-more .sub-menu.hidden-items a:hover {
  background: var(--pierre);
  color: var(--encre);
}

/* ── Navigation verticale ───────────────────────────────────────────────── */

/* Le réglage existe dans l'outil de personnalisation ; le clan ne s'en sert
   pas, mais mieux vaut un ruban vertical cohérent qu'un habillage d'onglets
   horizontaux appliqué de travers. */
#buddypress.buddypress-wrap.bp-single-vert-nav #object-nav.bp-navs li a {
  border-left: 3px solid transparent;
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ardoise);
}

#buddypress.buddypress-wrap.bp-single-vert-nav #object-nav.bp-navs li.current a,
#buddypress.buddypress-wrap.bp-single-vert-nav #object-nav.bp-navs li.selected a {
  background: var(--pierre);
  border-left-color: var(--or);
  color: var(--encre);
  font-weight: 600;
  box-shadow: none;
}

/* ── Petits écrans ──────────────────────────────────────────────────────── */

@media screen and (max-width: 46.8em) {
  /* Le pack repeint chaque entrée en gris sous ce seuil. */
  #buddypress.buddypress-wrap:not(.bp-single-vert-nav) .bp-navs li {
    background: transparent;
  }

  /* Les onglets qui ne tiennent pas passent à la ligne, et c'est tout : rien
     à raccorder, donc rien qui se casse en passant sur deux rangées. */
  #buddypress.buddypress-wrap:not(.bp-single-vert-nav) #object-nav.bp-navs ul li a,
  #buddypress.buddypress-wrap .main-navs.dir-navs ul li a {
    padding: .75em .9em;
    min-height: 44px;
  }

  #buddypress.buddypress-wrap #item-body > #subnav.bp-subnavs ul li a {
    min-height: 44px;
    line-height: 2;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. ANNUAIRE
   ══════════════════════════════════════════════════════════════════════════

   Le second niveau n'y est pas une sous-navigation mais la barre de recherche
   et de tri. Elle se pose donc en ligne d'outils, non en pastilles. */

#buddypress.buddypress-wrap .screen-content > .subnav-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#buddypress.buddypress-wrap .subnav-filters .subnav-search,
#buddypress.buddypress-wrap .subnav-filters .component-filters {
  margin: 0;
}

#buddypress.buddypress-wrap .dir-list {
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. LISTES DE MEMBRES
   ══════════════════════════════════════════════════════════════════════════ */

.buddypress-wrap .bp-list {
  border: 0;
}

.buddypress-wrap .bp-list > li,
.buddypress-wrap ul.item-list > li {
  padding: 1em;
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: var(--rl);
  box-shadow: var(--ombre);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.buddypress-wrap .bp-list > li:hover,
.buddypress-wrap ul.item-list > li:hover {
  border-color: var(--trait2);
  box-shadow: var(--ombre-flottante);
}

.buddypress-wrap .bp-list li .item-avatar img.avatar,
.buddypress-wrap ul.item-list li img.avatar {
  border-radius: 50%;
  border: 2px solid var(--craie);
  box-shadow: 0 0 0 1px var(--trait);
}

.buddypress-wrap .bp-list li .item-title,
.buddypress-wrap .bp-list li .list-title {
  font-size: var(--fs-sec);
  font-weight: 600;
}

.buddypress-wrap .bp-list li .item-title a,
.buddypress-wrap .bp-list li .list-title a {
  color: var(--encre);
}

.buddypress-wrap .bp-list li .item-meta,
.buddypress-wrap .bp-list li .item-meta .activity {
  color: var(--ardoise);
  font-size: var(--fs-base);
}

.buddypress-wrap #bp-ajax-loader {
  padding: 1.5em;
  color: var(--ardoise);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. FLUX D'ACTIVITÉ
   ══════════════════════════════════════════════════════════════════════════

   C'est l'écran que le module des dons récompense au « j'aime » : le bouton de
   réaction mérite d'être lisible comme tel, pas comme un lien parmi d'autres. */

.buddypress-wrap .activity-update-form {
  margin-bottom: 1.5em;
  padding: 1.25em;
  background: var(--pierre);
  border: 1px solid var(--trait);
  border-radius: var(--rl);
}

.buddypress-wrap .activity-update-form #whats-new-textarea textarea,
.buddypress-wrap .activity-update-form textarea {
  width: 100%;
  padding: .75em;
  background: var(--craie);
  border: 1px solid var(--trait2);
  border-radius: var(--r);
  color: var(--encre);
  font-family: inherit;
  font-size: var(--fs-base);
}

.buddypress-wrap .activity-list li.activity-item {
  margin-bottom: 1em;
  padding: 1.15em;
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: var(--rl);
  box-shadow: var(--ombre);
}

.buddypress-wrap .activity-list .activity-avatar img.avatar {
  border-radius: 50%;
}

.buddypress-wrap .activity-list .activity-header {
  color: var(--ardoise);
  font-size: var(--fs-base);
}

.buddypress-wrap .activity-list .activity-header a {
  color: var(--encre);
  font-weight: 600;
}

.buddypress-wrap .activity-list .activity-content .activity-inner {
  color: var(--ardoise);
}

.buddypress-wrap .activity-list .activity-meta.action a,
.buddypress-wrap .activity-list .activity-meta.action button {
  margin-right: .4em;
  padding: .35em .85em;
  background: var(--pierre);
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--ardoise);
  font-size: var(--fs-base);
}

.buddypress-wrap .activity-list .activity-meta.action a:hover,
.buddypress-wrap .activity-list .activity-meta.action button:hover {
  background: var(--or-pale);
  border-color: var(--or);
  color: var(--encre);
}

/* Le « j'aime » posé : c'est le geste qui crédite des Valblocs. */
.buddypress-wrap .activity-list .activity-meta.action a.fav,
.buddypress-wrap .activity-list .activity-meta.action a.unfav {
  background: var(--or-pale);
  border-color: var(--or);
  color: var(--encre);
  font-weight: 600;
}

.buddypress-wrap .activity-list .activity-comments {
  margin-top: .9em;
  padding-left: 1em;
  border-left: 2px solid var(--trait);
}

.buddypress-wrap .activity-list .activity-comments ul li {
  padding: .6em 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. TABLEAUX — NOTIFICATIONS, MESSAGES
   ══════════════════════════════════════════════════════════════════════════ */

.buddypress-wrap table.bp-tables-user,
.buddypress-wrap #message-threads {
  width: 100%;
  border: 1px solid var(--trait);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--rl);
  overflow: hidden;
}

.buddypress-wrap table.bp-tables-user thead th,
.buddypress-wrap #message-threads thead th {
  padding: .8em 1em;
  background: var(--pierre);
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: left;
}

.buddypress-wrap table.bp-tables-user td,
.buddypress-wrap #message-threads td {
  padding: .8em 1em;
  border-bottom: 1px solid var(--trait);
  color: var(--ardoise);
  vertical-align: middle;
}

.buddypress-wrap table.bp-tables-user tr:last-child td,
.buddypress-wrap #message-threads tr:last-child td {
  border-bottom: 0;
}

.buddypress-wrap #message-threads tr.unread td,
.buddypress-wrap table.bp-tables-user tr.unread td {
  background: var(--or-pale);
  color: var(--encre);
  font-weight: 600;
}

.buddypress-wrap .bp-messages-content .thread-content .subject,
.buddypress-wrap #message-threads .thread-subject a {
  color: var(--encre);
  font-weight: 600;
}

/* Un tableau ne se réduit pas sous 46.8em : il défile dans son propre cadre
   plutôt que d'élargir la page. */
@media screen and (max-width: 46.8em) {
  .buddypress-wrap .bp-messages-content,
  .buddypress-wrap #notifications-user-list {
    overflow-x: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. FORMULAIRES ET BOUTONS
   ══════════════════════════════════════════════════════════════════════════

   L'écran ne porte plus de panneau : ce sont les blocs qui portent la carte.
   Les listes, l'activité et les tableaux l'ont déjà par leurs sections ; les
   formulaires de réglages et les champs de profil, eux, s'affichaient nus sur
   le fond. */

.buddypress-wrap form.standard-form,
.buddypress-wrap .bp-profile-settings,
.buddypress-wrap .profile-fields,
.buddypress-wrap #group-settings-form,
.buddypress-wrap .bp-avatar-nav-items,
.buddypress-wrap #item-body > .bp-messages-content {
  padding: var(--pad-carte-l);
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: var(--rl);
}

/* Un tableau déjà encadré ne prend pas un second cadre. */
.buddypress-wrap form.standard-form > table,
.buddypress-wrap .profile-fields > table {
  border: 0;
  border-radius: 0;
}

.buddypress-wrap .standard-form .editfield,
.buddypress-wrap .standard-form > fieldset {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.buddypress-wrap .standard-form legend {
  padding: 0;
  color: var(--encre);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.buddypress-wrap input[type="text"],
.buddypress-wrap input[type="email"],
.buddypress-wrap input[type="password"],
.buddypress-wrap input[type="search"],
.buddypress-wrap input[type="url"],
.buddypress-wrap input[type="tel"],
.buddypress-wrap input[type="number"],
.buddypress-wrap input[type="date"],
.buddypress-wrap select,
.buddypress-wrap textarea {
  padding: .6em .75em;
  background: var(--craie);
  border: 1px solid var(--trait2);
  border-radius: var(--r);
  color: var(--encre);
  font-family: inherit;
  /* 1rem exactement : en dessous, iOS zoome à la prise de focus. */
  font-size: var(--fs-base);
  line-height: 1.5;
}

.buddypress-wrap input:focus,
.buddypress-wrap select:focus,
.buddypress-wrap textarea:focus {
  border-color: var(--or);
}

.buddypress-wrap label,
.buddypress-wrap .bp-label {
  color: var(--encre);
  font-weight: 500;
}

.buddypress-wrap .select-wrap {
  background: var(--craie);
  border: 1px solid var(--trait2);
  border-radius: var(--r);
}

.buddypress-wrap .select-wrap select {
  border: 0;
}

.buddypress-wrap .dir-search form,
.buddypress-wrap .bp-search form {
  display: inline-flex;
  align-items: stretch;
  background: var(--craie);
  border: 1px solid var(--trait2);
  border-radius: var(--r);
  overflow: hidden;
}

.buddypress-wrap .dir-search form input[type="search"],
.buddypress-wrap .dir-search form input[type="text"],
.buddypress-wrap .bp-search form input[type="search"],
.buddypress-wrap .bp-search form input[type="text"] {
  border: 0;
  border-radius: 0;
}

.buddypress-wrap .dir-search form button,
.buddypress-wrap .bp-search form button {
  padding: 0 .9em;
  background: var(--pierre);
  border: 0;
  border-left: 1px solid var(--trait);
  color: var(--encre);
}

.buddypress-wrap .dir-search form button:hover,
.buddypress-wrap .bp-search form button:hover {
  background: var(--or-pale);
}

/* Boutons. On vise la parenté avec le bouton Divi — rayon, graisse, transition —
   sans emprunter sa classe : recopier .et_pb_button reviendrait à dépendre d'un
   sélecteur interne du thème, qui a déjà changé une fois entre Divi 4 et 5. */
.buddypress-wrap button,
.buddypress-wrap input[type="submit"],
.buddypress-wrap input[type="button"],
.buddypress-wrap a.button,
.buddypress-wrap .generic-button a,
.buddypress-wrap .generic-button button {
  padding: .65em 1.4em;
  background: var(--encre);
  border: 1px solid var(--encre);
  border-radius: var(--r);
  color: var(--craie);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.buddypress-wrap button:hover,
.buddypress-wrap input[type="submit"]:hover,
.buddypress-wrap input[type="button"]:hover,
.buddypress-wrap a.button:hover,
.buddypress-wrap .generic-button a:hover,
.buddypress-wrap .generic-button button:hover {
  background: var(--or);
  border-color: var(--or);
  color: var(--craie);
}

/* Les boutons de la navigation, du repli et des listes ont leur propre
   habillage plus haut : on annule ici l'habillage générique qui les écraserait. */
.buddypress-wrap .bp-navs button,
.buddypress-wrap .activity-meta.action button,
.buddypress-wrap .dir-search form button,
.buddypress-wrap .bp-search form button {
  background: none;
  border: 0;
  color: inherit;
  font-weight: 500;
}

.buddypress-wrap .dir-search form button,
.buddypress-wrap .bp-search form button {
  background: var(--pierre);
  border-left: 1px solid var(--trait);
  color: var(--encre);
}

/* ══════════════════════════════════════════════════════════════════════════
   11. MESSAGES DE RETOUR
   ══════════════════════════════════════════════════════════════════════════ */

.buddypress-wrap .bp-feedback {
  margin: 1em 0;
  padding: .9em 1.1em;
  background: var(--pierre);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--ardoise);
  border-radius: var(--r);
  color: var(--encre);
  font-size: var(--fs-base);
}

.buddypress-wrap .bp-feedback .bp-icon {
  background: none;
  color: inherit;
}

.buddypress-wrap .bp-feedback.info,
.buddypress-wrap .bp-feedback.loading {
  background: var(--pierre);
  border-left-color: var(--ardoise);
}

.buddypress-wrap .bp-feedback.success,
.buddypress-wrap .bp-feedback.updated {
  background: var(--mousse-pale);
  border-left-color: var(--mousse);
}

.buddypress-wrap .bp-feedback.warning {
  background: var(--or-pale);
  border-left-color: var(--or);
}

.buddypress-wrap .bp-feedback.error {
  background: var(--alerte-pale);
  border-left-color: var(--alerte);
}

/* ══════════════════════════════════════════════════════════════════════════
   12. INSCRIPTION ET ACTIVATION
   ══════════════════════════════════════════════════════════════════════════

   Ces deux écrans sont vus par une famille qui ne connaît pas encore le clan :
   ce sont ceux où l'écart avec le reste du site se remarquait le plus. */

.buddypress-wrap.register-page .buddypress-wrap,
.buddypress-wrap.activate-page .buddypress-wrap,
.buddypress-wrap .register-sections,
.buddypress-wrap .activation-body {
  max-width: 46rem;
}

.buddypress-wrap .register-section,
.buddypress-wrap .activation-body {
  margin-bottom: 1.5em;
  padding: 1.5em;
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: var(--rl);
  box-shadow: var(--ombre);
}

.buddypress-wrap .register-section legend,
.buddypress-wrap .register-section h2,
.buddypress-wrap .register-section h4 {
  margin-top: 0;
  color: var(--encre);
  font-weight: 600;
}

.buddypress-wrap .register-section .editfield {
  margin-bottom: 1.1em;
}

.buddypress-wrap .register-section label,
.buddypress-wrap .standard-form label {
  display: block;
  margin-bottom: .3em;
}

.buddypress-wrap .register-section input[type="text"],
.buddypress-wrap .register-section input[type="email"],
.buddypress-wrap .register-section input[type="password"],
.buddypress-wrap .standard-form input[type="text"],
.buddypress-wrap .standard-form input[type="email"],
.buddypress-wrap .standard-form input[type="password"],
.buddypress-wrap .standard-form textarea {
  width: 100%;
}

.buddypress-wrap .register-section .description,
.buddypress-wrap .standard-form .description {
  color: var(--ardoise);
  font-size: var(--fs-base);
}