/* Page-local accent alias kept (legacy aliases come from design_system) */
:root { --bg: var(--paper-2); }

/* Layout : en-tête pleine largeur, puis panneau + contenu */
.community-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-content-gap, 10px);
    overflow: hidden;
    min-width: 0;
}
.community-body {
    flex: 1;
    display: flex;
    gap: var(--sidebar-content-gap, 10px);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.community-layout > .page-header-bar {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Panneau gauche — même esprit que #main-header.sidebar (carte arrondie) */
.community-left-panel {
    width: 200px;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--card-bg, var(--white));
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-md);
    /* Même relief que .community-tabs-block et .page-header-bar */
    box-shadow: var(--sh-1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0 12px;
    box-sizing: border-box;
}
.community-left-panel__section-title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 14px 8px;
}
.community-left-panel__section-title:not(:first-child) {
    padding-top: 4px;
}
.community-left-panel__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Même gouttière que .community-left-panel__public → largeur identique pour tous les boutons cellule */
.community-left-panel__cell-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px;
    box-sizing: border-box;
}
/* Extrait du style inline de Community.html:39 : une regle en media query ne
   peut jamais l'emporter sur un style inline, quelle que soit sa specificite. */
.community-left-panel__join {
    width: 100%;
    justify-content: center;
}
.community-left-panel__public {
    flex-shrink: 0;
    padding: 0 14px;
    position: relative;
    z-index: 2;
}
.community-left-panel__divider {
    border: none;
    border-top: 1px solid var(--border, #e2e8f0);
    width: 36px;
    max-width: 100%;
    margin: 10px auto 10px;
    flex-shrink: 0;
}
.community-public-cell:not(:disabled) {
    cursor: pointer;
}

/* Cellule « Public » : onglet sidebar pleine largeur (lisibilité), sans contour.
   Composant nav propre à la page (pas un rôle .btn) : porte sa propre base
   layout — celle-ci était jadis fournie par .community-join-btn, retirée lors
   de la migration canonique ; restaurée ici pour ne pas casser le sélecteur. */
.community-public-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 9px 12px;
    text-align: left;
    border: none;
    border-radius: var(--r-sm);
    color: var(--text-secondary, #64748b);
    background: var(--card-bg, var(--white));
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.community-public-cell .material-icons {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    color: inherit;
}
.community-panel-logo {
    width: 22px;
    height: 22px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.community-public-cell:hover:not(:disabled):not(.active) {
    color: var(--accent);
    background: rgba(21,72,166,0.08);
}
.community-public-cell:focus-visible {
    color: var(--accent);
    background: rgba(21,72,166,0.08);
}
.community-public-cell.active {
    color: var(--accent);
    background: rgba(21,72,166,0.12);
}
.community-public-cell.active:hover:not(:disabled) {
    color: var(--accent);
    background: rgba(21,72,166,0.12);
}
.community-public-cell:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-secondary, #64748b);
    background: transparent;
}
.community-public-cell:disabled:hover {
    background: transparent;
}

.community-join-feedback {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 8px 0 0;
    line-height: 1.35;
}

/* Colonne contenu (onglets) sous l'en-tête */
.community-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 16px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    box-shadow: var(--shadow-md);
    gap: 12px;
    overflow: hidden;
}
.page-header-bar__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}
.page-header-bar__trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Zone de contenu scrollable */
.community-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Bloc tabs + contenu */
.community-tabs-block {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Onglets */
.community-tabs {
    display: flex;
    align-items: flex-end;
    border-bottom: 1.5px solid var(--border);
    padding: 0 16px;
    background: var(--card-bg);
    flex-shrink: 0;
}
.community-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'Poppins', sans-serif;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    transition: color 0.15s, border-color 0.15s;
}
.community-tab:hover {
    color: var(--text-primary);
}
.community-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.community-tab .material-icons {
    font-size: 16px;
}

/* Contenu des onglets */
.community-tab-panel {
    display: none;
    padding: 32px 24px;
}
.community-tab-panel.active {
    display: block;
}
#tab-ressources.community-tab-panel {
    padding-top: 10px;
    padding-bottom: 10px;
}
#tab-rex.community-tab-panel {
    padding-top: 10px;
    padding-bottom: 10px;
}
#tab-buddies.community-tab-panel {
    padding-top: 10px;
}
#tab-forum.community-tab-panel {
    padding-top: 10px;
}

/* Placeholder card */
.placeholder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
}
.placeholder-card .material-icons {
    font-size: 48px;
    color: var(--text-muted);
}
.placeholder-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.placeholder-card__desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
}

/* --- Cards ressources / REX --- */
.community-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.community-items-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* .btn-add removed — using canonical .btn .btn-primary */

/* Resource cards — compact grid */
.community-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
}
#rex-list {
    margin-bottom: 10px;
}
.community-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
/* Hover lift like Contacts/Documents (.ct-card/.dc-card). box-shadow is
   FLAT-disabled, so feedback = translate + accent border. */
.community-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}
.community-card--rex {
    gap: 0;
}
.community-card__rex-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}
.community-card__rex-footer-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
}
.community-card__rex-footer-author {
    flex-shrink: 0;
    max-width: 50%;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.25;
    word-break: break-word;
}
.community-card__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.community-card__logo {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.community-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.community-card__logo svg { color: var(--text-muted); width: 18px; height: 18px; }
.community-card__info { flex: 1; min-width: 0; }
.community-card__title {
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0 0 2px;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.community-card__desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.community-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}
.community-card__meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
}
/* Buddies-style in-flow bottom action bar (no absolute positioning →
   never overlaps the cabinet logo). Favorite on the left, owner
   edit/delete pushed to the right. Mirrors .buddy-card__footer. */
.community-card__actionbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}
.community-card__fav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: background 0.12s, color 0.12s;
}
.community-card__fav:hover { background: var(--accent-soft); color: var(--danger); }
.community-card__fav.is-fav { color: var(--danger); }
.community-card__fav .material-icons { font-size: 18px; }
.community-card__fav-count { font-size: 0.78rem; font-weight: 600; line-height: 1; }
.community-card__actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}
/* .community-card__actions button styles removed — using canonical .btn .btn-ghost .btn--icon */

.community-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* --- Buddies --- */
.buddy-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.buddy-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.buddy-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.buddy-card__header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}
.buddy-card__date {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}
.buddy-card__name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.buddy-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1;
    box-sizing: border-box;
    min-height: 18px;
}
.buddy-level--beginner              { background: #dcfce7; color: #166534; }
.buddy-level--intermediate           { background: #dbeafe; color: #1d4ed8; }
.buddy-level--higher_intermediate    { background: #fef9c3; color: #854d0e; }
.buddy-level--advanced               { background: #fce7f3; color: #9d174d; }
.buddy-card__info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.buddy-card__row-icon {
    font-size: 18px;
    width: 22px;
    height: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    overflow: hidden;
    font-feature-settings: 'liga';
    user-select: none;
}
.buddy-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.buddy-card__message {
    font-size: 0.82rem;
    color: rgba(10,23,51,1);
    margin: 0;
    margin-bottom: 10px;
    line-height: 1.5;
    white-space: pre-line;
}
.buddy-card__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.buddy-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #3b5998;
    text-decoration: none;
    background: #f0f4ff;
    padding: 2px 8px;
    border-radius: 999rem;
    line-height: 1;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 18px;
}
.buddy-contact-link:hover {
    background: #e0e8ff;
    color: #2d4373;
}
.buddy-contact-link--text {
    cursor: default;
}
.buddy-contact-link--text:hover {
    background: #f0f4ff;
    color: #3b5998;
}
.buddy-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border);
}
.buddy-card__footer .buddy-card__actions {
    margin-left: auto;
}
.buddy-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: background 0.12s, color 0.12s;
}
.buddy-like-btn:hover  { background: #fee2e2; color: #e11d48; }
.buddy-like-btn.liked  { color: #e11d48; }
.buddy-like-btn .material-icons { font-size: 16px; }
.buddy-availability__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    align-content: center;
    flex: 1;
    min-width: 0;
    min-height: 22px;
}
.buddy-day-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999rem;
    background: #f0f4ff;
    color: #3b5998;
    line-height: 1;
    box-sizing: border-box;
    min-height: 18px;
}
.buddy-day-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.buddy-day-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.buddy-day-row label.buddy-day-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
    min-width: 52px;
    justify-content: center;
}
.buddy-day-row label.buddy-day-label:has(input:checked) {
    background: #dbeafe;
    border-color: #93bbfd;
    color: #1d4ed8;
}
.buddy-day-row label.buddy-day-label input { display: none; }
.buddy-day-times {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.buddy-day-times.visible { display: flex; }
.buddy-day-times input[type="time"] {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 6px;
    font-size: 0.76rem;
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary);
    background: var(--bg);
    width: 90px;
}
.buddy-day-times input[type="time"]:focus { border-color: var(--primary); }

/* Filtre dispo (onglet Buddies) : compact, 7 jours en ligne, heures sous chaque jour */
#buddy-avail-filter-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 10px;
}
#buddy-avail-filter-panel .buddy-avail-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
#buddy-avail-filter-panel .buddy-avail-filter-header span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}
#buddy-avail-filter-panel .buddy-avail-filter-header button {
    border: none;
    background: none;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
#buddy-filter-days.buddy-day-rows,
#buddy-days.buddy-day-rows {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px 6px;
    align-items: start;
}
#buddy-filter-days .buddy-day-row,
#buddy-days .buddy-day-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
}
#buddy-filter-days .buddy-day-row label.buddy-day-label,
#buddy-days .buddy-day-row label.buddy-day-label {
    min-width: 0;
    width: 100%;
    padding: 3px 4px;
    font-size: 0.7rem;
    box-sizing: border-box;
}
#buddy-filter-days .buddy-day-times,
#buddy-days .buddy-day-times {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
}
#buddy-filter-days .buddy-day-times.visible,
#buddy-days .buddy-day-times.visible {
    display: flex;
}
#buddy-filter-days .buddy-time-field,
#buddy-days .buddy-time-field {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    font-size: 0.65rem;
    color: var(--text-secondary);
}
#buddy-filter-days .buddy-time-field__lbl,
#buddy-days .buddy-time-field__lbl {
    flex: 0 0 0.95em;
    color: var(--text-muted);
    font-size: 0.62rem;
    line-height: 1;
}
#buddy-filter-days .buddy-day-times input[type="time"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 2px 2px;
    font-size: 0.65rem;
    box-sizing: border-box;
}
#buddy-days .buddy-day-times select.buddy-time-from,
#buddy-days .buddy-day-times select.buddy-time-to {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 2px 4px;
    font-size: 0.65rem;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
}
#buddy-days .buddy-day-times select.buddy-time-from:focus,
#buddy-days .buddy-day-times select.buddy-time-to:focus {
    border-color: var(--primary);
}
@media (max-width: 768px) {
    #buddy-filter-days.buddy-day-rows,
    #buddy-days.buddy-day-rows {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 420px) {
    #buddy-filter-days.buddy-day-rows,
    #buddy-days.buddy-day-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.buddy-card__actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
/* .buddy-card__actions button styles removed — using canonical .btn .btn-ghost .btn--icon */

/* --- Forum ---
   .forum-post-card did NOT actually inherit .buddy-card's box styling (this
   comment used to claim it did — it never carried the class). Fixed by
   giving it the same box treatment directly, and #forum-posts-cards the
   same stacking/gap as .buddy-cards-list, so multiple posts read as
   separate cards instead of one continuous block. Colors reuse the legacy
   bridge tokens already used throughout this file (--border/--text-muted/
   --bg-soft), not the raw --ink or --paper scale directly. */
/* #forum-layout has no dedicated gap of its own — .filter-bar carries no
   margin (canonical in design_system.html), so without this the search row
   sat flush against the cards below it. Mirrors .rex-layout's own
   flex-column/gap treatment for the same filter-bar-then-list shape. */
#forum-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#forum-posts-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.forum-post-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
/* .buddy-card__body (reused here for the title+message) carries its own
   extra 20px left/right padding on top of the card's own 20px — a
   Buddies-specific choice, not something Forum topics should inherit:
   it read as a much wider margin around the title/message than around
   the header/footer directly above and below it. Zeroed out here only,
   Buddies left untouched. */
.forum-post-card > .buddy-card__body { padding-left: 0; padding-right: 0; }
/* margin-top: 0 matters here — this is a <p>, and only margin-bottom was
   ever reset, leaving the browser's default ~1em top margin stacked on
   top of both .forum-post-card's own flex gap (12px) and the header's
   margin-bottom (10px) right above it: a ~38px gap for what reads as one
   spacing decision. */
.forum-post-card__title { font-weight: 600; margin: 0 0 4px; }
.forum-post-card__header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 10px;
    flex-shrink: 0;
    margin-left: auto;
}
/* Own row below the header (moved out of .forum-post-card__header-right,
   mobile report 2026-09-24): at header width, several cabinet tags plus
   the date used to overflow the card's own edge, cutting a tag off
   mid-name once wrapping put the whole cabinet row on its own line under
   a narrow author name. flex-wrap: nowrap + overflow: hidden here is
   deliberate, not a bug -- community.js's own _fitForumCabinetTags measures
   this row after render and hides tags from the end into a "+N" pill,
   rather than letting the browser wrap or clip mid-tag. */
