/* ═══════════════════════════════════════════════════════════════════════════
   LES SALONS SONT DES PORTES — Giri Family                    [2026-08-26]

   Retour de Maha : « ces salons sont moches, on n'arrive pas à lire, les
   cartes sont trop sobres » puis « c'est pas assez appuyé pour ça qui permet
   de profondément lire du premier coup ».

   CE QUI N'ALLAIT PAS (vu à l'écran, pas supposé) :
     · la HIÉRARCHIE ÉTAIT À L'ENVERS — l'en-tête d'univers (« Le Sanctuaire
       d'En-Haut ») criait en petites capitales dorées espacées de .14em à
       13,5 px, pendant que les salons eux-mêmes, la chose qu'on vient
       CHERCHER, étaient des rectangles blancs presque transparents ;
     · le correctif du 20/08 avait, sans le vouloir, ANNULÉ celui du 19/08 :
       posé plus bas dans le fichier à ancrage égal, il ramenait les titres
       d'univers de 16,5 px encre noire à 13,5 px or pâle ;
     · les cartes étaient à 90 % d'opacité sur du MARBRE : les veines de la
       pierre passaient à travers le texte ;
     · la description de chaque salon existait en base depuis toujours
       (« Présente-toi et fais connaissance ») et n'était affichée NULLE PART.

   LA RUPTURE : un salon cesse d'être une ligne de menu, il devient une PORTE.
   Un médaillon frappé qui porte son emblème, son nom en Cormorant plein
   format, et la phrase qui dit ce qu'on trouve derrière. L'univers, lui,
   redevient ce qu'il est : un intertitre qui s'efface derrière ses portes.
   Le salon où l'on se tient est le SEUL élément coloré de la colonne — un
   lingot de marbre doré barré d'or à gauche.

   ⛔ Aucun faux marbre en CSS ici : le marbre est la vraie pierre de la page,
      derrière. Les cartes sont des aplats francs et OPAQUES posés dessus.
   ⛔ Chargé en tout dernier, après parfait.css : à ancrage égal, c'est le
      dernier déclaré qui gagne — sept correctifs empilés l'ont appris.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La palette, posée sur le conteneur (jamais sur :root — les thèmes) ──── */
