/*
 * THEME PREMIUM - sober, "LinkedIn/Facebook-grade" visual refonte.
 *
 * User-requested (refonte visuelle): move away from the "cockpit
 * d'avion" / admin-dashboard feel of theme-test-2.css (full violet
 * gradient header, 6-7 boxed icon buttons in a row, tinted widget
 * backgrounds, heavier shadows) toward a sober, premium, mostly-white
 * interface where violet is an ACCENT, not a surface colour - reserved
 * to primary buttons, active/selected states and notification badges.
 *
 * Same mechanism as theme-test.css / theme-test-2.css before it: ONLY
 * ONE of the three is loaded at a time, via the single
 * {% set themeTestFile %} line next to the <link> in
 * templates/frontend/base.html.twig (now set to 'theme-premium.css').
 * Bump the ?v= value after each edit (the project has no asset
 * versioning) or hard-reload with Ctrl+F5.
 *
 * WHAT IS NOT AFFECTED (same scope note as theme-test-2.css)
 *   - Blues hard-coded in some templates/stylesheets (#0d6efd, #0f6fec)
 *     stay blue - out of scope, not part of the "trop de violet" report.
 *   - The administration (EasyAdmin has its own CSS) and pages that do
 *     not use frontend/base.html.twig (login/register use their own
 *     anonymous/base.html.twig + assets/css/style.css).
 *   - The "Mode Discret" toggle (custom.css, html[data-discreet-mode])
 *     already has its own self-contained neutral-blue palette,
 *     deliberately independent of the brand theme - left untouched.
 *   - Gold/Premium colours (badges, "Passer Premium" CTAs) - a distinct,
 *     intentional signal colour, not part of the violet-overuse report;
 *     left exactly as theme-test-2.css already had it.
 */

/* ------------------------------------------------------------------
 * 0. PALETTE - the single source of truth of this theme
 * ------------------------------------------------------------------ */
:root {
    /* #6D28D9 is not a new invention: custom.css's own mobile-panel
     * fallback background (line ~822) already hard-codes this exact
     * shade, so this keeps continuity with the existing brand instead
     * of introducing an unrelated hue. */
    --primary: #6D28D9;
    --primary-rgb: 109, 40, 217;
    --primary-dark: #4C1D95;
    --primary-soft-bg: #F5F3FF;
    --primary-soft-border: #E9E3FB;

    --gold: #D4AF37;
    --gold-rgb: 212, 175, 55;
    --gold-light: #F5D76E;
    --gradient-gold: linear-gradient(135deg, #D4AF37, #F5D76E);

    /* "Blanc, gris très clair, gris foncé pour les textes" */
    --bg-page: #F7F7F8;
    --bg-card: #FFFFFF;
    --text: #1F2937;
    --text-muted: #6B7280;
    /* Phase 2 (user-requested): "border: 1px solid #f0f0f0" - tightened
     * from Phase 1's own #ececec to this exact, even softer figure. */
    --border-color: #F0F0F0;
}

/* NOTE - "light theme" selector: see theme-test-2.css's own note. Rules
 * meant for the light theme use :root:not([data-bs-theme=dark]) instead
 * of [data-bs-theme=light]) so they also match the default "auto/unset"
 * state (Bootstrap renders its light palette by default), never dark. */

/* ------------------------------------------------------------------
 * 1. BOOTSTRAP PRIMARY - light theme
 * ------------------------------------------------------------------ */
:root:not([data-bs-theme=dark]) {
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-primary-text-emphasis: var(--primary-dark);
    --bs-primary-bg-subtle: var(--primary-soft-bg);
    --bs-primary-border-subtle: var(--primary-soft-border);

    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-dark);
    --bs-link-hover-color-rgb: 76, 29, 149;

    --bs-body-bg: var(--bg-page);
    --bs-body-bg-rgb: 247, 247, 248;
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-border-color: var(--border-color);
}

:root:not([data-bs-theme=dark]) body {
    background: var(--bg-page);
}

