:root {
    --color-bleu-doux: #4C6FFF;
    --color-violet-pastel: #A27BFF;
    --color-rose-doux: #FF6F91;
    --color-blanc-creme: #F9FAFD;
    --color-gris-neutre: #2E2E3A;

    /* Fond plateforme (halos + base) */
    --app-bg-base: #e8ecf9;
    --app-bg-soft: #f4f6fd;
    --app-bg-highlight: #faf8ff;
    --app-halo-bleu: rgba(76, 111, 255, 0.22);
    --app-halo-violet: rgba(162, 123, 255, 0.18);
    --app-halo-rose: rgba(255, 111, 145, 0.12);
    --app-dots: rgba(76, 111, 255, 0.055);

    --shadow-sm: 0 2px 4px rgba(46, 46, 58, 0.08);
    --shadow-md: 0 4px 12px rgba(46, 46, 58, 0.12);
    --shadow-lg: 0 8px 24px rgba(46, 46, 58, 0.16);
    --shadow-xl: 0 16px 48px rgba(46, 46, 58, 0.2);
}

* {
    transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    min-height: 100vh;
    color: var(--color-gris-neutre);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    background-color: var(--app-bg-base);
    background-image:
        radial-gradient(ellipse 130% 90% at 0% -15%, var(--app-halo-bleu), transparent 52%),
        radial-gradient(ellipse 100% 80% at 100% -5%, var(--app-halo-violet), transparent 48%),
        radial-gradient(ellipse 90% 70% at 50% 110%, var(--app-halo-rose), transparent 55%),
        linear-gradient(
            168deg,
            var(--app-bg-soft) 0%,
            var(--app-bg-base) 38%,
            var(--app-bg-highlight) 100%
        );
    background-attachment: fixed;
    position: relative;
}

/* Motif léger (points) — reste sous le contenu */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--app-dots) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    opacity: 1;
}

/* Contenu principal : pas de z-index (sinon le backdrop du modal Bootstrap, sur le body, passe au-dessus de toute la zone main) */
#main-content,
body > main.container {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll;
    }
}

/* Navigation moderne avec glassmorphism */
.navbar {
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, var(--color-violet-pastel) 100%) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1030;
    position: sticky;
    top: 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-brand i {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem !important;
    border-radius: 8px;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.navbar-nav .nav-link:hover::before {
    transform: translateX(-50%) scaleX(1);
}

/* Assurer que les dropdowns ne sont pas masqués */
.navbar-collapse {
    overflow: visible !important;
}

.navbar-nav {
    overflow: visible !important;
}

/* Menu utilisateur connecté (header desktop / tablette) */
.navbar-nav .nav-link.navbar-user-toggle {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    margin: 0.25rem 0 0.25rem 0.5rem;
    padding: 0.35rem 0.75rem 0.35rem 0.45rem !important;
    max-width: min(100%, 20rem);
    text-decoration: none !important;
    flex-wrap: nowrap;
}

.navbar-nav .nav-link.navbar-user-toggle::before {
    display: none !important;
}

.navbar-nav .nav-link.navbar-user-toggle:hover,
.navbar-nav .nav-link.navbar-user-toggle:focus,
.navbar-nav .nav-link.navbar-user-toggle.show {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.26);
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.navbar-user-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.navbar-user-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.navbar-user-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--color-bleu-doux, #4c6fff);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-user-name {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
    color: #fff !important;
    max-width: 11rem;
}

.navbar-user-role {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.2;
}

.navbar-user-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.navbar-user-toggle.show .navbar-user-chevron {
    transform: rotate(180deg);
}

/* Sélecteur de langue (navbar) */
.navbar-nav .nav-link.navbar-locale-toggle {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    margin: 0.25rem 0.5rem 0.25rem 0;
    padding: 0.35rem 0.7rem !important;
    line-height: 1;
    text-decoration: none !important;
}

.navbar-nav .nav-link.navbar-locale-toggle::before {
    display: none !important;
}

.navbar-nav .nav-link.navbar-locale-toggle:hover,
.navbar-nav .nav-link.navbar-locale-toggle:focus,
.navbar-nav .nav-link.navbar-locale-toggle.show {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.26);
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.navbar-locale-code {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #fff !important;
}

.navbar-locale-chevron {
    font-size: 0.65rem;
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.navbar-locale-toggle.show .navbar-locale-chevron {
    transform: rotate(180deg);
}

.navbar-user-menu {
    min-width: 17.5rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    margin-top: 0.5rem !important;
}

.navbar-user-menu .dropdown-header {
    white-space: normal;
    background: linear-gradient(180deg, #f8f9fd 0%, #fff 100%);
    padding: 0.75rem 0.75rem 0.85rem !important;
    margin-bottom: 0.25rem !important;
    border-radius: 10px;
}

.navbar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-user-menu .dropdown-item i {
    font-size: 1.1rem;
    opacity: 0.85;
}

.navbar-user-menu .dropdown-item.text-danger:hover,
.navbar-user-menu .dropdown-item.text-danger:focus {
    color: #b02a37 !important;
    background: rgba(220, 53, 69, 0.08);
}

.navbar-user-menu-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.navbar-user-menu-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #fff;
    border: 2px solid rgba(76, 111, 255, 0.15);
}

.navbar-user-menu-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
}

/* Boutons modernes avec effet hover — padding type Bootstrap py-1 px-2 */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    box-shadow: var(--shadow-sm);
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, #5A7FFF 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3A5AFF 0%, var(--color-bleu-doux) 100%);
    box-shadow: 0 8px 20px rgba(76, 111, 255, 0.4);
}

.btn-outline-primary {
    color: var(--color-bleu-doux);
    border: 2px solid var(--color-bleu-doux);
    background: transparent;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, #5A7FFF 100%);
    border-color: var(--color-bleu-doux);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76, 111, 255, 0.3);
}

.btn-info {
    background: linear-gradient(135deg, var(--color-violet-pastel) 0%, #B28CFF 100%);
    color: white;
}

.btn-info:hover {
    background: linear-gradient(135deg, #8B6AFF 0%, var(--color-violet-pastel) 100%);
    box-shadow: 0 8px 20px rgba(162, 123, 255, 0.4);
}

.btn-danger, .btn-outline-danger {
    color: var(--color-rose-doux);
    border: 2px solid var(--color-rose-doux);
    background: transparent;
}

.btn-danger:hover, .btn-outline-danger:hover {
    background: linear-gradient(135deg, var(--color-rose-doux) 0%, #FF8FAB 100%);
    border-color: var(--color-rose-doux);
    color: white;
    box-shadow: 0 6px 16px rgba(255, 111, 145, 0.3);
}

/* Cards modernes avec glassmorphism */
.card {
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: 16px;
    background: white;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-bleu-doux), var(--color-violet-pastel), var(--color-rose-doux));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card:hover::before {
    opacity: 1;
}

/* Modales dans une carte : overflow:hidden peut rogner le contenu (ex. lightbox image) */
.card:has(.modal) {
    overflow: visible !important;
}

.card-body {
    padding: 1.5rem;
}

.card-header {
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, var(--color-violet-pastel) 100%);
    color: white;
    border: none;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Badges modernes */
.badge {
    padding: 0.28rem 0.55rem;
    border-radius: 7px;
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    box-shadow: none;
}

.badge.bg-primary {
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, #5A7FFF 100%) !important;
}

.badge.bg-secondary {
    background: linear-gradient(135deg, var(--color-violet-pastel) 0%, #B28CFF 100%) !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, var(--color-violet-pastel) 0%, #B28CFF 100%) !important;
}

/* Alerts modernes */
.alert {
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
    font-weight: 500;
}

.alert-success {
    background: linear-gradient(135deg, rgba(76, 111, 255, 0.1) 0%, rgba(90, 127, 255, 0.05) 100%);
    border-left-color: var(--color-bleu-doux);
    color: var(--color-gris-neutre);
}

.alert-info {
    background: linear-gradient(135deg, rgba(162, 123, 255, 0.1) 0%, rgba(178, 140, 255, 0.05) 100%);
    border-left-color: var(--color-violet-pastel);
    color: var(--color-gris-neutre);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(255, 111, 145, 0.1) 0%, rgba(255, 143, 171, 0.05) 100%);
    border-left-color: var(--color-rose-doux);
    color: var(--color-gris-neutre);
}

/* Pied de page du layout uniquement (pas les <footer> dans les cartes, ex. pub-card__engage) */
body > footer {
    background: linear-gradient(135deg, var(--color-gris-neutre) 0%, #1a1a24 100%) !important;
    color: white;
    padding: 2rem 0 !important;
    margin-top: 4rem;
    box-shadow: 0 -4px 12px rgba(46, 46, 58, 0.1);
}

/* Links animés */
a {
    color: var(--color-bleu-doux);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-bleu-doux), var(--color-violet-pastel));
    transition: width 0.3s ease;
    border-radius: 2px;
}

a:hover {
    color: var(--color-violet-pastel);
}

a:hover::after {
    width: 100%;
}

/* Form controls modernes */
.form-control, .form-select {
    border: 2px solid #e0e0e8;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: white;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-bleu-doux);
    box-shadow: 0 0 0 4px rgba(76, 111, 255, 0.1), var(--shadow-md);
    outline: none;
    transform: translateY(-1px);
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-gris-neutre);
    margin-bottom: 0.5rem;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Pagination (Bootstrap 5 + vue personnalisée vendor/pagination) */
.pagination-nav {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    padding: 1.25rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(249, 250, 253, 0.95) 0%, #fff 100%);
    border: 1px solid rgba(76, 111, 255, 0.12);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.pagination-summary {
    letter-spacing: 0.01em;
}

.pagination-nav .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.pagination-nav .pagination.pagination-simple {
    gap: 0.75rem;
}

.pagination-nav .page-item {
    margin: 0;
}

.pagination-nav .page-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-gris-neutre);
    background: #fff;
    border: 2px solid #e8eaf4;
    border-radius: 12px !important;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pagination-nav .page-link--icon {
    min-width: 2.65rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-bleu-doux);
}

