/* PhysioFit — Espace communautaire.
   Verre dépoli sur fond sombre, même famille que assets/css/anatomie-3d.css :
   panneaux rgba(20,20,22,.72), bordure blanche à 16 %, flou 20px saturate 1.5,
   accent rouge var(--primary). Sert à la fois la section « Mes contacts » de
   mon-espace.html et la page plein écran communaute.html. */

:root {
    --cm-glass: rgba(20, 20, 22, .72);
    --cm-glass-strong: rgba(20, 20, 22, .92);
    --cm-line: rgba(255, 255, 255, .16);
    --cm-ink: rgba(255, 255, 255, .92);
    --cm-ink-soft: rgba(255, 255, 255, .58);
    --cm-ink-faint: rgba(255, 255, 255, .34);
}

/* ===== SOCLE VERRE ===== */
.cm-glass {
    background: var(--cm-glass);
    border: 1px solid var(--cm-line);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    border-radius: 20px;
}

/* ===== SECTION « MES CONTACTS » (dans mon-espace) ===== */
.cm-board {
    position: relative;
    overflow: hidden;
    padding: 18px;
    background: linear-gradient(135deg, #16161c 0%, #101018 55%, #0d1420 100%);
    border: 1px solid var(--cm-line);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    color: var(--cm-ink);
}

/* Halos discrets, comme le bloc Cas Cliniques juste au-dessus. */
.cm-board::before,
.cm-board::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cm-board::before {
    top: -60px; left: -40px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(230, 57, 70, .22) 0%, transparent 70%);
}

.cm-board::after {
    bottom: -50px; right: -30px; width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(59, 130, 246, .16) 0%, transparent 70%);
}

.cm-board > * { position: relative; z-index: 1; }

/* ===== RANGÉE DE VISAGES ===== */
.cm-people {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.cm-people::-webkit-scrollbar { display: none; }

.cm-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 56px;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: default;
}

.cm-person__face {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .18);
}

.cm-person__face img { width: 100%; height: 100%; object-fit: cover; }

.cm-person__dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3ddc84;
    border: 2px solid #14141a;
}