html body #channelList,
html body .sidebar #channelList{
  --gsp-carte:        #fffdf6;
  --gsp-carte-survol: #fffefa;
  --gsp-bord:         rgba(158,124,58,.32);
  --gsp-bord-vif:     rgba(184,142,44,.72);
  --gsp-nom:          #17120c;
  --gsp-sub:          #5b4c33;
  --gsp-medaille:     linear-gradient(152deg,#fdf6e4 0%,#f4e7c8 62%,#fbf3dd 100%);
  --gsp-anneau:       rgba(186,150,74,.55);
  --gsp-ombre:        0 1px 3px rgba(120,95,45,.10), 0 6px 18px rgba(120,95,45,.07);
  --gsp-ombre-actif:  0 2px 6px rgba(150,112,30,.16), 0 10px 26px rgba(150,112,30,.16);
  --gsp-actif-fond:   linear-gradient(150deg,#fbf1d2 0%,#f6e7ba 54%,#fdf8e9 100%);
  --gsp-or-barre:     linear-gradient(180deg,#f0d78f 0%,#d9b355 42%,#b78d2c 100%);
  --gsp-univers:      #3c3020;
  --gsp-univers-sub:  #6f5f43;
  --gsp-univers-fond: rgba(255,253,247,.52);
  --gsp-badge-fond:   linear-gradient(160deg,#e8c877,#c19a3a);
  --gsp-badge-encre:  #2a2007;
}

/* ── Thème Nuit Dorée (aucun data-theme) : la même architecture, en nuit ── */
html:not([data-theme]) body #channelList,
html:not([data-theme]) body .sidebar #channelList{
  --gsp-carte:        rgba(30,24,14,.66);
  --gsp-carte-survol: rgba(44,35,18,.78);
  --gsp-bord:         rgba(212,168,83,.30);
  --gsp-bord-vif:     rgba(226,187,106,.78);
  --gsp-nom:          #f7eed8;
  --gsp-sub:          rgba(238,226,198,.76);
  --gsp-medaille:     linear-gradient(152deg,rgba(212,168,83,.22) 0%,rgba(212,168,83,.10) 100%);
  --gsp-anneau:       rgba(226,187,106,.46);
  --gsp-ombre:        0 1px 3px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.22);
  --gsp-ombre-actif:  0 2px 8px rgba(0,0,0,.36), 0 12px 30px rgba(140,104,26,.22);
  --gsp-actif-fond:   linear-gradient(150deg,rgba(212,168,83,.30) 0%,rgba(212,168,83,.12) 100%);
  --gsp-univers:      rgba(248,238,213,.96);
  --gsp-univers-sub:  rgba(243,231,201,.66);
  --gsp-univers-fond: rgba(255,255,255,.05);
  --gsp-badge-fond:   linear-gradient(160deg,#e8c877,#b98f2e);
  --gsp-badge-encre:  #201802;
}

/* ═══ 1. L'UNIVERS — le chapeau, et on voit à qui appartiennent les portes ══
   ⛔ [26/08 — 2ᵉ retour de Maha] « quand plusieurs salons sont ouverts, on ne
   comprend plus les salons qu'on a ouverts, car les cartes sont grosses par
   rapport au salon en lui-même qui devient peu lisible ».
   Le rapport d'échelle était encore à l'envers : la carte (21 px, 70 px de haut)
   écrasait le titre qui la commande (16,5 px). On inverse pour de bon — le titre
   d'univers passe devant, les portes se rangent SOUS lui, tenues par un filet
   d'or qui dit d'un coup d'œil lesquelles lui appartiennent. */
html body #channelList .acad-section-header{
  position:relative !important;
  background:var(--gsp-univers-fond) !important;
  border:0 !important;
  border-radius:12px !important;
  padding:11px 12px 11px 17px !important;
  min-height:auto !important;
  margin-bottom:6px !important;
}
/* la marque de l'univers : un trait d'or plein, à l'aplomb du filet des portes */
html body #channelList .acad-section-header::before{
  content:'' !important;
  position:absolute !important; left:4px !important; top:9px !important; bottom:9px !important;
  width:3px !important; border-radius:2px !important;
  background:var(--gsp-or-barre) !important;
  opacity:.9 !important;
}
html body #channelList .acad-section-header:hover{
  background:rgba(201,151,27,.11) !important;
}
html body #channelList .acad-section-label,
html body .sidebar #channelList .acad-section-label,
html body #channelList .acad-section-header .acad-section-label{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:19px !important;
  font-weight:700 !important;
  letter-spacing:.004em !important;
  text-transform:none !important;
  font-variant:normal !important;
  line-height:1.2 !important;
  color:var(--gsp-univers) !important;
  -webkit-text-fill-color:var(--gsp-univers) !important;
  opacity:1 !important;
}
html body #channelList .acad-section-sub,
html body .sidebar #channelList .acad-section-sub{
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  letter-spacing:.005em !important;
  text-transform:none !important;
  color:var(--gsp-univers-sub) !important;
  -webkit-text-fill-color:var(--gsp-univers-sub) !important;
  opacity:1 !important;
  margin-top:1px !important;
  white-space:normal !important;
}
html body #channelList .acad-section-icon{
  font-size:18px !important;
  opacity:.9 !important;
  -webkit-text-fill-color:initial !important;
}
html body #channelList .acad-section{ margin-bottom:18px !important; }
/* ── LE FILET QUI RATTACHE : toutes les portes d'un univers pendent du même
      trait d'or. Trois univers ouverts se lisent alors comme trois colonnes. ── */
html body #channelList .acad-section-body{
  position:relative !important;
  padding-left:13px !important;
  margin-left:5px !important;
}
html body #channelList .acad-section-body::before{
  content:'' !important;
  position:absolute !important; left:0 !important; top:2px !important; bottom:6px !important;
  width:2px !important; border-radius:2px !important;
  background:linear-gradient(180deg, rgba(201,151,27,.55), rgba(201,151,27,.14)) !important;
}

/* ═══ 2. LA PORTE — la carte d'un salon ═════════════════════════════════ */
html body #channelList .ch-item.ch-item,
html body .sidebar #channelList .ch-item.ch-item{
  position:relative !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  column-gap:11px !important;
  row-gap:0 !important;
  min-height:58px !important;
  padding:9px 12px 9px 11px !important;
  margin:0 0 6px !important;
  border-radius:13px !important;
  background:var(--gsp-carte) !important;
  border:1px solid var(--gsp-bord) !important;
  box-shadow:var(--gsp-ombre) !important;
  overflow:hidden !important;
  transition:background .16s ease, border-color .16s ease, box-shadow .18s ease, transform .12s ease !important;
}
html body #channelList .ch-item.ch-item:hover{
  background:var(--gsp-carte-survol) !important;
  border-color:var(--gsp-bord-vif) !important;
  box-shadow:var(--gsp-ombre-actif) !important;
}
html body #channelList .ch-item.ch-item:active{ transform:translateY(1px) !important; }