.pagination-nav .page-link--ellipsis {
    min-width: 2.25rem;
    border-style: dashed;
    color: #8b8ba3;
    font-weight: 700;
    cursor: default;
}

.pagination-nav .page-link:hover:not(span) {
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, #5a7fff 100%);
    border-color: var(--color-bleu-doux);
    box-shadow: 0 4px 12px rgba(76, 111, 255, 0.25);
    transform: translateY(-1px);
    z-index: 1;
}

.pagination-nav .page-item.active .page-link {
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, var(--color-violet-pastel) 100%);
    border-color: transparent;
    box-shadow: var(--shadow-md);
    cursor: default;
}

.pagination-nav .page-item.disabled .page-link {
    color: #b4b4c7;
    background: #f4f5fa;
    border-color: #e8eaf4;
    opacity: 1;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.pagination-nav .page-item.disabled .page-link--ellipsis {
    background: transparent;
    border-style: dashed;
}

.pagination-nav .page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.35);
    border-color: var(--color-bleu-doux);
}

/* Tables modernes */
.table {
    border-radius: 12px;
    overflow: hidden;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(249, 250, 253, 0.6);
}

.table-hover tbody tr:hover {
    background-color: rgba(76, 111, 255, 0.05);
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* Tri du fil d'accueil — contrôle segmenté (icône + libellé, sans classes .btn) */
.feed-sort {
    display: flex;
    width: 100%;
    gap: 0.35rem;
    padding: 0.35rem;
    background: linear-gradient(180deg, #f4f6fd 0%, #eef1fb 100%);
    border-radius: 14px;
    border: 1px solid rgba(76, 111, 255, 0.14);
    box-shadow:
        0 2px 10px rgba(76, 111, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.feed-sort__btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.35rem;
    min-height: 2.65rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #5c6178;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1.15;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.feed-sort__btn i {
    font-size: 1.08rem;
    line-height: 1;
    opacity: 0.92;
}

.feed-sort__btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.feed-sort__btn:hover {
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-bleu-doux, #4c6fff);
}

.feed-sort__btn:focus-visible {
    outline: 2px solid rgba(76, 111, 255, 0.45);
    outline-offset: 2px;
}

.feed-sort__btn.is-active {
    background: linear-gradient(
        135deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        #5a7fff 50%,
        var(--color-violet-pastel, #9580ff) 100%
    );
    color: #fff;
    box-shadow: 0 4px 14px rgba(76, 111, 255, 0.32);
}

.feed-sort__btn.is-active i {
    opacity: 1;
}

@media (min-width: 480px) {
    .feed-sort__btn {
        flex-direction: row;
        gap: 0.45rem;
        min-height: 2.45rem;
        font-size: 0.8rem;
        padding: 0.42rem 0.5rem;
    }
}

@media (max-width: 374px) {
    .feed-sort__btn span {
        display: none;
    }

    .feed-sort__btn {
        min-height: 2.35rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}

/* Dropdown moderne */
.dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: white;
    backdrop-filter: blur(10px);
    z-index: 1050 !important;
    position: absolute;
}

.navbar-nav .dropdown {
    position: relative;
}

.navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    min-width: 200px;
}

.navbar-nav > .nav-item.dropdown > .dropdown-menu {
    left: auto;
    right: 0;
}

.navbar-nav > .nav-item.dropdown:not(:last-child) > .dropdown-menu {
    left: 0;
    right: auto;
}

.dropdown-item {
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0.125rem 0;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, rgba(76, 111, 255, 0.1) 0%, rgba(162, 123, 255, 0.1) 100%);
    color: var(--color-bleu-doux);
    transform: translateX(4px);
}

/* Custom gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, var(--color-violet-pastel) 100%);
}

.gradient-soft {
    background: linear-gradient(135deg, var(--color-violet-pastel) 0%, var(--color-rose-doux) 100%);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.card, .alert {
    animation: fadeInUp 0.6s ease-out;
}

/* Messages non lus */
.card.border-primary {
    border-left: 4px solid var(--color-bleu-doux) !important;
    box-shadow: 0 4px 16px rgba(76, 111, 255, 0.2) !important;
}

/* ============================================
   RESPONSIVE MOBILE - DESIGN APP-LIKE
   ============================================ */

@media (max-width: 768px) {
    /* Body et container - App Mobile Style */
    body {
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding-bottom: 80px; /* Espace pour bottom nav */
        background-color: var(--app-bg-base);
        background-image:
            radial-gradient(ellipse 120% 85% at 0% -10%, var(--app-halo-bleu), transparent 50%),
            radial-gradient(ellipse 95% 75% at 100% 0%, var(--app-halo-violet), transparent 46%),
            radial-gradient(ellipse 85% 60% at 50% 105%, var(--app-halo-rose), transparent 52%),
            linear-gradient(
                168deg,
                var(--app-bg-soft) 0%,
                var(--app-bg-base) 42%,
                #fbf9ff 100%
            );
        background-attachment: fixed;
    }

    main.container {
        padding: 0.85rem 0.65rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-width: 100%;
    }

    /* Navigation top - cachée sur mobile */
    .navbar {
        display: none !important;
    }

    /* Mobile Header */
    .mobile-header {
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(76, 111, 255, 0.1);
        position: sticky;
        top: 0;
        z-index: 999;
        box-shadow: 0 4px 20px rgba(76, 111, 255, 0.06);
        display: block;
    }

    .mobile-header-brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--color-bleu-doux);
        text-decoration: none;
        font-weight: 700;
        font-size: 1.25rem;
    }

    .mobile-header-brand i {
        font-size: 1.5rem;
    }

    .mobile-header-avatar {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .mobile-header-actions {
        min-width: 0;
    }

    .mobile-header-locale-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        border: 1px solid rgba(76, 111, 255, 0.22);
        background: rgba(255, 255, 255, 0.95);
        color: var(--color-bleu-doux, #4c6fff);
        font-weight: 700;
        font-size: 0.75rem;
        line-height: 1;
        box-shadow: 0 2px 8px rgba(76, 111, 255, 0.1);
    }

    .mobile-header-locale-toggle::after {
        display: none;
    }

    .mobile-header-locale-toggle .bi-globe2 {
        font-size: 1rem;
    }

    .mobile-header-locale-code {
        letter-spacing: 0.05em;
    }

    .mobile-header-locale .dropdown-menu {
        min-width: 9rem;
        border-radius: 12px;
        margin-top: 0.35rem !important;
    }

    /* Safe area pour iPhone notch */
    @supports (padding: max(0px)) {
        body {
            padding-top: max(0px, env(safe-area-inset-top));
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
        }

        .mobile-header {
            padding-top: max(0px, env(safe-area-inset-top));
        }
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    .navbar-toggler {
        border: none;
        padding: 0.5rem;
        font-size: 1.25rem;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-collapse {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .navbar-nav {
        gap: 0.5rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
        border-radius: 12px;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .navbar-nav .nav-link i {
        font-size: 1.1rem;
    }

    /* Dropdown mobile - plein écran */
    .navbar-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
    }

    /* Cards mobile - design app moderne */
    .card {
        margin-bottom: 1.25rem;
        border-radius: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        border: none;
        overflow: hidden;
        background: #ffffff;
    }

    .card:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .card-body {
        padding: 1.5rem;
    }

    /* Cards dans le feed - style app moderne */
    .card .card-text {
        font-size: 1.05rem;
        line-height: 1.7;
        color: #2E2E3A;
        margin-bottom: 1.25rem;
        font-weight: 400;
    }

    /* Images dans cards mobile */
    .card img.img-fluid {
        border-radius: 16px;
        margin-bottom: 1.25rem;
        width: 100%;
    }

    /* Actions dans cards mobile - style app */
    .card .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: auto;
        font-weight: 600;
    }

    /* Stats dans cards - style app */
    .card small.text-muted {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .card small.text-muted i {
        font-size: 1.1rem;
    }

    .card-header {
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
    }

    /* Boutons mobile : largeur au contenu (pleine largeur → ajouter la classe .w-100 sur le bouton) */
    .btn {
        width: auto;
        max-width: none;
        margin-bottom: 1rem;
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 16px;
        min-height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .btn:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        min-height: auto;
        font-size: 0.9rem;
    }

    .btn:last-child {
        margin-bottom: 0;
    }

    /* Rangées d’actions horizontales : pas de marge bas entre boutons */
    .counselor-dashboard-actions,
    .counselor-edit-hero-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .counselor-dashboard-actions .btn,
    .counselor-edit-hero-toolbar .btn {
        margin-bottom: 0 !important;
        flex: 0 0 auto;
    }

    .counselor-dashboard-actions .btn.btn-primary {
        white-space: nowrap;
    }

    .counselor-edit-hero-toolbar .btn.btn-outline-light {
        white-space: nowrap;
    }

    /* Réponse inline : pas de marge bas sur la rangée de boutons */
    .problem-inline-reply-wrap .d-flex.flex-nowrap .btn {
        margin-bottom: 0 !important;
    }

    /* Boutons en ligne sur mobile */
    .btn-group-mobile {
        display: flex;
        gap: 0.5rem;
    }

    .btn-group-mobile .btn {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    /* Formulaires mobile - app style */
    .form-control,
    .form-select,
    textarea.form-control {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        border-radius: 16px;
        min-height: 52px;
        border: 2px solid #e9ecef;
        background: #ffffff;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-bleu-doux);
        box-shadow: 0 0 0 4px rgba(76, 111, 255, 0.1);
    }

    textarea.form-control {
        min-height: 140px;
        padding: 1.25rem;
    }

    .form-label {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.875rem;
        color: var(--color-gris-neutre);
    }

    /* Alerts mobile - app style */
    .alert {
        padding: 1.25rem 1.5rem;
        border-radius: 16px;
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Titres mobile - app style */
    h1 {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.875rem;
    }

    h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    h5 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.625rem;
    }

    /* Images et médias mobile */
    img.img-fluid {
        border-radius: 12px;
    }

    video {
        border-radius: 12px;
        width: 100%;
    }

    /* Tables mobile - scroll horizontal */
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pagination mobile : zone tactile confortable */
    .pagination-nav {
        padding: 1rem 0.75rem;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .pagination-nav .page-link {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.45rem 0.5rem;
        font-size: 0.88rem;
    }

    .pagination-nav .page-link--icon {
        min-width: 3rem;
        min-height: 2.75rem;
        font-size: 1.25rem;
    }

    /* Footer mobile */
    footer {
        font-size: 0.85rem;
    }

    /* Badges mobile : compacts (évite tags énormes dans les cartes) */
    .badge {
        padding: 0.28rem 0.55rem;
        font-size: 0.68rem;
    }

    /* Espacements app mobile */
    .mb-4 {
        margin-bottom: 2rem !important;
    }

    .mb-3 {
        margin-bottom: 1.5rem !important;
    }

    .mt-4 {
        margin-top: 2rem !important;
    }

    .mt-3 {
        margin-top: 1.5rem !important;
    }

    /* Padding app mobile */
    .p-3 {
        padding: 1.5rem !important;
    }

    .p-4 {
        padding: 2rem !important;
    }

    /* Row et colonnes mobile */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Stats cards mobile */
    .card .card-body h3 {
        font-size: 2rem;
    }

    /* Sidebar cachée sur mobile - seulement pour la page d'accueil */
    .home-sidebar {
        display: none !important;
    }

    /* Colonne principale full width sur mobile - seulement pour la page d'accueil */
    .row > .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Dropdown items mobile */
    .dropdown-item {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .dropdown-item i {
        font-size: 1.2rem;
    }

    /* Modals mobile */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 16px;
    }

    /* Utilitaires mobile */
    .d-flex-mobile {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }

    .text-center-mobile {
        text-align: center !important;
    }
}

/* Très petits écrans (< 375px) */
@media (max-width: 374px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.95rem;
    }

    h1 {
        font-size: 1.35rem;
    }

    h2 {
        font-size: 1.2rem;
    }
}

/* Mode paysage mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar {
        padding: 0.5rem 0;
    }

    main.container {
        padding: 0.65rem 0.5rem !important;
    }
}

/* ============================================
   BOTTOM NAVIGATION BAR - APP MOBILE STYLE
   ============================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid rgba(76, 111, 255, 0.12);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0;
    z-index: 1000;
    box-shadow: 0 -8px 32px rgba(76, 111, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Cacher sur tablette et desktop */
@media (min-width: 768px) {
    .bottom-nav {
        display: none !important;
    }
    
    .mobile-header {
        display: none !important;
    }
}

/* Safe area pour iPhone */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 60px;
    position: relative;
    flex: 1;
}

.bottom-nav-item i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

.bottom-nav-item span {
    font-size: 0.65rem;
    line-height: 1;
}

.bottom-nav-item.active {
    color: var(--color-bleu-doux);
}

.bottom-nav-item.active i {
    transform: scale(1.1);
}

.bottom-nav-item:active {
    transform: scale(0.95);
    opacity: 0.7;
}

/* FAB (Floating Action Button) au centre */
.bottom-nav-fab {
    position: relative;
    margin: -1.5rem 0.5rem 0;
    background: linear-gradient(135deg, var(--color-bleu-doux) 0%, var(--color-violet-pastel) 100%);
    color: white !important;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    min-width: 56px;
    padding: 0;
    box-shadow: 0 4px 12px rgba(76, 111, 255, 0.4);
    flex: 0 0 auto;
}

.bottom-nav-fab i {
    font-size: 1.75rem;
    margin: 0;
    color: white;
}

.bottom-nav-fab span {
    display: none;
}

.bottom-nav-fab:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(76, 111, 255, 0.3);
}

/* Amélioration du scroll sur mobile */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: rgba(76, 111, 255, 0.1);
    }

    body {
        overflow-x: hidden;
    }
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #e8ecf5, #f0f3fb);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--color-violet-pastel), var(--color-rose-doux));
}

/* Effets de hover pour les icônes */
.bi {
    transition: transform 0.3s ease;
}

.card:hover .bi,
.btn:hover .bi {
    transform: scale(1.1);
}

/* Réduit le padding horizontal par rapport au défaut Bootstrap (1.5rem) */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
    --bs-gutter-x: 1.25rem;
}