.forum-post-card__cabinet-tags {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
    /* The card's flex gap (12px) already spaces this row from its
       neighbours; the header's own margin-bottom (10px) stacked on top of
       it made ~22px above the row and a 10px margin-bottom made ~22px
       below. Cancel the header's 10px above, drop the extra one below:
       12px on each side. */
    margin: -10px 0 0;
}
.forum-post-card__cabinet-tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    padding: 4px 10px 4px 4px; border-radius: 999rem; background: var(--bg-soft);
    color: var(--text-primary);
    flex-shrink: 0;
}
.forum-post-card__cabinet-tag--general {
    padding: 4px 10px; font-weight: 500; color: var(--text-muted);
}
.forum-post-card__cabinet-tag--more {
    padding: 4px 10px; font-weight: 600; color: var(--text-muted); background: transparent;
}
.forum-post-card__cabinet-logo {
    width: 24px; height: 24px; border-radius: 50%; object-fit: contain;
    background: #fff; border: 1px solid var(--border); flex-shrink: 0;
}
.forum-post-card__cabinet-logo--fallback {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.forum-post-card__comments { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
/* Comment-count toggle: minimal icon+number, no button box — same treatment
   as .buddy-like-btn, not a bordered button like a default <button>. */
.forum-post-card__comments-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: none; cursor: pointer;
    font-size: 0.8rem; color: var(--text-muted);
    padding: 4px 8px; border-radius: var(--r-sm);
    transition: background .12s, color .12s;
}
.forum-post-card__comments-toggle:hover { background: var(--bg-soft); color: var(--text-primary); }
.forum-post-card__comments-toggle .material-icons { font-size: 16px; }
/* commented_by_me (backend, _build_forum_post_out): the user has a comment
   or reply somewhere under this topic. Same treatment as the like button's
   favorite/favorite_border swap (favBtnHtml/_applyFavBtn) -- the JS/markup
   swaps the glyph itself to the filled chat_bubble, this rule only owns the
   color, same --accent blue as the author name of their own comments
   (.forum-comment__author). Applies on hover too: it must read as this
   topic's permanent status, not a transient hover color that happens to
   coincide. */
.forum-post-card__comments-toggle.has-commented,
.forum-post-card__comments-toggle.has-commented:hover { color: var(--accent); }

/* Composer: pretty input (border/radius/focus ring matching .filter-bar__search's
   own look) + a round paper-plane send button, not a text "Comment"/"Reply" button.
   align-items: center (not flex-end) keeps the round button vertically
   centered against the input at its default single-line height instead of
   pinned to the bottom, which read as visibly off-center. */
.forum-comment-composer,
.forum-comment__reply-composer:not([hidden]) {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.forum-comment-composer textarea,
.forum-comment__reply-composer textarea {
    flex: 1; resize: vertical; min-height: 38px; max-height: 120px; box-sizing: border-box;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
    font-family: inherit; font-size: 13px; color: var(--text-primary);
    background: var(--card-bg); transition: border-color .12s, box-shadow .12s;
}
.forum-comment-composer textarea:focus,
.forum-comment__reply-composer textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.forum-comment-composer textarea::placeholder,
.forum-comment__reply-composer textarea::placeholder { color: var(--text-muted); }
.forum-comment-send-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0; box-sizing: border-box;
    border: none; border-radius: 999rem; background: var(--accent); color: #fff;
    cursor: pointer; transition: opacity .12s;
}
.forum-comment-send-btn:hover { opacity: .88; }
.forum-comment-send-btn .material-icons { font-size: 18px; }

.forum-comment { padding: 10px 0 10px 16px; border-top: 1px solid var(--border); }
.forum-comment:first-child { border-top: none; }
.forum-comment__header { display: flex; justify-content: space-between; align-items: baseline; }
/* Author name previously had no rule of its own, inheriting the same size/
   color as the comment body — no visual hierarchy between who wrote it and
   what they wrote. Smaller and in the accent color gives it its own
   identity without competing with .buddy-card__name's bigger, bolder
   treatment at post level. */
.forum-comment__author { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
/* "Admin" pill to the right of the author's name (author_is_admin): forum
   posts, comments, replies, REX, resource cards. Accent family, the same
   blue as the name it sits next to, so it reads as a trust mark and not as
   a moderation state (.hidden-badge, .badge-pending). */
.author-admin-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px 1px 5px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-strong);
    font-size: 0.66rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; vertical-align: middle;
}
.author-admin-badge .material-icons { font-size: 12px; }
/* Date du forum : forme longue au bureau, forme courte JJ/MM/AA, HH:MM sous
   900px (bloc telephone plus bas). Voir forumDateHtml dans community.js. */
.fdate-short { display: none; }
/* The comment header is space-between: without the auto margin the pill
   would float halfway between the name and the date. */
.forum-comment__author + .author-admin-badge { margin-left: 6px; margin-right: auto; }
.community-card__meta .author-admin-badge { margin-left: 6px; }
/* "Modified" chip — a post/comment/reply whose updated_at moved past its
   created_at. Plain muted text, not a pill: lighter-weight than
   .hidden-badge (a more serious signal — moderator action, not just an
   edit), this is an everyday one any member sees on their own edited
   content. */
.forum-modified-label { font-size: 0.68rem; font-style: italic; color: var(--text-muted); margin-right: 4px; }
/* .hidden-badge / .is-hidden-card: moved here from admin-community-detail.css
   (2026-09-24) rather than duplicated. Not admin-only any more, unlike
   Resources/REX/Buddy: a forum post/comment/reply's own author can now see
   their own hidden item too (product decision, list_forum_posts and
   friends), and this page (Community.html, no admin-community-detail.css)
   is exactly where they see it. The dimming previously only had
   .community-card/.buddy-card selectors — forum's own 3 card shapes never
   got it (documented pre-existing gap, closed here since it's now directly
   needed, not just a nice-to-have). */
.community-card.is-hidden-card,
.buddy-card.is-hidden-card,
.forum-post-card.is-hidden-card,
.forum-comment.is-hidden-card {
    opacity: 0.55;
    border-style: dashed;
}
.hidden-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--paper-3);
    color: var(--ink-700);
    border: 1px solid var(--line);
    margin-bottom: 3px;
    width: fit-content;
}
.hidden-badge .material-icons { font-size: 13px; }
/* Matches .buddy-card__message (the post's own message text) — comment
   and reply content previously had no rule of its own, inheriting the
   page's default paragraph size, which didn't line up with the message
   it's replying to. */
.forum-comment__content { font-size: 0.82rem; color: var(--text-primary); line-height: 1.5; margin: 2px 0 0; }
.forum-comment__footer { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
/* Replies control: a single icon+count toggle, same treatment as the post
   card's own .forum-post-card__comments-toggle — replaces what used to be
   a separate "Reply" text button plus a distinct "N replies" text toggle.
   One click both reveals the replies and opens this comment's reply
   composer; see toggleForumCommentReplies. */
.forum-comment__replies-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: none; cursor: pointer;
    font-size: 0.78rem; color: var(--text-muted);
    padding: 4px 6px; border-radius: var(--r-sm);
    transition: background .12s, color .12s;
}
.forum-comment__replies-toggle:hover { background: var(--bg-soft); color: var(--text-primary); }
.forum-comment__replies-toggle .material-icons { font-size: 15px; }
/* A plain underlined text link, not a bordered/backgrounded button — this
   is a <button> element for semantics/click-target only, stripped of every
   default button look. */
.forum-comments-show-more {
    display: block; width: 100%; text-align: center; margin-top: 8px;
    border: none; background: none; padding: 4px;
    font-size: 0.8rem; font-weight: 600; color: var(--accent);
    text-decoration: underline; cursor: pointer;
}
.forum-comments-show-more:hover { opacity: .8; }
/* Replies sit inside their parent comment's DOM subtree already (#forum-replies-${id}
   is a child of the comment div), so this indent compounds with the parent
   comment's own 16px — a reply reads visually nested one level further right,
   with a left border acting as the "connector" back to its parent. */
.forum-comment__replies {
    margin-top: 6px;
    padding-left: 16px;
    border-left: 2px solid var(--accent);
}
.forum-comment--reply { padding: 8px 0 8px 8px; border-top: none; }
.forum-comment--reply:not(:first-child) { border-top: 1px solid var(--border); }

/* --- Buddy Modal --- */
.buddy-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,23,51,.45);
    z-index: 10400;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buddy-modal-overlay[hidden] { display: none; }
.buddy-modal {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.buddy-modal-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border);
}
.buddy-modal-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.buddy-modal-header .modal-head { margin-bottom: 0; }
/* La boite defile (max-height 90vh) et sa tete partait avec le contenu :
   collee en haut, la croix reste a portee. La boite n'a pas de padding, la
   tete porte le sien : top 0 suffit. Aux deux largeurs. 2026-09-29. */
.buddy-modal-header { position: sticky; top: 0; z-index: 3; background: var(--card-bg); }
/* .buddy-modal-close removed — using canonical .btn .btn-ghost .btn--icon */
.buddy-modal-body { padding: 18px 24px 8px; display: flex; flex-direction: column; gap: 14px; }
.buddy-form-group { display: flex; flex-direction: column; gap: 5px; }
.buddy-form-group label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }
.buddy-form-group input,
.buddy-form-group textarea,
.buddy-form-group select {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg);
}
.buddy-form-group textarea { resize: vertical; min-height: 80px; }
/* Rangee « methode de contact » du formulaire buddy.
   Les trois declarations qui suivent reprennent A L'IDENTIQUE les `style=`
   en ligne que portait `fragments/community_modals.html` : meme valeurs,
   donc rendu bureau inchange. Seul `min-width: 0` est AJOUTE.
   La taille minimale automatique d'un item flex vaut sa taille de CONTENU,
   et un champ de formulaire ne descend jamais sous sa largeur par defaut
   sans ce reset : le select verrouille a 140px plus le plancher du champ
   reclamaient plus que les 327px offerts par la boite a 375px, d'ou un
   debordement mesure de 139px (141 une fois une valeur saisie).
   Troisieme instance du meme defaut dans ce depot, apres `.input-bar input`
   de l'Assistant (ai-assistant.css) et `.cabinet-name` de l'annuaire
   (cabinets.css), qui portent tous deux le meme correctif. */
.buddy-contact-row { display: flex; gap: 8px; align-items: center; }
.buddy-contact-row__type { flex: 0 0 auto; min-width: 140px; }
.buddy-contact-row__value { flex: 1; min-width: 0; }
.buddy-form-group input:focus,
.buddy-form-group textarea:focus,
.buddy-form-group select:focus { border-color: var(--primary); }
.buddy-modal-footer {
    padding: 12px 24px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Modals --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,23,51,.45);
    z-index: 10300;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.modal-box h2 {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 600;
}
/* .modal-close removed — using .modal-head canonical close pattern */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg);
    transition: border-color 0.15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--primary); }
.form-group textarea { resize: vertical; min-height: 80px; }
/* .modal-actions, .btn-cancel, .btn-submit removed — using canonical .modal-actions + .btn system */
.badge-pending {
    /* Red family (aligned with the notification pills) — gold was rejected. */
    display: inline-block;
    background: #FCE8E9;
    color: #A11B2A;
    border: 1px solid #F0B6BC;
    border-radius: var(--r-sm);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    margin-bottom: 6px;
}

/* ---- REX Modal ---- */
.rex-modal-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px 24px 18px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.rex-modal-box .modal-head { margin-bottom: 14px; }
.rex-modal-box h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.rex-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: 14px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
/* Contract type toggle */
.contract-toggle {
    display: flex;
    width: fit-content;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.contract-btn {
    padding: 7px 22px;
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}
.contract-btn.active {
    background: var(--primary);
    color: var(--white);
}
/* Cabinet combobox inside REX modal */
.rex-cabinet-wrapper {
    position: relative;
}
.rex-cabinet-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    box-sizing: border-box;
}
.rex-cabinet-input:focus { border-color: var(--primary); }
.rex-cabinet-clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #aaa; font-size: 16px;
    display: none; line-height: 1;
}
.rex-cabinet-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--card-bg);
    border: 1.5px solid var(--primary);
    border-radius: var(--r-md);
    box-shadow: none;
    z-index: 10400;
    max-height: 280px;
    overflow-y: auto;
}
.rex-cabinet-dropdown.open { display: block; }
.rex-cab-section {
    padding: 6px 12px 3px;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
}
.rex-cab-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.rex-cab-item:hover { background: var(--bg); }
.rex-cab-initial {
    width: 26px; height: 26px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
    background: #e8f0fe; color: #1a73e8; overflow: hidden;
}
.rex-cab-initial img { width: 100%; height: 100%; object-fit: contain; }
.rex-cab-name { font-size: 13px; font-weight: 500; }
.rex-cab-sub { font-size: 11px; color: #888; }
.rex-cab-empty { padding: 10px 14px; font-size: 12px; color: #aaa; font-style: italic; }
.rex-cab-create {
    margin: 8px; padding: 8px 12px;
    background: #fffbe6; border: 1.5px dashed #f0b429;
    border-radius: var(--r-md); cursor: pointer;
    display: flex; align-items: center; gap: 10px;
}
.rex-cab-create:hover { background: #fff3cd; }
.rex-cab-create .create-label { font-size: 13px; font-weight: 600; }
.rex-cab-create .create-sub { font-size: 11px; color: #888; margin-top: 2px; }
/* Rounds */
.rounds-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rounds-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 18px;
    border: 1.5px dashed var(--border);
    border-radius: var(--r-md);
}
.round-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    overflow: hidden;
}
.round-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}
.round-card-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}
.round-card-actions { display: flex; gap: 2px; }
/* .round-icon-btn removed — using canonical .btn .btn-ghost .btn--icon / .btn-danger .btn--icon */
.round-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.round-card-body.collapsed { display: none; }
.round-form-row { display: flex; gap: 8px; }
.round-form-row .form-group { flex: 1; margin-bottom: 0; }
.round-file-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: var(--text-secondary);
}
.round-file-name { font-style: italic; color: var(--text-muted); }
/* .btn-add-round removed — using canonical .btn .btn-secondary */