/* ── Le médaillon : une médaille frappée, pas un emoji qui flotte ──────── */
html body #channelList .ch-item.ch-item > .icon{
  order:1 !important;
  flex:0 0 auto !important;
  width:36px !important; height:36px !important;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  border-radius:50% !important;
  background:var(--gsp-medaille) !important;
  box-shadow:inset 0 0 0 1px var(--gsp-anneau), inset 0 1px 0 rgba(255,255,255,.72), 0 1px 3px rgba(120,95,45,.16) !important;
  font-size:18px !important;
  line-height:1 !important;
  overflow:hidden !important;
}
html body #channelList .ch-item.ch-item > .icon img,
html body #channelList .ch-item.ch-item > .icon svg{
  width:25px !important; height:25px !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

/* ── Le nom : plein format, l'encre la plus franche de la colonne ──────── */
html body #channelList .ch-item.ch-item .name.name{
  order:2 !important;
  /* ⛔ VU À L'ÉCRAN : avec `flex-basis:auto`, un nom long (« Sanctuaire du
     Professorat », « Classe Privée · Espace Élèves ») réclamait la largeur de
     son texte, ne tenait pas, et passait À LA LIGNE SOUS le médaillon — la
     carte se cassait en deux, médaillon en haut, nom en dessous. Avec une base
     à 0, le nom se plie DANS la place qui reste : le médaillon garde sa gauche. */
  flex:1 1 0 !important;
  min-width:0 !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:17.5px !important;
  font-weight:700 !important;
  line-height:1.22 !important;
  letter-spacing:.004em !important;
  color:var(--gsp-nom) !important;
  -webkit-text-fill-color:var(--gsp-nom) !important;
  background:none !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  opacity:1 !important;
}
/* le sceau du salon réservé : présent, jamais encombrant */
html body #channelList .ch-item.ch-item .name .ro-lock{
  font-size:.62em !important;
  opacity:.78 !important;
  margin-left:5px !important;
  vertical-align:middle !important;
}

/* ── LA PHRASE QUI MANQUAIT : ce qu'on trouve derrière la porte ────────── */
html body #channelList .ch-item.ch-item .gsp-sub{
  order:4 !important;
  /* ⛔ VU À L'ÉCRAN (1ʳᵉ capture) : en flex, `flex-basis:100%` vaut DÉJÀ toute la
     largeur de la carte — la marge de 56 px s'ajoutait par-dessus et poussait
     la phrase hors du cadre : « Les enseignements et messag… » coupé net, sans
     même l'ellipse (overflow:hidden tranchait avant elle). Le décalage passe
     donc en padding, avec box-sizing:border-box : il se prend DANS la largeur. */
  flex:1 1 100% !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  margin:1px 0 0 0 !important;
  padding-left:47px !important;
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.38 !important;
  color:var(--gsp-sub) !important;
  -webkit-text-fill-color:var(--gsp-sub) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden !important;
}

/* ── La pastille des non-lus : de l'or franc, pas un gris de plus ──────── */
html body #channelList .ch-item.ch-item .badge{
  order:3 !important;
  flex:0 0 auto !important;
  min-width:24px !important; height:24px !important;
  padding:0 7px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:999px !important;
  background:var(--gsp-badge-fond) !important;
  color:var(--gsp-badge-encre) !important; -webkit-text-fill-color:var(--gsp-badge-encre) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:12.5px !important; font-weight:800 !important;
  box-shadow:0 1px 3px rgba(140,105,35,.34) !important;
}
/* le prix de la Classe Privée garde sa ligne à lui (posé le 24/08) */
html body #channelList .ch-item.ch-item .giri-prix{
  order:5 !important;
  flex:0 0 auto !important;
  margin-left:47px !important;
  margin-top:3px !important;
}

