/* ============================================================================
   ESPACE MEMBRES
   CSS entierement separe de la vitrine, prefixe `mbr-` : zero collision.
   ========================================================================= */

@layer pages {

.mbr-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;                 /* svh et non vh : pas de saut sur iOS */
}

/* ---- Barre laterale ----------------------------------------------------- */
.mbr-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(84vw, 300px);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  background: var(--c-ink-900);
  color: var(--c-text-invert);
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mbr-sidebar.is-open { transform: translateX(0); }

.mbr-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-5);
  text-decoration: none;
}
.mbr-sidebar__mark { display: flex; gap: 4px; }
.mbr-sidebar__mark .chevron { width: 9px; height: 24px; }
.mbr-sidebar__mark .chevron:nth-child(3) { --chevron-c: var(--c-paper); }
.mbr-sidebar__title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--c-paper);
  white-space: nowrap;
}

.mbr-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: rgb(250 247 242 / .06);
}
.mbr-user__name { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--c-paper); }
.mbr-user__role { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-gold-500); }
.mbr-user__text { min-width: 0; }
.mbr-user__name, .mbr-user__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mbr-navgroup + .mbr-navgroup { margin-top: var(--sp-5); }
.mbr-navgroup__title {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-ink-300);
}

.mbr-navlink {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--hit-target);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text-invert-muted);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: var(--t-color);
}
.mbr-navlink:hover { background: rgb(250 247 242 / .08); color: var(--c-paper); }
.mbr-navlink[aria-current="page"] {
  background: var(--c-red-500);
  color: #fff;
}
.mbr-navlink__icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.mbr-sidebar__foot { margin-top: auto; padding-top: var(--sp-5); }

/* ---- Barre superieure (mobile) ------------------------------------------ */
.mbr-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding-inline: var(--sp-4);
  background: var(--c-surface);
  border-bottom: var(--bw-hair) solid var(--c-border);
}
.mbr-topbar__title { font-family: var(--ff-display); font-size: var(--fs-base); text-transform: uppercase; }

/* ---- Contenu ------------------------------------------------------------- */
.mbr-main { min-width: 0; padding: var(--sp-6) var(--sp-gutter) var(--sp-16); background: var(--c-bg); }
.mbr-view { max-width: 60rem; }
.mbr-view__head { margin-bottom: var(--sp-6); }
.mbr-view__title { font-size: var(--fs-xl); }
.mbr-view__title:focus { outline: none; }
.mbr-view__lead { margin-top: var(--sp-2); color: var(--c-text-muted); }

.mbr-panel {
  padding: var(--sp-6);
  background: var(--c-surface);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-lg);
}
.mbr-panel + .mbr-panel { margin-top: var(--sp-6); }
.mbr-panel__title { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.mbr-panel__note { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-4); }
/* En-tete de liste : le titre, et le bouton qui ouvre la popup qui l'alimente.
   Les formulaires ayant quitte le bas de page, c'est ce bouton — au-dessus de
   la liste et hors de la zone rechargee — qui recoit le focus a la fermeture. */
.mbr-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.mbr-panel__head .mbr-panel__title { margin-bottom: 0; }
.mbr-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Intertitre d'un groupe de champs dans une popup (« Localisation »). */

.mbr-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-5); }
.mbr-toolbar .field { min-width: 10rem; }
.mbr-toolbar__spacer { margin-left: auto; }

.mbr-roletag { font-size: var(--fs-2xs); }

/* ---- Avatar et televersement --------------------------------------------- */
.mbr-avatar-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }
.mbr-avatar-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mbr-avatar-hint { font-size: var(--fs-sm); color: var(--c-text-muted); flex-basis: 100%; }

/* Le champ fichier est masque EN PERMANENCE : c'est son label, style en `.btn`,
   qui sert de bouton. `.u-visually-hidden` ne convient pas ici. Sa clause
   `:not(:focus):not(:active)` est pensee pour le lien d'evitement, qui doit
   reapparaitre au focus ; sur un champ fichier elle rend au controle natif sa
   taille reelle des le `mousedown`, et le selecteur natif « Aucun fichier
   choisi » surgit a cote du bouton, ou il reste tant que le champ a le focus. */
