/* LE VOLET DE LA COMMUNAUTÉ (fondateur, 30/10/2026) : `partials/communaute_volet.html`.
 * Une CARTE flottante, aux angles arrondis comme toutes les cartes de l'application,
 * avec l'en-tête du kit (`jeu-tete`, cyan de l'entraide). 420 points de large ; la page
 * se pousse d'autant sur un grand écran (≥ 1 280), le volet passe par-dessus en dessous,
 * plein écran au téléphone. */

body { --cv-large: 420px; --cv-air: 12px; }

.cv {
  position: fixed; z-index: 140;
  top: calc(var(--cv-haut, 56px) + var(--cv-air)); right: var(--cv-air); bottom: var(--cv-air);
  width: var(--cv-large); max-width: calc(100vw - 2 * var(--cv-air));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(103, 232, 249, .22); border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -12px rgba(5, 6, 10, .75), 0 0 0 1px rgba(103, 232, 249, .03);
}
/* Le glissé d'entrée, au CLIC seulement : rouvert d'une page à l'autre, il est déjà là. */
body.cv-anime .cv { animation: cv-entre .22s var(--ease-out, ease-out); }
.cv[hidden] { display: none; }
@keyframes cv-entre { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* L'en-tête du kit, en version volet : pas de second cadre dans la carte, une ligne. */
.cv .cv-tete {
  flex: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 12px 12px 12px 18px; border: 0; border-bottom: 1px solid rgba(103, 232, 249, .14);
  border-radius: 0;
}
.cv-titre { display: grid; gap: 2px; min-width: 0; }
.cv-titre h2 {
  margin: 0; font-size: var(--text-lg, 1.15rem); font-weight: 600; letter-spacing: -.01em;
  background-image: linear-gradient(100deg, #fff 35%, var(--jeu-cyan, #67E8F9));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cv-gestes { display: inline-flex; gap: 6px; }
.cv-cadre { flex: 1; width: 100%; border: 0; background: var(--card); }

/* Le bouton de l'agrandissement change de dessin selon l'état. */
.cv-si-grand { display: none; }
body.cv-grand .cv-si-grand { display: inline-flex; }
body.cv-grand .cv-si-petit { display: none; }

/* Agrandi : toute la place de la page, le menu de gauche reste. */
body.cv-grand .cv { width: auto; max-width: none; left: calc(var(--cv-gauche, 0px) + var(--cv-air)); }

/* Grand écran : la page se pousse, le volet ne cache rien. */
@media (min-width: 1280px) {
  body.cv-ouvert:not(.cv-grand) .main { margin-right: calc(var(--cv-large) + var(--cv-air)); }
}

/* La bulle d'aide et le clavier passent à gauche du volet, pour ne jamais couvrir
   la zone où l'on écrit. Agrandi ou au téléphone, le volet couvre tout : ils s'effacent. */
body.cv-ouvert:not(.cv-grand) .chat-lanceur,
body.cv-ouvert:not(.cv-grand) .chat-panneau { right: calc(var(--cv-large) + var(--cv-air) + 24px); }
body.cv-ouvert:not(.cv-grand) .kb-pastille { right: calc(var(--cv-large) + var(--cv-air) + 92px); }
body.cv-ouvert:not(.cv-grand) .kb-panneau { right: calc(var(--cv-large) + var(--cv-air) + 24px); }
body.cv-grand .chat-lanceur, body.cv-grand .kb-pastille { display: none; }

/* Le bouton de la barre du haut : allumé quand le volet est ouvert, et son compte. */
.topbar-communaute { position: relative; }
body.cv-ouvert .topbar-communaute { color: var(--jeu-cyan, #67E8F9); background: rgba(103, 232, 249, .12); }
.topbar-compte {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: linear-gradient(140deg, #67E8F9, var(--jeu-violet, #8B7FE0));
  color: #0B0C14; font-size: calc(10px * var(--echelle-texte)); font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px #0F0F1A;
}

/* Téléphone : plein écran, sous la barre ; pas d'agrandissement (il l'est déjà). */
@media (max-width: 640px) {
  .cv { top: var(--cv-haut, 56px); right: 0; bottom: 0; left: 0; width: 100vw; max-width: none;
        border: 0; border-radius: 0; box-shadow: none; }
  body .cv .cv-agrandir { display: none; }
  body.cv-ouvert .chat-lanceur, body.cv-ouvert .kb-pastille { display: none; }
}

@media (prefers-reduced-motion: reduce) { body.cv-anime .cv { animation: none; } }

/* DANS le volet : la page de la communauté sans son en-tête (le volet porte le titre),
   collée aux bords. */
/* Le texte garde la MÊME taille en panneau et agrandi (fondateur, 30/10/2026) : la
   charte réduit le texte à partir de 900 points de large (`--echelle-texte`, la molette
   13/15) ; agrandie, la communauté passait ce seuil et rapetissait. */
body.en-volet.espace-client { background: var(--card); --echelle-texte: 1; }
body.en-volet.espace-client .main { padding: 0; }
body.en-volet.espace-client .jeu-tete { display: none; }