/* ═══ 2 bis. LA FEUILLE D'OR ═══════════════════════════════════════════════
   Demande de Maha (26/08) : « des cartes magnifiques mais sans reflet premium
   doré équilibré feuille d'or — il faut le mettre ».

   Une feuille d'or, ce n'est pas un dégradé jaune sur toute la carte : c'est un
   FILET battu qui prend la lumière sur son arête, et un reflet rasant qui
   traverse. On pose donc les deux, et rien d'autre :
     · le filet : un trait de 1,5 px en haut, or clair → or profond → or clair,
       comme la tranche d'une feuille posée à la main ;
     · le reflet : une bande claire très diagonale, à 6 % d'opacité, qui glisse
       vers la droite au survol.
   ⛔ Le fond de la carte reste un aplat ivoire OPAQUE : la lisibilité du nom
      passe avant l'effet (loi 2 du studio — le contraste se mesure, il ne se
      suppose pas). Le banc mesure les 62 textes après chaque retouche. */
html body #channelList .ch-item.ch-item::after{
  content:'' !important;
  position:absolute !important; left:11px !important; right:11px !important; top:0 !important;
  height:1.5px !important; border-radius:0 0 2px 2px !important;
  background:linear-gradient(90deg,
    rgba(201,151,27,0) 0%,
    rgba(240,215,143,.85) 18%,
    rgba(183,141,44,.95) 50%,
    rgba(240,215,143,.85) 82%,
    rgba(201,151,27,0) 100%) !important;
  pointer-events:none !important;
}
/* le reflet rasant : discret au repos, il glisse quand la main passe */
html body #channelList .ch-item.ch-item > .icon{ z-index:1 !important; }
html body #channelList .ch-item.ch-item .name.name,
html body #channelList .ch-item.ch-item .gsp-sub{ position:relative !important; z-index:1 !important; }
html body #channelList .ch-item.ch-item{ isolation:isolate !important; }
html body #channelList .ch-item.ch-item > .gsp-lustre{
  position:absolute !important; inset:0 !important; z-index:0 !important;
  pointer-events:none !important; border-radius:inherit !important;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgba(255,244,214,.55) 46%,
    rgba(255,232,178,.30) 52%,
    rgba(255,255,255,0) 64%) !important;
  opacity:.5 !important;
  transform:translateX(-8%) !important;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .3s ease !important;
}
html body #channelList .ch-item.ch-item:hover > .gsp-lustre{
  opacity:.95 !important; transform:translateX(8%) !important;
}
html:not([data-theme]) body #channelList .ch-item.ch-item > .gsp-lustre{
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgba(255,226,150,.16) 47%,
    rgba(255,255,255,0) 62%) !important;
}
@media (prefers-reduced-motion:reduce){
  html body #channelList .ch-item.ch-item > .gsp-lustre{ transition:none !important; }
}

/* ═══ 3. LE SALON OÙ L'ON SE TIENT — l'unique éclat de la colonne ═══════ */
html body #channelList .ch-item.ch-item.active,
html body #channelList .ch-item.ch-item[aria-current]{
  background:var(--gsp-actif-fond) !important;
  border-color:var(--gsp-bord-vif) !important;
  box-shadow:var(--gsp-ombre-actif) !important;
  padding-left:18px !important;
}
/* la barre d'or coulée le long du bord gauche */
html body #channelList .ch-item.ch-item.active::before{
  content:'' !important;
  position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important;
  width:5px !important;
  background:var(--gsp-or-barre) !important;
  box-shadow:0 0 10px rgba(201,151,27,.45) !important;
}
html body #channelList .ch-item.ch-item.active > .icon{
  box-shadow:inset 0 0 0 1px rgba(180,138,40,.85), inset 0 1px 0 rgba(255,255,255,.85), 0 2px 6px rgba(150,112,30,.28) !important;
}
html body #channelList .ch-item.ch-item.active .name.name{ font-weight:700 !important; font-size:18.5px !important; }
/* la porte ouverte a droit à sa phrase entière : c'est là qu'on est */
html body #channelList .ch-item.ch-item.active .gsp-sub{ -webkit-line-clamp:2 !important; }
/* sa feuille d'or est pleine, pas effleurée */
html body #channelList .ch-item.ch-item.active::after{
  height:2px !important; left:5px !important; right:9px !important;
  background:linear-gradient(90deg,
    rgba(183,141,44,.55) 0%,
    rgba(247,227,164,1) 30%,
    rgba(183,141,44,1) 62%,
    rgba(240,215,143,.9) 100%) !important;
}
html body #channelList .ch-item.ch-item.active > .gsp-lustre{ opacity:.85 !important; }