/* ------------------------------------------------------------------
 * 2. BOOTSTRAP PRIMARY - dark theme (lighter shade keeps contrast)
 * ------------------------------------------------------------------ */
[data-bs-theme=dark] {
    --bs-primary: #A78BFA;
    --bs-primary-rgb: 167, 139, 250;
    --bs-primary-text-emphasis: #DDD6FE;
    --bs-primary-bg-subtle: #2E1065;
    --bs-primary-border-subtle: #5B21B6;

    --bs-link-color: #C4B5FD;
    --bs-link-color-rgb: 196, 181, 253;
    --bs-link-hover-color: #DDD6FE;
    --bs-link-hover-color-rgb: 221, 214, 254;
}

/* Gold replaces Bootstrap's yellow "warning": the Premium colour, in
 * both themes (unchanged from theme-test-2.css - not part of this
 * report). */
:root {
    --bs-warning: var(--gold);
    --bs-warning-rgb: var(--gold-rgb);
}

/* ------------------------------------------------------------------
 * 3. BUTTONS - one accent, one hover shade (no secondary accent hue)
 * ------------------------------------------------------------------ */
.btn {
    border-radius: 8px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
}

.btn-primary-soft {
    color: var(--primary);
    background-color: var(--primary-soft-bg);
}

.btn-primary-soft:active,
.btn-primary-soft:hover,
.btn-primary-soft:focus {
    color: #fff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-warning {
    --bs-btn-color: #1F2937;
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: #1F2937;
    --bs-btn-hover-border-color: var(--gold-light);
    --bs-btn-active-color: #1F2937;
    --bs-btn-active-border-color: var(--gold);
    --bs-btn-focus-shadow-rgb: var(--gold-rgb);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    background-image: var(--gradient-gold);
    font-weight: 600;
}

.btn-warning:hover,
.btn-warning:focus {
    filter: brightness(1.06);
}

.badge.bg-warning {
    background-image: var(--gradient-gold);
    color: #1F2937 !important;
}

/* "Publier mon statut": flat solid accent, no gradient - fewer tones of
 * violet reads calmer than the previous two-tone gradient. */
.post-composer button[type="submit"].btn {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
    box-shadow: none;
}

/* ------------------------------------------------------------------
 * 4. NAVBAR - flat white, thin hairline, reduced height, no gradient
 *    (user-requested: "passer à un fond blanc", "ajouter uniquement une
 *    fine bordure inférieure", "réduire la hauteur", "éviter l'effet
 *    cockpit d'avion").
 * ------------------------------------------------------------------ */
.header-static.bg-mode {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.header-static .navbar {
    min-height: 56px;
}

/* Top-level menu links: dark text on the now-white header (previously
 * forced white for readability on the violet gradient, which no longer
 * exists). Active/hover: the single accent colour, not gold (gold stays
 * exclusively a Premium signal - see file header note). */
.header-static .navbar-nav .nav-link {
    color: var(--text) !important;
}

.header-static .navbar-nav .nav-link:hover,
.header-static .navbar-nav .nav-link.show {
    color: var(--primary) !important;
}

/* Mobile full-screen panel: same flat white as the header it extends
 * from, instead of the previous violet gradient (custom.css's own
 * #6D28D9 fallback background, and theme-test-2.css's gradient on top
 * of it, both overridden here - loaded last, wins the cascade). Close
 * button and title, hard-coded white text in custom.css for the old
 * dark panel, are recoloured dark to stay legible on white. */
@media (max-width: 991.98px) {
    .header-static .navbar-collapse,
    #navbarCollapse.show,
    #navbarCollapse.collapsing {
        background: var(--bg-card) !important;
    }

    .mobile-nav-panel-header {
        border-bottom: 1px solid var(--border-color);
    }

    .mobile-nav-panel-close {
        color: var(--text);
    }

    .mobile-nav-panel-title {
        color: var(--text);
    }

    .header-static .navbar-collapse .dropdown-item {
        color: var(--text);
    }

    .header-static .navbar-collapse .dropdown-item:hover,
    .header-static .navbar-collapse .dropdown-item:focus,
    .header-static .navbar-collapse .dropdown-item.active {
        color: var(--primary);
        background-color: var(--primary-soft-bg);
    }
}