.cm-person__name {
    font-size: .68rem;
    font-weight: 600;
    color: var(--cm-ink-soft);
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-person--more .cm-person__face {
    background: rgba(255, 255, 255, .1);
    color: var(--cm-ink-soft);
    font-size: .74rem;
}

/* ===== ONGLETS DE SALONS (pilules) ===== */
.cm-tabs {
    display: flex;
    gap: 7px;
    margin: 16px 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cm-tabs::-webkit-scrollbar { display: none; }

.cm-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--cm-line);
    background: rgba(255, 255, 255, .05);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cm-ink-soft);
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cm-tab:hover { background: rgba(230, 57, 70, .16); color: #fff; }

.cm-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.cm-tab.is-locked { opacity: .32; cursor: not-allowed; }
.cm-tab.is-locked:hover { background: rgba(255, 255, 255, .05); color: var(--cm-ink-soft); }

/* ===== FIL ===== */
.cm-thread {
    display: flex;
    flex-direction: column;
    gap: 13px;
    height: var(--cm-thread-h, 460px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.cm-thread::-webkit-scrollbar { width: 5px; }
.cm-thread::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

/* Chaque message est une bulle : c'est ce qui fait lire l'ensemble comme une
   conversation et non comme une liste de texte. Les miennes partent à droite en
   teinte accent, celles des autres à gauche en verre clair — le repère le plus
   immédiat pour comprendre qu'on est dans un chat. */
.cm-msg {
    display: flex;
    gap: 9px;
    align-items: flex-end;
    animation: cmIn .25s ease-out;
}

@keyframes cmIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.cm-msg__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .64rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    object-fit: cover;
}

/* Messages consécutifs d'une même personne : on ne réaffiche ni son avatar ni
   son nom, on garde juste l'alignement. La conversation respire. */
.cm-msg--cont { margin-top: -8px; }
.cm-msg--cont .cm-msg__avatar { visibility: hidden; }

.cm-msg__body {
    min-width: 0;
    max-width: 78%;
    display: flex;
    flex-direction: column;
}

.cm-msg__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: .69rem;
    color: var(--cm-ink-faint);
    margin: 0 0 3px 12px;
}

.cm-msg__author { font-weight: 700; color: var(--cm-ink-soft); }

.cm-msg__badge {
    padding: 1px 6px;
    border-radius: 5px;
    font-size: .61rem;
    font-weight: 800;
    background: rgba(230, 57, 70, .2);
    color: #ff9ba3;
}

.cm-msg__badge--year {
    background: rgba(255, 255, 255, .09);
    color: var(--cm-ink-soft);
}

/* La bulle elle-même */
.cm-msg__text {
    position: relative;
    padding: 9px 14px;
    border-radius: 16px 16px 16px 5px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ===== MES MESSAGES : à droite, en accent ===== */
.cm-msg--mine { flex-direction: row-reverse; }
.cm-msg--mine .cm-msg__body { align-items: flex-end; }
.cm-msg--mine .cm-msg__meta { margin: 0 12px 3px 0; flex-direction: row-reverse; }

.cm-msg--mine .cm-msg__text {
    border-radius: 16px 16px 5px 16px;
    background: rgba(230, 57, 70, .22);
    border-color: rgba(230, 57, 70, .38);
    color: #fff;
}

.cm-msg--mine .cm-msg__actions { justify-content: flex-end; }

/* ===== L'ÉQUIPE PHYSIOFIT SE DISTINGUE ===== */
.cm-msg--staff .cm-msg__text {
    background: rgba(230, 57, 70, .1);
    border-color: rgba(230, 57, 70, .28);
}

.cm-msg--staff .cm-msg__avatar { box-shadow: 0 0 0 2px rgba(230, 57, 70, .5); }

/* ===== SÉPARATEUR DE JOUR ===== */
.cm-day {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 2px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--cm-ink-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cm-day::before,
.cm-day::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .08);
}

/* ===== ACTIONS ===== */
.cm-msg__actions {
    display: flex;
    gap: 10px;
    margin: 3px 12px 0;
    opacity: 0;
    transition: opacity .18s ease;
}

.cm-msg:hover .cm-msg__actions,
.cm-msg:focus-within .cm-msg__actions { opacity: 1; }

.cm-msg__action {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: .67rem;
    font-weight: 700;
    color: var(--cm-ink-faint);
    cursor: pointer;
}

.cm-msg__action:hover { color: var(--primary); }

/* ===== ANNONCE DE VISIO : ni bulle ni camp, c'est un événement ===== */
.cm-msg--visio { justify-content: center; }
.cm-msg--visio .cm-msg__avatar,
.cm-msg--visio .cm-msg__meta,
.cm-msg--visio .cm-msg__actions { display: none; }
.cm-msg--visio .cm-msg__body { max-width: 100%; align-items: center; }

.cm-msg--visio .cm-msg__text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: rgba(230, 57, 70, .14);
    border: 1px dashed rgba(230, 57, 70, .45);
    font-weight: 600;
    font-size: .8rem;
}

.cm-join {
    border: none;
    border-radius: 999px;
    white-space: nowrap;     /* sinon « Rejoindre » se coupe en deux sur mobile */
    flex-shrink: 0;
    padding: 4px 12px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: .71rem;
    font-weight: 800;
    cursor: pointer;
}

/* ===== SAISIE ===== */
.cm-composer {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.cm-composer__input {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 15px;
    border: 1px solid var(--cm-line);
    border-radius: 20px;
    font-family: inherit;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--cm-ink);
    background: rgba(255, 255, 255, .05);
    outline: none;
    transition: border-color .18s ease;
}

.cm-composer__input::placeholder { color: var(--cm-ink-faint); }
.cm-composer__input:focus { border-color: var(--primary); }
.cm-composer__input:disabled { opacity: .5; cursor: not-allowed; }

.cm-send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .18s ease;
}

