/* 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. */

/* ⚠️ 31/10/2026 : la CARTE du volet (forme, place, glissé, poussée de la page, plein
   écran au téléphone) est devenue la pièce commune `jeu-volet` du kit (`jeu.css`), que
   la barre du contact de l'équipe partage. Il ne reste ICI que ce qui est propre à la
   communauté : sa teinte, l'agrandissement, la bulle d'aide, son bouton du haut. */
body { --cv-large: var(--volet-large); --cv-air: var(--volet-air); }

/* 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;
}
/* Le titre est un bouton : il ramène à la liste des discussions (10/11/2026). */
.cv-titre { display: grid; gap: 2px; min-width: 0; justify-items: start; text-align: left;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cv-titre:hover h2 { filter: brightness(1.15); }
body.cv-grand .cv-titre { cursor: default; }
/* Une discussion ouverte dans le volet étroit : SON en-tête prend la place de
   celui-ci (fondateur, 10/11/2026 : « pas besoin de l'en-tête avec la communauté »). */
body:not(.cv-grand) .cv.cv-dans-un-fil .cv-tete { display: none; }
.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; align-items: center; }
/* Le trait qui sépare les gestes (écrire, créer) du rangement du volet. */
.cv-gestes-trait { width: 1px; height: 20px; margin: 0 2px; background: var(--border); }
.cv-gestes-trait[hidden] { display: none; }
.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)); }


/* 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; }

/* LA BANDE (04/11/2026) : la communauté réduite, un bandeau étroit à droite, comme sur
   Discord ; elle se rouvre sur le côté ou en page entière. La page lui laisse sa place. */
body { --cv-bande: 52px; }
.cv-bande { position: fixed; z-index: 139; top: calc(var(--cv-haut, 56px) + var(--volet-air, 12px));
  right: var(--volet-air, 12px); bottom: var(--volet-air, 12px); width: var(--cv-bande);
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0;
  border-radius: var(--radius-xl); border: 1px solid rgba(103, 232, 249, .22);
  background: linear-gradient(180deg, rgba(103, 232, 249, .08), rgba(139, 127, 224, .06)), var(--card);
  box-shadow: 0 18px 40px -16px rgba(5, 6, 10, .7); }