/* Icon buttons (messages, views, notifications, friendship...) -
 * user-requested: "simplifier visuellement les icônes". Functionality
 * is untouched (same links, same badges) - only the visual weight
 * changes: no filled grey/white box by default (the "cockpit" look of
 * 6-7 boxed buttons in a row), a plain icon that only picks up a soft
 * accent-tinted circle on hover/focus, like LinkedIn/Facebook's own
 * header icons. */
.header-static .nav-icon {
    color: var(--text-muted);
    background: transparent !important;
    transition: background-color .15s ease, color .15s ease;
}

.header-static .nav-icon:hover,
.header-static .nav-icon:focus {
    color: var(--primary);
    background: var(--primary-soft-bg) !important;
}

.header-static #profileDropdownDesktop,
.header-static #profileDropdownMobile,
.header-static #profileDropdownDesktop:hover,
.header-static #profileDropdownMobile:hover {
    background: transparent !important;
}

.header-static .navbar-toggler {
    --bs-btn-color: var(--text);
    --bs-btn-bg: transparent;
}

/* ------------------------------------------------------------------
 * 5. ACCENTS
 * ------------------------------------------------------------------ */
.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary);
}

.card {
    --bs-card-border-color: var(--border-color);
}

/* Premium status badge ("Via abonnement"): unchanged from
 * theme-test-2.css - gold stays the Premium signal colour. */