.mbr-avatar-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le champ etant invisible, l'anneau de focus se reporte sur son label — d'ou
   l'ordre du DOM : le champ AVANT le label, pour que `+` puisse l'atteindre. */
.mbr-avatar-file:focus-visible + .btn {
  outline: var(--focus-ring-w) solid var(--c-ink-900);
  outline-offset: var(--focus-ring-offset);
}

/* ---- Table VMA ------------------------------------------------------------ */
.vma-table { font-size: var(--fs-sm); }
.vma-table td:first-child { font-weight: var(--fw-bold); }

/* ---- Responsive ------------------------------------------------------------
   Trois etats plutot que deux : tiroir, rail d'icones, puis barre complete. */
@media (min-width: 1024px) {
  .mbr-shell { grid-template-columns: var(--sidebar-w-rail) 1fr; }
  .mbr-sidebar { position: sticky; top: 0; height: 100svh; width: auto; transform: none; }
  .mbr-topbar { display: none; }
  .mbr-main { padding-top: var(--sp-10); }
  /* En mode rail les libelles restent DANS LE DOM (donc lus par les lecteurs
     d'ecran), simplement masques visuellement. */
  .mbr-navlink__label,
  .mbr-navgroup__title,
  .mbr-sidebar__title,
  .mbr-user__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mbr-navlink { justify-content: center; }
  .mbr-user { justify-content: center; }
  .mbr-sidebar__brand { justify-content: center; }
  .mbr-navgroup + .mbr-navgroup { margin-top: var(--sp-4); border-top: var(--bw-hair) solid #333; padding-top: var(--sp-4); }
}

@media (min-width: 1280px) {
  .mbr-shell { grid-template-columns: var(--sidebar-w) 1fr; }
  .mbr-navlink__label,
  .mbr-navgroup__title,
  .mbr-sidebar__title,
  .mbr-user__text { position: static; width: auto; height: auto; clip-path: none; }
  .mbr-navlink { justify-content: flex-start; }
  .mbr-user { justify-content: flex-start; }
  .mbr-sidebar__brand { justify-content: flex-start; }
  .mbr-navgroup + .mbr-navgroup { border-top: none; }
}
}

@layer pages {
/* ============================================================================
   THEME SOMBRE — l'espace membres suit la refonte comme le reste du site.
   La barre laterale etait deja noire : sur un fond devenu noir lui aussi, elle
   ne se distinguait plus. Elle passe donc au premier niveau d'elevation et
   gagne un liseré.
   ========================================================================= */
.theme-dark .mbr-sidebar {
  background: var(--c-bg-alt);
  border-right: var(--bw-hair) solid var(--c-border);
  color: var(--c-text);
}
.theme-dark .mbr-sidebar__title { color: var(--c-text); }
.theme-dark .mbr-user { background: rgb(255 255 255 / .05); }
.theme-dark .mbr-user__name { color: var(--c-text); }
.theme-dark .mbr-navgroup__title { color: var(--c-text-muted); }
.theme-dark .mbr-navlink { color: var(--c-text-muted); }
.theme-dark .mbr-navlink:hover { background: rgb(255 255 255 / .07); color: var(--c-text); }
/* L'or est la couleur d'accent du theme : le rouge ne passe pas sur fond noir. */
.theme-dark .mbr-navlink[aria-current="page"] { background: var(--c-accent); color: var(--c-ink-900); }
.theme-dark .mbr-topbar { background: var(--c-bg-alt); }
/* Meme rayon que les cartes de la vitrine, pour que les deux mondes se ressemblent. */
.theme-dark .mbr-panel { border-radius: var(--r-2xl); }
.theme-dark .mbr-avatar-file:focus-visible + .btn { outline-color: var(--c-accent); }

@media (min-width: 1024px) {
  .theme-dark .mbr-navgroup + .mbr-navgroup { border-top-color: var(--c-border); }
}
}