.cv-bande[hidden] { display: none; }
.cv-bande button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  color: var(--muted-foreground); background: transparent; border: 1px solid transparent; position: relative; }
.cv-bande button:hover { color: var(--jeu-cyan, #67E8F9); background: rgba(103, 232, 249, .10); border-color: rgba(103, 232, 249, .25); }
.cv-bande .cv-bande-ouvrir { color: #0B0C14; background: linear-gradient(140deg, #67E8F9, var(--jeu-violet, #8B7FE0)); }
.cv-bande .cv-bande-ouvrir:hover { color: #0B0C14; filter: brightness(1.08); }
.cv-bande-mot { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-foreground); }
.cv-bande-gestes { margin-top: auto; display: grid; gap: 6px; }
/* Les conversations (04/11/2026), comme les serveurs de Discord : une pastille ronde
   avec son image ; au survol ou avec du neuf, elle s'arrondit moins et s'allume. */
.cv-bande-trait { width: 24px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.10); flex: none; }
/* ⚠️ La liste défile, donc elle coupe ce qui dépasse d'elle : elle prend TOUTE la
   largeur de la bande et de l'air en haut et en bas, sinon l'anneau, le compteur et le
   trait d'une pastille qui a du neuf sont rognés (fondateur, 05/11/2026). */
.cv-bande-fils { list-style: none; margin: 0; padding: 6px 0; display: grid; gap: 10px; justify-items: center;
  align-self: stretch; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.cv-bande-fils::-webkit-scrollbar { display: none; }
.cv-bande-fil { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  text-decoration: none; color: var(--muted-foreground); background: rgba(255,255,255,.06);
  transition: border-radius .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.cv-bande-fil img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cv-bande-fil > span:not(.cv-bande-point):not(.cv-bande-direct) { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: 600; }
.cv-bande-fil:hover { border-radius: 12px; color: var(--jeu-cyan, #67E8F9); background: rgba(103, 232, 249, .14); }
.cv-bande-fil--groupe, .cv-bande-fil--groupe img { border-radius: 12px; }
.cv-bande-fil--creer { color: var(--jeu-cyan, #67E8F9); background: transparent; border: 1px dashed rgba(103, 232, 249, .45); }
.cv-bande-fil.a-du-neuf { color: var(--foreground); box-shadow: 0 0 0 2px rgba(103, 232, 249, .55); }
.cv-bande-fil.a-du-neuf::before { content: ""; position: absolute; left: -7px; top: 50%; width: 4px; height: 10px;
  margin-top: -5px; border-radius: 0 4px 4px 0; background: #fff; }
.cv-bande-point { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #F87171; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; box-shadow: 0 0 0 2px var(--card); }
@media (prefers-reduced-motion: reduce) { .cv-bande-fil { transition: none; } }
/* EN DIRECT (08/11/2026) : un vocal occupé se voit de loin. Anneau vert qui respire,
   pastille verte « casque + nombre » en haut à droite (le rouge des non-lus garde le bas). */
.cv-bande-fil.en-direct { color: #4ADE80; background: rgba(74,222,128,.14);
  box-shadow: 0 0 0 2px rgba(74,222,128,.75); animation: cv-direct 2s ease-in-out infinite; }
@keyframes cv-direct {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,.75), 0 0 0 0 rgba(74,222,128,.35); }
  50% { box-shadow: 0 0 0 2px rgba(74,222,128,.75), 0 0 0 6px rgba(74,222,128,0); } }
.cv-bande-direct { position: absolute; top: -6px; right: -7px; height: 16px; padding: 0 4px 0 3px;
  display: inline-flex; align-items: center; gap: 2px; border-radius: 999px;
  background: #22C55E; color: #06210F; font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--card); }
@media (prefers-reduced-motion: reduce) { .cv-bande-fil.en-direct { animation: none; } }
.cv-bande-compte, .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;
}

@media (min-width: 641px) {
  body.cv-reduit .main { margin-right: calc(var(--cv-bande) + var(--volet-air, 12px)); }
  body.cv-reduit .chat-lanceur, body.cv-reduit .chat-panneau { right: calc(var(--cv-bande) + 2 * var(--volet-air, 12px) + 12px); }
  body.cv-reduit .kb-pastille { right: calc(var(--cv-bande) + 2 * var(--volet-air, 12px) + 80px); }
  body.cv-reduit .kb-panneau { right: calc(var(--cv-bande) + 2 * var(--volet-air, 12px) + 12px); }
}
/* Téléphone : plein écran, sous la barre ; pas d'agrandissement (il l'est déjà). Réduite,
   la bande devient une languette au bord droit, qui ne prend pas la largeur de la page. */
@media (max-width: 640px) {
  .cv-bande { top: auto; bottom: 150px; right: 0; width: 44px; padding: 6px 0; gap: 6px;
    border-radius: 14px 0 0 14px; border-right: 0; }
  .cv-bande-mot, .cv-bande-gestes, .cv-bande-fils, .cv-bande-trait { display: none; }
  body .cv .cv-agrandir { display: none; }
  body.cv-ouvert .chat-lanceur, body.cv-ouvert .kb-pastille { display: 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; }

/* LE GROUPE QUI ATTEND (04/11/2026) : l'invitation d'un lien ouvert avant d'avoir
   un compte, en haut de l'espace. */
.groupe-attend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin: 0 0 16px; padding: 10px 12px 10px 10px; border-radius: 16px; font-size: var(--text-sm);
  background: linear-gradient(100deg, rgba(103, 232, 249, .10), rgba(139, 127, 224, .08));
  border: 1px solid rgba(103, 232, 249, .28); }
.groupe-attend > span:nth-child(2) { flex: 1 1 200px; }
.groupe-attend-marque { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #0B0C14; background: linear-gradient(140deg, #67E8F9, var(--jeu-violet, #8B7FE0)); }

/* ══ LA COMMUNAUTÉ À GAUCHE, TOUJOURS LÀ (fondateur, 11/11/2026, TVNI-564) ══════════════
   « La mettre à gauche, collée au menu de navigation, qu'elle ne puisse pas être réduite ;
   juste modifier la largeur jusqu'à une certaine limite, comme sur Discord, ou
   l'agrandir. » Cadrage : docs/superpowers/specs/2026-11-11-communaute-a-gauche-cadrage.md.
   ⚠️ **SUR ORDINATEUR SEULEMENT** (`data-appareil="ordinateur"`, au-delà de 640 points) :
   au téléphone, la communauté reste l'onglet du bas, en plein écran.
   ⚠️ Plus de bande, plus de « Réduire » : la largeur se règle par la poignée
   (`--cv-largeur`, de 360 à 720, 400 au départ, retenue par le navigateur). */
/* `--cv-ecart` : l'air entre le menu et la communauté, assez large pour le bouton qui
   replie le menu (il déborde de 12 points sur son bord droit). */
html[data-appareil="ordinateur"] body { --cv-largeur: 400px; --cv-ecart: 22px; }
.cv-poignee { display: none; }
@media (min-width: 641px) {
  html[data-appareil="ordinateur"] .cv {
    left: calc(var(--cv-gauche, 0px) + var(--cv-ecart)); right: auto;
    width: var(--cv-largeur); max-width: none;
  }
  html[data-appareil="ordinateur"] body.cv-anime .cv { animation-name: cv-entre-gauche; }
  html[data-appareil="ordinateur"] body.cv-ouvert:not(.cv-grand) .main {
    margin-right: 0; margin-left: calc(var(--cv-largeur) + var(--cv-ecart));
  }
  html[data-appareil="ordinateur"] body.cv-grand .cv { width: auto; right: var(--cv-air); }
  /* PLUS D'EN-TÊTE « Communauté » (fondateur, 11/11/2026 : « on peut retirer l'en-tête
     Communauté maintenant que c'est tout le temps affiché ») : la communauté commence par
     sa liste ou sa discussion ; écrire, créer un groupe et agrandir sont dans la page du
     cadre (ligne de recherche, en-tête de la discussion). */
  html[data-appareil="ordinateur"] .cv .cv-tete { display: none; }
  /* PLUS DE BANDE COLORÉE (fondateur, 11/11/2026 : « la bande colorée, ça fait
     bizarre » ; proposition A retenue) : ni au volet, ni à la discussion. */
  /* Jamais masquée : ni bouton « Réduire », ni bande. */
  html[data-appareil="ordinateur"] .cv [data-cv-fermer],
  html[data-appareil="ordinateur"] .cv-bande { display: none !important; }
  html[data-appareil="ordinateur"] body.cv-reduit .main { margin-right: 0; }
  /* La droite est libre : la bulle d'aide et le clavier retrouvent leur coin. */
  html[data-appareil="ordinateur"] body.cv-ouvert:not(.cv-grand) .chat-lanceur,
  html[data-appareil="ordinateur"] body.cv-ouvert:not(.cv-grand) .chat-panneau,
  html[data-appareil="ordinateur"] body.cv-ouvert:not(.cv-grand) .kb-panneau { right: 24px; }
  html[data-appareil="ordinateur"] body.cv-ouvert:not(.cv-grand) .kb-pastille { right: 92px; }
  /* LA POIGNÉE, sur le bord droit : on la tire pour élargir ou rétrécir, double-clic
     pour revenir à 400. Un trait paraît au survol et pendant qu'on tire. */
  html[data-appareil="ordinateur"] body:not(.cv-grand) .cv-poignee {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 10px; z-index: 3;
    cursor: col-resize; touch-action: none;
  }
  .cv-poignee::after {
    content: ""; position: absolute; top: 50%; right: 3px; width: 3px; height: 44px; margin-top: -22px;
    border-radius: 3px; background: rgba(103, 232, 249, .28); opacity: 0; transition: opacity .15s ease;
  }
  .cv:hover .cv-poignee::after { opacity: .6; }
  .cv-poignee:hover::after, body.cv-tire .cv-poignee::after { opacity: 1; background: var(--jeu-cyan, #67E8F9); }
  /* Pendant qu'on tire : pas de sélection de texte, et le cadre ne vole pas la souris. */
  body.cv-tire { cursor: col-resize; user-select: none; }
  body.cv-tire .cv-cadre { pointer-events: none; }
}
@keyframes cv-entre-gauche { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* L'INFOBULLE DU MENU REPLIÉ PASSE AU-DESSUS DE LA COMMUNAUTÉ (fondateur, 11/11/2026 :
   « quand je survole les pages à gauche, le nom en infobulle se met sous la
   communauté »). La communauté, collée au menu, est à 140 ; l'infobulle de
   `barre-laterale.js` était à 120. */
.barre-infobulle { z-index: 145; }

/* ══ LE VOLET SUIT LE MENU SANS À-COUP, AVEC LE MÊME AIR DES DEUX CÔTÉS (fondateur,
   11/11/2026 : « le cadre de la discussion a un petit décalé pour s'ajuster quand je
   replie et déplie l'onglet latéral, et l'espace entre la discussion et le menu de
   gauche et le contenu de droite ne sont pas équivalents ») ════════════════════════════
   La place du menu ne se MESURE plus (le script la relevait 200 ms après le repli : la
   communauté sautait) : elle se DÉCLARE, 200 points déplié, 64 replié, 0 sous 1 024 points
   où le menu disparaît, et la communauté glisse avec lui, au même rythme (160 ms).
   L'air est le même partout : 24 points entre le menu et la communauté, 24 entre la
   communauté et le contenu de la page. */
@media (min-width: 641px) {
  html[data-appareil="ordinateur"] body { --cv-gauche: 200px; --cv-ecart: 24px; }
  html[data-appareil="ordinateur"].barre-repliee body { --cv-gauche: 64px; }
  html[data-appareil="ordinateur"] .cv {
    transition: left 160ms var(--ease-out, ease), width 160ms var(--ease-out, ease);
  }
  html[data-appareil="ordinateur"] body.cv-tire .cv { transition: none; }
  html[data-appareil="ordinateur"] body.cv-ouvert:not(.cv-grand) .main {
    margin-left: calc(var(--cv-largeur) + var(--cv-ecart)); padding-left: var(--cv-ecart);
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  html[data-appareil="ordinateur"] body, html[data-appareil="ordinateur"].barre-repliee body { --cv-gauche: 0px; }
}