.cm-send:hover { transform: translateY(-1px); }
.cm-send:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ===== BARRE D'ACTIONS ===== */
.cm-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.cm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--cm-line);
    background: rgba(255, 255, 255, .06);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cm-ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cm-btn:hover { background: rgba(230, 57, 70, .18); border-color: var(--primary); color: #fff; }

.cm-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.cm-btn--primary:hover { background: #d12f3c; }

/* ===== ÉTATS ===== */
.cm-state {
    padding: 26px 18px;
    text-align: center;
    color: var(--cm-ink-faint);
    font-size: .84rem;
    line-height: 1.6;
}

.cm-state strong { display: block; color: var(--cm-ink); margin-bottom: 4px; font-size: .95rem; }

.cm-error {
    margin-top: 10px;
    padding: 9px 13px;
    border-radius: 11px;
    background: rgba(230, 57, 70, .16);
    color: #ff9ba3;
    font-size: .78rem;
    font-weight: 600;
}

.cm-hidden { display: none !important; }

/* ===== LECTEUR D'AMBIANCE (Le Café) ===== */
.cm-music { margin-bottom: 12px; }

.cm-music__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--cm-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    color: var(--cm-ink-soft);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.cm-music__toggle:hover { border-color: var(--primary); color: #fff; }
.cm-music__slot { margin-top: 10px; border-radius: 12px; overflow: hidden; }

/* ===== MODÉRATION (admins) ===== */
.cm-mod {
    margin-bottom: 14px;
    padding: 13px 15px;
    border-radius: 16px;
    background: rgba(230, 57, 70, .1);
    border: 1px solid rgba(230, 57, 70, .3);
}

.cm-mod__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 800;
    color: #ff9ba3;
    margin: 0 0 9px;
}

.cm-mod__count {
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .68rem;
}

.cm-mod__item {
    padding: 10px 12px;
    margin-bottom: 7px;
    background: rgba(0, 0, 0, .3);
    border-radius: 12px;
}

.cm-mod__who { font-size: .71rem; font-weight: 800; color: var(--cm-ink-soft); margin: 0; }
.cm-mod__body { font-size: .82rem; line-height: 1.5; color: var(--cm-ink); margin: 4px 0 0; overflow-wrap: anywhere; }
.cm-mod__why { font-size: .72rem; color: var(--cm-ink-faint); margin: 4px 0 0; font-style: italic; }
.cm-mod__actions { display: flex; gap: 13px; margin-top: 7px; }
.cm-mod__actions .cm-msg__action { opacity: 1; }

/* ===== RAPPEL SÉCURITÉ ===== */
.cm-safety {
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .045);
    font-size: .72rem;
    line-height: 1.55;
    color: var(--cm-ink-faint);
}

.cm-safety strong { color: var(--cm-ink-soft); }

/* ===== PAGE PLEIN ÉCRAN (communaute.html) ===== */
.cm-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 100px 20px 40px;
    position: relative;
    z-index: 1;
}

.cm-page__head { margin-bottom: 16px; }
.cm-page__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--cm-ink); }
.cm-page__sub { margin: 4px 0 0; font-size: .86rem; color: var(--cm-ink-soft); }

.cm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cm-ink-faint);
    text-decoration: none;
}

.cm-back:hover { color: var(--primary); }
.cm-page .cm-thread { max-height: 52vh; }

/* La page plein écran est sombre de bout en bout : le dégradé clair du site
   n'a pas sa place derrière des panneaux en verre dépoli. */