/* ---- Join Community Modal ---- */
.join-modal-overlay {
    position: fixed; inset: 0; z-index: 10300;
    background: rgba(15,23,42,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.join-modal-overlay[hidden] { display: none; }
.join-modal {
    background: var(--card-bg, var(--white));
    border-radius: var(--r-md);
    box-shadow: var(--sh-3), 0 0 0 1px var(--line);
    width: 100%; max-width: 680px; max-height: 82vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.join-modal-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex; flex-direction: column;
    flex-shrink: 0;
}
.join-modal-header .modal-head { margin-bottom: 0; }
.join-modal-header h2 { font-size: 1.15rem; font-weight: 600; color: var(--text-primary, #1e293b); margin: 0; }
/* .join-modal-close removed — using canonical .btn .btn-ghost .btn--icon in .modal-head */
.join-modal-body { padding: 20px 28px 24px; flex: 1; }
[class*="join-modal-bo"] { overflow-y: auto; }
.join-modal-section-label {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted, #94a3b8); margin-bottom: 12px;
}
.join-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr));
    gap: 14px; margin-bottom: 24px;
}
.join-community-card {
    background: var(--card-bg, var(--white));
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    padding: 20px 14px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; transition: border-color 0.2s, box-shadow 0.2s;
}
.join-community-card:hover { border-color: var(--accent); box-shadow: var(--sh-1); }
.join-community-card.joined { border-color: #10b981; background: #f0fdf4; }
.join-community-logo {
    width: 58px; height: 58px; border-radius: var(--r-md); overflow: hidden;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: #e2e8f0;
}
.join-community-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.join-community-logo svg { color: #94a3b8; }
.join-community-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #1e293b); line-height: 1.3; }
.join-community-members { font-size: 0.73rem; color: var(--text-muted, #94a3b8); }
/* .btn-join-card removed — using canonical .btn .btn-secondary */
.btn-joined-card {
    margin-top: 4px; width: 100%; padding: 8px 0;
    background: #d1fae5; color: #10b981; border: none;
    border-radius: var(--r-md); font-family: inherit; font-size: 0.8rem; font-weight: 600;
    cursor: default; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.join-modal-empty {
    text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.85rem; padding: 32px 0;
}

/* ---- Resource Modal (redesigned) ---- */
.resource-modal-overlay {
    position: fixed; inset: 0; z-index: 10300;
    background: rgba(15,23,42,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.resource-modal-overlay[hidden] { display: none; }
.resource-modal {
    background: var(--card-bg, var(--white));
    border-radius: var(--r-md);
    box-shadow: var(--sh-3), 0 0 0 1px var(--line);
    width: 100%; max-width: 520px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.resource-modal-header {
    padding: 20px 28px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex; flex-direction: column;
    flex-shrink: 0;
}
.resource-modal-header .modal-head { margin-bottom: 0; }
.resource-modal-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary, #1e293b); margin: 0; }
/* .resource-modal-close removed — using canonical .btn .btn-ghost .btn--icon in .modal-head */
.resource-modal-body { padding: 18px 28px 8px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
[class*="resource-modal-bo"] { overflow-y: auto; }
.resource-form-group { display: flex; flex-direction: column; gap: 5px; }
.resource-format-hint { font-size: 0.7rem; color: var(--text-muted, #94a3b8); margin: 2px 0 0; }
.resource-form-label { font-size: 0.76rem; font-weight: 600; color: var(--text-secondary, #64748b); }
.resource-form-label .opt { font-weight: 400; color: var(--text-muted, #94a3b8); }
.resource-form-label .req { color: #ef4444; }
.resource-form-input, .resource-form-textarea {
    border: 1.5px solid var(--border, #e2e8f0); border-radius: var(--r-md);
    padding: 8px 11px; font-family: inherit; font-size: 0.84rem;
    color: var(--text-primary, #1e293b); background: var(--bg, #f4f7fb);
    transition: border-color 0.15s;
}
.resource-form-input:focus, .resource-form-textarea:focus { border-color: var(--accent); background: var(--white); }
.resource-form-textarea { resize: none; height: 68px; }
.resource-form-input::placeholder, .resource-form-textarea::placeholder { color: var(--text-muted, #94a3b8); }
.resource-type-selector { display: flex; gap: 8px; }
.resource-type-chip {
    flex: 1; padding: 7px 10px;
    border: 1.5px solid var(--border, #e2e8f0); border-radius: var(--r-md);
    background: var(--card-bg, var(--white)); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: 0.82rem; font-weight: 600;
    color: var(--text-secondary, #64748b); transition: all 0.15s;
}
.resource-type-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(21,72,166,0.04); }
.resource-type-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(21,72,166,0.08); }
.resource-type-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.resource-logo-row { display: flex; align-items: center; gap: 10px; }
.resource-logo-preview {
    width: 40px; height: 40px; border-radius: var(--r-md);
    background: #e2e8f0; border: 1.5px solid var(--border, #e2e8f0);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    overflow: hidden;
}
.resource-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.resource-logo-preview svg { color: #94a3b8; width: 18px; height: 18px; }

.resource-logo-hint { font-size: 0.68rem; color: var(--text-muted, #94a3b8); margin-top: 3px; }
.resource-drop-zone {
    border: 2px dashed var(--border, #e2e8f0); border-radius: var(--r-md);
    padding: 22px 20px; text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg, #f4f7fb);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.resource-drop-zone:hover, .resource-drop-zone.drag-over { border-color: var(--accent); background: rgba(21,72,166,0.03); }
.resource-drop-zone svg { color: var(--text-muted, #94a3b8); width: 28px; height: 28px; }
.resource-drop-zone p { font-size: 0.82rem; color: var(--text-secondary, #64748b); }
.resource-drop-zone .drop-hint { font-size: 0.71rem; color: var(--text-muted, #94a3b8); }
.resource-drop-zone .file-types { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.resource-file-badge {
    background: #f1f5f9; border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-sm); padding: 2px 6px; font-size: 0.66rem; font-weight: 600; color: var(--text-secondary, #64748b);
}
.resource-file-selected {
    background: #f0fdf4; border: 1px solid #10b981; border-radius: var(--r-md);
    padding: 8px 12px; font-size: 0.78rem; color: #065f46;
    display: flex; align-items: center; gap: 8px;
}
.resource-file-selected svg { flex-shrink: 0; color: #10b981; }
.resource-moderation-notice {
    background: #fef9c3; border: 1px solid #fde68a; border-radius: var(--r-md);
    padding: 8px 11px; font-size: 0.73rem; color: #92400e;
    display: flex; align-items: flex-start; gap: 7px;
}
.resource-moderation-notice svg { flex-shrink: 0; margin-top: 1px; }
.resource-modal-footer {
    padding: 14px 28px 18px;
    display: flex; gap: 10px; align-items: center; flex-shrink: 0;
}
/* `display: flex` on these elements outranks the UA [hidden] rule, so
   hidden={true} from JS is ignored without an explicit override. */
.resource-drop-zone[hidden],
.resource-file-selected[hidden] { display: none; }
/* .resource-btn-cancel, .resource-btn-share removed — using canonical .btn system */

/* ---- REX modal (PDF-first, ported from Admin_Community_Detail) ---- */
.rex-modal-overlay {
    position: fixed; inset: 0; z-index: 10300;
    background: rgba(15,23,42,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.rex-modal-overlay[hidden] { display: none; }
.rex-modal {
    background: var(--card-bg, var(--white));
    border-radius: var(--r-md);
    box-shadow: var(--sh-3), 0 0 0 1px var(--line);
    width: 100%; max-width: 520px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.rex-modal-header {
    padding: 20px 28px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex; flex-direction: column; flex-shrink: 0;
}
.rex-modal-header .modal-head { margin-bottom: 0; }
.rex-modal-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary, #1e293b); margin: 0; }
.rex-modal-body {
    padding: 18px 28px 8px; flex: 1;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
}
.rex-modal-footer {
    padding: 14px 28px 18px;
    display: flex; gap: 10px; align-items: center; flex-shrink: 0;
}
.rex-modal-footer .spacer { flex: 1; }

/* Forum post cabinet picker's selected-firm pills reuse .ds-filter-chips
   (design_system.html) for its chip/remove-button rendering, but NOT its
   "hidden under 900px" rule: that rule is a deliberate call for a FILTER
   summary, redundant with the Filters button's own count badge. Here the
   pills are the only way to see/remove a selection while composing a post
   — hiding them would silently break the picker on mobile. ID selector
   wins on specificity over the component's own class rule at any width,
   without touching that shared, documented, width-dependent decision. */
#forum-post-cabinet-chips.ds-filter-chips { display: flex; }

/* Forum post modal: the firm dropdown sits IN the flow, not absolutely.
   Absolute, it overflowed the bottom of .buddy-modal (overflow-y: auto) and
   was clipped, the modal never growing to hold it. In the flow, the modal
   grows with the open list up to its 90vh cap; past that, only the body
   scrolls, so the header and the Publish button stay visible. */
#forum-post-modal-overlay .buddy-modal { overflow: hidden; }
#forum-post-modal-overlay .buddy-modal-header,
#forum-post-modal-overlay .buddy-modal-footer { flex-shrink: 0; }
#forum-post-modal-overlay .buddy-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#forum-post-cabinet-dropdown.ac-cab-dropdown { position: static; margin-top: 4px; }

/* REX modal: same fix. .rex-modal already keeps its header and footer out
   of the scrolling body. The clear button is anchored to .ac-cab-field,
   which holds the input only, so the open list does not move it off the
   field's vertical center. */
#rex-cabinet-dropdown.ac-cab-dropdown { position: static; margin-top: 4px; }
.ac-cab-field { position: relative; }

/* Cabinet combobox (REX modal) — minimal port of CRM_Process pattern */
.ac-cab-wrap { position: relative; }
.ac-cab-input {
    width: 100%;
    padding: 8px 32px 8px 11px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--r-md);
    font-family: inherit; font-size: 0.84rem;
    color: var(--text-primary, #1e293b);
    background: var(--bg, #f4f7fb);
    box-sizing: border-box;
}
.ac-cab-input:focus { border-color: var(--accent); background: var(--white); outline: none; }
.ac-cab-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #94a3b8); font-size: 14px;
    display: none; padding: 2px 4px;
}
.ac-cab-dropdown {
    display: none; position: absolute; top: calc(100% + 4px);
    left: 0; right: 0; z-index: 50;
    background: var(--card-bg, var(--white));
    border: 1.5px solid var(--accent);
    border-radius: var(--r-md);
    max-height: 260px; overflow-y: auto;
}
.ac-cab-dropdown.open { display: block; }
.ac-cab-section {
    padding: 7px 11px 4px; font-size: 10px; color: var(--text-muted, #888);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
    background: var(--bg, #f4f7fb);
    border-bottom: 1px solid var(--border, #e2e8f0);
    position: sticky; top: 0;
}
.ac-cab-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 11px; cursor: pointer;
    font-size: 0.82rem; color: var(--text-primary, #1e293b);
}
.ac-cab-item:hover { background: var(--bg, #f4f7fb); }
.ac-cab-item .ac-cab-logo {
    width: 24px; height: 24px; border-radius: var(--r-sm);
    background: #e8f0fe; color: #1a73e8;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.ac-cab-item .ac-cab-logo img { width: 100%; height: 100%; object-fit: contain; background: #f8fafc; }
.ac-cab-empty { padding: 8px 12px; font-size: 0.75rem; color: var(--text-muted, #94a3b8); font-style: italic; }
.ac-cab-create {
    margin: 6px 8px; padding: 8px 11px;
    background: #fffbe6; border: 1.5px dashed #f0b429;
    border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    font-size: 0.78rem;
}
.ac-cab-create:hover { background: #fff3cd; }
.ac-cab-create-label { font-weight: 600; }
.ac-cab-create-sub { font-size: 0.66rem; color: var(--text-muted, #888); margin-top: 1px; }

/* REX rounds repeater */
.rex-rounds-list { display: flex; flex-direction: column; gap: 10px; }
.rex-round-card {
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--bg, #f4f7fb);
    display: flex; flex-direction: column; gap: 8px;
}
.rex-round-card-head { display: flex; align-items: center; gap: 8px; }
.rex-round-card-head select {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--r-md);
    font-family: inherit; font-size: 0.82rem;
    background: var(--card-bg, var(--white));
    color: var(--text-primary, #1e293b);
}
.rex-round-card-head select:focus { border-color: var(--accent); outline: none; }
.rex-round-pdf { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.rex-round-pdf-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-secondary, #64748b);
}
.rex-round-pdf-name.attached { color: #065f46; font-weight: 500; }
.rex-add-round-btn { align-self: flex-start; }

/* Resource Detail Modal */
.res-detail-overlay {
    position: fixed; inset: 0; z-index: 10300;
    background: rgba(15,23,42,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.res-detail-overlay[hidden] { display: none; }
.res-detail-modal {
    background: var(--card-bg, var(--white));
    border-radius: var(--r-md);
    box-shadow: var(--sh-3), 0 0 0 1px var(--line);
    width: 100%; max-width: 460px;
    display: flex; flex-direction: column; overflow: hidden;
}
.res-detail-header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.res-detail-header-left {
    display: flex; align-items: center; gap: 14px; min-width: 0;
}
.res-detail-logo-wrap {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: var(--r-md); background: var(--bg, #f4f7fb);
    border: 1px solid var(--border, #e2e8f0);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.res-detail-title {
    font-size: 1rem; font-weight: 700;
    color: var(--text-primary, #1e293b); margin: 0;
    /* Titre complet, sur plusieurs lignes si besoin (2026-09-29, QA mobile) :
       tronque a une ligne dans la modale de DETAIL, celle dont le role est
       justement de tout montrer (202px visibles pour 384 de texte a 402px). */
    overflow-wrap: anywhere;
}
/* .res-detail-close removed — using canonical .btn .btn-ghost .btn--icon in .modal-head */
.res-detail-body {
    padding: 16px 22px 8px; min-height: 48px;
}
.res-detail-desc {
    font-size: 0.87rem; color: var(--text-secondary, #64748b);
    line-height: 1.6; margin: 0;
    white-space: pre-wrap; word-break: break-word;
}
.res-detail-footer {
    padding: 14px 22px 20px;
    display: flex; justify-content: flex-end;
}
.res-detail-footer #res-detail-action {
    display: flex; width: 100%;
    align-items: center; justify-content: space-between; gap: 8px;
}

/* Resource search bar */
/* Resource search uses the canonical .filter-bar__search (design_system.html)
   — single inset focus ring, no double contour. */
/* Resource type sections */
.resource-section { margin-bottom: 24px; }
/* Resource cards a touch larger so titles aren't truncated (scoped to
   resources only — REX cards keep the standard grid). */
.resource-section .community-cards-list {
    grid-template-columns: repeat(auto-fill, minmax(min(248px, 100%), 1fr));
    gap: 14px;
}
.resource-section .community-card { padding: 16px; }
.resource-section .community-card__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.resource-section__title {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted, #94a3b8);
    margin: 0 0 10px;
}
/* Resource category filter pills + level select.
   All controls share the canonical 38px height (.filter-bar__select,
   .filter-favorites) so the row reads as a single band. */
.resource-type-filters {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px;
}
.resource-filter-pill {
    height: 38px; box-sizing: border-box;
    display: inline-flex; align-items: center;
    padding: 0 14px; border-radius: 999rem; border: 1px solid var(--line);
    background: var(--card-bg, var(--white)); font-family: inherit; font-size: 13px;
    font-weight: 500; color: var(--text-secondary, #64748b); cursor: pointer;
    white-space: nowrap; transition: var(--transition);
}
.resource-filter-pill:hover { border-color: var(--primary); color: var(--primary); }
.resource-filter-pill.active { border-color: var(--primary); color: var(--primary); background: rgba(21,72,166,0.08); font-weight: 600; }

/* Level / category chips — shown on resource cards and in the detail modal */
.res-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.res-chip {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999rem;
    font-size: 0.68rem; font-weight: 600; white-space: nowrap;
    background: var(--paper-3); color: var(--ink-500);
}
.res-chip--category { background: rgba(10,23,51,.06); color: var(--ink-800); }

/* REX layout */
.rex-layout { display: flex; flex-direction: column; gap: 16px; }
/* .filter-bar / .filter-bar__search / .filter-bar__select are canonical in
   design_system.html. Only Community-specific filter controls remain here,
   re-tokenised + aligned to the 38px control height and the shared inset
   focus ring (no double contour, FLAT-safe). */
/* The « My favorites » toggle (.filter-favorites) is canonical in
   design_system.html — shared with Cabinets and used here on REX,
   Buddies and Resources. */

.buddy-avail-toggle-btn {
    height: 38px; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--white); color: var(--ink-900);
    font-family: inherit; font-size: 13px; cursor: pointer;
    transition: var(--transition);
}
.buddy-avail-toggle-btn:hover { border-color: var(--accent); }
.buddy-avail-toggle-btn:focus { outline: none; }
.buddy-avail-toggle-btn:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.buddy-avail-toggle-btn .material-icons { font-size: 18px; line-height: 1; color: var(--ink-300); }

.rex-filter-date-field {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 0 12px; flex-shrink: 0; max-width: 100%;
    transition: var(--transition);
}
.rex-filter-date-field:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.rex-filter-date-field .rex-filter-date-field-icon { font-size: 1.05rem; color: var(--ink-300); flex-shrink: 0; line-height: 1; }
.rex-filter-date-field .rex-filter-date-field-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-400); white-space: nowrap; flex-shrink: 0; max-width: 7.5rem; line-height: 1.2;
}
.rex-filter-date-field .rex-filter-input-month {
    border: none; padding: 0 2px 0 0; margin: 0; min-width: 0; flex: 1 1 auto;
    background: transparent; font-family: inherit; font-size: 13px;
    color: var(--ink-900); border-radius: 0; cursor: pointer;
}
.rex-filter-date-field .rex-filter-input-month:focus { outline: none; }

/* Ensure [hidden] always wins regardless of display rules on specific classes */
[hidden] { display: none !important; }

/* REX Detail Modal */
#modal-rex-detail { display: none; }
#modal-rex-detail.open { display: flex; }
.rex-detail-box {
  background: white;
  border-radius: var(--r-md);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  /* Plus d'air sous la croix et à droite pour ne pas coller au bloc « Publié par » */
  padding: 42px 52px 28px 32px;
  position: relative;
  box-shadow: var(--sh-3);
}

.rex-detail-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
/* REX detail: the header lives INSIDE .modal-head (single title, no
   duplicate). The divider spans the full head incl. the close button. */
.rex-detail-modal-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.rex-detail-modal-head .cab-logo-large,
.rex-detail-modal-head .cab-initial-large {
  width: 48px; height: 48px;
}
.rex-detail-modal-head .cab-initial-large { font-size: 20px; }
.rex-detail-header .cab-logo-large {
  width: 64px; height: 64px; border-radius: var(--r-md);
  object-fit: contain; background: #f1f5f9;
  display: block;
  flex-shrink: 0;
  align-self: center;
}
.rex-detail-header .cab-initial-large {
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: #e8f0fe; display: flex; align-items: center;
  justify-content: center; font-size: 26px; font-weight: 800; color: #1a73e8;
  flex-shrink: 0;
  align-self: center;
}
.rex-detail-header-inner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.rex-detail-header .cab-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.rex-detail-header .rex-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rex-detail-header .rex-detail-header-col-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.rex-detail-header .rex-author { font-size: 0.72rem; color: #94a3b8; margin: 0; }
/* Date + "Publié par <nom>" on the same line, right after the title row. */
.rex-detail-meta-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; min-width: 0;
}
.rex-detail-meta-sep { color: #cbd5e1; font-size: 0.72rem; }
.rex-detail-publisher-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--text-muted); min-width: 0;
}
.rex-detail-header .rex-detail-publisher {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  max-width: 42%;
  word-break: break-word;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.rex-detail-header .rex-detail-publisher-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.rex-detail-header .rex-detail-publisher-name {
  font-weight: 600;
  color: var(--text-secondary);
}
.rex-section-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: #94a3b8; margin-bottom: 10px;
}
.rex-accordion { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.rex-round-card { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rex-round-card.open { border-color: #3b82f6; }
.rex-round-header {
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; background: #f8fafc;
}
.rex-round-card.open .rex-round-header { background: #eff6ff; }
.rex-round-header .round-type-badge {
  font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
  border-radius: var(--r-sm); color: white; flex-shrink: 0;
}
.rex-round-header .round-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.rex-round-header .round-interviewer { font-size: 0.72rem; color: #64748b; font-style: italic; flex-shrink: 0; }
.rex-round-header .round-date { font-size: 0.72rem; color: #94a3b8; flex-shrink: 0; }
.rex-round-header .round-chevron { font-size: 14px; flex-shrink: 0; color: #94a3b8; }
.rex-round-card.open .rex-round-header .round-chevron { color: #3b82f6; }
.rex-round-body { display: none; padding: 14px; border-top: 1px solid #e2e8f0; }
.rex-round-card.open .rex-round-body { display: block; }
/* Flat round list (no accordion): name line + the PDF row, always visible */
.rex-flat-round { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.rex-flat-round__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rex-flat-round__head .round-type-badge {
  font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
  border-radius: var(--r-sm); color: var(--white); flex-shrink: 0;
}
.rex-flat-round__head .round-interviewer { font-size: 0.72rem; color: var(--text-secondary, #64748b); font-style: italic; }
.rex-flat-round__head .round-date { font-size: 0.72rem; color: var(--text-muted, #94a3b8); margin-left: auto; }
.rex-flat-round__empty { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted, #94a3b8); }
.rex-flat-round .rex-file-row { margin-top: 10px; }
.rex-round-body p { font-size: 0.8rem; color: #334155; line-height: 1.7; margin: 0 0 10px; white-space: pre-wrap; }
.rex-round-body .file-link {
  font-size: 0.72rem; color: #3b82f6; background: #eff6ff;
  padding: 2px 8px; border-radius: var(--r-sm); cursor: pointer;
  text-decoration: none; display: inline-block;
}
.rex-file-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 10px; background: var(--bg-soft, var(--paper-2));
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.rex-file-row > .material-icons { font-size: 18px; color: var(--text-secondary, #475569); flex: 0 0 auto; }
.rex-file-row__name {
  font-size: 0.8rem; color: var(--text-primary); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rex-file-row .btn { margin-left: auto; flex: 0 0 auto; }
.rex-detail-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--border);
}
/* .rex-detail-footer .btn-pdf, .btn-edit, .btn-delete removed — using canonical .btn system */

/* ── Onglets et panneaux verrouilles (visiteur sans compte) ──────────────
   Meme logique que les modules cadenasses de la sidebar : l'onglet reste
   visible et nomme, il dit ce qu'il contient et mene a l'inscription.
   Le panneau REMPLACE le contenu reel (fragments/community_locked_panel.html),
   il ne le masque pas : aucune liste, aucun filtre, aucun appel reseau. */
.community-tab.is-locked { opacity: .62; }
.community-tab.is-locked:hover { opacity: 1; }
.community-tab__lock { font-size: 13px !important; margin-left: 4px; vertical-align: -2px; }

.community-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    max-width: 520px;
    margin: 34px auto;
    padding: 32px 26px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg, 18px);
    background: var(--paper-2);
}
.community-locked__icon {
    font-size: 30px !important;
    color: var(--accent);
    background: var(--accent-soft, #eef3fd);
    border-radius: 50%;
    padding: 12px;
}
.community-locked__title { margin: 4px 0 0; font-size: 19px; color: var(--ink-900); }
.community-locked__lead { margin: 0; color: var(--ink-500); font-size: 14px; line-height: 1.6; }
.community-locked__points {
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.community-locked__points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--ink-700, #46506a);
    font-size: 13.5px;
    line-height: 1.45;
}
.community-locked__points .material-icons { font-size: 16px; color: var(--accent); flex: none; margin-top: 1px; }
.community-locked__cta { margin-top: 8px; }
.community-locked__note { margin: 0; font-size: 12px; color: var(--ink-400, #8b93a7); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — sous 900px (phase 2).

   Le panneau de communautes ne disparait pas : il devient une bande
   horizontale entre la barre de titre et le bloc de contenu, dans
   laquelle on circule au pouce. Decision produit du 2026-09-04, prise
   sur capture. Il reste affiche MEME avec une seule communaute (cas de
   tout visiteur anonyme) : une bande qui nomme la communaute courante
   apprend au visiteur que d'autres existent, donc que son ecole peut
   avoir la sienne. Un panneau retire ne raconte rien.

   Aucun markup n'est deplace : le panneau est deja le premier enfant de
   .community-body, il suffit de passer cette rangee en colonne pour que
   la bande atterrisse au bon endroit.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   ACTE III, tache H — classes extraites des styles EN LIGNE de
   community.js et de fragments/community_modals.html (2026-09-06)

   Un `style="font-size:"` en ligne bat toute media query, quelle que soit
   sa specificite : les tailles de l'onglet REX etaient donc hors de portee
   de la tache C (mesure a 375px apres son passage : 296 elements hors
   echelle sur 528, tous ecrits en ligne par community.js).

   Chaque regle ci-dessous porte la valeur EXACTE que l'attribut `style`
   portait, dans la meme unite : le rendu a 1440px ne bouge pas d'un pixel,
   et c'est verifiable element par element. La surcharge mobile vit dans le
   bloc @media plus bas, jamais ici.

   Deux points de specificite, sinon la classe serait inerte :
   - `.badge-pending--compact` est a egalite (0,1,0) avec `.badge-pending`
     (l.931) : elle est declaree APRES, l'ordre source tranche.
   - `.cab-name.rex-detail-name` est a (0,3,0) contre (0,2,0) pour
     `.rex-detail-header .cab-name` (l.1604) : elle gagne sans dependre de
     l'ordre.
   ══════════════════════════════════════════════════════════════════════ */

/* Carte REX de la liste (community.js, buildREXCard). */
.rex-card-firm { font-size: 0.85rem; font-weight: 800; color: var(--text-primary); text-align: center; }
.rex-card-contract { font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: var(--r-md); background: #eef2f7; color: #334155; }
.rex-card-rounds { font-size: 0.72rem; color: var(--text-muted); }
.rex-card-role { margin: 5px 0 5px; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); text-align: center; }

/* Pastille « Pending » d'une carte ressource. Le meme composant se rend a
   deux tailles selon la carte : 0.65rem en ligne ici, 0.72rem (la regle de
   base) sur la carte REX. L'ecart est PRESERVE sur ordinateur — le reduire
   serait un changement bureau — et les deux se rejoignent a 10px sur
   telephone, ou elles portent le meme role. */
.badge-pending--compact { display: inline-block; font-size: 0.65rem; margin-bottom: 3px; }

/* Modale de detail d'un REX (community.js, openREXDetailModal). */
.rex-detail-header .cab-name.rex-detail-name { font-size: 1.05rem; font-weight: 800; }
.rex-detail-contract { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-md); background: #eef2f7; color: #334155; }
.rex-detail-rounds { font-size: 0.72rem; color: var(--text-muted); }
.rex-detail-role { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.rex-detail-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6366f1; margin-bottom: 3px; }
.rex-detail-section-body { font-size: 0.82rem; color: var(--text-secondary, #475569); line-height: 1.5; }
.rex-detail-empty { color: #94a3b8; font-size: 0.8rem; }

/* Sous-titres et indication des modales (fragments/community_modals.html). */
.community-modal-sub { padding: 0 28px 0; font-size: 0.76rem; color: var(--text-secondary, #64748b); margin: 0 0 4px; }
.join-modal-sub { padding: 0 28px 4px; font-size: 0.8rem; color: var(--text-secondary, #64748b); margin: 0; }
.rex-rounds-hint { margin: 0 0 4px; font-size: 0.71rem; color: var(--text-muted, #94a3b8); }

/* ══════════════════════════════════════════════════════════════════════
   ACTE III, tache K — panneau de filtres mobile : regles de base, HORS de
   la media query VOLONTAIREMENT.

   Meme mecanisme, a l'identique, que /firms (cabinets.css, section
   « Panneau de filtres (tache 2) ») : la recherche reste visible, tout le
   reste passe derriere un bouton « Filters » qui ouvre une feuille du bas.

   Pourquoi display:contents ICI et pas dans le bloc @media : l'enveloppe
   doit etre TRANSPARENTE a la mise en page AU-DESSUS de 900px, pour que
   ses enfants restent des enfants DIRECTS de leur conteneur d'origine
   (.filter-bar pour REX/Buddies, #tab-ressources pour les ressources),
   exactement comme avant ce chantier. La declarer DANS la media query
   donnerait a l'enveloppe le display:block par defaut d'un <div> des que
   la query ne matche plus : un niveau de boite en plus dans la ligne flex,
   qui casserait la barre bureau SANS qu'aucun test mobile ne le voie.

   Le bouton est masque ici par symetrie : rien a ouvrir tant que
   l'enveloppe est transparente.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   BARRE DE FILTRES — une seule mise en page (2026-09-08)

   Ces regles vivaient dans le palier 900px, et leur inverse vivait ici :
   `.community-filters-panel` et `#resource-filters-row` en `display:
   contents`, `.community-filters-toggle` en `display: none`, pour que les
   filtres s'etalent dans la page au-dessus de 900px. Deux mises en page pour
   une seule question, sur TROIS panneaux (Resources, REX, Buddies), donc six
   endroits a verifier a chaque filtre ajoute.

   Le bouton « Filters » existe desormais partout et les panneaux aussi,
   exactement comme sur /firms. Les filtres CHOISIS se lisent sous la rangee
   en pastilles retirables (.ds-filter-chips, design_system.html), sur
   ordinateur uniquement.

   Ce qui depend encore de la largeur, et c'est legitime : la POSITION du
   panneau (feuille du bas au doigt, popover ancre a la rangee a la souris)
   et le plancher tactile du bouton. Le CONTENU du panneau est le meme
   partout.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Les filtres passent derriere un bouton ──────────────────────
   Mecanisme repris a l'identique de /firms (cabinets.css, section
   « Panneau de filtres (tache 2) »). Les regles de base
   (display:contents sur l'enveloppe, display:none sur le bouton) sont
   HORS de ce bloc, voir leur commentaire juste au-dessus : ce bloc ne
   fait que les RENVERSER sous 900px.

   Aucun id n'est renomme : filterResources(), filterREX() et
   filterBuddies() lisent exactement les memes champs qu'avant, seul
   leur conteneur visuel change. */
.community-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-500);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}
/* Etat ouvert : meme traitement que #firmFiltersToggle[aria-expanded]
   et que .fdd.open .fdd-btn — le bouton se distingue par l'accent
   pendant que sa feuille est affichee. */
.community-filters-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}
.community-filters-toggle__badge {
    /* Masquee par defaut (pas de « 0 » litteral) : .is-active posee par
       community.js des qu'un filtre est actif — jamais [hidden], meme
       motif que la feuille ci-dessous. 10px, le palier PASTILLE de
       l'echelle de cet acte (Firms dit 11px dans son propre fichier). */
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.community-filters-toggle__badge.is-active { display: inline-flex; }

/* Rangee « recherche + Filters » de l'onglet Ressources. La marge de
   10px passe de la recherche (ou elle etait ecrite en ligne) a la
   rangee : dans une ligne flex, la marge basse d'un item decalerait le
   bouton voisin de 5px vers le haut. */
#resource-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
/* flex-basis 0 et non auto : l'algorithme de retour a la ligne du
   flexbox tranche AVANT tout retrecissement, sur la taille de CONTENU
   de l'item. Avec une base auto, la recherche reclame sa largeur
   naturelle et pousse le bouton sur une 2e ligne (mesure : toggle a
   y=254 au lieu de y=206). Meme lecon que .cabinet-name sur /firms. */
#resource-filters-row > #resource-search-bar {
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
}

/* Panneau : masque par defaut, revele par .open — display:none puis
   display:flex, JAMAIS [hidden] (qui perd contre toute regle display d'un
   ancetre ou de soi-meme portant une classe, repere 6 fois dans ce depot).

   La regle de BASE est la ligne DANS la barre, pas la feuille du bas : c'est
   la forme qui ne demande aucun JS. Le panneau est un enfant ordinaire de son
   conteneur (#resource-filters-row pour Resources, .filter-bar pour REX et
   Buddies, tous deux en flex-wrap) et prend sa propre ligne par
   flex-basis:100%, exactement le mecanisme de .ds-filter-chips
   (design_system.html). La barre grandit a l'ouverture.

   ⚠️ A relire avant de retoucher : le popover d'avant etait en
   `position: fixed` parce que `.community-tabs-block`, a `overflow: hidden`,
   arretait sa boite 61px au-dessus du bas du panneau. C'est un ROGNAGE,
   qu'aucun z-index ne repare. Un enfant DANS LE FLUX fait grandir la boite de
   son ancetre au lieu de s'y faire couper : le probleme ne se pose plus. Ne
   jamais repasser ce panneau en `position: absolute` sans avoir relu ca. */
.community-filters-panel {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    flex-basis: 100%;
    min-width: 0;
    gap: 10px;
}
.community-filters-panel.open { display: flex; }

/* La rangee de pastilles de categorie s'etale sur toute la feuille.
   Les autres controles (selects, favoris, dispos) s'etirent d'eux-memes
   par l'align-items:stretch par defaut d'une colonne flex. */
.community-filters-panel > .resource-type-filters { width: 100%; }

/* Le glyphe du bouton, hors du bloc mobile a dessein. Material Icons se rend
   a 24px par defaut, deux fois son libelle : 17px le remet a l'echelle du
   bouton (meme valeur que #firmFiltersToggle .material-icons). La regle vit
   ICI et non dans le bloc mobile parce que community.css tient un invariant
   verifie par test — aucune taille de GLYPHE dans le bloc mobile, elles ne
   font pas partie de l'echelle typographique et un palier ne s'applique pas
   a un pictogramme. Poser la regle en base ne change rien au bureau : le
   bouton y est display:none, il n'a pas de boite. */
.community-filters-toggle .material-icons { font-size: 17px; line-height: 1; }

/* Sortie du style EN LIGNE de #resource-search-bar (recette de la tache H :
   un `style=` bat toute media query). Valeur inchangee, donc rendu bureau
   inchange ; le bloc mobile peut desormais la neutraliser puisque la marge
   passe sur la rangee elle-meme. community.js n'ecrit QUE .style.display
   sur cet element (renderResources, showSectionDisabled), jamais sa marge. */
#resource-search-bar { margin-bottom: 10px; }

/* Le +2px de compensation qui vivait ici a ete RETIRE le 2026-09-08 avec sa
   cause. Il rattrapait l'ecart de gouttiere (10px contre 12px) du temps ou
   `display: contents` faisait de ce panneau un flex-item de .filter-bar sur
   ordinateur. Le panneau est desormais, a TOUTES les largeurs, un enfant de
   la colonne #buddy-filters-panel, qui porte son propre gap regulier : la
   compensation n'a plus rien a compenser, et l'annulation qui vivait dans le
   bloc mobile (`#buddy-filters-panel > #buddy-avail-filter-panel
   { margin-top: 0 }`) n'a plus rien a annuler. Les deux sont parties
   ensemble plutot que de se neutraliser l'une l'autre. */
#buddy-avail-filter-panel { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   BUREAU — le pendant de la bande mobile : le panneau suit son contenu et
   reste visible pendant que la page defile (2026-09-07)

   Mesure a 1440x900 sur /community avant ce bloc : .community-left-panel
   rend 200px de large sur 5793px de HAUT pour trois enfants (Public, Join,
   une communaute). .community-body est une rangee flex dont la hauteur est
   dictee par son enfant le plus haut (.community-content et ses 81
   ressources) et le panneau s'y etire. La bande mobile a recu son
   traitement des la phase 2 du chantier mobile ; le bureau, jamais.

   POURQUOI flex-start ET PAS LE SIMPLE RETRAIT DU stretch : `stretch` est
   deja la valeur PAR DEFAUT d'un item flex (align-items du parent vaut
   stretch). Retirer la declaration l.31 ne changerait donc rien du tout,
   il faut poser explicitement flex-start.

   PAS DE position:sticky, ET C'EST MESURE : `sticky` se resout contre le
   plus PROCHE ancetre scrollport, et `overflow:auto` en cree un meme quand
   il ne deborde pas. Or #container (User_Base.html) porte `overflow-y:auto`
   avec clientHeight = scrollHeight = 5879px : il ne defile jamais, mais il
   capture quand meme le sticky, qui devient inerte. Mesure a 1440x900 sur
   une version qui le posait : apres un defilement de 700px le panneau etait
   a top:-624px, donc parti avec la page comme s'il n'y avait pas de sticky.
   Le rendre efficace demanderait de neutraliser l'overflow de #container,
   c'est-a-dire du shell partage par TOUTES les pages, pour un confort
   secondaire : refuse. Le panneau defile donc avec la page, comme avant,
   mais il ne mesure plus 5793px de haut pour trois entrees.

   POURQUOI UN BLOC min-width ET PAS UNE VALEUR DE BASE NEUTRALISEE EN
   MOBILE : le bloc mobile redeclare deja `align-self:
   stretch` et `overflow: visible` sur .community-body, mais PAS l'overflow
   de .community-layout, et il faudrait en plus y neutraliser `position` et
   `max-height`. Trois neutralisations a ne jamais oublier, contre un bloc
   qui ne peut PAS s'appliquer sous 901px. Le mobile est correct et couvert
   par des tests : on n'y touche pas.

   PAS DE max-height NON PLUS : sans sticky, plafonner le panneau a la
   hauteur de l'ecran creerait une seconde zone de defilement collee a rien,
   ou le bas d'une longue liste de communautes deviendrait plus penible a
   atteindre qu'en laissant le panneau grandir. On laisse donc la hauteur
   suivre le contenu, sans plafond.

   ADMIN : .community-layout et .community-body sont partages avec
   Admin_Community_Detail.html, dont la colonne gauche est .acd-side
   (admin-community-detail.css, hors de ce chantier). Le defaut y est le
   meme ; le corriger demanderait de toucher ce fichier.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

    /* Une seule declaration, et elle doit etre explicite : `stretch` est
       deja la valeur PAR DEFAUT d'un item flex, donc retirer la
       declaration l.31 ne changerait rien. */
    .community-left-panel { align-self: flex-start; }


    /* Meme raison que sur /firms : les 44px de la regle de base sont un
       plancher TACTILE, pas un dessin. A la souris le bouton s'aligne sur le
       champ de recherche qu'il cotoie (38px, design_system.html). */
    .community-filters-toggle { min-height: 38px; }

    /* Meme raison que #filterReset sur /firms : depuis que le panneau est
       une ligne de la barre, son bouton de remise a zero et le "Clear all"
       de la ligne de pastilles sont visibles ENSEMBLE pour la meme action.
       Celui du panneau part, la ligne de pastilles garde le sien.
       Resources n'a jamais eu de bouton de remise a zero, donc seuls REX et
       Buddies sont concernes — d'ou le selecteur par classe et non par id.
       Contrairement a /firms, le "Clear all" des pastilles appelle ici
       resetREXFilters()/resetBuddyFilters() directement et non le bouton :
       le masquer ne coupe donc aucun mecanisme. Au doigt il reste affiche,
       les pastilles y sont masquees. */
    .community-filters-panel > .spacer { display: none; }
}

@media (max-width: 900px) {

    /* Feuille du bas plutot qu'un plein ecran : ca laisse une zone visible
       AU-DESSUS (recherche, bouton Filters, haut de la page) sur laquelle
       taper pour fermer — un panneau plein ecran n'aurait plus aucun
       « dehors » a cliquer. C'est la SEULE chose du panneau qui depende
       vraiment de la largeur ; display, .open et gap viennent des regles de
       base et ne sont pas redits.
       `flex-wrap: nowrap` n'est pas decoratif : la base enroule, et une
       colonne enroulee sous `max-height: 75vh` repartirait les filtres en
       plusieurs colonnes des que la feuille touche son plafond. */
    .community-filters-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10200;
        max-height: 75vh;
        overflow-y: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 16px;
        background: var(--white);
        border-top: 1px solid var(--line);
        border-radius: 16px 16px 0 0;
        box-shadow: var(--sh-3);
    }


    /* Carte de ressource : le bouton d'ouverture remonte sur la ligne du logo
       et du titre, tout a droite. Mesure a 375px avant : carte 186,7px dont
       34px de pied qui ne portait QUE ce bouton, la date etant vide sur le
       catalogue public. Une rangee entiere depensee pour un bouton de 34px.

       .community-card__footer n'existe QUE sur les cartes de ressources
       (une seule occurrence dans community.js) : REX et Buddies n'en ont pas.
       Le :has() borne donc la bascule en grille a ces cartes-la, sans avoir a
       scoper par conteneur de liste.

       display:contents sur le pied fait de ses deux enfants des elements de
       grille a part entiere, ce qui permet de placer le bouton en (1,2) et la
       date en (2,1) sans toucher au markup -- meme motif que .cd-hero-right
       sur la fiche cabinet et #firmFiltersPanel sur l'annuaire.
       Le bouton est vise par :not(.community-card__meta) et non par
       :last-child : la date est un <span> elle aussi, et un futur troisieme
       enfant reprendrait silencieusement la place du bouton. */
    .community-card:has(.community-card__footer) {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 10px;
        align-items: start;
    }
    .community-card:has(.community-card__footer) .community-card__top {
        grid-column: 1;
        grid-row: 1;
    }
    .community-card__footer { display: contents; }
    .community-card__footer > .community-card__meta {
        grid-column: 1;
        grid-row: 2;
    }
    .community-card__footer > :not(.community-card__meta) {
        grid-column: 2;
        grid-row: 1;
    }
    /* La barre d'actions reprend toute la largeur sous le reste. Elle est deja
       masquee quand elle est vide (regle .community-card__actionbar
       :not(:has(*)), hors media query) : un anonyme n'a donc que la rangee 1. */
    .community-card:has(.community-card__footer) .community-card__actionbar {
        grid-column: 1 / -1;
    }
    .community-body {
        flex-direction: column;
        overflow: visible;
    }

    /* La bande perd son traitement carte (fond blanc, contour, coins,
       ombre herites de la regle bureau l.28-36) : direction produit
       d'Adrien, "trop epaisse, retirer le fond blanc" — elle doit se lire
       comme faisant partie de la page, pas comme une 3e carte flottante
       entre la barre de titre et la carte des onglets. Le padding vertical
       8px->3px suit le meme geste (la carte n'a plus besoin de respirer) ;
       l'horizontal ne change pas. Les cellules restent epinglees a 44px
       (l.1811, contrainte de test) : l'amincissement vient du fond et du
       padding retires, jamais des cibles tactiles. */
    .community-left-panel {
        width: auto;
        align-self: stretch;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 5px 10px;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    /* Le trait separait deux blocs empiles ; en rangee il n'a plus de sens. */
    .community-left-panel__divider { display: none; }

    .community-left-panel__public,
    .community-left-panel__scroll {
        flex: 0 0 auto;
        min-height: 0;
    }

    /* overflow-x:hidden (l.55) rognerait les pastilles dans la rangee. */
    .community-left-panel__scroll { overflow: visible; }

    .community-left-panel__cell-list {
        flex-direction: row;
        gap: 8px;
    }

    /* .community-left-panel__public (l.75) et .community-left-panel__cell-list
       (l.62) portent chacun padding:0 14px, pense pour la version bureau ou
       les rangees sont EMPILEES : ce padding lateral est alors la seule
       gouttiere, jamais additionne a rien d'autre. En rangee HORIZONTALE il
       s'ajoute au gap de 8px de .community-left-panel (l.1793) entre Public
       et la 1re communaute : 14px (padding public) + 8px (gap) + 14px
       (padding cell-list) = 36px, contre 8px partout ailleurs dans la bande.
       Le retrait de bord gauche de la bande est deja assure par le padding
       de .community-left-panel elle-meme (l.1794) : le neutraliser ici ne
       colle donc pas la puce Public contre le bord de l'ecran. */
    .community-left-panel__public,
    .community-left-panel__cell-list {
        padding-left: 0;
        padding-right: 0;
    }

    .community-left-panel__section-title { display: none; }

    /* Les pastilles se lisent plus legeres une fois la carte retiree :
       l'inactive perd son propre fond plein (var(--card-bg), l.109) et se
       fond dans la bande transparente ; seule l'active garde un fond, via
       la meme teinte accent que .resource-filter-pill.active (l.1487) —
       pas de nouvelle couleur. hover/focus/active/disabled (l.130-153) ne
       sont pas touches : ils utilisent deja cette teinte ou sont hors
       media query, donc corrects tels quels.

       Tache K : la puce est PEINTE a 34px et non plus a 44, et la bande
       passe de 50 a 44px. Sa cible tactile reste a 44px REELS, mesures par
       elementFromPoint — pas calcules : la classe ds-tap-44 (Community.html,
       regle du socle) etend la zone de 6px en haut et en bas, mais la bande
       est un scroller (overflow-x:auto impose overflow-y:hidden) qui rogne
       ce debord a son propre padding. C'est pour ca que le padding de la
       bande passe de 3 a 5px ci-dessus : 34 peints + 2x5 rognes = 44 tout
       juste, et la bande fait exactement la hauteur de sa cible. Avec 3px
       la mesure donnait 40. Le padding vertical de la PUCE fait le reste du
       travail : a 9px (regle de base l.104) sa hauteur NATURELLE vaut deja
       40px, sous laquelle aucun min-height plus petit n'a d'effet. */
    .community-public-cell {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
        scroll-snap-align: start;
        background: transparent;
    }

    /* Join est le 1er enfant DOM de .community-left-panel__cell-list (avant
       les communautes privees), pour l'empilement vertical du bureau. En
       rangee ca le coince entre deux communautes qu'on parcourt au pouce :
       order le pousse apres toutes les puces (restees a l'order 0 implicite),
       sans toucher au DOM ni a l'ordre du bureau. */
    .community-left-panel__join {
        width: auto;
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
        order: 1;
    }

    /* Join peut atterrir hors du viewport (bande a 355px, Join mesure a
       x=386 avec 2 communautes) sans aucun signe qu'il y a quelque chose a
       droite : pas d'ascenseur au repos sur iOS, pas de chevron. Fondu de
       bord AUTO-MASQUANT, en 2 couches d'arriere-plan sur le conteneur qui
       scrolle (.community-left-panel lui-meme) : une couche "cache" suit le
       CONTENU (background-attachment: local, son ancre 100% est le bord
       droit de tout le contenu scrollable) et devient opaque juste avant ce
       bord ; une couche "ombre" reste fixee au bord VISIBLE du conteneur
       (background-attachment: scroll). Quand rien ne deborde, les deux
       bords coincident et la couche cache (plus large que l'ombre) la
       masque entierement — le fondu disparait de lui-meme, sans mesurer de
       largeur en JS. C'est de la peinture d'arriere-plan, jamais un
       element : rien a mettre en pointer-events:none, un tap traverse
       jusqu'a la puce peinte par-dessus.

       La bande n'a plus de fond a elle (l.1788, retrait de la carte) : la
       couche "cache" doit donc se fondre dans le VRAI fond de page
       (html/body, User_Base.html:111 -> --paper-2) et non plus dans
       --card-bg/blanc, sinon elle redessinerait un rectangle blanc a
       l'ancien endroit de la carte. Pas de background-color ici : le
       "background: none" de la regle l.1788 le laisse a transparent, et
       cette regle-ci ne redeclare que l'image. */
    .community-left-panel {
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper-2) 55%),
            linear-gradient(to right, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.16));
        background-repeat: no-repeat;
        background-position: 100% 0, 100% 0;
        background-size: 30px 100%, 10px 100%;
        background-attachment: local, scroll;
    }

    /* Onglets : sans overflow-x, REX et Buddies debordaient hors ecran sans
       aucun moyen de les atteindre. .community-tabs-block garde son
       overflow:hidden (il clippe ses coins arrondis) : le defilement a lieu
       DANS .community-tabs, qui tient dans la largeur du bloc. */
    .community-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px;
        /* padding-bottom: defaut trouve par la tache K, corrige ici sur
           demande d'Adrien. .community-tab porte, en regle de BASE (hors
           media query, ligne ~240), `margin-bottom: -1.5px` : un vieux
           motif desktop qui fait deborder le border-box du .community-tab
           de 1.5px SOUS son propre margin-box, pour que la bordure active
           de l'onglet (2px, .community-tab.active) vienne recouvrir
           exactement la bordure grise persistante du conteneur
           (.community-tabs, border-bottom:1.5px) au lieu de dessiner deux
           traits l'un sous l'autre.
           Sur ordinateur ce debordement ne pose aucun probleme :
           .community-tabs n'a pas d'overflow propre, seul son parent
           .community-tabs-block (overflow:hidden) coupe le debordement,
           bien plus bas dans l'arbre. Le probleme est NE quand .community-
           tabs devient lui-meme un scroller horizontal sous 900px
           (overflow-x:auto impose overflow-y:hidden, regle ci-dessus) :
           sa hauteur intrinseque colle desormais au margin-box du plus
           haut de ses items flex (42.5px, a cause du -1.5px), et son
           PROPRE overflow-y:hidden coupe alors les 1.5px de border-box de
           .community-tab qui depassaient ce margin-box -- exactement le
           1.5px qui portait la bordure active. Mesure par elementFromPoint
           (tache K) : 44px peints, 42.5px de zone de tap REELLE.
           Fix : donner a .community-tabs 2px de padding-bottom (marge de
           securite de 0.5px au-dela du 1.5px strictement necessaire, meme
           logique que les autres marges de securite de ce fichier) fait
           grandir sa hauteur intrinseque d'autant, donc son overflow-y
           coupe desormais 2px PLUS BAS que le bas du border-box de
           .community-tab (44px) : plus aucun rognage. Le conteneur pousse
           sa propre bordure grise de 2px vers le bas avec ce padding, mais
           celle-ci reste un simple trait de separation continu sous toute
           la largeur de la rangee -- rien a son sujet ne depend de sa
           position exacte en Y, seulement de sa presence. */
        padding-bottom: 2px;
    }

    /* Tache K, resultat NEGATIF conserve pour qu'il ne soit pas retente :
       l'onglet ne peut PAS etre peint sous 44px. .ds-tap-44 etend sa cible
       par un ::after de -6px, mais .community-tabs est un scroller
       (overflow-x:auto impose overflow-y:hidden) et son padding vertical
       vaut 0 : le ::after est donc integralement rogne. Mesure a 375px
       avec un onglet peint a 36px : tap = 35px, PIRE que le peint. Une
       cible tactile ne peut jamais deborder d'un ancetre a overflow
       hidden, donc la rangee ne peut pas descendre sous la hauteur de sa
       cible. Rendre du padding au scroller rendrait a la rangee tout ce
       que l'onglet aurait perdu : gain nul par construction. */
    .community-tab {
        flex: 0 0 auto;
        min-height: 44px;
        scroll-snap-align: start;
    }

    .community-tab-panel { padding: 16px 12px; }

    /* Champs a 16px minimum : sous ce seuil Safari iOS zoome a chaque focus
       et la mise en page saute. Cette liste couvre les champs texte/select/
       textarea des barres de filtre principales et des panneaux d'onglet,
       a 13px ou 0.84rem — PAS toute la page : les heures du filtre buddy et
       le mois du filtre REX, plus petits, sont a part juste en dessous, et
       les 4 modales d'ecriture ont leur propre regle en dessous de ca. */
    .filter-bar__search > input,
    .filter-bar__select,
    .community-tab-panel input[type="text"],
    .community-tab-panel input[type="search"],
    .community-tab-panel select,
    .community-tab-panel textarea { font-size: 16px; }

    /* Meme raisonnement conteneur que les modales ci-dessous, pour deux
       champs de barre de filtre EN PAGE que la liste ci-dessus ne couvre
       pas : les heures du filtre buddy (#buddy-filter-days, 14 <input
       type="time">, community_content.html:188-231, mesurees a 10.4px) et
       le mois du filtre REX (.rex-filter-date-field, 1 <input
       type="month">, community_content.html:122, mesure a 13px). Distinct
       de #buddy-days (l.785) : ce dernier est le formulaire de la MODALE
       Poster un buddy (des <select>, deja couvert par la regle modale plus
       bas) ; #buddy-filter-days est le filtre EN PAGE (des <input
       type="time">), une paire d'ids differente pour la meme structure de
       jours.
       !important necessaire : #buddy-filter-days .buddy-day-times
       input[type="time"] (l.777) porte un selecteur ID + classe + attribut,
       qui bat cette regle de conteneur sans lui — meme raison de
       specificite que #buddy-days documentee juste en dessous. */
    :is(#buddy-filter-days, .rex-filter-date-field)
        :is(input, select, textarea) { font-size: 16px !important; }

    /* Meme regle, mais pour les 4 modales d'ecriture (partage ressource/REX,
       annonce buddy, rejoindre une communaute) : une PREMIERE liste de
       classes avait rate .resource-form-textarea (#resource-desc, 13.44px
       pour un candidat connecte qui ouvre reellement la modale) et n'aurait
       de toute facon jamais couvert les 11 champs sans classe du tout
       (#buddy-level, #buddy-message, #buddy-contact-type,
       #buddy-contact-value... et les <select> buddy-time-from/to generes en
       JS). Une liste de classes est structurellement fragile : cibler les 4
       conteneurs de modale couvre tout champ present ou futur, quelle que
       soit sa classe — y compris les futurs champs qu'on oubliera de
       classer.
       !important necessaire : #buddy-days .buddy-day-times select.buddy-time-from/to
       (l.785) porte un selecteur ID + 2 classes (specificite 1,2,1), qui bat
       cette regle de conteneur (0,1,1) sans lui — champ atteint des qu'un
       jour de dispo est coche, mesure a 10.4px en navigateur sans ce
       correctif. Precedent deja dans ce fichier : .community-tab__lock et
       .community-locked__icon forcent aussi leur font-size en !important. */
    :is(.resource-modal-overlay, .rex-modal-overlay, .buddy-modal-overlay, .join-modal-overlay)
        :is(input, select, textarea) { font-size: 16px !important; }

    /* Le plancher de 220px (design_system.html:302) deborde tout conteneur
       plus etroit, wrap ou pas. */
    .filter-bar__search { min-width: 0; flex: 1 1 100%; }

    /* Les pastilles de categorie restent VISIBLES et ne passent pas derriere
       un bouton : sur un catalogue, ce sont elles qui donnent envie de
       parcourir. Elles savent deja passer a la ligne (l.1469). */
    .resource-type-filters { row-gap: 8px; }

    /* Pastilles ramenees a 34px : decision produit explicite d'Adrien, prise
       en testant la page sur son propre telephone (194px de filtres avant
       le premier resultat, sur un catalogue de 81 ressources). Il a choisi
       cette option parmi 3 propositions, en connaissance de cause : 34px
       est SOUS le seuil tactile recommande de 44px pour ce controle precis.
       Assume, pas un oubli — ne pas remettre min-height:44px ici, et ne pas
       la faire remonter sans repasser par lui. La regle desktop (height:38px,
       l.1478) doit etre reecrite en `height` (pas `min-height`, qui perdrait
       contre elle) pour gagner la cascade. */
    .resource-filter-pill {
        height: 34px;
        padding: 0 10px;
    }

    /* Harmonisation typographique de la rangee de filtres, remontee par
       Adrien depuis son telephone : le select Level (community_content.
       html:61), les selects REX (cabinet/contrat/rounds) et le select
       Buddies (niveau) doivent se lire comme la MEME famille de controles
       que .resource-filter-pill — meme font-size, meme font-weight, meme
       hauteur (13px/600/34px : la valeur de la pastille .active, "All"
       etant active par defaut au chargement, donc l'etat que la rangee
       affiche le plus souvent).

       Ca defait PARTIELLEMENT le garde-fou anti-zoom iOS juste en dessous
       (l.1926) : sous 16px, Safari iOS zoome au focus d'un champ et la
       mise en page saute. Redescendre un SELECT a 13px reintroduit ce
       risque, specifiquement pour les selects vises ici. Compromis
       produit ASSUME (decision d'Adrien, prise en connaissance de
       cause) : la coherence visuelle de la rangee prime, tant qu'aucun
       champ de VRAIE saisie de texte n'est touche — la regle 16px
       !important des 4 modales et de #buddy-filter-days/
       .rex-filter-date-field juste en dessous reste INTACTE, elle. Si un
       zoom est constate sur un vrai iPhone en ouvrant l'un de ces
       selects, le correctif est de remonter CE select, pas de
       redescendre les champs texte.

       Padding vertical recalcule pour garder la meme boite de contenu
       que la version bureau (38px - 2*9px = 20px ; ici 34px - 2*7px =
       20px). Scope par panneau (pas .filter-bar__select tout court) pour
       NE PAS toucher le select de l'onglet Membres (#member-filter-status,
       admin-only, hors perimetre de cette demande) : il reste a
       38px/16px/400, ce qui confirme au passage que la regle anti-zoom
       generale l.1926 sert encore a quelqu'un. */
    .resource-type-filters .filter-bar__select,
    #rex-layout .filter-bar__select,
    #buddies-layout .filter-bar__select {
        height: 34px;
        padding: 7px 28px 7px 10px;
        font-size: 13px;
        font-weight: 600;
    }

    /* Meme harmonisation pour le bouton "My favorites" (.filter-favorites,
       canonique dans design_system.html, partage par Resources/REX/
       Buddies dans CE fichier) : ni input ni select, donc aucun risque de
       zoom iOS a gerer ici — seulement la hauteur (38px -> 34px) et le
       poids (500 -> 600) pour matcher la pastille reference. Pas besoin
       de le scoper par panneau : .filter-favorites n'apparait que sur ces
       3 rangees dans ce fichier (l'onglet Membres n'en a pas). */
    .filter-favorites {
        height: 34px;
        font-size: 13px;
        font-weight: 600;
    }

    /* ═══ ACTE III — echelle typographique (2026-09-06), telephone seul ═══
       Consigne d'Adrien : 10px pastille, 12px texte ; le Dashboard fait
       foi. Paliers derives : 13px bouton, 14px titre de carte / de ligne /
       d'onglet, 15px titre de section, 18px titre de modale (arbitrage 1
       du plan). Rien entre ces paliers.

       Ce fichier n'exprimait presque AUCUNE de ses tailles en pixels : la
       mesure WebKit a 375 et 402px (texte rendu, icones exclues) a releve
       10.88, 11.2, 11.36, 11.52, 11.68, 12.16, 12.48, 12.8, 13.12, 13.44,
       13.6, 13.92, 14.08, 16 et 16.8px -- pas une seule sur un palier. Une
       valeur en rem qui "arrondit" au bon palier n'est PAS sur ce palier :
       le navigateur rend bien 13.6px, pas 14 (meme lecon que la tache B,
       dont la sonde rejette desormais les valeurs fractionnaires).

       Les paliers sont par ROLE, pas un menu libre. 13px est le palier des
       BOUTONS : une legende de formulaire ou une prose d'etat vide rendue
       a 13px porte une taille de bouton (arbitrage 2 du plan).

       Rien au-dessus de 900px ne bouge : toutes les regles de base gardent
       leurs valeurs en rem, un test les verrouille une par une.

       ⚠ Ce bloc est partage avec /admin/communities/{id}, qui charge le
       meme fichier et les memes fragments : les cartes, onglets et modales
       de la vue admin suivent donc la meme echelle sur telephone. Effet de
       bord voulu (memes composants), pas un debordement de perimetre : ce
       bloc n'ajoute AUCUNE regle qui ne servirait que la page admin. */

    /* Titres d'onglet et de puce -> 14px. .community-tab est litteralement
       le "titre d'onglet" de l'echelle ; .community-public-cell nomme une
       communaute dans la bande, exactement le role que la tache B a pose a
       14px sur .crm-ws-cell (le nom d'une campagne dans la bande CRM, dont
       le commentaire dit lui-meme s'inspirer de cette bande-ci). */
    .community-public-cell { font-size: 14px; }
    .community-tab { font-size: 14px; }

    /* Titre de section -> 15px. "Resources" / "Case Interview Feedback" /
       "Buddies" ouvrent le contenu de l'onglet : c'est un titre de SECTION,
       pas le titre de la page (celui-ci est recopie dans #mobile-topbar par
       mobile-nav.js et se rend a 15px, hors de ce fichier). Le laisser a
       16px le posait au-dessus du titre de la page qui le contient. */
    .community-items-header h3 { font-size: 15px; }

    /* Cartes de liste (ressources, REX, buddies) : le nom qui identifie
       l'element -> 14px, tout le reste du corps -> 12px. */
    .community-card__title { font-size: 14px; }
    .buddy-card__name { font-size: 14px; }
    .community-card__desc,
    .community-card__meta,
    .community-card__rex-footer-author,
    .buddy-card__message,
    .forum-comment__content { font-size: 12px; }

    /* Etiquette de section en capitales au-dessus d'une grille de cartes
       ("CASEBOOKS", "GUIDES") : du TEXTE, pas un titre de section — meme
       role et meme traitement que .crm-ws-archived > summary (tache B) et
       que .rex-section-label / .cd-section-title (fiche cabinet). */
    .resource-section__title { font-size: 12px; }

    /* Prose d'un etat vide -> 12px (arbitrage 2 du plan : 13px est le
       palier des boutons, une phrase qui explique qu'une liste est vide
       n'en est pas un). .community-empty etait a 14.08px, la taille d'un
       titre de carte. */
    .community-empty { font-size: 12px; }

    /* Pastilles -> 10px. Les quatre portent la forme complete que le plan
       decrit : capsule au fond teinte, border-radius eleve, padding
       horizontal, line-height 1. .buddy-contact-link est declaree ici
       CONTRE le releve du plan, qui la rangeait dans le texte : ses
       declarations sont mot pour mot celles de .buddy-day-pill (meme
       font-size, meme poids, meme padding, meme radius, meme fond, meme
       min-height) et les deux se cotoient dans la meme carte — deux
       capsules identiques ne peuvent pas recevoir deux tailles. */
    .res-chip,
    .badge-pending,
    .buddy-level-badge,
    .buddy-contact-link,
    .buddy-day-pill { font-size: 11px; }

    /* Le coeur de favori et le coeur de like sont des BOUTONS dont tout le
       texte est leur compteur : 13px, le palier des boutons (arbitrage 4 :
       dans une meme ligne, le NOM vaut 14 et l'ACTION vaut 13). Ils ne sont
       pas des pastilles — aucun fond, aucun radius, aucun padding
       horizontal, la condition premiere du plan. Au passage ils cessent de
       diverger entre eux : 12.8 pour le bouton contre 12.48 pour son propre
       compteur, dans le meme controle. */
    .community-card__fav,
    .community-card__fav-count,
    .buddy-like-btn { font-size: 13px; }

    /* Meme defaut que .community-card__fav (voir son propre commentaire,
       plus bas dans ce bloc) : `.buddy-like-btn` est aussi un `<button>`
       nu, jamais `.btn` ni `.btn--icon`, donc le `button` du socle S2 lui
       pose min-height:44px sous 900px sans qu'aucune regle ne le
       contredise avant celle-ci. `.buddy-card__footer` (10px de padding-
       top + 10px de margin-top, le double de .community-card__actionbar)
       n'avait donc jamais eu besoin d'etre resserre pour rester correct :
       personne n'avait mesure ce qu'un bouton a 44px lui coutait. */
    .buddy-like-btn { min-height: 34px; }
    .buddy-card__footer { padding-top: 6px; margin-top: 4px; }

    /* Filtre de disponibilite (onglet Buddies, en page) et grille des jours
       du formulaire buddy. L'etiquette d'un jour est un bouton bascule, pas
       une pastille : meme lecture que .recurrence-day-picker .day-chip
       (tache A), laissee a 13px pour cette raison. Les deux regles de jour
       sont redites avec la MEME specificite que leur base (id + classes),
       sinon la seconde, plus specifique, gagnerait la cascade. */
    #buddy-avail-filter-panel .buddy-avail-filter-header span { font-size: 12px; }
    #buddy-avail-filter-panel .buddy-avail-filter-header button { font-size: 13px; }
    .buddy-day-row label.buddy-day-label { font-size: 13px; }
    #buddy-filter-days .buddy-day-row label.buddy-day-label,
    #buddy-days .buddy-day-row label.buddy-day-label { font-size: 13px; }
    .buddy-day-times { font-size: 12px; }
    #buddy-filter-days .buddy-time-field,
    #buddy-days .buddy-time-field { font-size: 12px; }
    #buddy-filter-days .buddy-time-field__lbl,
    #buddy-days .buddy-time-field__lbl { font-size: 12px; }

    /* "POSTED AFTER", legende du filtre de date REX : du texte. */
    .rex-filter-date-field .rex-filter-date-field-label { font-size: 12px; }

    /* Panneaux verrouilles du visiteur sans compte (onglets REX et
       Buddies). C'est la surface que le produit montre en premier a
       quelqu'un qui n'a pas de compte : son titre se rendait a 19px, plus
       gros que le titre de la page lui-meme. Il prend le palier des titres
       de section, celui de .community-items-header h3 dont il occupe
       exactement la place. */
    .community-locked__title { font-size: 15px; }
    .community-locked__lead { font-size: 12px; }
    .community-locked__points li { font-size: 12px; }

    /* Titres de modale -> 18px (arbitrage 1 du plan, deja applique par la
       tache A sur calendar.css et par la tache B sur .kb-modal h3). Les
       quatre en-tetes d'ecriture etaient a 16.8 ou 18.4px, la modale de
       detail d'une ressource a 16px : c'est un <h2>, donc un titre de
       modale, pas un titre de section. */
    .buddy-modal-header h2,
    .join-modal-header h2,
    .resource-modal-header h2,
    .rex-modal-header h2,
    .res-detail-title { font-size: 18px; }

    /* Modale « partager une ressource ». Legendes, indications et avis sont
       du texte ; .resource-type-chip est un bouton bascule Link/PDF malgre
       son nom ; .resource-file-badge est une vraie capsule. */
    .resource-form-label,
    .resource-format-hint,
    .resource-logo-hint,
    .resource-drop-zone p,
    .resource-drop-zone .drop-hint,
    .resource-file-selected,
    .resource-moderation-notice,
    .res-detail-desc { font-size: 12px; }
    .resource-type-chip { font-size: 13px; }
    .resource-file-badge { font-size: 11px; }

    /* Legende de formulaire de la modale buddy : du texte, pas un bouton
       (meme classement que .kb-fg label a la tache B). .form-group label,
       son homonyme du meme fichier, n'est PAS redite ici : son seul markup
       vit dans Admin_Community_Detail.html, une page admin hors perimetre
       de cet acte. */
    .buddy-form-group label { font-size: 12px; }

    /* Palier pastille releve de 10 a 11px le 2026-09-29 (decision d'Adrien
       apres test sur simulateur iPhone 17). Ces cinq regles valent 10px
       (ou 0.66rem = 10.56px) en base, bureau inchange ; elles sont redites
       ici pour rejoindre le palier sur telephone. Regles de base plus haut
       dans le fichier, meme specificite : celles-ci l'emportent. */
    .rex-cab-section,
    .rex-cab-initial,
    .ac-cab-section,
    .community-filters-toggle__badge,
    .author-admin-badge { font-size: 11px; }

    /* Modale « partager un REX » : combobox cabinet (port du meme
       composant que CRM_Process, dont la tache B a pose le nom a 14 et sa
       sous-ligne a 12) et ligne de PDF d'un round. .ac-cab-empty (0.75rem)
       rend exactement 12.0px ; .ac-cab-section est redite juste au-dessus. */
    .ac-cab-item { font-size: 14px; }
    .ac-cab-create { font-size: 13px; }
    .ac-cab-create-sub,
    .rex-round-pdf { font-size: 12px; }

    /* Modale « rejoindre une communaute ». */
    .join-community-name { font-size: 14px; }
    .join-modal-section-label,
    .join-community-members,
    .join-modal-empty { font-size: 12px; }
    .btn-joined-card { font-size: 13px; }

    /* Modale de detail d'un REX (lecture). .rex-author et
       .rex-detail-publisher-label gardent leur ancetre .rex-detail-header :
       leur regle de base porte cette specificite (0,2,0), une regle de
       classe seule (0,1,0) serait silencieusement inerte. */
    .rex-section-label,
    .rex-detail-meta-sep,
    .rex-detail-publisher-inline,
    .rex-flat-round__head .round-interviewer,
    .rex-flat-round__head .round-date,
    .rex-flat-round__empty,
    .rex-file-row__name { font-size: 12px; }
    .rex-detail-header .rex-author,
    .rex-detail-header .rex-detail-publisher-label { font-size: 12px; }
    .rex-flat-round__head .round-type-badge { font-size: 11px; }

    /* ── ACTE III, tache F : le bouton de fermeture etait ECRASE ──────────
       Trouve a l'oeil en ouvrant la modale par une vraie carte du catalogue
       public, pas par un releve de source. Mesure a 375px : 20x44px pour une
       largeur naturelle de 34 -- un carre de 34px rendu deux fois moins large
       que haut, sur la modale que les 81 cartes du catalogue ouvrent.

       Cause : `.res-detail-header` est une COPIE de `.modal-head` qui n'en
       porte pas le nom, donc la regle canonique du socle
       (`.modal-head > .btn--icon { flex: 0 0 auto }`) ne l'atteint pas. Le
       bouton garde alors `flex-shrink: 1`, et le titre voisin est en
       `white-space: nowrap` : sa taille de base est celle du texte ENTIER, le
       deficit de la rangee est donc enorme et sa repartition proportionnelle
       ecrase aussi le bouton, jusqu'a son minimum de contenu (le glyphe).
       Le titre, lui, a son ellipse et ne perd rien de visible.

       `flex-shrink: 0` seul suffit (aucune autre regle du depot ne pose
       flex-shrink sur cet element) et rend ses 34px au bouton, verifie.
       ⚠ Le defaut existe AUSSI a 1440px, en plus discret : 31.6px au lieu de
       34. La portee de cet acte etant le telephone, ce residu de 2.4px reste
       sur ordinateur -- consigne dans le rapport, pas oublie. */
    .res-detail-header > .btn--icon { flex-shrink: 0; }

    /* ── ACTE III, tache H : les tailles ecrites EN LIGNE ────────────────
       Ces onze classes n'existent que parce qu'un `style="font-size:"` en
       ligne bat toute media query : elles remplacent l'attribut, valeur
       pour valeur, pour que ce bloc puisse enfin les atteindre. Leur regle
       de base est juste au-dessus du bloc, a la valeur exacte d'origine.

       Classement, les memes six paliers et les memes arbitrages que la
       tache C. La carte REX : le nom du cabinet identifie la carte (14,
       titre de carte, meme valeur que .community-card__title dont il porte
       deja la taille de base) ; le type de contrat est une capsule au fond
       teinte avec padding horizontal (10) ; « 2 rounds » et le poste sont
       de la meta et de la prose (12). La modale : son titre est le nom du
       cabinet, seul titre qu'elle porte, donc 18 (arbitrage 1) ; ses
       sur-titres de section, sa prose et son etat vide sont du texte (12,
       arbitrage 2 pour l'etat vide). Les trois sous-titres de modale du
       fragment sont de la prose sous un h2 : 12. */
    .rex-card-firm { font-size: 14px; }
    .rex-card-contract,
    .rex-detail-contract,
    .badge-pending--compact { font-size: 11px; }
    .rex-card-rounds,
    .rex-card-role,
    .rex-detail-rounds,
    .rex-detail-role,
    .rex-detail-section-label,
    .rex-detail-section-body,
    .rex-detail-empty,
    .community-modal-sub,
    .join-modal-sub,
    .rex-rounds-hint { font-size: 12px; }
    .rex-detail-header .cab-name.rex-detail-name { font-size: 18px; }

    /* ══ ACTE III, tache K : le chrome de la page pesait 468px ═══════════
       Retour d'Adrien sur capture (2026-09-06) : « dans les pages des
       communaute je trouve que les filtres prennent bcp trop de place.
       Pareil pour les boutons : +add post, ressources, REX ... meme tous
       ls bouton sont trop gros pour le telephone on perds enormement de
       place verticalement. »

       Mesure a 375px sur la Demo School Community (74 REX reels), onglet
       Resources : 468px avant la premiere carte, sur un ecran de 812px.
       Plus de la moitie de l'ecran.

       Deux gestes, dans l'ordre d'impact.
       ═══════════════════════════════════════════════════════════════════ */


    /* REX et Buddies : la recherche cede la ligne au bouton au lieu de la
       prendre entiere (.filter-bar__search est en flex:1 1 100% plus haut
       dans ce bloc, pour les barres qui n'ont PAS de bouton — celle de
       l'onglet Membres, admin-only, garde ce comportement). */
    #rex-layout .filter-bar__search,
    #buddies-layout .filter-bar__search { flex: 1 1 0%; min-width: 0; }


    /* ── 2. Le chrome peint plus bas, la cible tactile reste a 44px ─────
       Technique du socle (.ds-tap-44, design_system.html S2) : un ::after
       invisible etend la zone de -6px de chaque cote, donc un element
       PEINT a 34px reste tapable sur 46px. « Trop gros » veut dire trop
       gros a l'oeil, pas trop facile a viser.

       L'extension HORIZONTALE est neutralisee sur les puces de la bande :
       elles sont voisines a 8px, donc un ::after de -6px deborde sur la
       cible d'a cote et un tap pres du bord partirait au mauvais element.
       La hauteur, elle, garde ses 12px : c'est la seule dimension qui
       manquait. Verifie par elementFromPoint, jamais par le calcul —
       c'est cette mesure, et elle seule, qui a montre que la meme
       technique ne fonctionne PAS sur les onglets (voir leur regle). */
    .community-public-cell.ds-tap-44::after,
    .community-left-panel__join.ds-tap-44::after { left: 0; right: 0; }

    /* Bouton d'ajout (« Add resource », « Share a REX », « Poste ») :
       44 -> 34px peints, seul de sa ligne avec le titre de section.
       .community-items-header .btn (0,2,0) est necessaire pour battre le
       .btn (0,1,0) du socle, qui pose min-height:44px sous 900px. */
    .community-items-header .btn {
        min-height: 34px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Retour d'Adrien sur capture (Resources, meme geste demande pour REX
       et Buddies) : la bande du bas d'une carte -- juste un coeur pour un
       visiteur, coeur + modifier/supprimer pour l'auteur -- respire trop
       verticalement. Mesure avant correctif : 55px de haut pour un simple
       coeur+compteur. Cause identique au bouton d'ajout ci-dessus mais sur
       un bouton NU (`.community-card__fav` n'a jamais porte `.btn` ni
       `.btn--icon`) : le `button` du socle S2 (0,0,1) lui pose quand meme
       min-height:44px sous 900px, sans qu'aucune regle de ce fichier ne le
       contredise -- contrairement a `.community-card__actions .btn--icon`
       (modifier/supprimer), deja a 34x34 par la regle S2b globale de
       design_system.html (`.btn--icon`, posee cet acte), donc DEJA
       conforme : seul le coeur restait a corriger, pas les deux comme le
       retour le supposait. `.community-card__fav` (0,1,0) bat le `button`
       du socle sans effort. Cible tactile reconstituee par `.ds-tap-44`
       (classe ajoutee dans community.js), sans neutralisation horizontale :
       le coeur est seul a gauche de la bande, rien a moins de 6px de ses
       deux cotes (mesure a l'appui, cf. tests). */
    .community-card__fav { min-height: 34px; }
    .community-card__actionbar { padding-top: 6px; margin-top: 2px; }

    /* Modales Buddy et « New topic » : bord a bord a 402px (voile sans
       marge), contrairement aux autres modales. Meme gouttiere.
       2026-09-29, QA mobile. */
    .buddy-modal-overlay { padding: 16px; }

    /* Bande d'onglets : REX, Buddies ou Forum coupes au bord droit sans
       aucun signe qu'elle defile (2026-09-29, QA mobile). Meme degrade de
       bord que .community-left-panel plus haut, sur le fond de carte du
       bloc d'onglets (--card-bg) et non celui de la page. */
    .community-tabs {
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0), var(--card-bg) 55%),
            linear-gradient(to right, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.16));
        background-repeat: no-repeat;
        background-position: 100% 0, 100% 0;
        background-size: 30px 100%, 10px 100%;
        background-attachment: local, scroll;
    }

    /* Forum : la date longue passait a la ligne sous « Nom + Admin ».
       Forme courte JJ/MM/AA, HH:MM sur telephone (retour d'Adrien,
       2026-09-29) ; la forme longue reste dans le title. */
    .fdate-long { display: none; }
    .fdate-short { display: inline; white-space: nowrap; }
}

/* La barre d'actions d'une carte est rendue VIDE pour un visiteur anonyme
   (favBtnHtml() renvoie '' et canManage est faux) mais garde son border-top
   et son padding : un filet orphelin sous chacune des 81 cartes du catalogue.
   :empty ne matcherait pas — le litteral de gabarit laisse des noeuds de
   texte blancs dans la div. :not(:has(*)) matche une div sans element enfant.
   Hors media query : le filet est aussi inutile sur ordinateur. */
.community-card__actionbar:not(:has(*)) { display: none; }