.d-flex:has(> .bi-gem) > .badge.bg-primary {
    background-color: var(--gold) !important;
    background-image: linear-gradient(135deg, #D4AF37, #F4D03F);
    color: #1F2937;
}

/* ------------------------------------------------------------------
 * 6. WIDGET CARDS - uniform, secondary, no coloured tint
 *    (user-requested: "les widgets doivent être secondaires" - a
 *    coloured background on only 2 of them made THOSE two more
 *    prominent, the opposite of "secondary"; every widget card now
 *    looks the same as any other card: white, thin border, no tint).
 * ------------------------------------------------------------------ */
:root:not([data-bs-theme=dark]) [data-widget-code] > .card {
    border: 1px solid var(--border-color);
    background-image: none;
}

[data-widget-code] > .card {
    transition: box-shadow 0.2s ease;
}

[data-widget-code] > .card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Phase 2 (user-requested): "réduire les marges internes, les hauteurs
 * excessives, les éléments décoratifs" - widgets must "servir le feed et
 * non rivaliser avec lui". Applied globally to every sidebar widget's
 * card (data-widget-code is set by the Widget engine on each one's root
 * tag - WidgetZoneController) rather than editing all ~32 individual
 * widget templates: smaller padding, a smaller/lighter title, less
 * vertical rhythm between stacked widgets. */
[data-widget-code] > .card .card-body {
    padding: .85rem 1rem;
}

[data-widget-code] > .card h5,
[data-widget-code] > .card h6,
[data-widget-code] > .card .card-title {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .6rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------
 * 7. CARDS AND BLOCKS - smaller radius, near-flat borders, barely-
 *    there shadow. Phase 2 (user-requested: "réduire encore les
 *    bordures visibles... privilégier background:#fff, border:1px
 *    solid #f0f0f0, box-shadow:0 1px 4px rgba(0,0,0,.03)") tightens
 *    Phase 1's own values (#ececec / 0 2px 8px rgba(0,0,0,.04)) to the
 *    new, even softer exact figures given.
 * ------------------------------------------------------------------ */
.card {
    --bs-card-border-radius: 10px;
}

:root:not([data-bs-theme=dark]) {
    --bs-box-shadow: 0 1px 4px rgba(0, 0, 0, .03);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .02);
    --bs-box-shadow-lg: 0 2px 8px rgba(0, 0, 0, .05);
}

/* ------------------------------------------------------------------
 * 8. TYPOGRAPHY - clearer hierarchy, calmer secondary text
 *    (user-requested: "titres plus lisibles, textes secondaires plus
 *    discrets, réduire les contrastes inutiles").
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 700;
}

.text-muted,
small,
.small {
    color: var(--text-muted) !important;
}

/* ------------------------------------------------------------------
 * 9. FEED LAYOUT - breathing room between the 3 main columns
 *    (unchanged from theme-test-2.css: already matches the 24px
 *    target via Bootstrap's own .g-4 gutter).
 * ------------------------------------------------------------------ */
main > .container > .row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* ------------------------------------------------------------------
 * 10. MOBILE BOTTOM NAVIGATION (new component - templates/frontend/
 *     partials/navigation/_mobile_bottom_nav.html.twig). Fixed tab bar,
 *     mobile only, 5 slots max (Accueil/Recherche/Messages/
 *     Notifications/Profil - some hidden per feature flag). Reserves
 *     body bottom padding below lg so page content/footer never sits
 *     underneath it.
 * ------------------------------------------------------------------ */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .68rem;
    line-height: 1;
    position: relative;
}

.mobile-bottom-nav-item i {
    font-size: 1.15rem;
}

.mobile-bottom-nav-item.active {
    color: var(--primary);
}

.mobile-bottom-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 50rem;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

@media (max-width: 991.98px) {
    body {
        padding-bottom: 60px;
    }
}

/* ------------------------------------------------------------------
 * 11. MOBILE SPACING - less wasted horizontal margin, feed-first
 *     (user-requested: "diminuer les marges horizontales inutiles",
 *     "privilégier le fil d'actualité"). personal_sidebar is now
 *     hidden below lg (home.html.twig's own d-lg-block class, mirroring
 *     discovery_sidebar's) so mobile shows the feed alone.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    main > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ====================================================================
 * PHASE 2 - "LE FEED EST LE PRODUIT" (user-requested second pass)
 * ==================================================================== */

/* ------------------------------------------------------------------
 * 12. GRID REBALANCE - 20% / 60% / 20% at lg+ (user-requested: "18%|64%|18%
 *     ou 20%|60%|20%... le feed doit être l'élément dominant
 *     visuellement"). Bootstrap's 12-column grid can't express 20%/60%
 *     exactly with whole columns (closest: 2/8/2 = 16.7/66.7/16.7, or
 *     the Phase 1 2/7/3 = 16.7/58.3/25, neither matching nor even
 *     symmetric) - these 3 classes override the column's flex-basis
 *     directly with the exact requested percentages, added ALONGSIDE
 *     the existing col-lg-* classes (kept for their responsive
 *     stacking behaviour below lg) rather than replacing them. Scoped
 *     to the feed page only (its own template adds these classes) -
 *     personal_sidebar's default col-lg-3 for its other ~17 pages is
 *     untouched. */
@media (min-width: 992px) {
    .feed-grid-left,
    .feed-grid-right {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .feed-grid-center {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

/* ------------------------------------------------------------------
 * 13. LOGO / HEADER - lighter touch (user-requested: "le logo ne doit
 *     pas dominer la navigation... sobre, premium, adulte... éviter un
 *     rendu trop gaming/dating des années 2010").
 *
 *     The wordmark's gold colour (#F5D76E, custom.css) was explicitly
 *     chosen for contrast against the header's PREVIOUS violet
 *     gradient background (custom.css's own comment: "Gold reads
 *     clearly against this header's own background... a violet
 *     gradient") - Phase 1 removed that gradient (flat white header
 *     now), so bright gold-on-white is a leftover mismatch: weaker
 *     contrast than intended AND the kind of saturated accent colour
 *     that reads as "gaming/trophy" rather than sober. Recoloured to
 *     the same dark text used everywhere else; the gold gradient stays
 *     on the small wreath icon only (a secondary, much smaller mark,
 *     not a backlit outlined badge). Icon also shrunk further (28px ->
 *     22px at lg+, matching what was previously only the <992px
 *     value) so it reads as a small mark beside the wordmark, not a
 *     centrepiece. */
.site-name-mark {
    color: var(--text) !important;
}

.site-wreath-icon {
    height: 22px !important;
}

.site-suffix-badge {
    background-color: var(--text-muted) !important;
}

/* ------------------------------------------------------------------
 * 13b. POST COMPOSER HEIGHT BUG (found while verifying Phase 2 "réduire
 *     considérablement le scrolling avant d'atteindre le premier post" -
 *     pre-existing, not introduced by either phase, but now far more
 *     visible: the composer's own template combines .card and .card-body
 *     on the SAME element (templates/frontend/social_network/post/
 *     partial/_post_form.html.twig: class="card card-body post-composer").
 *     .card-body's own Bootstrap rule sets flex-grow:1 on itself; since
 *     Bootstrap's .row defaults to align-items:stretch, the center
 *     column gets stretched to match the row's tallest sibling (the
 *     right sidebar, several widgets tall) and .post-composer - the only
 *     flex-grow:1 element in that column - absorbed ALL of that extra
 *     height (measured: 853px tall at 1400px desktop width, vs. ~180px
 *     of actual form content). flex-grow:0 keeps it at its natural
 *     content height regardless of the row's own stretched height.
 * ------------------------------------------------------------------ */
.post-composer {
    flex-grow: 0;
}

/* ------------------------------------------------------------------
 * 14. "COMMUNAUTÉ EN DIRECT" - compact single-line bandeau
 *     (user-requested exact example: "🟢 12 connectés 👤 3 nouveaux
 *     📅 69 événements 💬 24 discussions", "réduire sa hauteur d'au
 *     moins 50%"). Structural change made directly in
 *     templates/frontend/widget/stats/community/_content.html.twig
 *     (stacked icon-over-number-over-label -> one inline row); this is
 *     the matching compact styling for that new markup. Hidden below
 *     lg (user-requested, section 7: "réduire considérablement le
 *     scrolling avant d'atteindre le premier post" - this widget
 *     render INLINE in the feed column itself, ahead of the first
 *     post, unlike the sidebar widgets which were already hidden on
 *     mobile before this card existed there to begin with).
 * ------------------------------------------------------------------ */
.community-stats-bar .card-body {
    padding: .5rem .9rem;
}

.community-stats-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.25rem;
    row-gap: .25rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.community-stats-bar-row strong {
    color: var(--text);
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .community-stats-bar {
        display: none;
    }
}

/* ------------------------------------------------------------------
 * 15. ACTION HIERARCHY - 3 visual tiers (user-requested: Niveau 1
 *     "Publier"/"Envoyer un message" - full accent, most prominent;
 *     Niveau 2 "Voir un événement"/"Voir un profil" - outline, medium;
 *     Niveau 3 "Disponibilités"/options - plain text link, least
 *     prominent). Bootstrap's own .btn-primary (tier 1) and
 *     .btn-outline-primary (tier 2) already give the first two tiers
 *     for free everywhere they're already used (post composer "Publier",
 *     "Voir mon profil"); this class is the missing tier 3 for the
 *     handful of genuinely secondary actions (e.g. the "Voir plus"
 *     toggle on the profile card - personal_sidebar.html.twig).
 * ------------------------------------------------------------------ */
.btn-tier-3 {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 500;
    padding: .25rem .5rem;
}

.btn-tier-3:hover,
.btn-tier-3:focus {
    color: var(--primary);
}

/* ====================================================================
 * PHASE 3 - "POLISH PREMIUM" (user-requested third pass: reduce
 * cognitive load and raise perceived quality, no new colours/animations/
 * effects - "l'objectif n'est plus de modifier les couleurs ou le CSS
 * de manière globale", a finishing/tightening pass on specific
 * components named in the brief).
 * ==================================================================== */

/* ------------------------------------------------------------------
 * 16. SIDEBAR WIDGETS - tightened further (user-requested: "réduire
 *     padding, marges internes, tailles des titres, hauteurs des
 *     widgets ... un effet Google Workspace / LinkedIn / Notion, pas un
 *     portail d'information"). Phase 2 already compacted
 *     [data-widget-code] > .card .card-body; this tightens it further
 *     and, new in Phase 3, also compacts the card-header (title row),
 *     which Phase 2 left untouched.
 * ------------------------------------------------------------------ */
[data-widget-code] > .card .card-body {
    padding: .65rem .85rem;
}

[data-widget-code] > .card .card-header {
    padding: .65rem .85rem .35rem;
}

[data-widget-code] > .card .card-footer {
    padding: .35rem .85rem .65rem;
}

[data-widget-code] > .card h5,
[data-widget-code] > .card h6,
[data-widget-code] > .card .card-title {
    font-size: .74rem;
    margin-bottom: .45rem;
}

/* Member list widgets ("Disponibles ce soir" / "Membres compatibles") -
 * user-requested sections 3 & 5: "réduire l'avatar" / "avatars
 * légèrement plus petits", "diminuer l'espacement vertical". Shared
 * class, both widgets use it (templates/frontend/widget/availability/
 * tonight/_content.html.twig and .../profile/compatible/_content.html.twig -
 * the latter's own markup was also restructured, see that file's own
 * comment, to fold the compatibility % onto the name row instead of a
 * separate label+progress-bar row). */
.widget-member-avatar {
    width: 40px !important;
    height: 40px !important;
}

/* ------------------------------------------------------------------
 * 17. "À VENIR" (NEXT EVENTS) WIDGET - user-requested: "encore très
 *     vide ... réduire fortement sa hauteur minimale ... aucune zone
 *     vide importante". This widget is included directly (not through
 *     the Widget engine / WidgetZoneController, unlike every other
 *     sidebar widget here), so it never carries [data-widget-code] and
 *     missed Phase 2's compaction entirely - still on Bootstrap's full
 *     1.25rem default card padding. Matches the same figures as rule
 *     16 above; its own template
 *     (templates/frontend/widget/event/next_event/_container.html.twig)
 *     also dropped the card-body's justify-content-center (vertical
 *     centering), which made one short line of text read as floating
 *     in a tall empty box.
 * ------------------------------------------------------------------ */
.widget-next-events .card-header {
    padding: .65rem .85rem .35rem;
}

.widget-next-events .card-header .card-title {
    font-size: .74rem;
}

.widget-next-events .card-body {
    padding: .5rem .85rem;
}

.widget-next-events .card-footer {
    padding: .35rem .85rem .65rem;
}

/* ------------------------------------------------------------------
 * 18. FEED CARDS - user-requested: "réduire les espaces verticaux, les
 *     marges inutiles et les zones vides ... gagner au moins 15 à 20%
 *     de densité utile, sans nuire à la lisibilité". .feed-item is a
 *     plain .card (not a widget), so it was still on Bootstrap's full
 *     1.25rem card padding on all 3 regions - trimmed to 1rem (a 20%
 *     reduction, matching the brief's own target exactly), card-to-card
 *     margin trimmed similarly. Content itself (text, avatar, reaction
 *     bar) is untouched - only the padding around it.
 * ------------------------------------------------------------------ */
.feed-item.card {
    margin-bottom: .75rem !important;
}

.feed-item .card-header,
.feed-item .card-body,
.feed-item .card-footer {
    padding-left: 1rem;
    padding-right: 1rem;
}

.feed-item .card-header {
    padding-top: 1rem;
}

.feed-item .card-body {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.feed-item .card-footer {
    padding-bottom: 1rem;
}

/* ------------------------------------------------------------------
 * 19. POST COMPOSER - user-requested: "réduire sa hauteur, rapprocher
 *     les actions, attirer naturellement vers Publier ... s'inspirer de
 *     Facebook/LinkedIn/Threads". Phase 2 already fixed the composer's
 *     own 853px height bug (flex-grow:0); this tightens its own padding
 *     and visually separates the "Publier" button so it reads as the
 *     one clear next step rather than one icon among equals.
 * ------------------------------------------------------------------ */
.post-composer {
    padding: 1rem !important;
}

.post-composer-textarea {
    min-height: 48px;
}

.post-composer-actions-row {
    margin-top: .5rem !important;
    padding-top: .5rem;
    border-top: 1px solid var(--border-color);
}

/* ------------------------------------------------------------------
 * 20. NAVBAR ICONS - user-requested: "étudier les icônes ... proposer
 *     une version simplifiée, moins de bruit visuel". Audited (desktop
 *     icon cluster: friendship, recommendations, profile views,
 *     reactions, notifications, discreet-mode toggle, profile) and
 *     deliberately left alone, for two reasons found while checking:
 *     (1) every icon is a distinct, real feature with its own route -
 *     hiding or merging any of them removes functionality, which this
 *     phase explicitly rules out ("conserver les fonctionnalités
 *     existantes"); (2) the 1.25rem gap between them
 *     (.header-icon-item, custom.css) is not arbitrary - its own
 *     comment records it was deliberately bumped from 16px to 20px
 *     after a real report of notification badges overlapping the
 *     neighbouring icon. Reducing it back down would reintroduce that
 *     exact, already-fixed bug. Phase 1 already did the one safe,
 *     available simplification (no individual filled icon boxes, the
 *     "cockpit" look) - nothing further to change here without
 *     removing a feature or reopening a past bug.
 * ------------------------------------------------------------------ */

/* ====================================================================
 * PHASE 3.1 - "COMPOSER & STATISTIQUES" (micro-optimisation UX, suite
 * directe de la Phase 3 : réduire encore la hauteur du premier écran
 * sans rien retirer fonctionnellement).
 * ==================================================================== */

/* ------------------------------------------------------------------
 * 21. POST COMPOSER - user-requested: "réduire la hauteur globale de
 *     20 à 30%, diminuer les espaces verticaux, rapprocher les icônes
 *     d'action, limiter les zones vides ... doit paraître rapide,
 *     léger, instantané". Phase 3 (section 19 above) already tightened
 *     the card's own padding and separated the actions row with a
 *     border; this goes further on the three remaining sources of
 *     unused vertical space found by measuring the composer's real
 *     DOM height (headless browser, not estimated) - see
 *     UI_UX_REFACTOR.md Phase 3.1 for the exact before/after figures.
 *     - textarea min-height 48px -> 40px (matches the avatar, now also
 *       40px per the template change for this same phase).
 *     - the <hr> separating the text field from the icon row duplicated
 *       the divider the actions row already has on its own border-top
 *       just below it - two dividers in a composer this short read as
 *       a "zone vide" of their own. Hidden (display:none, the template
 *       itself is untouched so it is a one-line, fully reversible
 *       change) rather than just trimming its margin.
 *     - card padding 1rem -> .75rem/1rem (vertical/horizontal).
 *     - icon buttons 40x40 -> 32x32 and their row gap 12px -> 8px
 *       ("les icônes ... peuvent probablement être rapprochées").
 * ------------------------------------------------------------------ */
.post-composer {
    padding: .75rem 1rem !important;
}

.post-composer-textarea {
    min-height: 40px;
}

.post-composer hr {
    display: none;
}

/* The media-preview placeholder div (empty unless a photo/video is being
   attached) still carried Bootstrap's own mt-2 (.mt-2 is !important, like
   every Bootstrap spacing utility - a plain override here is silently
   ignored without !important too); since adjoining margins collapse to
   their largest value, this also capped how far mb-1 on the avatar/
   textarea row above it (template change, same phase) could save -
   reduced here too so the two together actually shrink the gap. */
.post-composer [data-post-media-preview] {
    margin-top: .25rem !important;
}

.post-composer-icon-btn {
    width: 32px;
    height: 32px;
}

.post-composer-icon-btn .bi {
    font-size: .95rem;
}

.post-composer-actions {
    gap: 8px;
}

/* ====================================================================
 * PHASE 3.2 - "FEED PREMIUM" (le feed devient la pièce maîtresse :
 * densité des cartes, lisibilité, engagement - priorité sur la home
 * globale). Mesures réelles avant/après (lecture DOM, navigateur
 * headless, 2 posts réels - un court, un long) : voir UI_UX_REFACTOR.md
 * Phase 3.2 pour le détail complet.
 * ==================================================================== */

/* ------------------------------------------------------------------
 * 23. HEADER DE PUBLICATION - user-requested: "réduire la hauteur
 *     totale, rapprocher avatar/nom/date ... doit rappeler
 *     Facebook/LinkedIn/Instagram et non une fiche administrative".
 *     Measured: the header's height (74px) was driven entirely by the
 *     avatar (58px ring box), not by its 2 lines of text (~43px) -
 *     reducing the avatar (template change, _item.html.twig: 50px ->
 *     40px, matching the 40px used everywhere else in the redesign) is
 *     what actually shrinks the row, a padding tweak alone would not
 *     have touched its real height driver. Padding-top trimmed on top
 *     of that. Together: ~74px -> ~58px (-22%).
 * ------------------------------------------------------------------ */
.feed-item .card-header {
    padding-top: .625rem;
}

/* ------------------------------------------------------------------
 * 24. MÉTADONNÉES - user-requested: "le pseudo reste l'élément
 *     principal ; date/action/disponibilité doivent prendre moins de
 *     place (taille, poids, espacement)". The username (h6) is left
 *     untouched on purpose - only the secondary line (action + date)
 *     is reduced, so the hierarchy stays correct rather than shrinking
 *     everything equally.
 * ------------------------------------------------------------------ */
.feed-item .card-header .small.text-muted {
    font-size: .78rem;
}

/* ------------------------------------------------------------------
 * 25. ZONE DE CONTENU - user-requested: "adapter l'espace occupé au
 *     contenu réel". Measured: already true before this phase (a
 *     one-line post measured 77px of body vs. 140px for a 3-paragraph
 *     one - no fixed min-height was forcing a short post to look like a
 *     long one). Only the fixed padding overhead (identical regardless
 *     of content length) was left to trim.
 * ------------------------------------------------------------------ */
.feed-item .card-body {
    padding-top: .625rem;
    padding-bottom: .625rem;
}

/* ------------------------------------------------------------------
 * 26. ACTIONS ET RÉACTIONS - user-requested: "réduire la hauteur
 *     occupée par likes/réactions/suivre/commentaires/options, en
 *     conservant toutes les fonctionnalités". Only spacing (margins,
 *     gaps) is touched - .reaction-btn/.reaction-count/data-type stay
 *     exactly as reactions.js and the comment toggle's own JS expect,
 *     nothing renamed or restructured.
 * ------------------------------------------------------------------ */
.feed-item .card-footer {
    padding-bottom: .75rem;
}

.feed-item .comment-section {
    margin-top: .25rem !important;
}

.feed-item .reactions-bar {
    margin-top: .25rem !important;
    gap: .5rem !important;
}

.feed-item .reactions-bar .reactions {
    gap: .5rem !important;
}

/* ------------------------------------------------------------------
 * 27. RYTHME DU FEED - user-requested: "gagner entre 10 et 20% de
 *     densité utile, sans rendre l'interface tassée". Card-to-card
 *     margin already at .75rem since Phase 3 (section 18 above) - left
 *     unchanged here: the measured gain from sections 23-26 alone
 *     already lands inside the requested range (see UI_UX_REFACTOR.md
 *     Phase 3.2 for the exact before/after numbers), so no further
 *     margin cut was needed to hit the target.
 * ------------------------------------------------------------------ */