/* Extrait de communaute.html le 20260823-203619 — bloc <style id="giri-premium-20260723">.
   Posé ici pour que le navigateur le garde en cache au lieu de le
   retélécharger à chaque visite. L'ordre de cascade est conservé :
   le <link> occupe exactement la place de l'ancien <style>. */

/* ==========================================================================
   GIRI — DIRECTION ARTISTIQUE « SANCTUAIRE NUIT & OR » (23/07/2026)
   Issu de l audit de 9 testeurs design. Corrige la cause racine : le thème
   par défaut était violet/turquoise/rose et l écran d accueil rose bonbon.
   Tout est scopé sur html:not([data-theme]) : les thèmes CHOISIS par les
   membres (aube, sable, glacier, lotus, bois) ne sont jamais touchés.
   ========================================================================== */

/* --- 1. LA PALETTE : l or devient enfin l accent de la maison --- */
html:not([data-theme]), html:not([data-theme]) :root{
  --g:#d4a853 !important;            /* accent principal : or */
  --gl:#f5c36a !important;           /* or clair */
  --gd:#a07c2c !important;           /* or profond */
  --accent:#d4a853 !important;
  --blue:#d4a853 !important;
  --gg:linear-gradient(120deg,#f5c36a 0%,#d4a853 55%,#a07c2c 100%) !important;
  --glow:rgba(212,168,83,.18) !important;
  --glow-strong:rgba(212,168,83,.38) !important;
  --border-hover:rgba(212,168,83,.5) !important;
  /* gris CHAUDS (parchemin) au lieu des gris bleutés froids */
  --tm:rgba(245,233,200,.60) !important;
  --td:rgba(245,233,200,.42) !important;
  /* couleurs de SENS conservées, mais réchauffées :
     le vert reste vert (présence), le rouge reste rouge (alerte) */
  --green:#7cc494 !important;
  --red:#e0836b !important;
}

/* --- 2. Dans les messages : le gras était violet, les liens turquoise --- */
html:not([data-theme]) .msg-content strong,
html:not([data-theme]) .msg .msg-content strong{ color:#f5c36a !important; }
html:not([data-theme]) .msg-content a,
html:not([data-theme]) .msg .msg-content a{ color:#f5c36a !important;
  text-decoration-color:rgba(212,168,83,.5) !important; }
html:not([data-theme]) .msg-time{ color:rgba(245,233,200,.55) !important; }
html:not([data-theme]) .attach-btn{ color:#d4a853 !important; }

/* --- 3. Les titres retrouvent le serif de marque (Space Grotesk était
       forcé partout, ce qui donnait un rendu générique) --- */
html body h1, html body h2, html body h3,
html body .sb-header, html body .ch-header h2, html body .ch-header h3,
html body .welcome-overlay h1, html body .welcome-overlay h2,
html body .giri-charter-head h2, html body .giri-matric-title{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif !important;
  letter-spacing:0 !important; }
/* le prénom du salut ne change plus de police en pleine ligne */
html body .welcome-overlay h1 *, html body .giri-home-greet *{
  font-family:inherit !important; }

/* --- 4. LA CHARTE : le premier écran passait en bleu navy froid --- */
.giri-charter-gate, .giri-charter-view{
  background:radial-gradient(120% 120% at 50% 0%, #1a1409 0%, #0b0a06 72%) !important; }
.giri-charter-card, .giri-charter-card.serment{
  background:linear-gradient(180deg,#17120a,#0d0a06) !important;
  border:1px solid rgba(212,168,83,.42) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(212,168,83,.08) inset !important; }
.giri-charter-head h2{ color:#f5c36a !important; }
.giri-charter-ver{ color:#d4a853 !important; background:rgba(212,168,83,.14) !important;
  border:1px solid rgba(212,168,83,.28) !important; }
.giri-charter-list strong{ color:#f5c36a !important; }
.giri-charter-list span, .giri-charter-preamble{ color:rgba(245,233,200,.82) !important; }
/* le titre restait blanc et le bouton d entrée virait au rose : on impose l or */
html body .giri-charter-head h2, html body .giri-charter-title{ color:#f5c36a !important; }
html body .giri-charter-accept, html body #giriCharterAccept{
  background:linear-gradient(180deg,#f6d573,#d4a853) !important; color:#2a1e06 !important;
  border:0 !important; font-weight:700 !important;
  box-shadow:0 8px 24px rgba(212,168,83,.38) !important; }
/* la case à cocher blanche du navigateur devient un sceau doré */
html body #giriCharterCheck{
  appearance:none !important; -webkit-appearance:none !important;
  background:rgba(212,168,83,.10) !important;
  border:2px solid rgba(212,168,83,.65) !important; border-radius:7px !important;
  transform:none !important; width:30px !important; height:30px !important;
  display:inline-grid !important; place-content:center !important; }
html body #giriCharterCheck:checked{
  background:linear-gradient(135deg,#f5c36a,#d4a853) !important;
  border-color:#f5c36a !important; }
html body #giriCharterCheck:checked::after{
  content:"" !important; width:9px !important; height:15px !important;
  border:solid #2a1e06 !important; border-width:0 3px 3px 0 !important;
  transform:rotate(42deg) translateY(-1px) !important; }
html body .giri-charter-check{ color:rgba(245,233,200,.88) !important; }
/* la barre d entrée ne doit plus laisser transparaître le texte derrière elle */
html body .giri-charter-gate .giri-charter-actions{
  background:linear-gradient(180deg, rgba(11,10,6,0) 0%, rgba(11,10,6,.96) 26%, #0b0a06 52%) !important;
  border-top:1px solid rgba(212,168,83,.16) !important; }

/* --- 5. L ÉCRAN DE BIENVENUE : il était rose pastel, l exact opposé du
       sanctuaire. Il devient la plus belle porte de la maison. --- */
.giri-matric-overlay{
  background:radial-gradient(130% 130% at 50% 0%, #1c150a 0%, #0b0a06 70%) !important; }
.giri-matric-card{
  background:linear-gradient(180deg,#1a1208,#0d0804) !important;
  border:1px solid rgba(212,168,83,.38) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 90px rgba(212,168,83,.10) !important;
  color:#f5e9c8 !important; }
.giri-matric-title{ color:#f5c36a !important; }
.giri-matric-lead, .giri-matric-msg, .giri-matric-card p{ color:rgba(245,233,200,.84) !important; }
.giri-matric-card strong{ color:#f5c36a !important; }
/* la pastille de points n est pas un bouton : elle cesse d en avoir l allure */
.giri-matric-xp{
  background:rgba(212,168,83,.12) !important; color:#f5c36a !important;
  border:1px solid rgba(212,168,83,.32) !important; box-shadow:none !important;
  font-size:13px !important; padding:7px 15px !important; cursor:default !important; }
/* un seul vrai bouton, en or plein */
.giri-matric-cta{
  background:linear-gradient(135deg,#f5c36a,#d4a853) !important; color:#1a1208 !important;
  border:0 !important; box-shadow:0 8px 26px rgba(212,168,83,.35) !important; font-weight:800 !important; }
/* les pétales roses deviennent des étincelles dorées */
.sakura-petal{
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #d4a853 70%) !important;
  filter:none !important; opacity:.5 !important; }

/* --- 6. « Mettre à jour l app » s affichait DEUX fois : on garde le petit
       lien discret et on retire le gros bouton doré qui rivalisait avec
       l Assistance (un contrôle technique n est pas une action principale) --- */
html body .giri-sidebar-refresh{ display:none !important; }

/* --- 7. Un seul or plein à la fois : les actions secondaires passent en
       contour doré, l or plein reste réservé à l action du moment --- */
html:not([data-theme]) .sb-arbre-cta,
html:not([data-theme]) .role-badge{
  background:transparent !important; color:#d4a853 !important;
  border:1px solid rgba(212,168,83,.38) !important; box-shadow:none !important; }

/* --- 8. Plus de mots coupés en plein milieu --- */
/* [MOBILE-FIX-2026-08-10] word-break/overflow-wrap etaient herites du wildcard
   "html body.giri-mobile-shell *" (word-break:break-word;overflow-wrap:anywhere)
   qui n'a pas !important : il gagnait quand meme car rien ici ne le contredisait,
   et coupait les mots en plein milieu ("Annonce"/"s") malgre le white-space:normal
   ci-dessous. On force le wrap normal (coupure aux espaces uniquement). */
.ch-header .ch-name, #channelHeader .ch-info .ch-name{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  word-break:normal !important; overflow-wrap:normal !important;
  font-size:16px !important; line-height:1.25 !important; }
.sb-arbre-cat, .sb-arbre-sub, .sb-arbre-title{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  display:block !important; }
[class*="member-name"], .member-name{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }

/* --- 9. Sur mobile, la dernière carte de « Moi » passait sous la barre --- */
@media (max-width: 640px){
  .giri-home-overlay{ padding-bottom:calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* --- 11bis. CONFORT DE LECTURE — réglages choisis du point de vue d une
   personne âgée. Ce qui gêne vraiment à 75 ans n est pas la taille brute,
   c est (1) perdre sa ligne en revenant à la marge, (2) un texte fin et
   pâle, (3) une colonne de texte trop étroite qui casse tous les 3 mots.
   On agit sur les quatre leviers à la fois. --- */
@media (max-width: 640px){
  /* on rend au texte la largeur mangée par l avatar et les marges */
  html body.giri-mobile-shell .msg{ padding:13px 10px !important; gap:9px !important; }
  html body.giri-mobile-shell .msg .msg-avatar{
    width:40px !important; height:40px !important; font-size:14px !important; }
  html body.giri-mobile-shell .messages-wrap{ padding-left:8px !important; padding-right:8px !important; }
}
/* interligne généreux : le remède n°1 contre le saut de ligne */
html body.giri-mobile-shell .msg .msg-content{
  line-height:1.75 !important;
  font-weight:450 !important;
  letter-spacing:.005em !important;
  color:#FBF7EE !important; }

/* --- 11. ÉCHELLE TYPOGRAPHIQUE MOBILE
   Le corps de message était à 30px : 31 mots tenaient sur 11 lignes et
   remplissaient les deux tiers d un S24, le corps étant plus gros que le
   titre du salon. On garde un confort très au-dessus du standard (20px,
   soit +25 %) mais on rend à la page sa respiration et sa hiérarchie. --- */
html body.giri-mobile-shell .msg .msg-content{
  font-size:20px !important; line-height:1.75 !important; }
html body.giri-mobile-shell .msg .msg-author, html body .msg-author{
  font-size:17px !important; font-weight:700 !important; }
html body.giri-mobile-shell .ch-name, html body .ch-header .ch-name{
  font-size:18px !important; }
/* le réglage « confort de lecture » garde 3 crans, recalés sur la nouvelle base */
html[data-giri-fs="1"] body.giri-mobile-shell .msg .msg-content{ font-size:23px !important; line-height:1.58 !important; }
html[data-giri-fs="2"] body.giri-mobile-shell .msg .msg-content{ font-size:26px !important; line-height:1.56 !important; }
html[data-giri-fs="3"] body.giri-mobile-shell .msg .msg-content{ font-size:29px !important; line-height:1.54 !important; }

/* --- 12. Le bouton MENU écrasait tout le bandeau en or plein 88x48.
   Il garde sa lisibilité mais passe en contour doré, à égalité visuelle
   avec les icônes voisines : un seul or plein à la fois à l écran. --- */
html body.giri-mobile-shell .ch-header .mobile-toggle,
html body .ch-header .mobile-toggle{
  background:rgba(212,168,83,.12) !important;
  color:#f5c36a !important;
  border:1px solid rgba(212,168,83,.55) !important;
  width:auto !important; min-width:74px !important; height:44px !important;
  font-size:13px !important; font-weight:700 !important; letter-spacing:.04em !important;
  box-shadow:none !important; }

/* --- 13. L emoji micro argenté cassait la famille d icônes (trait doré).
   On le remplace par un vrai pictogramme au trait, teinté or. --- */
html body #voiceBtn{ font-size:0 !important; position:relative !important;
  color:#d4a853 !important; }
html body #voiceBtn::before{
  content:"" !important; display:block !important;
  width:24px !important; height:24px !important;
  background-color:#d4a853 !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a3%203%200%200%201%203%203v6a3%203%200%200%201-6%200V5a3%203%200%200%201%203-3z%22%2F%3E%3Cpath%20d%3D%22M19%2010v1a7%207%200%200%201-14%200v-1%22%2F%3E%3Cpath%20d%3D%22M12%2018v4%22%2F%3E%3Cpath%20d%3D%22M8%2022h8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a3%203%200%200%201%203%203v6a3%203%200%200%201-6%200V5a3%203%200%200%201%203-3z%22%2F%3E%3Cpath%20d%3D%22M19%2010v1a7%207%200%200%201-14%200v-1%22%2F%3E%3Cpath%20d%3D%22M12%2018v4%22%2F%3E%3Cpath%20d%3D%22M8%2022h8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }

/* --- 14. Le sceau de bienvenue était une fleur de cerisier rose : il
   devient l étoile d or, le même symbole que la charte. --- */
html body .giri-matric-seal{
  font-size:0 !important; display:flex !important;
  align-items:center !important; justify-content:center !important; }
html body .giri-matric-seal::before{
  content:"" !important; display:block !important;
  width:58px !important; height:58px !important;
  background-color:#f5c36a !important;
  filter:drop-shadow(0 0 18px rgba(245,195,106,.55)) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%201.5l1.9%206.3%206.6.1-5.3%203.9%202%206.3-5.2-4-5.2%204%202-6.3-5.3-3.9%206.6-.1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%201.5l1.9%206.3%206.6.1-5.3%203.9%202%206.3-5.2-4-5.2%204%202-6.3-5.3-3.9%206.6-.1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }

/* --- 15. La pastille d assistance flottante était marron, hors palette --- */
html body [class*="update-app"], html body [id*="update-app"],
html body .giri-support-fab, html body #giriSupportFab{
  background:linear-gradient(135deg, rgba(26,18,8,.96), rgba(13,10,6,.96)) !important;
  border:1px solid rgba(212,168,83,.42) !important;
  color:#f5c36a !important; border-radius:14px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.45) !important; }

/* --- 16. LE RÉGLAGE « TAILLE DU TEXTE » REVIENT AUX MEMBRES.
   Il avait été retiré en juillet quand tout était forcé à 30 px : plus
   personne ne pouvait ajuster. Maintenant que la base est à 20 px, chacun
   choisit son confort — c est le vrai geste d accessibilité : on ne
   choisit pas à la place des yeux de l autre. --- */
html body #giriFsBtn, html body .giri-fs-btn, html body [data-giri-fs-btn]{
  display:flex !important; visibility:visible !important; pointer-events:auto !important;
  width:46px !important; height:46px !important;
  top:auto !important; bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  right:10px !important; left:auto !important;
  background:linear-gradient(160deg, rgba(26,18,8,.94), rgba(13,10,6,.94)) !important;
  border:1px solid rgba(212,168,83,.55) !important; color:#f5c36a !important;
  font-size:19px !important; opacity:.92 !important;
  box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 14px rgba(212,168,83,.18) !important; }
html body #giriFsBtn:hover, html body #giriFsBtn:active{ opacity:1 !important; }
/* sur grand écran il se pose dans le coin, loin du texte */
@media (min-width: 900px){
  html body #giriFsBtn{ bottom:22px !important; right:22px !important; }
}
/* le panneau de choix reste au-dessus de tout */
html body #giriFsPanel{ z-index:2147483640 !important; }

/* --- 17. La bulle « Petit bug ? Besoin d assistance ? » restait affichée
   alors que le bouton auquel elle renvoie (#ga-fab) est masqué depuis
   longtemps : une bulle qui pointe vers un bouton invisible, dans un brun
   hors palette, par-dessus la liste des membres. On la retire. --- */
html body #ga-hint, html body .ga-hint{
  display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* --- 18. La carte « Arbre à Liens » de la colonne : trois lignes de texte
   minuscule et tronqué dans une carte étroite. On donne la priorité au
   titre et on calme le reste. --- */
html body .sb-arbre-title{
  font-size:16px !important; line-height:1.2 !important; font-weight:700 !important;
  color:#f5c36a !important; }
/* l intitulé « L ÉCOSYSTÈME COMPLET » ne tient pas dans cette colonne
   étroite et se coupait en « L'ÉCO... » : il est redondant avec le titre */
html body .sb-arbre-eyebrow{ display:none !important; }
/* le bouton passe sous le texte pour lui rendre toute la largeur */
@media (min-width: 900px){
  html body .sb-arbre-txt{ min-width:0 !important; flex:1 1 auto !important; }
  html body .sb-arbre-cta{ margin-top:8px !important; align-self:flex-start !important; }
}
/* le sous-titre décoratif ne tient pas dans cette colonne et se coupait
   en « Tous les chemin... » : mieux vaut ne pas l afficher qu inachevé */
html body .sb-arbre-sub{ display:none !important; }

/* --- 19. Le bouton « Aa » touchait le bord de l écran --- */
html body #giriFsBtn{ right:14px !important; }
@media (max-width: 640px){
  html body #giriFsBtn{ bottom:calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* --- 20. ALLÈGEMENT DE LA COLONNE DES SALONS
   Mesuré : les salons n occupaient que 24 % de leur propre colonne ; le
   reste était des cartes décoratives. On ne supprime aucune fonction, on
   rend simplement leur juste poids visuel aux éléments : les salons
   deviennent l élément principal, les intitulés de section redeviennent
   de simples intitulés. --- */

/* les en-têtes d univers cessent d être de grosses cartes colorées */
html body .acad-section > *:first-child{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:6px 4px 2px !important; margin:0 !important; border-radius:0 !important; }
html body .acad-section-label{
  font-size:11.5px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  color:rgba(245,233,200,.50) !important; font-weight:600 !important; }
html body .acad-section-sub{ display:none !important; }
/* les intitulés de section étaient violets et bleus : ils attiraient l œil
   plus que les salons eux-mêmes. Ils passent en gris discret. */
html body .acad-section > *:first-child,
html body .acad-section > *:first-child *{
  color:rgba(245,233,200,.52) !important;
  text-shadow:none !important; }
html body .acad-section > *:first-child{
  font-size:11.5px !important; letter-spacing:.14em !important; }
html body .acad-section{ margin-bottom:6px !important; }
/* l icône décorative de section laisse la place au texte */
html body .acad-section > *:first-child [class*="icon"],
html body .acad-section > *:first-child .sn-icon{
  width:18px !important; height:18px !important; font-size:14px !important; }

/* les salons eux-mêmes respirent et deviennent la matière principale */
html body .sidebar [data-slug]{
  min-height:42px !important; padding:9px 12px !important; margin-bottom:3px !important;
  font-size:14.5px !important; }

/* l en-tête, la promo et les boutons de service se font plus discrets */
html body .sb-header{ padding-top:10px !important; padding-bottom:10px !important; }
html body .sb-arbre-card{ padding:8px 10px !important; }
html body .sb-arbre-orb-wrap, html body .sb-arbre-orb-ring{
  width:34px !important; height:34px !important; }
html body .sb-section-row{ padding:6px 4px !important; min-height:0 !important; }
html body .sb-section-row > *{ font-size:11.5px !important; letter-spacing:.14em !important; }
html body #sidebarAssistanceBtn, html body .sb-assistance-btn{
  min-height:46px !important; padding:9px 14px !important; margin:10px 12px !important; }
html body #sidebarAssistanceBtn img{ width:28px !important; height:28px !important; }

/* --- 21. LISIBILITÉ DES INTITULÉS DE SECTION
   Chaque section est teintée par son « chakra » : le Sanctuaire du
   Professorat sort en ORANGE, d autres en violet ou bleu. Sur le fond
   nuit, ces teintes saturées en petites capitales espacées sont
   difficiles à lire. Tous les intitulés passent en parchemin lisible ;
   la couleur de chakra reste sur la petite icône. --- */
html body .acad-section[data-chakra] > *:first-child,
html body .acad-section[data-chakra] > *:first-child *,
html body .acad-section > *:first-child span,
html body .acad-section-label{
  color:rgba(245,233,200,.72) !important;
  text-shadow:none !important;
  -webkit-text-fill-color:rgba(245,233,200,.72) !important;
  background-image:none !important; }
html body .acad-section[data-chakra] > *:first-child{
  font-size:12px !important; letter-spacing:.12em !important; font-weight:700 !important; }
/* l icône garde sa couleur : elle sert de repère */
html body .acad-section[data-chakra] > *:first-child [class*="icon"],
html body .acad-section[data-chakra] > *:first-child .sn-icon{
  -webkit-text-fill-color:initial !important; }

/* --- 22. PLANCHER DE LISIBILITÉ EN CSS
   (il était tenu par un script qui repassait sur toute la page toutes les
   1,5 s et faisait sauter l affichage ; le CSS fait le même travail sans
   jamais provoquer de saut) --- */
html body .sidebar .sub, html body .sb-header .sub{ font-size:12.5px !important; }
html body .sidebar .label, html body .sb-section-row .label{ font-size:12px !important; }
html body .sidebar .name, html body .sidebar [data-slug] .name{ font-size:15px !important; }
html body .msg-time, html body .sidebar .meta{ font-size:13px !important; }

/* --- 10. Finition : les anneaux et lueurs suivent l or --- */
html:not([data-theme]) .avatar, html:not([data-theme]) .msg-avatar{
  border-color:rgba(212,168,83,.35) !important; }
html:not([data-theme]) *:focus-visible{
  outline:2px solid #d4a853 !important; outline-offset:2px !important; }