/* ═══ 4. Le salon fermé : en retrait, JAMAIS illisible ══════════════════ */
html body #channelList .ch-item.ch-item.giri-locked{ opacity:1 !important; }
html body #channelList .ch-item.ch-item.giri-locked .name.name{
  color:var(--gsp-nom) !important; -webkit-text-fill-color:var(--gsp-nom) !important;
  opacity:.88 !important;
}

/* ═══ 5. Au doigt : plus grand, plus espacé ════════════════════════════ */
@media (max-width:900px){
  /* au doigt : la cible reste confortable (62 px), sans redevenir un pavé */
  html body #channelList .ch-item.ch-item{
    min-height:62px !important;
    padding:10px 13px 10px 12px !important;
    margin-bottom:7px !important;
  }
  html body #channelList .ch-item.ch-item > .icon{ width:38px !important; height:38px !important; font-size:19px !important; }
  html body #channelList .ch-item.ch-item .name.name{ font-size:18.5px !important; }
  html body #channelList .ch-item.ch-item .gsp-sub{ font-size:13px !important; padding-left:49px !important; }
  html body #channelList .acad-section-label{ font-size:19.5px !important; }
  html body #channelList .acad-section-sub{ font-size:13px !important; }
}

@media (prefers-reduced-motion:reduce){
  html body #channelList .ch-item.ch-item{ transition:none !important; }
}


/* ═══ 6. LE SALON DE SOIN N'A PAS BESOIN D'ÊTRE POSÉ DEUX FOIS ═════════════
   Maha (26/08) : « le salon de soin n'a pas besoin d'être reposé dans les
   salons étant donné qu'il a son propre encart dans la sidebar ».

   Sa décision du 21/08 en avait fait un salon du chat comme les autres, et
   l'encart avait été retiré pour cette raison. L'encart est revenu depuis
   (`.sso-porte`, présent sur ordinateur ET sur téléphone — vérifié avant
   d'écrire cette règle) : la carte dans la liste fait donc double emploi.

   ⛔ On ne retire que l'ENTRÉE EN DOUBLE. Le salon existe toujours, l'encart y
   mène, et il reste atteignable au clavier comme au doigt — une épreuve du banc
   quotidien vérifie qu'on peut encore y entrer. Masquer une porte sans laisser
   l'autre ouverte serait pire que le doublon. */
/* ⛔ La classe est DOUBLÉE : à ancrage égal avec la règle qui pose
   `display:flex` sur `.ch-item.ch-item` (section 2 de ce fichier), l'ordre
   seul ne suffisait pas — mesuré au navigateur, la carte restait à 74 px.
   C'est le piège maison : un `!important` de plus ne bat pas une spécificité
   égale, il faut monter d'un cran. */
html body #channelList .ch-item.ch-item[data-slug="salon-soin"],
html body .sidebar #channelList .ch-item.ch-item[data-slug="salon-soin"]{
  display:none !important;
}


/* ═══ 7. AUCUN EMPILEMENT — on arrive DANS les salons ══════════════════════
   Maha (26/08) : « on a un empilement sur la sidebar de gauche maintenant, on
   doit voir aucun empilement et arriver directement dans l'espace ».

   MESURÉ : après un clic sur « Discuter », la colonne empilait HUIT blocs pour
   1526 px de contenu dans 1000 px de haut — dont deux qui appartiennent au
   MENU et se répétaient là où on vient chercher les salons :
     · `.sso-porte`       — l'encart Salon de Soin
     · `.pf-porte-portail`— « Mon portail élève »
   La liste elle-même commençait donc à 288 px du haut, sous une pile d'entrées
   déjà vues à l'écran précédent.

   La colonne a DEUX états, et la page les distingue déjà :
     `#sidebar.giri-condensed` = le menu · sans la classe = les salons.
   On s'appuie sur cet état existant plutôt que d'en inventer un.

   ⛔ Rien n'est supprimé : les deux entrées restent pleinement accessibles
   dans le menu, à un retour d'ici. On ne retire QUE la répétition. */
html body #sidebar:not(.giri-condensed) .sso-porte,
html body #sidebar:not(.giri-condensed) .pf-porte-portail{
  display:none !important;
}
/* la liste démarre haut et respire : elle est ce qu'on est venu chercher */
html body #sidebar:not(.giri-condensed) #channelList{ margin-top:2px !important; }