.container {
    max-width: 1200px;
}

main.container {
    padding-bottom: 2rem;
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
}

h2 {
    font-size: 1.4rem;
    font-weight: 700;
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

h5 {
    font-size: 1rem;
    font-weight: 600;
}

h6 {
    font-size: 0.95rem;
    font-weight: 600;
}

.card-body h3 {
    font-size: 2rem;
}

.card-body h4 {
    font-size: 1.2rem;
}

.card-body h5 {
    font-size: 1rem;
}

/* Styles pour les médias */
img.img-fluid {
    transition: transform 0.3s ease;
}

/* Toujours afficher l’image entière (pas de rognage type cover) */
img.img-thumbnail {
    object-fit: contain;
}

img.img-fluid:hover {
    transform: scale(1.02);
}

video {
    border-radius: 12px;
}

/* Modal pour images */
#imageModal .modal-content {
    background: rgba(0, 0, 0, 0.9) !important;
}

#imageModal .btn-close-white {
    filter: invert(1);
}

/* --------------------------------------------------------------------------
   Profil public utilisateur (/profile/{username})
   -------------------------------------------------------------------------- */
.public-profile-shell {
    position: relative;
}

.public-profile-cover {
    height: 140px;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(
        125deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 48%,
        var(--color-rose-doux, #ff6f91) 100%
    );
    box-shadow: inset 0 -28px 44px rgba(0, 0, 0, 0.07);
}

@media (min-width: 768px) {
    .public-profile-cover {
        height: 168px;
        border-radius: 0 0 26px 26px;
    }
}

.public-profile-inner {
    position: relative;
    margin-top: -72px;
    z-index: 2;
}

@media (min-width: 768px) {
    .public-profile-inner {
        margin-top: -84px;
    }
}

.public-profile-header {
    border-radius: 18px !important;
    border: 1px solid rgba(76, 111, 255, 0.12) !important;
    overflow: visible;
}

.public-profile-header__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.25rem 1.25rem;
    padding-top: 0;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .public-profile-header__top {
        flex-direction: row;
        align-items: flex-end;
        text-align: left;
        gap: 1.5rem;
        padding: 0 1.75rem 1.5rem;
    }
}

