/* ═══════════════════════════════════════════════════════════
   DISPOSITION ET TAILLE DES ÉLÉMENTS

   Le chat était une grille fixe — 72 / 220 / 1fr / 240 px — sans
   aucun réglage. Sur un téléphone, le rail des serveurs mangeait un
   septième de l'écran pour une colonne de lettres ; sur un grand
   écran, la colonne des membres gardait 240 px même quand il n'y
   avait personne à y lister.

   Ce fichier ne dessine rien de neuf : il transforme des valeurs
   écrites en dur en variables, pour qu'on puisse les changer. Tout
   est RÉVERSIBLE — retirer un attribut remet la disposition
   d'avant, et c'est ce que permet le test.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Largeurs des colonnes. Les valeurs par défaut reprennent
     exactement la grille d'origine : ne rien changer ne change rien. */
  --dc-rail: 72px;
  --dc-channels: 220px;
  --dc-members: 240px;

  /* Taille des éléments. */
  --dc-avatar: 32px;
  --dc-msg-gap: .75rem;
  --dc-msg-pad: .35rem .4rem;
  --dc-ch-pad: .4rem .55rem;
  --dc-ch-font: .9rem;
  --dc-row: 0;

  /* Échelle du texte. 1 = taille d'aujourd'hui. */
  --dc-scale: 1;

  /* Écart entre deux options d'une liste (messages, membres). */
  --dc-list-gap: .15rem;
}

/* ── L'échelle du texte ─────────────────────────────────
   Presque tout le chat est en rem : une seule règle sur la
   racine fait donc grandir l'ensemble de façon cohérente.
   Les quelques px durs (avatars, colonnes) sont repris plus
   bas avec les variables de taille. */
html { font-size: calc(100% * var(--dc-scale)); }

/* ── Les colonnes, en variables ──────────────────────── */
#app {
  grid-template-columns:
    var(--dc-rail) var(--dc-channels) minmax(0, 1fr) var(--dc-members);
}

/* ── Les éléments, en variables ──────────────────────── */
.msg {
  grid-template-columns: var(--dc-avatar) minmax(0, 1fr);
  gap: var(--dc-msg-gap);
  padding: var(--dc-msg-pad);
}
.msg + .msg { margin-top: var(--dc-row); }
/* `.msg .avatar` et non `.avatar` : le chat définit l'avatar du message
   avec cette spécificité, et une règle moins précise se ferait écraser
   sans mot dire — la variable changeait, la taille restait la même. */
.msg .avatar {
  width: var(--dc-avatar);
  height: var(--dc-avatar);
  font-size: calc(.72rem * var(--dc-scale));
}
.avatar {
  width: var(--dc-avatar);
  height: var(--dc-avatar);
  font-size: calc(.72rem * var(--dc-scale));
}
.ch-item {
  padding: var(--dc-ch-pad);
  font-size: var(--dc-ch-font);
}
#channel-list, #member-list { gap: var(--dc-list-gap); }
.rail { padding: calc(.75rem * var(--dc-scale)) 0; gap: calc(.55rem * var(--dc-scale)); }
.rail .blob {
  width: calc(48px * var(--dc-scale));
  height: calc(48px * var(--dc-scale));
  border-radius: calc(16px * var(--dc-scale));
}
.channels .ch-head { padding: calc(.85rem * var(--dc-scale)) 1rem calc(.55rem * var(--dc-scale)); }
.members { padding: calc(.85rem * var(--dc-scale)) calc(.75rem * var(--dc-scale)); }
.member { padding: calc(.35rem * var(--dc-scale)) calc(.4rem * var(--dc-scale)); }

/* ═══════════════════════════════════════════════════════════
   DISPOSITIONS

   Chacune part de la grille complète et retire ce qui encombre.
   On ne « corrige » rien à l'aveugle : une disposition qui
   n'est pas voulue se retire en enlevant l'attribut.
   ════════════════════════════════════════════════════════════ */

/* ── Confortable : la disposition par defaut.
      Ecriture explicitement, meme si elle reprend les valeurs de
      :root. Une disposition listee dans le selecteur doit exister
      dans le CSS : sinon on la croit cassee en la relisant. */
[data-disposition="confort"] {
  --dc-rail: 72px;
  --dc-channels: 220px;
  --dc-members: 240px;
}