body.cm-dark { background: #0b0b0f; }
body.cm-dark .gradient-mesh,
body.cm-dark .blob-container { display: none; }

/* ===== ANNUAIRE (messages privés, éteint pour l'instant) ===== */
.cm-dir {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(8, 8, 10, .72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cm-dir__box {
    width: 100%;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--cm-glass-strong);
    border: 1px solid var(--cm-line);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.cm-dir__top { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.cm-dir__title { font-size: .95rem; font-weight: 800; margin: 0; color: var(--cm-ink); }
.cm-dir__hint { font-size: .72rem; color: var(--cm-ink-faint); margin: 3px 0 0; }

.cm-dir__close {
    margin-left: auto;
    border: none;
    background: none;
    font-size: 1.2rem;
    color: var(--cm-ink-faint);
    cursor: pointer;
    padding: 0;
}

.cm-dir__close:hover { color: var(--primary); }
.cm-dir__list { overflow-y: auto; padding: 8px; }

.cm-dir__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cm-dir__row:hover { background: rgba(230, 57, 70, .14); }
.cm-dir__name { font-size: .84rem; font-weight: 600; color: var(--cm-ink); }

/* ===== VISIO ===== */
.cm-visio {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #08080a;
    display: flex;
    flex-direction: column;
}

.cm-visio__bar { display: flex; align-items: center; gap: 12px; padding: 11px 18px; color: #fff; font-size: .84rem; font-weight: 700; }

.cm-visio__close {
    margin-left: auto;
    border: 1px solid var(--cm-line);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    padding: 6px 15px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.cm-visio__close:hover { background: rgba(255, 255, 255, .12); }
.cm-visio__frame { flex: 1; min-height: 0; }
.cm-visio__frame iframe { width: 100%; height: 100%; border: 0; }

/* ===== MOBILE ===== */
@media (max-width: 720px) {
    .cm-board { padding: 14px 14px 18px; }
    .cm-thread { height: var(--cm-thread-h, 340px); }

    /* Écran étroit : les bulles peuvent respirer un peu plus large. */
    .cm-msg__body { max-width: 85%; }
    .cm-msg--visio .cm-msg__text { flex-wrap: wrap; border-radius: 16px; }
    .cm-thread { max-height: 260px; }
    .cm-page { padding-top: 84px; }
    .cm-actions .cm-btn { flex: 1; justify-content: center; }
}

/* Sans survol (tactile), les actions d'un message resteraient invisibles —
   donc « Signaler » serait inutilisable au doigt. */
@media (hover: none) {
    .cm-msg__actions { opacity: 1; }
}

/* ===== SALON VOCAL ===== */
.cm-vocal {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 13px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: background .25s ease, border-color .25s ease;
}

/* Quand on est dedans, le bandeau s'allume : on sait d'un coup d'œil que son
   micro est ouvert, même en lisant le fil plus bas. */
.cm-vocal.is-live {
    background: rgba(61, 220, 132, .07);
    border-color: rgba(61, 220, 132, .3);
}

.cm-vocal__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cm-ink-faint);
}

.cm-vocal.is-live .cm-vocal__label { color: #3ddc84; }

.cm-vocal__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.cm-vocal.is-live .cm-vocal__dot { animation: cmPulse 2s infinite; }

@keyframes cmPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.cm-vocal__people {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cm-vocal__people::-webkit-scrollbar { display: none; }

.cm-vocal__empty {
    font-size: .76rem;
    color: var(--cm-ink-faint);
    flex: 1;
}

.cm-voice {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .64rem;
    font-weight: 800;
    color: #fff;
    overflow: visible;
    border: 2px solid transparent;
    transition: border-color .12s ease, transform .12s ease;
}

.cm-voice img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Halo vert pendant qu'on parle — le repère qui rend le salon lisible à 5. */
.cm-voice.is-speaking {
    border-color: #3ddc84;
    transform: scale(1.06);
}

.cm-voice__muted {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #d3364a;
    border: 2px solid #14141a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
    color: #fff;
}

.cm-vocal__actions { display: flex; gap: 7px; flex-shrink: 0; }

.cm-vocal__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--cm-line);
    background: rgba(255, 255, 255, .06);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    color: var(--cm-ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cm-vocal__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.cm-vocal__btn--join {
    background: #3ddc84;
    border-color: #3ddc84;
    color: #06231a;
}

.cm-vocal__btn--join:hover { background: #35c576; color: #06231a; }

.cm-vocal__btn--leave {
    background: rgba(211, 54, 74, .18);
    border-color: rgba(211, 54, 74, .5);
    color: #ff9ba3;
}

.cm-vocal__btn--leave:hover { background: rgba(211, 54, 74, .3); color: #fff; }
.cm-vocal__btn.is-off { background: rgba(211, 54, 74, .22); border-color: rgba(211, 54, 74, .5); color: #ff9ba3; }
.cm-vocal__btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 720px) {
    .cm-vocal { gap: 9px; }
    /* Le libellé reste : une pastille verte seule ne dirait rien. */
    .cm-vocal__label { font-size: .68rem; }
    .cm-vocal { gap: 8px; }
    .cm-vocal__btn { padding: 6px 12px; }
}

/* ===== ENSEIGNE DU SALON ===== */
/* Une devanture suspendue au-dessus du fil. Le halo doré reprend la lumière de
   l'enseigne elle-même, pour qu'elle ait l'air allumée plutôt que collée. */
.cm-sign {
    display: flex;
    justify-content: center;
    margin: -4px 0 14px;
}

.cm-sign img {
    height: 150px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 8px 26px rgba(255, 196, 92, .22));
    animation: cmSignIn .5s ease-out;
}

@keyframes cmSignIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .cm-sign img { height: 112px; }
}

/* ===== POIGNÉE D'ÉTIREMENT ===== */
/* Le fil est volontairement contenu pour ne pas écraser le tableau de bord,
   mais certains voudront le dérouler en grand. Cette poignée le permet, et la
   hauteur choisie est retenue d'une visite à l'autre. */
.cm-grip {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .3);
    cursor: ns-resize;
    touch-action: none;          /* sinon le doigt fait défiler la page */
    transition: color .18s ease, background .18s ease;
}

.cm-grip:hover,
.cm-grip.is-dragging {
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .08);
}

.cm-grip svg { width: 14px; height: 14px; display: block; }

/* Pendant le glissement, on ne veut pas sélectionner du texte par accident. */
body.cm-resizing { user-select: none; cursor: ns-resize; }

/* ===== VITRINE (étudiant non abonné) ===== */
/* Ce n'est pas un message d'erreur : c'est une devanture. Elle doit donner
   envie d'entrer, pas signaler qu'on est dehors. */
.cm-vitrine {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    padding: 22px 26px 20px;
    text-align: center;
    animation: cmIn .35s ease-out;
}

.cm-vitrine::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 220px;
    background: radial-gradient(ellipse at center, rgba(230, 57, 70, .22) 0%, transparent 68%);
    pointer-events: none;
}

.cm-vitrine > * { position: relative; }

.cm-vitrine__badge {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 999px;
    border: 1px solid rgba(230, 57, 70, .4);
    background: rgba(230, 57, 70, .14);
    color: #ff9ba3;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cm-vitrine__titre {
    margin: 14px 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.cm-vitrine__accroche {
    margin: 9px auto 0;
    max-width: 420px;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--cm-ink-soft);
}

.cm-vitrine__points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 20px;
    text-align: left;
}

.cm-vitrine__point {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
}

.cm-vitrine__point strong {
    font-size: .87rem;
    font-weight: 700;
    color: #fff;
}

.cm-vitrine__point span {
    font-size: .81rem;
    line-height: 1.5;
    color: var(--cm-ink-soft);
}

.cm-vitrine__cta {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary) 0%, #ff6b7a 100%);
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(230, 57, 70, .38);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cm-vitrine__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(230, 57, 70, .5);
}

.cm-vitrine__note {
    margin: 14px 0 0;
    font-size: .76rem;
    color: var(--cm-ink-faint);
}

@media (max-width: 720px) {
    .cm-vitrine { padding: 22px 4px 18px; }
    .cm-vitrine__titre { font-size: 1.24rem; }
    .cm-vitrine__cta { display: block; }
}

/* Accroche en tête de section, à la place de la rangée de visages vide. */
.cm-teaser {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 11px 15px;
    border: 1px solid rgba(230, 57, 70, .3);
    border-radius: 14px;
    background: rgba(230, 57, 70, .09);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.cm-teaser:hover { background: rgba(230, 57, 70, .16); border-color: var(--primary); }
.cm-teaser strong { font-size: .87rem; font-weight: 700; color: #fff; }

.cm-teaser::after {
    content: '→';
    margin-left: auto;
    color: var(--primary);
    font-weight: 800;
}

.cm-teaser span,
.cm-teaser { color: var(--cm-ink-soft); font-size: .8rem; }

/* En mode vitrine, le fil se déploie entièrement : le bouton d'abonnement ne
   doit jamais se retrouver sous la ligne de flottaison. */
.cm-thread--vitrine {
    height: auto;
    overflow: visible;
}

/* ===== INTÉGRATION DISCORD ===== */
/* Le moteur est Discord, l'habillage reste PhysioFit : le cadre, le titre et
   les onglets sont à nous ; l'intérieur de l'encadré garde les couleurs de
   Discord (les repeindre demande l'offre payante de WidgetBot). */
.dc-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dc-top__titre {
    margin: 0;
    font-size: .9rem;
    font-weight: 800;
    color: var(--cm-ink);
}

.dc-open {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #5865F2;
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease;
}

.dc-open:hover { background: #4752c4; }

/* L'encadré Discord vit dans un cadre à nous : coins arrondis et bordure
   PhysioFit, pour qu'il ne flotte pas comme un corps étranger. */
.dc-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--cm-line);
    background: rgba(0, 0, 0, .25);
    min-height: 200px;
}

.dc-frame widgetbot,
.dc-frame iframe {
    display: block;
    width: 100%;
    border: 0;
}

.dc-setup {
    max-width: 520px;
    margin: 0 auto;
    padding: 18px 20px 20px;
    text-align: center;
}

.dc-setup .cm-vitrine__points { text-align: left; }

/* ===== SALONS VOCAUX (cartes qui ouvrent Discord) ===== */
.dc-vocaux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 11px;
    margin-top: 13px;
}

.dc-vocal {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 15px;
    border-radius: 14px;
    border: 1px solid var(--cm-line);
    background: rgba(255, 255, 255, .05);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.dc-vocal:hover {
    border-color: var(--primary);
    background: rgba(230, 57, 70, .12);
    transform: translateY(-1px);
}

.dc-vocal__enseigne {
    width: 46px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 14px rgba(255, 196, 92, .28));
}

.dc-vocal__icone {
    width: 46px;
    text-align: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dc-vocal__texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dc-vocal__texte strong { font-size: .88rem; font-weight: 700; color: #fff; }
.dc-vocal__texte span { font-size: .77rem; color: var(--cm-ink-soft); line-height: 1.4; }

.dc-vocal__cta {
    margin-left: auto;
    flex-shrink: 0;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
}


/* ===== APERÇU VERROUILLÉ (étudiant non abonné) ===== */
/* On montre qu'il se passe quelque chose derrière la porte, sans rien livrer :
   le fil est décoratif, Discord n'est jamais chargé pour ces visiteurs. */
.dc-verrou {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    background: #2b2d31;          /* le gris de Discord : on reconnaît le lieu */
}

.dc-verrou__decor {
    padding: 20px 18px;
    filter: blur(5px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

.dc-faux {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.dc-faux--moi { flex-direction: row-reverse; }

.dc-faux__rond {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    flex-shrink: 0;
}

.dc-faux__bulle {
    height: 30px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
}

.dc-faux--moi .dc-faux__bulle { background: rgba(230, 57, 70, .22); }

/* Le voile : un dégradé qui part du transparent en haut pour laisser deviner
   le fil, et s'opacifie vers le bas où se trouve le message. */
.dc-verrou__voile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 24px 22px;
    text-align: center;
    background: linear-gradient(180deg,
        rgba(20, 20, 24, .55) 0%,
        rgba(20, 20, 24, .88) 45%,
        rgba(20, 20, 24, .95) 100%);
}

.dc-verrou__cadenas {
    font-size: 1.9rem;
    line-height: 1;
    filter: drop-shadow(0 4px 14px rgba(230, 57, 70, .45));
}

.dc-verrou__titre {
    margin: 4px 0 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}

.dc-verrou__texte {
    margin: 0;
    max-width: 420px;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--cm-ink-soft);
}

.dc-verrou .cm-vitrine__cta { margin-top: 8px; }

@media (max-width: 720px) {
    .dc-verrou { min-height: 300px; }
    .dc-verrou__titre { font-size: 1.08rem; }
    .dc-verrou__texte { font-size: .8rem; }
}

/* ===== SOUS-TITRE DE SECTION ===== */
.dc-soustitre {
    display: block;
    margin-top: 3px;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(20, 20, 22, .5);
}