.public-profile-avatar-wrap {
    flex-shrink: 0;
    margin-top: -56px;
}

@media (min-width: 768px) {
    .public-profile-avatar-wrap {
        margin-top: -64px;
    }
}

.public-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 4px solid #fff;
    box-shadow: 0 10px 28px rgba(46, 46, 58, 0.18);
    background: #f0f2fa;
}

@media (min-width: 768px) {
    .public-profile-avatar {
        width: 144px;
        height: 144px;
    }
}

.public-profile-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
}

.public-profile-name {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-gris-neutre, #2e2e3a);
}

.public-profile-handle {
    color: #6c7388;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.public-profile-bio {
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 42rem;
}

.public-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.public-profile-badge--verified {
    background: linear-gradient(180deg, #e8f8ef 0%, #d4f0e3 100%);
    color: #1d7a4c;
    border: 1px solid rgba(40, 167, 69, 0.25);
}

.public-profile-badge--counselor {
    background: linear-gradient(180deg, #eef6ff 0%, #e0ecff 100%);
    color: var(--color-bleu-doux, #4c6fff);
    border: 1px solid rgba(76, 111, 255, 0.22);
}

/* Barre d’actions profil (propriétaire) : deux colonnes égales, centrées sur mobile */
.profile-owner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: min(100%, 22.5rem);
}

@media (max-width: 767.98px) {
    .profile-owner-actions {
        margin-inline: auto;
    }
}

@media (min-width: 768px) {
    .profile-owner-actions {
        margin-left: auto;
        margin-right: 0;
        width: min(100%, 26rem);
    }
}

.profile-owner-actions .profile-owner-actions__form {
    min-width: 0;
}

.counselor-dashboard-hero .counselor-dashboard-actions .btn {
    white-space: nowrap;
}

.public-profile-stat {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 0.75rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f9f9ff 100%);
    border: 1px solid rgba(76, 111, 255, 0.1);
    box-shadow: 0 4px 14px rgba(76, 111, 255, 0.06);
    min-height: 118px;
}

.public-profile-stat__icon {
    font-size: 1.25rem;
    color: rgba(76, 111, 255, 0.5);
    margin-bottom: 0.35rem;
}

.public-profile-stat__value {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.public-profile-stat__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c7388;
    margin-top: 0.25rem;
    max-width: 12rem;
}

.public-profile-stats-hint {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.45;
}

.public-profile-problems {
    border-radius: 16px !important;
    border: 1px solid rgba(76, 111, 255, 0.1) !important;
}

.public-profile-problems__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(
        135deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 52%,
        #8b5cf6 100%
    );
    color: #fff;
}

.public-profile-problems__title {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.public-profile-problems__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.public-profile-problems__body {
    padding: 1.25rem;
    background: linear-gradient(180deg, #fafbff 0%, #fff 28%);
}

@media (min-width: 768px) {
    .public-profile-problems__body {
        padding: 1.5rem 1.75rem 1.75rem;
    }
}

.profile-problem-card {
    border-radius: 14px !important;
    border: 1px solid rgba(76, 111, 255, 0.08) !important;
    background: #fff;
}

.profile-problem-card__media {
    max-height: 240px;
    object-fit: contain;
    background: #f6f7fb;
}

.profile-problem-card__video {
    max-height: 280px;
    background: #000;
}

.public-profile-empty__icon {
    font-size: 2.5rem;
    color: rgba(76, 111, 255, 0.35);
}

/* --------------------------------------------------------------------------
   Profil conseiller (style « réseau social » : bannière + avatar + colonnes)
   -------------------------------------------------------------------------- */
.counselor-profile-shell {
    position: relative;
}

.counselor-cover {
    height: 200px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(
        135deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 45%,
        var(--color-rose-doux, #ff6f91) 100%
    );
    box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
    .counselor-cover {
        height: 240px;
        border-radius: 0 0 24px 24px;
    }
}

.counselor-profile-inner {
    position: relative;
    margin-top: -88px;
    z-index: 2;
}

@media (min-width: 768px) {
    .counselor-profile-inner {
        margin-top: -100px;
    }
}

.counselor-profile-header {
    border-radius: 16px !important;
    border: 1px solid rgba(76, 111, 255, 0.1);
    overflow: visible;
}

.counselor-profile-header-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.25rem 1rem;
    padding-top: 0;
}

@media (min-width: 768px) {
    .counselor-profile-header-top {
        flex-direction: row;
        align-items: flex-end;
        text-align: left;
        padding: 0 1.75rem 1.25rem;
        gap: 1.5rem;
    }
}

.counselor-avatar-wrap {
    flex-shrink: 0;
    margin-top: -72px;
}

@media (min-width: 768px) {
    .counselor-avatar-wrap {
        margin-top: -84px;
    }
}

.counselor-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 4px solid #fff;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(46, 46, 58, 0.16));
    background: #f0f2fa;
}

@media (min-width: 768px) {
    .counselor-avatar {
        width: 168px;
        height: 168px;
    }
}

.counselor-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
}

.counselor-profile-name {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-gris-neutre, #2e2e3a);
}

@media (min-width: 768px) {
    .counselor-profile-name {
        font-size: 1.5rem;
    }
}

/* Espace autour du nom + centrage cohérent avec le reste du bloc (mobile) */
.counselor-profile-name-row {
    margin-top: 0.4rem;
    margin-bottom: 0.55rem;
}

@media (min-width: 768px) {
    .counselor-profile-name-row {
        margin-top: 0;
        margin-bottom: 0.35rem;
    }
}

.counselor-profile-headline {
    font-size: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

.counselor-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #e7f1ff;
    color: var(--color-bleu-doux, #4c6fff);
    font-size: 1.1rem;
}

.counselor-profile-tabs .nav-link {
    border-radius: 999px !important;
    padding: 0.4rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #5c5c6e;
}

.counselor-profile-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel)) !important;
    color: #fff !important;
}

.counselor-profile-nav {
    background: linear-gradient(180deg, #fbfbfe 0%, #f0f2fa 100%);
    border-top: 1px solid rgba(76, 111, 255, 0.1) !important;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    /* Surcharge du style « app » mobile (.card .btn) : boutons compacts et centrés */
    .counselor-profile-header .counselor-profile-actions .btn,
    .counselor-profile-header .counselor-profile-actions .btn.btn-sm {
        width: auto !important;
        max-width: min(100%, 20rem);
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding: 0.45rem 0.95rem !important;
        font-size: 0.875rem !important;
        border-radius: 10px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm, 0 2px 8px rgba(46, 46, 58, 0.1));
    }

    .counselor-profile-header-top {
        padding-bottom: 1.15rem;
    }

    .counselor-avatar-wrap {
        margin-top: -64px;
    }

    .counselor-avatar,
    .counselor-avatar--placeholder {
        width: 120px;
        height: 120px;
    }

    .counselor-avatar--placeholder {
        font-size: 2.5rem;
    }

    .public-profile-stat__value {
        font-size: 1.4rem;
    }
}

.counselor-pane {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(46, 46, 58, 0.08));
    border: 1px solid rgba(76, 111, 255, 0.1);
}

.counselor-pane--sidebar {
    border-radius: 14px !important;
}

.counselor-pane__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(
        135deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 52%,
        #8b5cf6 100%
    );
    color: #fff;
    font-weight: 700;
}

.counselor-pane__header i {
    font-size: 1.2rem;
    opacity: 0.95;
    flex-shrink: 0;
}

.counselor-pane__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: inherit;
    line-height: 1.25;
}

.counselor-pane__header--sm {
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.counselor-pane__header--sm i {
    font-size: 1rem;
}

.counselor-pane__header--split {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.5rem;
}

.counselor-pane__tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    white-space: nowrap;
}

.counselor-pane__body {
    padding: 1.25rem 1.3rem;
}

@media (min-width: 768px) {
    .counselor-pane__body {
        padding: 1.35rem 1.5rem;
    }
}

.counselor-bio {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 0.98rem;
}