[data-disposition="etroite"] {
  --dc-rail: 60px;
  --dc-channels: 190px;
}
[data-disposition="etroite"] .members { display: none; }
[data-disposition="etroite"] #app {
  grid-template-columns: var(--dc-rail) var(--dc-channels) minmax(0, 1fr);
}

/* ── Salon : une seule colonne, la largeur de l'écran.
      Le rail et les membres sont masqués ; ils restent
      atteignables par le menu mobile et la barre d'outils. */
[data-disposition="salon"] {
  --dc-channels: 0px;
  --dc-members: 0px;
}
[data-disposition="salon"] .rail,
[data-disposition="salon"] .members,
[data-disposition="salon"] .channels { display: none; }
[data-disposition="salon"] #app { grid-template-columns: minmax(0, 1fr); }

/* ── Large : tout est présent, et la colonne des membres
      est généreuse quand il y a du monde. */
[data-disposition="large"] {
  --dc-channels: 260px;
  --dc-members: 300px;
}

/* ═══════════════════════════════════════════════════════════
   TAILLE DES ÉLÉMENTS

   Le texte passe par l'échelle du rem ; le reste — avatars,
   marges, hauteur des lignes — par les variables ci-dessus.
   ════════════════════════════════════════════════════════════ */

/* La densite normale reprend les valeurs de :root ; elle est ecrite
   pour la meme raison que la disposition confortable : ce qui est
   liste dans le selecteur doit se retrouver dans le CSS. */
[data-densite="normale"] {
  --dc-avatar: 32px;
  --dc-msg-gap: .75rem;
  --dc-msg-pad: .35rem .4rem;
  --dc-ch-pad: .4rem .55rem;
  --dc-ch-font: .9rem;
  --dc-list-gap: .15rem;
  --dc-scale: 1;
}

[data-densite="compacte"] {
  --dc-avatar: 24px;
  --dc-msg-gap: .45rem;
  --dc-msg-pad: .12rem .3rem;
  --dc-ch-pad: .28rem .5rem;
  --dc-ch-font: .84rem;
  --dc-list-gap: 0;
  --dc-scale: .94;
}
[data-densite="confort"] {
  --dc-avatar: 40px;
  --dc-msg-gap: .95rem;
  --dc-msg-pad: .55rem .6rem;
  --dc-ch-pad: .55rem .7rem;
  --dc-ch-font: 1rem;
  --dc-list-gap: .3rem;
  --dc-scale: 1.04;
}

/* ── Grosses touches ───────────────────────────────────
   Option à part : elle ne change pas la densité mais la
   taille des cibles tactiles, qui est la vraie cause des
   boutons ratés sur téléphone. */
[data-cibles="grandes"] .msg .actions button,
[data-cibles="grandes"] .ch-item,
[data-cibles="grandes"] .rail .srv-btn,
[data-cibles="grandes"] .rail .srv-add {
  min-height: 44px;
}
[data-cibles="grandes"] .msg .actions button { min-width: 44px; }

/* ── Notifications coupées ──────────────────────────────
   Option d'accessibilité : le compteur de messages non lus
   n'anime plus et ne grossit plus. */
html[data-notifs="calmes"] .sdot,
html[data-notifs="calmes"] .unread-pill {
  animation: none !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════
   COMPENSATIONS SUR PETIT ÉCRAN

   Les media queries d’origine sont écrites pour la grille
   d’avant, avec des largeurs en dur. Elles sont reprises ici avec
   les variables, sinon une disposition choisie serait écrasée par
   la règle d’origine selon la taille de l’écran — et le réglage
   ne tiendrait que sur les écrans larges. */
@media (max-width: 1100px) {
  #app { grid-template-columns: var(--dc-rail) var(--dc-channels) minmax(0, 1fr); }
  .members { display: none; }
}
@media (max-width: 860px) {
  /* En tiroir, la colonne des salons sort du flux : sa largeur ne
     doit pas compter dans la grille. */
  #app { display: flex; }
}

/* Sous 520 px, le rail ne sert plus qu’à deux lettres : on le
   rétrécit franchement plutôt que de le garder tel quel. */
@media (max-width: 520px) {
  :root { --dc-rail: 46px; }
  .rail .blob {
    width: calc(34px * var(--dc-scale));
    height: calc(34px * var(--dc-scale));
    border-radius: calc(11px * var(--dc-scale));
  }
}