/* Métadonnées sidebar */
.counselor-dl {
    margin: 0;
}

.counselor-meta-row {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(76, 111, 255, 0.1);
}

.counselor-meta-row:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.counselor-meta-row dt {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8b8b9e;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.counselor-meta-row dd {
    margin: 0;
}

.counselor-meta-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-gris-neutre, #2e2e3a);
    word-break: break-word;
}

/* Grille de statistiques */
.counselor-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

@media (max-width: 420px) {
    .counselor-stats-grid {
        grid-template-columns: 1fr;
    }
}

.counselor-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 5.5rem;
    padding: 0.65rem 0.45rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8f9fd 0%, #fff 55%);
    border: 1px solid rgba(76, 111, 255, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.counselor-stat-box:hover {
    border-color: rgba(76, 111, 255, 0.28);
    box-shadow: 0 4px 12px rgba(76, 111, 255, 0.1);
}

.counselor-stat-box > i {
    font-size: 1.15rem;
    color: var(--color-bleu-doux, #4c6fff);
    margin-bottom: 0.3rem;
    opacity: 0.92;
}

.counselor-stat-box__value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-bleu-doux, #4c6fff);
    letter-spacing: -0.02em;
}

.counselor-stat-box__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6c6c80;
    margin-top: 0.25rem;
    line-height: 1.25;
    max-width: 7.5rem;
}

.counselor-stats-footnote {
    padding-top: 0.25rem;
    line-height: 1.45;
    border-top: 1px dashed rgba(76, 111, 255, 0.15);
}

/* États vides */
.counselor-empty {
    text-align: center;
    padding: 1.5rem 1rem;
}

.counselor-empty--soft {
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(76, 111, 255, 0.06) 0%, rgba(162, 123, 255, 0.05) 50%, #fff 100%);
    border: 1px dashed rgba(76, 111, 255, 0.22);
}

.counselor-empty--activity {
    padding: 2.25rem 1.25rem 2rem;
    border-radius: 14px;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(76, 111, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #fafbff 0%, #fff 40%);
    border: 1px solid rgba(76, 111, 255, 0.1);
}

.counselor-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    background: rgba(76, 111, 255, 0.12);
    color: var(--color-bleu-doux, #4c6fff);
    font-size: 1.35rem;
}

.counselor-empty__icon--lg {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.65rem;
    margin-bottom: 1rem;
}

.counselor-empty__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-gris-neutre, #2e2e3a);
    margin-bottom: 0.5rem;
}

.counselor-empty__text {
    font-size: 0.92rem;
    color: #6c6c80;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.scroll-margin-top {
    scroll-margin-top: 5.5rem;
}

.counselor-activity-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
    box-shadow: 0 0 0 4px rgba(76, 111, 255, 0.2);
}

.counselor-activity-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.counselor-activity-problem {
    border-left: 3px solid #e9ecef;
    padding-left: 0.75rem;
}

.counselor-activity-response .problem-content-text--collapsible:not(.is-expanded)::after {
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0), #f8f9fa);
}

.counselor-activity-response .problem-content-text {
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Liste des conseillers (/counselors)
   -------------------------------------------------------------------------- */
.counselors-page {
    padding-top: 0.25rem;
}

.counselors-hero {
    position: relative;
    padding: 1.75rem 1.5rem 2rem;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(76, 111, 255, 0.1) 0%,
        rgba(162, 123, 255, 0.08) 45%,
        rgba(255, 111, 145, 0.06) 100%
    );
    border: 1px solid rgba(76, 111, 255, 0.14);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(46, 46, 58, 0.06));
    overflow: hidden;
}

.counselors-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 55%;
    height: 140%;
    background: radial-gradient(circle, rgba(76, 111, 255, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.counselors-hero__badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-bleu-doux, #4c6fff);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(76, 111, 255, 0.2);
    border-radius: 999px;
}

.counselors-hero__title {
    position: relative;
    z-index: 1;
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.65rem;
    background: linear-gradient(135deg, var(--color-bleu-doux, #4c6fff) 0%, var(--color-violet-pastel, #a27bff) 55%, #c44fd4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.counselors-hero__lead {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    line-height: 1.55;
    color: #5a5a6e;
    max-width: 42rem;
}

@media (min-width: 768px) {
    .counselors-hero {
        padding: 2rem 2.25rem 2.25rem;
    }
}

/* Barre filtres + compteur (bouton compact) */
.counselors-filters-toolbar {
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(76, 111, 255, 0.12);
    box-shadow: 0 2px 10px rgba(76, 111, 255, 0.05);
}

.counselors-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-bleu-doux, #4c6fff);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(76, 111, 255, 0.38);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(76, 111, 255, 0.08);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.counselors-filter-toggle:hover {
    background: #fff;
    border-color: var(--color-bleu-doux, #4c6fff);
    box-shadow: 0 2px 8px rgba(76, 111, 255, 0.12);
}

.counselors-filter-toggle:focus-visible {
    outline: 2px solid rgba(76, 111, 255, 0.45);
    outline-offset: 2px;
}

.counselors-filter-toggle i {
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.95;
}

.counselors-filter-toggle__badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.18em 0.5em;
    background: var(--color-bleu-doux, #4c6fff) !important;
}

.counselors-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c7588;
    text-decoration: none;
}

.counselors-filter-reset:hover {
    color: var(--color-bleu-doux, #4c6fff);
    text-decoration: underline;
}

.counselors-results-count {
    font-size: 0.84rem;
    line-height: 1.35;
    color: #5c6178;
}

@media (min-width: 576px) {
    .counselors-results-count {
        text-align: right;
        max-width: 22rem;
    }
}

.counselors-filters-summary {
    margin-left: 0.1rem;
}

.counselors-filters-form {
    border-radius: 16px !important;
    border: 1px solid rgba(76, 111, 255, 0.12) !important;
}

.counselors-filters-form .form-label {
    letter-spacing: 0.02em;
}

.counselors-filters-form .form-control,
.counselors-filters-form .form-select {
    border-radius: 10px;
    border-color: #e2e6f4;
}

.counselors-filters-form .form-control:focus,
.counselors-filters-form .form-select:focus {
    border-color: var(--color-bleu-doux, #4c6fff);
    box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.15);
}

.counselor-index-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(76, 111, 255, 0.12);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(46, 46, 58, 0.07));
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    min-width: 0;
}

.counselor-index-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(76, 111, 255, 0.12);
    border-color: rgba(76, 111, 255, 0.22);
}

.counselor-index-card__banner {
    height: 4.25rem;
    background: linear-gradient(
        120deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 50%,
        var(--color-rose-doux, #ff6f91) 100%
    );
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.counselor-index-card__body {
    padding: 0 0.7rem 1rem;
    margin-top: -2.75rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 576px) {
    .counselor-index-card__body {
        padding: 0 1rem 1.15rem;
    }
}

@media (min-width: 768px) {
    .counselor-index-card__body {
        padding: 0 1.35rem 1.35rem;
    }
}

.counselor-index-card__avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.65rem;
}

.counselor-index-card__avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 4px solid #fff;
    box-shadow: 0 6px 18px rgba(46, 46, 58, 0.12);
    background: #f0f2fa;
}

.counselor-index-card__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux, #4c6fff), var(--color-violet-pastel, #a27bff));
}

.counselor-index-card__name a {
    transition: color 0.15s ease;
}

.counselor-index-card__name a:hover {
    color: var(--color-bleu-doux, #4c6fff) !important;
}

.counselor-index-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-bleu-doux, #4c6fff);
    background: rgba(76, 111, 255, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.35rem;
}

.counselor-index-card__verified i {
    font-size: 0.85rem;
}

.counselor-index-card__username {
    line-height: 1.3;
}

.counselor-index-card__headline {
    font-weight: 600;
    color: #6c6c80 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.counselor-index-card__bio {
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.counselor-index-card__bio--muted {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    opacity: 0.85;
    line-height: 1.45;
}

@media (max-width: 575.98px) {
    .counselor-index-card__bio--muted {
        font-size: 0.78rem;
    }
}

.counselor-index-card__actions {
    border-color: rgba(76, 111, 255, 0.1) !important;
    align-items: stretch;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .counselor-index-card__actions .btn,
    .counselor-index-card__actions .btn.btn-sm {
        width: 100%;
        min-height: 2.35rem;
        padding: 0.4rem 0.55rem;
        font-size: 0.8125rem;
        white-space: normal;
        line-height: 1.25;
    }

    .counselor-index-card__avatar,
    .counselor-index-card__avatar--placeholder {
        width: 4.75rem;
        height: 4.75rem;
    }

    .counselor-index-card__avatar--placeholder {
        font-size: 1.7rem;
    }

    .counselor-index-card__name {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .counselor-index-card__actions .btn,
    .counselor-index-card__actions .btn.btn-sm {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 100%;
        min-height: 2.5rem;
        padding: 0.45rem 0.4rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
}

.counselor-index-card__actions .btn {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.counselors-empty {
    padding: 2.5rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #fafbff 0%, #fff 45%);
    border: 1px dashed rgba(76, 111, 255, 0.25);
}

.counselors-empty__text {
    max-width: 28rem;
}

.counselor-gallery-thumb {
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.counselor-gallery-thumb:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(76, 111, 255, 0.2);
}

.counselor-gallery-thumb:focus-visible {
    outline: 2px solid var(--color-bleu-doux, #4c6fff);
    outline-offset: 2px;
}

.counselor-gallery-edit-item {
    cursor: pointer;
}

.counselor-gallery-edit-item .form-check-input {
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Édition page conseiller (counselor/profile/edit)
   -------------------------------------------------------------------------- */
.counselor-edit-page {
    --counselor-edit-radius: 16px;
}

.counselor-edit-page__hero {
    border-radius: var(--counselor-edit-radius) !important;
}

.counselor-edit-page__hero-inner {
    padding: 1.35rem 1.5rem;
    background: linear-gradient(
        125deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 48%,
        #8b5cf6 100%
    );
    color: #fff;
}

@media (min-width: 768px) {
    .counselor-edit-page__hero-inner {
        padding: 1.65rem 2rem;
    }
}

.counselor-edit-page__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.92;
    margin-bottom: 0.35rem;
}

.counselor-edit-page__title {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff !important;
}

.counselor-edit-page__lead {
    max-width: 36rem;
    line-height: 1.5;
}

.counselor-edit-page__hero-link {
    color: #fff !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.counselor-edit-page__hero-link:hover {
    opacity: 0.95;
}

.counselor-edit-panel {
    border-radius: var(--counselor-edit-radius) !important;
    overflow: hidden;
}

@media (min-width: 992px) {
    .counselor-edit-page .col-lg-5 .counselor-edit-panel {
        position: sticky;
        top: 0.85rem;
    }
}

.counselor-edit-panel__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux, #4c6fff), var(--color-violet-pastel, #a27bff));
}

.counselor-edit-panel__head i {
    font-size: 1.1rem;
    opacity: 0.95;
}

.counselor-edit-panel__head--soft {
    background: linear-gradient(180deg, #f4f6fc 0%, #eef1fb 100%);
    color: #4a4a5c;
    border-bottom: 1px solid rgba(76, 111, 255, 0.12);
}

.counselor-edit-section__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2e2e3a;
    margin-bottom: 0.35rem;
}

.counselor-edit-section__hint {
    line-height: 1.45;
}

.counselor-edit-photo-frame {
    border-radius: 14px;
    background: linear-gradient(180deg, #f8f9ff 0%, #fff 55%);
    border: 1px dashed rgba(76, 111, 255, 0.35);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.counselor-edit-photo-frame__img {
    width: 100%;
    min-height: 200px;
    max-height: 280px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.counselor-edit-photo-frame__empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #8b8b9e;
    font-size: 0.9rem;
    font-weight: 600;
}

.counselor-edit-photo-frame__empty i {
    font-size: 2.25rem;
    opacity: 0.45;
    color: var(--color-bleu-doux, #4c6fff);
}

.counselor-edit-file {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.counselor-edit-file__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    width: 100%;
    height: 100%;
}

.counselor-edit-gallery-tile {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(76, 111, 255, 0.15);
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    background: #fff;
}

.counselor-edit-gallery-tile:hover {
    border-color: rgba(76, 111, 255, 0.45);
    box-shadow: 0 8px 22px rgba(76, 111, 255, 0.12);
    transform: translateY(-1px);
}

.counselor-edit-gallery-tile__img-wrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f2fa;
}

.counselor-edit-gallery-tile__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.counselor-edit-gallery-tile__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5c5c6e;
    background: linear-gradient(180deg, #fafbff, #f3f5fd);
    border-top: 1px solid rgba(76, 111, 255, 0.1);
}

.counselor-edit-upload-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .counselor-edit-upload-stack {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.counselor-edit-mini-drop {
    flex: 1 1 140px;
    min-height: 3.25rem;
    border-radius: 12px;
    border: 2px dashed rgba(76, 111, 255, 0.28);
    background: rgba(76, 111, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.counselor-edit-mini-drop:hover {
    border-color: var(--color-bleu-doux, #4c6fff);
    background: rgba(76, 111, 255, 0.08);
}

.counselor-edit-mini-drop__icon {
    font-size: 1rem;
    color: var(--color-bleu-doux, #4c6fff);
}

.counselor-edit-mini-drop__text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5c5c6e;
}

.counselor-edit-input,
.counselor-edit-textarea {
    border-radius: 11px;
    border-color: #e2e6f4;
}

.counselor-edit-input:focus,
.counselor-edit-textarea:focus {
    border-color: var(--color-bleu-doux, #4c6fff);
    box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.15);
}

.counselor-edit-textarea {
    min-height: 220px;
    line-height: 1.55;
}

.counselor-edit-page__footer {
    border-radius: var(--counselor-edit-radius) !important;
    background: linear-gradient(180deg, #fafbff 0%, #fff 40%) !important;
    border: 1px solid rgba(76, 111, 255, 0.1) !important;
}

.counselor-edit-page__footer .btn-primary {
    box-shadow: 0 4px 14px rgba(76, 111, 255, 0.25);
}

.counselors-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    color: var(--color-bleu-doux, #4c6fff);
    background: rgba(76, 111, 255, 0.1);
    border-radius: 50%;
}


/* --------------------------------------------------------------------------
   Partage message anonyme (carte publique + boutons réseaux)
   -------------------------------------------------------------------------- */
.anonymous-share-page {
    background: linear-gradient(180deg, #f4f6fc 0%, #fafbfd 35%, #fff 100%);
}

.anonymous-share-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(76, 111, 255, 0.14);
    background: #fff;
}

.anonymous-share-card__header {
    padding: 1.75rem 1.5rem 1.5rem;
    background: linear-gradient(
        135deg,
        var(--color-bleu-doux, #4c6fff) 0%,
        var(--color-violet-pastel, #a27bff) 55%,
        #8b5cf6 100%
    );
}

.anonymous-share-card__avatar-wrap {
    width: 5.5rem;
    height: 5.5rem;
}

.anonymous-share-card__avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 4px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: #f0f2fa;
}

.anonymous-share-card__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
    border: 4px solid rgba(255, 255, 255, 0.85);
}

.anonymous-share-card__badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.anonymous-share-card__body {
    padding: 1.5rem 1.35rem 1.25rem;
}

@media (min-width: 576px) {
    .anonymous-share-card__body {
        padding: 1.75rem 2rem 1.5rem;
    }
}

.anonymous-share-block__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6c6c80;
    margin-bottom: 0.5rem;
}

.anonymous-share-block__label i {
    margin-right: 0.35rem;
    color: var(--color-bleu-doux, #4c6fff);
}

.anonymous-share-block__content {
    font-size: 0.98rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: #f6f7fb;
    border: 1px solid #e8eaf4;
}

.anonymous-share-block--reply .anonymous-share-block__content--reply {
    background: linear-gradient(135deg, rgba(76, 111, 255, 0.08) 0%, rgba(162, 123, 255, 0.06) 100%);
    border-color: rgba(76, 111, 255, 0.2);
    font-weight: 500;
    color: #2e2e3a;
}

.anonymous-share-card__footer {
    padding: 1rem 1.25rem 1.35rem;
    background: #fafbff;
    border-top: 1px solid rgba(76, 111, 255, 0.1);
}

.anonymous-share-accordion .accordion-item {
    border-radius: 12px;
}

.anonymous-share-accordion__toggle {
    background: linear-gradient(180deg, #fff 0%, #f6f8fd 100%) !important;
    font-size: 0.9rem;
}

.anonymous-share-accordion__toggle:not(.collapsed) {
    background: linear-gradient(180deg, rgba(76, 111, 255, 0.08) 0%, #fff 100%) !important;
    color: var(--color-gris-neutre) !important;
    box-shadow: none !important;
}

.anonymous-share-accordion__toggle:focus {
    box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.25) !important;
    border-color: transparent;
}

.anonymous-share-icon-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.anonymous-share-icon-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    font-size: 1.05rem;
    line-height: 1;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.anonymous-share-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 46, 58, 0.14);
}

.anonymous-share-icon-btn:focus-visible {
    outline: 2px solid rgba(76, 111, 255, 0.55);
    outline-offset: 2px;
}

.anonymous-share-icon-btn--wa {
    background: #25d366;
    border-color: #1ebe57;
    color: #fff !important;
}

.anonymous-share-icon-btn--fb {
    background: #1877f2;
    border-color: #0d65d9;
    color: #fff !important;
}

.anonymous-share-icon-btn--x {
    background: #0f1419;
    border-color: #000;
    color: #fff !important;
}

.anonymous-share-icon-btn--li {
    background: #0a66c2;
    border-color: #0957a8;
    color: #fff !important;
}

.anonymous-share-icon-btn--mail {
    background: #f8f9fc;
    border-color: #e2e6f4;
    color: #4a4a5a !important;
}

.anonymous-share-toolbar {
    border-radius: 14px !important;
    border: 1px solid rgba(76, 111, 255, 0.12) !important;
}

/* En-tête auteur / anonyme sur les publications */
.problem-post-header__avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(46, 46, 58, 0.08);
    background: #f0f2fa;
}

.problem-post-header__avatar--placeholder {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
}

.problem-post-header__avatar--anonymous {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, #5c6478, #8b93a8);
    border: 1px solid rgba(46, 46, 58, 0.1);
}

.problem-post-header__name:hover {
    color: var(--color-bleu-doux, #4c6fff) !important;
}

.problem-post-header__name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Tags sous les publications (fil, profil, fiche problème) : discrets */
.problem-tags .badge {
    padding: 0.15rem 0.42rem;
    font-size: 0.62rem;
    font-weight: 500;
    border-radius: 999px;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.problem-tags .badge i {
    font-size: 0.85em;
    vertical-align: -0.05em;
}

/* Pied de carte problème (accueil, profil) : stats + boutons alignés */
.problem-card-footer {
    border-top: 1px solid #f0f0f0;
}

.problem-card-footer__actions {
    flex-shrink: 0;
}

.card .problem-card-footer__actions .btn,
.problem-card-footer__actions .btn {
    white-space: nowrap;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    width: auto;
    max-width: 100%;
    min-height: unset;
    margin-bottom: 0;
    padding: 0.3rem 0.65rem;
    font-size: 0.8125rem;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.problem-card-footer__actions .btn > i {
    margin: 0;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.problem-card-footer__delete-form {
    display: flex;
    align-items: stretch;
    margin: 0;
}

.problem-card-footer__actions--multi {
    max-width: 100%;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .problem-card-footer__actions--multi {
        flex-wrap: nowrap;
    }
}

@media (max-width: 575.98px) {
    /* Accueil : icônes seules — boutons carrés pour un centrage horizontal et vertical net */
    .problem-card-footer__actions:not(.problem-card-footer__actions--multi) .btn.btn-sm {
        width: 2.375rem;
        min-width: 2.375rem;
        height: 2.375rem;
        padding: 0;
        gap: 0;
    }
}

/* Bouton « Voir plus / Voir moins » sous le texte repliable : reste discret sur mobile (surcharge .card .btn-sm) */
.card .problem-content-wrapper button.problem-content-toggle.btn-sm {
    width: auto !important;
    min-height: 0 !important;
    padding: 0.15rem 0 !important;
    margin: 0.35rem 0 0 !important;
    font-size: 0.875rem !important;
    border-radius: 0;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
}

/* Texte des problèmes : retours à la ligne + aperçu repliable */
.problem-content-text {
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.problem-content-text--collapsible:not(.is-expanded) {
    max-height: 7.5rem;
    overflow: hidden;
    position: relative;
}

.problem-content-text--collapsible:not(.is-expanded)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.25rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-blanc-creme, #f9fafd));
}

.card .problem-content-text--collapsible:not(.is-expanded)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.problem-content-toggle {
    text-decoration: none;
    font-weight: 600;
}

.problem-content-toggle:hover {
    text-decoration: underline;
}

/* Popup opt-in notifications push (FCM), coin bas-droit — au-dessus de la bottom-nav mobile */
.fcm-push-popup {
    position: fixed;
    z-index: 1050;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(22rem, calc(100vw - 1.5rem));
    max-width: 100%;
    pointer-events: auto;
}

.fcm-push-popup__card {
    width: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Centrage horizontal fiable : le groupe de boutons est inline-flex dans un bloc text-align:center */
.fcm-push-popup__actions {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.fcm-push-popup__btn-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    vertical-align: middle;
}

.fcm-push-popup__btn-row .btn {
    margin-top: 0;
    margin-bottom: 0 !important;
}

.fcm-push-popup__head {
    background: linear-gradient(120deg, #4c6fff 0%, #7b5cff 55%, #9b6dff 100%);
}

.fcm-push-popup__head--warn {
    background: linear-gradient(120deg, #ffe8a3 0%, #fff3cd 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fcm-push-popup__success-icon {
    font-size: 2.25rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .fcm-push-popup {
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: calc(4.75rem + max(0.5rem, env(safe-area-inset-bottom, 0px)));
        width: auto;
    }
}

@supports (padding: max(0px)) {
    .fcm-push-popup {
        padding-bottom: 0;
    }
}

/* Bannières publicitaires (emplacements admin) */
.site-ad-slot__inner {
    max-width: 100%;
}

.site-ad-slot__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.site-ad-slot__label {
    font-size: 0.65rem;
}

.site-ad-slot__close {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    flex-shrink: 0;
}

.site-ad-slot__close:hover {
    background: #fff;
    color: #212529;
}

.site-ad-slot__close:focus-visible {
    outline: 2px solid var(--color-bleu-doux, #4c6fff);
    outline-offset: 1px;
}

.problem-content-translated-badge {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}



/* === Pub card + problem show (sync from resources/css/custom.css) === */
/* Carte « publication » : en-tête clair (le .card-header global est en dégradé → boutons illisibles) */
.problem-show-main-card > .card-header {
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-gris-neutre);
    border-bottom: 1px solid rgba(46, 46, 58, 0.09);
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding: 0.4rem 0.75rem !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.problem-show-main-card > .card-header::after {
    display: none;
}

.problem-show-main-card > .card-header .problem-show-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.125rem !important;
    height: 2.125rem !important;
    min-width: 2.125rem !important;
    max-width: 2.125rem !important;
    padding: 0 !important;
    line-height: 1;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    border-radius: 50% !important;
}

.problem-show-main-card > .card-header .problem-show-back::after {
    display: none !important;
}

.problem-show-main-card > .card-header .problem-show-back:hover {
    background: #fff !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--color-gris-neutre) !important;
}

/* Publication : carte fil (haut clair, barre sombre, pilules) — palette du site */
.problem-show-post {
    overflow: hidden;
}

/* ——— Surface claire (avatar + texte) ——— */
.pub-card__surface {
    background: #fff;
}

.pub-card__surface .problem-post-header__name,
.pub-card__surface .problem-post-header__name a {
    color: var(--color-gris-neutre) !important;
    font-weight: 700;
}

.pub-card__surface .problem-post-header__name a:hover {
    color: var(--color-bleu-doux) !important;
}

.pub-card__surface .problem-post-header__date {
    color: rgba(51, 51, 51, 0.52) !important;
}

.pub-card__empty {
    color: rgba(51, 51, 51, 0.5);
    font-size: 0.9375rem;
}

.pub-card__content {
    padding-top: 0.25rem;
}

.pub-card__content .problem-content-wrapper {
    text-align: left;
    width: 100%;
}

.pub-card__content .problem-content-text {
    color: var(--color-gris-neutre) !important;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
}

@media (min-width: 576px) {
    .pub-card__content .problem-content-text {
        font-size: 1.05rem;
    }
}

.pub-card__content .problem-content-translated-badge {
    color: rgba(51, 51, 51, 0.55) !important;
    font-size: 0.8125rem;
}

.pub-card__content .problem-content-toggle {
    color: var(--color-bleu-doux) !important;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Médias sous le texte */
.pub-card__media {
    background: linear-gradient(180deg, #f8f9fc 0%, #eef0f7 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ——— Barre d’engagement (violet du site, stats à gauche, CTA à droite) ——— */
.pub-card__engage {
    background: linear-gradient(
        118deg,
        #b18fff 0%,
        var(--color-violet-pastel) 35%,
        #8f5ff0 70%,
        var(--color-violet-pastel) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.pub-card__engage.p-1 {
    padding: 0.25rem !important;
}

.pub-card__engage-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 0.5rem;
    row-gap: 0;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Stats à gauche, CTA aligné à droite */
.pub-card__engage-stats {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    justify-content: flex-start;
    min-width: 0;
}

.pub-card__engage-center {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pub-card__engage-end {
    display: none;
}

.pub-card__stat {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.pub-card__stat .bi {
    opacity: 0.9;
    font-size: 1rem;
}

.pub-card__stat-num,
.pub-card__stat .problem-stat-num {
    color: #fff;
    font-weight: 700;
}

.pub-card__stat-btn {
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    transform: none !important;
}

.pub-card__stat-btn:hover {
    color: #fff !important;
}

.pub-card__stat-btn.is-liked,
.pub-card__stat-btn.is-liked .bi {
    color: var(--color-rose-doux) !important;
}

.pub-card__cta.btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(46, 46, 58, 0.22);
    --bs-btn-border-color: rgba(255, 255, 255, 0.28);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(46, 46, 58, 0.32);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.38);
    --bs-btn-focus-shadow-rgb: 162, 123, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.2);
    min-width: clamp(2.75rem, 18vw, 10.5rem);
    min-height: auto;
    padding: 0.25rem 0.5rem !important;
    border-radius: 999px !important;
    font-weight: 600;
    line-height: 1;
    box-shadow: none !important;
}

.pub-card__cta.btn .bi {
    font-size: 1.15rem;
}

.pub-card__cta.btn:hover .bi,
.pub-card__cta.btn:focus-visible .bi {
    transform: translateX(2px);
    transition: transform 0.15s ease;
}

/* ——— Tags : pilules avec fond pastel (lisible sur fond blanc) ——— */
.pub-card__tags {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pub-card__tag-pill {
    display: inline-block;
    padding: 0.20rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(162, 123, 255, 0.18), rgba(76, 111, 255, 0.12));
    border: 1px solid rgba(76, 111, 255, 0.28);
    color: var(--color-gris-neutre);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(46, 46, 58, 0.04);
}

.pub-card__tag-pill:hover {
    border-color: var(--color-bleu-doux);
    color: var(--color-bleu-doux);
    background: linear-gradient(135deg, rgba(162, 123, 255, 0.26), rgba(76, 111, 255, 0.16));
}

/* Accueil : même carte, un peu plus compacte */
.home-feed-card .pub-card__content .problem-content-text {
    font-size: 0.98rem;
}

@media (max-width: 575.98px) {
    .pub-card__engage-inner {
        column-gap: 0.35rem;
    }

    .pub-card__engage-stats {
        gap: 0.35rem 0.45rem;
    }

    .pub-card__stat {
        font-size: 0.75rem;
    }

    .pub-card__stat .bi {
        font-size: 0.9rem;
    }

    .pub-card__cta.btn {
        min-height: auto;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Fil d’accueil / profil : bouton « ouvrir » carré (icône seule sur mobile) + tags pastels */
.problem-card-open-btn {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 !important;
    border-radius: 12px !important;
    border-width: 2px !important;
    border-color: var(--color-bleu-doux) !important;
    background: #fff !important;
    color: var(--color-bleu-doux) !important;
    box-shadow: none !important;
    font-weight: 600;
}

.problem-card-open-btn:hover {
    background: rgba(76, 111, 255, 0.08) !important;
    border-color: var(--color-violet-pastel) !important;
    color: var(--color-violet-pastel) !important;
    transform: none !important;
}

@media (min-width: 576px) {
    .problem-card-open-btn {
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        padding: 0.35rem 0.85rem !important;
    }
}

.problem-feed-tag {
    background: linear-gradient(135deg, rgba(162, 123, 255, 0.2), rgba(76, 111, 255, 0.12)) !important;
    color: var(--color-gris-neutre) !important;
    border-color: rgba(162, 123, 255, 0.35) !important;
    font-size: 0.8125rem;
}

.problem-feed-tag .bi {
    color: var(--color-violet-pastel);
}

/* En-tête « Réponses » : priorité sur .card-header global + .bg-transparent (évite dégradé + padding asymétrique) */
.problem-show-responses-card > .card-header.problem-show-responses-heading::after {
    display: none !important;
}

.problem-show-responses-card > .card-header.problem-show-responses-heading {
    background: rgba(255, 255, 255, 0.98) !important;
    background-image: none !important;
    color: var(--color-gris-neutre) !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    border-bottom: 1px solid rgba(46, 46, 58, 0.08);
    padding: 0.625rem 1rem !important;
    font-weight: 600;
    min-height: 0;
    display: flex !important;
    align-items: center !important;
}

.problem-show-responses-card > .card-header.problem-show-responses-heading h2 {
    color: var(--color-gris-neutre);
    line-height: 1.35;
}

.problem-show-responses-card > .card-body.problem-show-responses-body {
    padding-top: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
}

.problem-show-reply-form .form-control:focus {
    border-color: var(--color-bleu-doux);
    box-shadow: 0 0 0 0.2rem rgba(76, 111, 255, 0.12);
}

.problem-show-thread .problem-response-row .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(76, 111, 255, 0.25);
}

/* Fil type « réseau social » : avatar + bulle (palette du site) */
.problem-show-thread .problem-response-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.problem-show-thread .problem-response-avatar-col {
    flex: 0 0 auto;
    width: 2.75rem;
    padding-top: 0.15rem;
}

.problem-show-thread .problem-response-avatar {
    width: 2.5rem;
    height: 2.5rem;
}

.problem-show-thread .problem-response-avatar-img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
}

.problem-show-thread .problem-response-avatar-fallback {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-bleu-doux), var(--color-violet-pastel));
    box-shadow: var(--shadow-sm);
    line-height: 1;
}

.problem-show-thread .problem-response-avatar-fallback.is-anon {
    font-size: 0.95rem;
    background: linear-gradient(135deg, rgba(46, 46, 58, 0.45), rgba(76, 111, 255, 0.65));
}

.problem-show-thread .problem-response-main {
    flex: 1 1 0%;
    min-width: 0;
}

.problem-show-thread .problem-response-bubble {
    background: linear-gradient(165deg, rgba(76, 111, 255, 0.09) 0%, rgba(162, 123, 255, 0.06) 55%, rgba(255, 255, 255, 0.92) 100%);
    border: 1px solid rgba(46, 46, 58, 0.08);
    border-radius: 1.125rem;
    padding: 0.65rem 0.85rem 0.75rem;
    box-shadow: var(--shadow-sm);
}

.problem-show-thread .problem-response-author {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-gris-neutre);
    line-height: 1.25;
}

.problem-show-thread .problem-response-badge-counselor {
    font-size: 0.65rem !important;
    font-weight: 600;
    padding: 0.1rem 0.38rem !important;
    border-radius: 50rem;
    box-shadow: none;
    vertical-align: middle;
}

.problem-show-thread .problem-response-bubble-body .problem-content-text,
.problem-show-thread .problem-response-bubble-body .problem-content-wrapper {
    color: var(--color-gris-neutre);
    font-size: 0.9rem;
    line-height: 1.45;
}

.problem-show-thread .problem-response-bubble-body .problem-content-toggle {
    font-size: 0.8125rem;
    padding-top: 0.15rem;
}

.problem-show-thread .problem-response-foot {
    padding-left: 0.1rem;
}

.problem-show-thread .problem-response-time {
    font-size: 0.75rem;
    color: rgba(46, 46, 58, 0.55);
    font-weight: 500;
}

.problem-show-thread .problem-response-likes {
    font-size: 0.75rem;
    color: rgba(46, 46, 58, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.problem-show-thread .problem-response-likes-num {
    font-weight: 600;
    color: var(--color-gris-neutre);
}

.problem-show-thread .problem-response-reply-link {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--color-bleu-doux) !important;
    line-height: 1.2;
}

.problem-show-thread .problem-response-reply-link:hover {
    color: var(--color-violet-pastel) !important;
    text-decoration: underline !important;
}

.problem-show-thread .problem-reply-context {
    font-size: 0.72rem;
    line-height: 1.35;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.problem-show-thread .problem-response-replies--branch {
    margin-top: 0.35rem;
    margin-left: 0.35rem;
    padding-left: 1.35rem;
    padding-top: 0.2rem;
    border-left: 2px solid rgba(76, 111, 255, 0.28);
}

.problem-show-thread .problem-inline-reply-wrap {
    margin-left: 0;
    border-color: rgba(46, 46, 58, 0.08) !important;
    border-radius: 0 0 0.75rem 0.75rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.problem-show-thread .problem-inline-reply-wrap .form-control:focus {
    transform: none;
}

/* Réponse inline : Publier + Annuler sur une ligne (colonnes étroites → défilement horizontal léger) */
.problem-inline-reply-wrap .d-flex.flex-nowrap {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.problem-inline-reply-wrap .d-flex.flex-nowrap .btn {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}