/* Extrait de communaute.html le 20260823-203619 — bloc <style id="giri-lisibilite-drawer-20260801">.
   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>. */

/* ═══════════ ARBRE À LIENS — LISIBILITÉ (01/08/2026) ═══════════
   Maha, écran 1920×1080 zoom 100 % : « les rubriques ne sont pas lisibles,
   la police n'est pas la bonne, Giri Assistance est entouré d'un flou
   étrange », puis « mets mon logo, la boule dorée » et « refais le design
   de la carte Arbre à Liens, là c'est moche ».
   Constaté à l'œil (skill `screen`, captures avant/après) :
     · rubriques = Cinzel serif FINE à 13 px, interlettrage 2,4 px, POSÉE SUR
       UNE OMBRE NOIRE → gris baveux, illisible à côté des liens sans-serif ;
     · .tll-assist portait box-shadow 0 10px 26px rgba(201,151,27,.38) = un
       halo doré de 26 px qui bavait sur le bois → « le flou étrange » ;
     · son libellé (marron #3a2a06 sur or clair) héritait en plus d'un
       text-shadow NOIR → double bavure sur les lettres ;
     · la carte de la barre latérale empilait un liseré VIOLET, un anneau
       conique VIOLET tournant, un halo flou animé et une boule NOIRE —
       sur le marbre clair, ça faisait une tache sombre cerclée de mauve.
   Ce bloc est le DERNIER de la page : à spécificité égale il gagne. ═══════ */

/* ─── 1. RUBRIQUES — typographie, tous thèmes ─────────────────────────────
   Sans-serif (la même que les liens, qui eux se lisent parfaitement),
   plus grasse, plus grande, moins espacée, et surtout SANS ombre. */
html body .tll-drawer .tll-section summary,
html body .tll-drawer .tll-section .tll-cat,
html[data-theme="aube"] body .tll-drawer .tll-section summary,
html[data-theme="sable"] body .tll-drawer .tll-section summary,
html[data-theme="marbre"] body .tll-drawer .tll-section summary,
html[data-theme="glacier"] body .tll-drawer .tll-section summary,
html[data-theme="lotus"] body .tll-drawer .tll-section summary{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif !important;
  font-size:clamp(14.5px,.94rem,22px) !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  line-height:1.25 !important;
  padding:15px 16px !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:optimizeLegibility !important;
}

/* 1b. Couleur sur les thèmes SOMBRES (bois légendaire, écrin) */
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer .tll-section summary,
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer .tll-section .tll-cat{
  color:#FFDE9B !important;
  -webkit-text-fill-color:#FFDE9B !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer .tll-section[open] summary,
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer .tll-section summary:hover{
  color:#FFF4DF !important;
  -webkit-text-fill-color:#FFF4DF !important;
}

/* 1c. Couleur sur les thèmes CLAIRS — on assombrit l'or pour tenir le gras
       (jamais de texte clair sur fond clair). */
html[data-theme="aube"] body .tll-drawer .tll-section summary,
html[data-theme="sable"] body .tll-drawer .tll-section summary,
html[data-theme="marbre"] body .tll-drawer .tll-section summary,
html[data-theme="glacier"] body .tll-drawer .tll-section summary,
html[data-theme="lotus"] body .tll-drawer .tll-section summary{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html[data-theme="aube"] body .tll-drawer .tll-section[open] summary,
html[data-theme="sable"] body .tll-drawer .tll-section[open] summary,
html[data-theme="marbre"] body .tll-drawer .tll-section[open] summary,
html[data-theme="glacier"] body .tll-drawer .tll-section[open] summary,
html[data-theme="lotus"] body .tll-drawer .tll-section[open] summary{
  color:#5E4508 !important;
  -webkit-text-fill-color:#5E4508 !important;
}

/* 1d. Chevron : il était à 0,7 d'opacité et trop petit — on ne voyait pas
       quelles rubriques s'ouvrent. */
html body .tll-drawer .tll-section summary::after{
  font-size:1.3rem !important;
  opacity:1 !important;
  color:#F2C97A !important;
}
html[data-theme="aube"] body .tll-drawer .tll-section summary::after,
html[data-theme="sable"] body .tll-drawer .tll-section summary::after,
html[data-theme="marbre"] body .tll-drawer .tll-section summary::after,
html[data-theme="glacier"] body .tll-drawer .tll-section summary::after,
html[data-theme="lotus"] body .tll-drawer .tll-section summary::after{
  color:#9A7415 !important;
}

/* ─── 2. GIRI ASSISTANCE — fin du halo baveux ────────────────────────────
   Le lingot reste doré et vivant, mais posé net : ombre courte et sombre
   au lieu d'un glow doré de 26 px, et zéro ombre sur le texte foncé. */
html body .tll-drawer .tll-assist,
html[data-theme="aube"] body .tll-drawer .tll-assist,
html[data-theme="sable"] body .tll-drawer .tll-assist,
html[data-theme="marbre"] body .tll-drawer .tll-assist,
html[data-theme="glacier"] body .tll-drawer .tll-assist,
html[data-theme="lotus"] body .tll-drawer .tll-assist{
  box-shadow:0 2px 8px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.5) !important;
  filter:none !important;
}
html body .tll-drawer .tll-assist:hover,
html[data-theme="aube"] body .tll-drawer .tll-assist:hover,
html[data-theme="sable"] body .tll-drawer .tll-assist:hover,
html[data-theme="marbre"] body .tll-drawer .tll-assist:hover,
html[data-theme="glacier"] body .tll-drawer .tll-assist:hover,
html[data-theme="lotus"] body .tll-drawer .tll-assist:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.62) !important;
}
html body .tll-drawer .tll-assist,
html body .tll-drawer .tll-assist-name,
html body .tll-drawer .tll-assist-sub,
html body .tll-drawer .tll-assist-arrow{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased !important;
}
html body .tll-drawer .tll-assist-ico{
  filter:none !important;
  box-shadow:inset 0 1px 3px rgba(138,101,18,.25) !important;
}
/* le liseré du pied portait lui aussi une lueur dorée diffuse */
html body .tll-drawer .tll-foot{
  box-shadow:inset 0 1px 0 rgba(0,0,0,.4) !important;
}

/* ─── 3. EN-TÊTE DU TIROIR : le logo de Maha + un titre qui se lit ───────
   L'orbe portait un emoji 🌳 (et un second via ::before). Le titre était un
   dégradé posé sur du texte TRANSPARENT en Cinzel 1,05 rem : sur le bois
   sombre comme sur le marbre clair, il rendait délavé. Couleur pleine. */
html body .tll-drawer .tll-head-orb,
html[data-theme="aube"] body .tll-drawer .tll-head-orb,
html[data-theme="sable"] body .tll-drawer .tll-head-orb,
html[data-theme="marbre"] body .tll-drawer .tll-head-orb,
html[data-theme="glacier"] body .tll-drawer .tll-head-orb,
html[data-theme="lotus"] body .tll-drawer .tll-head-orb{
  background:url('/assets/images/logos/golden-ball-maha.webp') center center / contain no-repeat !important;
  width:46px !important;
  height:46px !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:none !important;
  font-size:0 !important;          /* masque l'emoji resté dans le HTML */
  color:transparent !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) !important;
  flex-shrink:0 !important;
}
html body .tll-drawer .tll-head-orb::before,
html body .tll-drawer .tll-head-orb::after{
  content:none !important;
  display:none !important;
}
html body .tll-drawer .tll-head-orb img{ display:none !important; }

/* Le titre garde le Cinzel — c'est la signature — mais en or PLEIN, plus
   grand et plus gras, sans dégradé ni ombre. Le sous-titre passe en
   sans-serif : en serif espacée à 0,72 rem, il n'était plus lisible. */
html body .tll-drawer .tll-head-title,
html body .tll-drawer #tllHeadTitle{
  font-size:clamp(17px,1.16rem,25px) !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  line-height:1.2 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
}
html body .tll-drawer .tll-head-sub{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif !important;
  font-size:clamp(10.5px,.7rem,15px) !important;
  font-weight:600 !important;
  letter-spacing:.13em !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer .tll-head-title,
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer #tllHeadTitle{
  color:#FFE9B8 !important;
  -webkit-text-fill-color:#FFE9B8 !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .tll-drawer .tll-head-sub{
  color:rgba(255,233,184,.9) !important;
  -webkit-text-fill-color:rgba(255,233,184,.9) !important;
}
html[data-theme="aube"] body .tll-drawer .tll-head-title,
html[data-theme="sable"] body .tll-drawer .tll-head-title,
html[data-theme="marbre"] body .tll-drawer .tll-head-title,
html[data-theme="glacier"] body .tll-drawer .tll-head-title,
html[data-theme="lotus"] body .tll-drawer .tll-head-title,
html[data-theme="aube"] body .tll-drawer #tllHeadTitle,
html[data-theme="sable"] body .tll-drawer #tllHeadTitle,
html[data-theme="marbre"] body .tll-drawer #tllHeadTitle,
html[data-theme="glacier"] body .tll-drawer #tllHeadTitle,
html[data-theme="lotus"] body .tll-drawer #tllHeadTitle{
  color:#6B4E08 !important;
  -webkit-text-fill-color:#6B4E08 !important;
}
html[data-theme="aube"] body .tll-drawer .tll-head-sub,
html[data-theme="sable"] body .tll-drawer .tll-head-sub,
html[data-theme="marbre"] body .tll-drawer .tll-head-sub,
html[data-theme="glacier"] body .tll-drawer .tll-head-sub,
html[data-theme="lotus"] body .tll-drawer .tll-head-sub{
  color:#8A6512 !important;
  -webkit-text-fill-color:#8A6512 !important;
}

/* ═══ 4. CARTE « ARBRE À LIENS » — REDESSINÉE ═══════════════════════════
   Ce qu'elle empilait : un liseré dégradé qui virait au VIOLET (#7c5cff),
   un anneau conique violet en rotation permanente, un halo flou animé de
   8 px de blur qui balayait la carte, trois étincelles ✦ dont deux
   tombaient sur le mot, et une boule NOIRE en fond de l'emoji — soit une
   tache sombre cerclée de mauve au milieu du marbre clair.
   Ce qu'elle devient : le logo de Maha, son nom, une flèche. Or seulement. */

/* 4a. Toutes les couches parasites tombent */
html body .sb-arbre-card::after,
html body .sb-arbre-card .sb-arbre-glow,
html body .sb-arbre-card .sb-arbre-leaves,
html body .sb-arbre-card .sb-arbre-orb-ring{
  display:none !important;
  animation:none !important;
}
html body .sb-arbre-card::before{
  background:none !important;
  mix-blend-mode:normal !important;
  opacity:0 !important;
}

/* 4b. La carte : un seul filet d'or, une ombre courte, aucun mauve */
html body .sb-arbre-card{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:0 12px !important;
  padding:12px 12px 12px 14px !important;
  margin:12px 10px 14px !important;
  border-radius:14px !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .sb-arbre-card{
  background:linear-gradient(135deg, rgba(212,168,83,.14) 0%, rgba(212,168,83,.05) 100%) !important;
  border:1px solid rgba(212,168,83,.42) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.35) !important;
}
html[data-theme="aube"] body .sb-arbre-card,
html[data-theme="sable"] body .sb-arbre-card,
html[data-theme="marbre"] body .sb-arbre-card,
html[data-theme="glacier"] body .sb-arbre-card,
html[data-theme="lotus"] body .sb-arbre-card{
  background:linear-gradient(135deg, #fffaf0 0%, #fdf3dc 100%) !important;
  border:1px solid rgba(201,151,27,.45) !important;
  box-shadow:0 2px 8px rgba(138,101,18,.14) !important;
}
html body .sb-arbre-card:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(232,185,58,.85) !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .sb-arbre-card:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.45) !important;
}
html[data-theme="aube"] body .sb-arbre-card:hover,
html[data-theme="sable"] body .sb-arbre-card:hover,
html[data-theme="marbre"] body .sb-arbre-card:hover,
html[data-theme="glacier"] body .sb-arbre-card:hover,
html[data-theme="lotus"] body .sb-arbre-card:hover{
  box-shadow:0 4px 12px rgba(138,101,18,.2) !important;
}

/* 4c. Le logo de Maha remplace l'emoji sur sa boule noire */
html body .sb-arbre-card .sb-arbre-orb-wrap{
  width:38px !important;
  height:38px !important;
  flex-shrink:0 !important;
}
html body .sb-arbre-card .sb-arbre-orb-tree{
  width:38px !important;
  height:38px !important;
  background:url('/assets/images/logos/golden-ball-maha.webp') center center / contain no-repeat !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:none !important;
  font-size:0 !important;          /* masque l'emoji 🌳 du HTML */
  color:transparent !important;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.35)) !important;
}

/* 4d. Le nom : sans-serif, une seule ligne, couleur pleine.
       Il se cassait en « Arbre à / Liens » (white-space:nowrap écrasé par un
       CSS tardif) et portait un dégradé sur texte TRANSPARENT + une ombre de
       14 px → le halo passait à travers les lettres. */
html body .sb-arbre-card .sb-arbre-title{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  text-shadow:none !important;
  animation:none !important;
  -webkit-font-smoothing:antialiased !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .sb-arbre-card .sb-arbre-title{
  color:#F7DFA4 !important;
  -webkit-text-fill-color:#F7DFA4 !important;
}
html[data-theme="aube"] body .sb-arbre-card .sb-arbre-title,
html[data-theme="sable"] body .sb-arbre-card .sb-arbre-title,
html[data-theme="marbre"] body .sb-arbre-card .sb-arbre-title,
html[data-theme="glacier"] body .sb-arbre-card .sb-arbre-title,
html[data-theme="lotus"] body .sb-arbre-card .sb-arbre-title{
  color:#6B4E08 !important;
  -webkit-text-fill-color:#6B4E08 !important;
}

/* 4e. Le CTA mangeait 109 px sur 289 et son libellé était tombé à 8,8 px —
       un micro-texte qu'on ne lit pas. Pastille fléchée : la carte entière
       reste cliquable, et le nom retrouve sa place. */
html body .sb-arbre-card .sb-arbre-cta-txt{ display:none !important; }
/* ⛔ Sur les thèmes clairs, `html[data-theme="aube"] body .sb-arbre-cta`
   (0,2,2) redonnait au chevron un fond doré et une bordure — le « petit carré
   orange » signalé par Maha. On égalise en nommant chaque thème clair. */
html[data-theme="aube"] body .sb-arbre-card .sb-arbre-cta,
html[data-theme="sable"] body .sb-arbre-card .sb-arbre-cta,
html[data-theme="marbre"] body .sb-arbre-card .sb-arbre-cta,
html[data-theme="glacier"] body .sb-arbre-card .sb-arbre-cta,
html[data-theme="lotus"] body .sb-arbre-card .sb-arbre-cta,
html[data-theme="aube"] body .sb-arbre-card:hover .sb-arbre-cta,
html[data-theme="sable"] body .sb-arbre-card:hover .sb-arbre-cta,
html[data-theme="marbre"] body .sb-arbre-card:hover .sb-arbre-cta,
html[data-theme="glacier"] body .sb-arbre-card:hover .sb-arbre-cta,
html[data-theme="lotus"] body .sb-arbre-card:hover .sb-arbre-cta,
html body .sb-arbre-card:hover .sb-arbre-cta,
html body .sb-arbre-card .sb-arbre-cta{
  width:auto !important;
  height:auto !important;
  padding:0 2px 0 0 !important;
  gap:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-shrink:0 !important;
  transition:transform .18s ease, opacity .18s ease !important;
}
/* le glyphe « → » du HTML est masqué au profit du même chevron fin que
   « Le Sanctuaire d'En-Haut › » et « L'Accueil › » juste en dessous */
html body .sb-arbre-card .sb-arbre-cta-arrow{
  font-size:0 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
}
html body .sb-arbre-card .sb-arbre-cta-arrow::before{
  content:'\203A' !important;          /* › */
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif !important;
  font-size:26px !important;
  font-weight:400 !important;
  line-height:1 !important;
  opacity:.75 !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .sb-arbre-card .sb-arbre-cta-arrow::before{
  color:#F0C987 !important;
  -webkit-text-fill-color:#F0C987 !important;
}
html[data-theme="aube"] body .sb-arbre-card .sb-arbre-cta-arrow::before,
html[data-theme="sable"] body .sb-arbre-card .sb-arbre-cta-arrow::before,
html[data-theme="marbre"] body .sb-arbre-card .sb-arbre-cta-arrow::before,
html[data-theme="glacier"] body .sb-arbre-card .sb-arbre-cta-arrow::before,
html[data-theme="lotus"] body .sb-arbre-card .sb-arbre-cta-arrow::before{
  color:#9A7415 !important;
  -webkit-text-fill-color:#9A7415 !important;
}
html body .sb-arbre-card:hover .sb-arbre-cta{
  transform:translateX(3px) !important;
}
html body .sb-arbre-card:hover .sb-arbre-cta-arrow::before{
  opacity:1 !important;
}

/* ═══ 5. TÉLÉPHONE (audit Galaxy S24 — tiroir large de 331 px) ═══════════
   Mesures : rubriques à 22 px, contraste 14,9→17,7:1, cibles ≥ 44 px,
   aucun texte coupé, aucun scroll horizontal. Restaient deux ruptures de
   mise en page, dues au mode « grand » qui pousse les clamp() à leur max :
   « ARBRE À / LIENS » et « L'UNIVERS MAHA / GIRI » se cassaient en deux,
   et le sous-titre de Giri Assistance passait sous sa propre flèche. */
@media (max-width:520px){
  html body .tll-drawer .tll-head-title,
  html body .tll-drawer #tllHeadTitle{
    font-size:clamp(15px,1.05rem,19px) !important;
    letter-spacing:.07em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  html body .tll-drawer .tll-head-sub{
    font-size:clamp(9.5px,.64rem,11.5px) !important;
    letter-spacing:.1em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  html body .tll-drawer .tll-head{
    padding:16px 14px 14px !important;
    align-items:center !important;
  }
  html body .tll-drawer .tll-head-orb,
  html[data-theme="aube"] body .tll-drawer .tll-head-orb,
  html[data-theme="sable"] body .tll-drawer .tll-head-orb,
  html[data-theme="marbre"] body .tll-drawer .tll-head-orb,
  html[data-theme="glacier"] body .tll-drawer .tll-head-orb,
  html[data-theme="lotus"] body .tll-drawer .tll-head-orb{
    width:40px !important;
    height:40px !important;
  }
  /* le lingot : on rend au texte la place que la flèche lui prenait */
  html body .tll-drawer .tll-assist{
    gap:10px !important;
    padding:12px 12px !important;
  }
  html body .tll-drawer .tll-assist-name{ font-size:clamp(13px,.86rem,16px) !important; }
  html body .tll-drawer .tll-assist-sub{
    font-size:clamp(10.5px,.68rem,12.5px) !important;
    line-height:1.3 !important;
  }
  html body .tll-drawer .tll-assist-arrow{ font-size:16px !important; }
}

/* ═══ 6. GALERIE DES TRANSFORMATIONS — texte minuscule et délavé ═════════
   Maha : « c'est écrit de trop petit ». Le sous-titre était à 13 px (12 px
   sur téléphone) et tout le corps en or à 60 % d'opacité (#d4af3799) : sur le
   marbre clair, un gris pâle illisible. Tailles remontées, couleurs pleines. */
html body .giri-hof-head .giri-hof-sub,
html body .giri-hall-head .giri-hall-sub{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
}
html body .giri-hof-empty{
  font-size:19px !important;
  font-style:normal !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  padding:44px 24px !important;
}
html body .giri-hof-empty span{
  font-size:15px !important;
  font-weight:500 !important;
  display:inline-block !important;
  margin-top:8px !important;
  opacity:.9 !important;
}
html body .giri-hof-card-author{ font-size:14px !important; }
html body .giri-hof-card-video .placeholder{ font-size:15px !important; font-style:normal !important; }
html body .giri-hof-submit-btn{ font-size:16px !important; padding:12px 20px !important; }
html body .giri-hof-close,
html body .giri-hall-close{ font-size:15px !important; font-weight:600 !important; }
html[data-theme="aube"] body .giri-hof-close,
html[data-theme="sable"] body .giri-hof-close,
html[data-theme="marbre"] body .giri-hof-close,
html[data-theme="glacier"] body .giri-hof-close,
html[data-theme="lotus"] body .giri-hof-close,
html[data-theme="aube"] body .giri-hall-close,
html[data-theme="sable"] body .giri-hall-close,
html[data-theme="marbre"] body .giri-hall-close,
html[data-theme="glacier"] body .giri-hall-close,
html[data-theme="lotus"] body .giri-hall-close{
  color:#7A5A0B !important; border-color:rgba(201,151,27,.5) !important;
}
/* ⛔ Couleur UNIQUE, sans distinction de theme : verifie a l'image, cette modale
   garde un fond CREME meme quand le reste de l'application est sombre. Un
   premier essai lui appliquait l'or clair des themes sombres — et donnait de
   l'or pale sur du creme, illisible. La couleur suit le fond REEL du bloc,
   jamais le theme de la page. */
html body .giri-hof-head .giri-hof-sub,
html body .giri-hof-empty,
html[data-theme="aube"] body .giri-hof-head .giri-hof-sub,
html[data-theme="sable"] body .giri-hof-head .giri-hof-sub,
html[data-theme="marbre"] body .giri-hof-head .giri-hof-sub,
html[data-theme="glacier"] body .giri-hof-head .giri-hof-sub,
html[data-theme="lotus"] body .giri-hof-head .giri-hof-sub,
html[data-theme="aube"] body .giri-hof-empty,
html[data-theme="sable"] body .giri-hof-empty,
html[data-theme="marbre"] body .giri-hof-empty,
html[data-theme="glacier"] body .giri-hof-empty,
html[data-theme="lotus"] body .giri-hof-empty{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-hof-close,
html body .giri-hall-close{
  color:#7A5A0B !important; border-color:rgba(201,151,27,.5) !important;
}

/* ═══ 7. BOUTON ENVOYER — feuille d'or, et moins massif ═════════════════
   Maha : « un peu gros et un peu trop marron, on a besoin du style feuille
   d'or ». Mesuré : 56×56 px face aux 44 px du micro, et sur le marbre le
   thème clair lui donnait un or brûlé (#b8860b → brun) encore assombri par
   l'opacité 0,55 de l'état desactive. */
html body #sendBtn,
html[data-theme="aube"] body #sendBtn,
html[data-theme="sable"] body #sendBtn,
html[data-theme="marbre"] body #sendBtn,
html[data-theme="glacier"] body #sendBtn,
html[data-theme="lotus"] body #sendBtn{
  width:46px !important; height:46px !important;
  min-width:46px !important; min-height:46px !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#fdf3d2 0%,#f7e3a4 20%,#e8b93a 55%,#c9971b 100%) !important;
  border:1px solid rgba(138,101,18,.5) !important;
  color:#3a2a06 !important;
  box-shadow:0 2px 8px rgba(138,101,18,.26), inset 0 1px 0 rgba(255,255,255,.65) !important;
  transition:box-shadow .18s ease, transform .18s ease !important;
}
html body #sendBtn:hover:not(:disabled){
  background:linear-gradient(135deg,#fffaea 0%,#fdeec0 20%,#f0c74e 55%,#d9a621 100%) !important;
  box-shadow:0 4px 13px rgba(138,101,18,.34), inset 0 1px 0 rgba(255,255,255,.75) !important;
  transform:translateY(-1px) !important;
}
/* desactive : on garde la feuille d'or lisible, sans la noyer */
html body #sendBtn:disabled{ opacity:.78 !important; }

/* ═══ 8. TOUTES LES FENÊTRES DE L'ESPACE — marbre clair et lisible ══════
   Maha, sur L'Agora : « il est tout marron au lieu d'être dans le thème
   marbre blanc et profondément lisible. Tu dois le faire pour CHAQUE
   session. » Les huit fenêtres sortaient du même moule sombre : fond
   #1a120a et textes en or a 60 % d'opacite (#d4af3799) — donc un brun sur
   brun. Elles passent toutes au marbre, avec l'encre pour le texte. */
html body .giri-hall-overlay,
html body .giri-hof-overlay,
html body .giri-carnet-overlay,
html body .giri-lib-overlay,
html body .giri-matric-overlay,
html body .giri-ob-overlay,
html body .giri-search-overlay,
html body .giri-home-overlay{
  background:radial-gradient(ellipse at center, rgba(60,44,14,.55) 0%, rgba(28,20,6,.72) 100%) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
}
html body .giri-hall-box,
html body .giri-hof-box,
html body .giri-search-box,
html body .giri-lib-modal{
  background:linear-gradient(180deg,#fffefb 0%,#fdf8ec 100%) !important;
  border:1px solid rgba(201,151,27,.4) !important;
  box-shadow:0 24px 60px rgba(60,44,14,.32), 0 1px 0 rgba(255,255,255,.9) inset !important;
  color:#443c31 !important;
}
html body .giri-hall-head,
html body .giri-hof-head{
  background:linear-gradient(180deg,#fffdf6 0%,#fbf3df 100%) !important;
  border-bottom:1px solid rgba(201,151,27,.3) !important;
}
html body .giri-hall-head h2,
html body .giri-hof-head h2{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
/* les libellés secondaires étaient tous en or translucide */
html body .giri-hall-sub,
html body .giri-hall-empty,
html body .giri-search-empty,
html body .giri-search-foot,
html body .giri-search-kbd,
html body .giri-search-item-date{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-hall-empty,
html body .giri-search-empty{
  font-size:19px !important;
  font-style:normal !important;
  font-weight:600 !important;
  line-height:1.5 !important;
}
html body .giri-hall-empty span,
html body .giri-search-empty span{
  font-size:15px !important;
  opacity:.95 !important;
  display:inline-block !important;
  margin-top:8px !important;
}
html body .giri-hall-sub{ font-size:15px !important; font-weight:600 !important; }
html body .giri-hall-close,
html body .giri-lib-close{
  color:#7A5A0B !important;
  border-color:rgba(201,151,27,.5) !important;
  font-size:15px !important;
  font-weight:600 !important;
}
/* contenus : encre sur marbre, jamais crème sur crème */
html body .giri-search-input,
html body .giri-search-item-snip,
html body .giri-search-item-author,
html body .giri-lib-input{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .giri-search-input,
html body .giri-lib-input{
  background:#fffefa !important;
  border-color:rgba(201,151,27,.4) !important;
}
html body .giri-search-item-channel{ color:#8A6512 !important; }
html body .giri-lib-btn{
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%) !important;
  border:1px solid rgba(138,101,18,.5) !important;
  color:#3a2a06 !important;
}

/* 8b. Les fenêtres restantes — Carnet, Accueil, Onboarding, Matrice.
   Leurs conteneurs ne s'appellent pas « -box » : Carnet et Accueil étaient
   restés bruns après le premier passage. Vérifié à l'image, fenêtre par
   fenêtre. */
html body .giri-carnet-modal,
html body .giri-ob-card,
html body .giri-matric-box,
html body .giri-matric-modal,
html body .giri-home-hero,
html body .giri-home-card{
  background:linear-gradient(180deg,#fffefb 0%,#fdf8ec 100%) !important;
  border:1px solid rgba(201,151,27,.4) !important;
  box-shadow:0 20px 52px rgba(60,44,14,.28), 0 1px 0 rgba(255,255,255,.9) inset !important;
  color:#443c31 !important;
}
html body .giri-home-wrap,
html body .giri-carnet-entry,
html body .giri-ob-body,
html body .giri-home-tagline,
html body .giri-home-greeting{
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
  opacity:1 !important;
}
html body .giri-carnet-modal h2,
html body .giri-carnet-modal h3,
html body .giri-ob-title,
html body .giri-home-hero h1,
html body .giri-home-hero h2{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .giri-carnet-empty,
html body .giri-home-empty{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
  opacity:1 !important;
  font-style:normal !important;
  font-size:17px !important;
  font-weight:600 !important;
}
html body .giri-carnet-textarea{
  background:#fffefa !important;
  border-color:rgba(201,151,27,.4) !important;
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .giri-carnet-close,
html body .giri-home-close,
html body .giri-ob-skip{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-carnet-btn,
html body .giri-home-btn,
html body .giri-ob-cta{
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%) !important;
  border:1px solid rgba(138,101,18,.5) !important;
  color:#3a2a06 !important;
  -webkit-text-fill-color:#3a2a06 !important;
}

/* 8c. Le CONTENU des fenêtres, pas seulement leur cadre.
   Maha : « regarde mon Carnet d'éveil, c'est moche ». La fenêtre était bien
   passée au marbre, mais ses ENTRÉES gardaient `rgba(20,12,4,.65)` — un brun
   presque noir prévu pour le fond sombre, qui donne un gris taupe sale sur le
   marbre. Invisible sur un compte de test : son carnet est vide, l'élément
   n'existe pas dans le DOM. Les états « avec contenu » doivent être regardés
   séparément des états vides. */
html body .giri-carnet-entry.student{
  background:#fffdf6 !important;
  border:1px solid rgba(201,151,27,.32) !important;
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
}
html body .giri-carnet-entry.maha{
  background:linear-gradient(180deg, rgba(247,227,164,.34) 0%, rgba(247,227,164,.18) 100%) !important;
  border:1px solid rgba(201,151,27,.42) !important;
  border-left:3px solid #c9971b !important;
  color:#3b3225 !important;
  -webkit-text-fill-color:#3b3225 !important;
}
html body .giri-carnet-entry .who{
  color:#8A6512 !important;
  -webkit-text-fill-color:#8A6512 !important;
  font-size:.8rem !important;
}
html body .giri-carnet-entry .when{
  opacity:1 !important;
  color:#8a7f6a !important;
  -webkit-text-fill-color:#8a7f6a !important;
}
html body .giri-carnet-entry{ font-size:1rem !important; }

/* même famille de défaut ailleurs : des blocs de contenu restés sombres */
html body .giri-hall-item,
html body .giri-hall-card,
html body .giri-hof-card,
html body .giri-search-item,
html body .giri-home-stat{
  background:#fffdf6 !important;
  border:1px solid rgba(201,151,27,.3) !important;
  color:#443c31 !important;
}
html body .giri-hof-card-title,
html body .giri-hall-item-title{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .giri-hof-card-author,
html body .giri-search-item-author{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}

/* ═══ 9. CE QUE L'AUDIT DE CONTRASTE A TROUVÉ TOUT SEUL ═════════════════
   `/root/maha-tools/_screen/audit-fenetres.js` ouvre les 20 fenêtres de
   l'espace, mesure le rapport de contraste RÉEL de chaque texte (couleur
   finale contre le fond réellement peint) et capture chacune. Trois
   fenêtres échouaient — aucune n'avait été signalée à l'œil. */

/* Mes Badges : le nom d'un badge verrouillé sortait à 2,03:1 et sa
   description à 1,39:1 en 9 px. On ne pouvait donc PAS lire ce qu'il faut
   faire pour le décrocher — exactement ce qui doit donner envie. */
html body .bc-name{
  font-size:13.5px !important;
  font-weight:700 !important;
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
  opacity:1 !important;
}
html body .bc-desc{
  font-size:12px !important;
  line-height:1.35 !important;
  color:#6a6154 !important;
  -webkit-text-fill-color:#6a6154 !important;
  opacity:1 !important;
}
html body .bc-count{
  font-size:14px !important;
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .badge-cat-tab{
  font-size:12.5px !important;
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
  background:#fffdf6 !important;
  border:1px solid rgba(201,151,27,.3) !important;
}
html body .badge-cat-tab.active{
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%) !important;
  color:#3a2a06 !important;
  -webkit-text-fill-color:#3a2a06 !important;
  border-color:rgba(138,101,18,.5) !important;
}
html body .badge-card{ opacity:1 !important; }
/* verrouillé ≠ illisible : la distinction se fait sur l'icône, pas sur le texte */
html body .badge-card:not(.unlocked) .bc-emoji{
  filter:grayscale(1) opacity(.5) !important;
}

/* Recherche : trois libellés à 3,17:1 */
html body .giri-search-kbd,
html body .giri-search-foot,
html body .giri-search-foot span,
html body .giri-search-empty{
  color:#6B4E08 !important;
  -webkit-text-fill-color:#6B4E08 !important;
}

/* Charte : le bouton « Fermer » ressortait à 1,24:1 — invisible */
html body .giri-charter-accept{
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%) !important;
  color:#3a2c0a !important;
  -webkit-text-fill-color:#3a2c0a !important;
  opacity:1 !important;
  border:1px solid rgba(138,101,18,.5) !important;
}

/* ═══ 10. GAMIFICATION — les dernières fenêtres restées sombres ═════════
   Badges, Classement, Boutique, Cadeaux et Profil vivaient dans un autre
   fichier (`css/communaute-base.css`) et sur un fond VIOLET `#1a1520` —
   encore hors charte. Elles rejoignent le marbre. */
html body .badge-collection-panel,
html body .gamif-lb-panel,
html body .gamif-profile-panel,
html body .gc-shop-panel,
html body .gift-inbox-panel,
html body .gift-picker-panel{
  background:linear-gradient(180deg,#fffefb 0%,#fdf8ec 100%) !important;
  border:1px solid rgba(201,151,27,.4) !important;
  color:#443c31 !important;
  box-shadow:0 20px 52px rgba(60,44,14,.3) !important;
}
html body .badge-collection-header h3,
html body .gamif-lb-header,
html body .gamif-lb-header h3{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .badge-card{
  background:#fffdf6 !important;
  border:1px solid rgba(201,151,27,.28) !important;
}
html body .gamif-lb-name,
html body .gamif-lb-info,
html body .gamif-lb-row{
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
}
html body .gamif-lb-xp,
html body .gamif-lb-lvl,
html body .gamif-level-name{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .badge-collection-close,
html body .gamif-lb-close,
html body .gamif-profile-close{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}

/* ═══ 11. AGORA + GALERIE — taille de lecture et boutons en lingot ══════
   Maha : « l'Agora, pas lisible, le texte est trop petit côté écriture » et
   « la Galerie doit montrer des boutons or, comme pour la sonothèque ». */
html body .giri-hall-head h2,
html body .giri-hof-head h2{
  font-size:26px !important;
  line-height:1.2 !important;
}
html body .giri-hall-sub,
html body .giri-hof-head .giri-hof-sub{
  font-size:16px !important;
  font-weight:700 !important;
}
html body .giri-hall-empty,
html body .giri-hof-empty{
  font-size:23px !important;
  line-height:1.45 !important;
  padding:52px 24px !important;
}
html body .giri-hall-empty span,
html body .giri-hof-empty span{
  font-size:17px !important;
  margin-top:10px !important;
}
html body .giri-hall-item-title{ font-size:19px !important; font-weight:700 !important; }
html body .giri-hall-item-sub{ font-size:15px !important; color:#6a6154 !important; }

/* Boutons en lingot — même or que la sonothèque, avec du relief */
html body .giri-hof-submit-btn,
html body .giri-hall-cta,
html body .giri-hof-head .giri-hof-close,
html body .giri-hall-head .giri-hall-close{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
}
html body .giri-hof-submit-btn{
  background:linear-gradient(135deg,#fdf3d2 0%,#f7e3a4 18%,#e8b93a 55%,#c9971b 100%) !important;
  border:1px solid rgba(138,101,18,.55) !important;
  color:#3a2a06 !important;
  -webkit-text-fill-color:#3a2a06 !important;
  font-size:16px !important;
  font-weight:800 !important;
  padding:14px 24px !important;
  border-radius:13px !important;
  box-shadow:0 3px 12px rgba(138,101,18,.3), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
html body .giri-hof-submit-btn:hover{
  transform:translateY(-1px) !important;
  background:linear-gradient(135deg,#fffaea 0%,#fdeec0 18%,#f0c74e 55%,#d9a621 100%) !important;
  box-shadow:0 6px 18px rgba(138,101,18,.38), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
/* « Fermer » : un bouton, pas un mot perdu */
html body .giri-hof-close,
html body .giri-hall-close{
  background:#fffdf6 !important;
  border:1px solid rgba(201,151,27,.5) !important;
  border-radius:10px !important;
  padding:9px 18px !important;
  font-weight:700 !important;
}
html body .giri-hof-close:hover,
html body .giri-hall-close:hover{
  background:linear-gradient(135deg,#f7e3a4,#e8b93a) !important;
  color:#3a2a06 !important;
  -webkit-text-fill-color:#3a2a06 !important;
}

/* ═══ 12. LE « + » DE DISCUSSIONS OUVERTES ══════════════════════════════
   Maha : « le gros plus à côté de Discussions ouvertes est moche ». C'était
   un gros carré crème à angles arrondis, plus large que haut, posé à côté
   d'un intitulé fin — deux poids qui ne se répondaient pas. Il devient un
   rond discret à filet d'or, qui se remplit au survol. Les thèmes clairs
   sont nommés : leurs sélecteurs battent les règles génériques. */
/* ⛔ une regle groupee de communaute-base.css contient `#createChBtn` : un ID
   bat toute regle par classe, quel qu'en soit le nombre. On cible donc l'ID. */
html body #createChBtn,
html body .create-ch-btn,
html[data-theme="aube"] body #createChBtn,
html[data-theme="sable"] body #createChBtn,
html[data-theme="marbre"] body #createChBtn,
html[data-theme="glacier"] body #createChBtn,
html[data-theme="lotus"] body #createChBtn{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  border:1px solid rgba(201,151,27,.45) !important;
  box-shadow:none !important;
  flex-shrink:0 !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease !important;
}
html body #createChBtn svg,
html body .create-ch-btn svg{
  width:15px !important;
  height:15px !important;
  stroke-width:2.1 !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body #createChBtn{
  color:#F0C987 !important;
  border-color:rgba(240,201,135,.45) !important;
}
html[data-theme="aube"] body #createChBtn,
html[data-theme="sable"] body #createChBtn,
html[data-theme="marbre"] body #createChBtn,
html[data-theme="glacier"] body #createChBtn,
html[data-theme="lotus"] body #createChBtn{
  color:#9A7415 !important;
}
html body #createChBtn:hover,
html[data-theme="aube"] body #createChBtn:hover,
html[data-theme="sable"] body #createChBtn:hover,
html[data-theme="marbre"] body #createChBtn:hover,
html[data-theme="glacier"] body #createChBtn:hover,
html[data-theme="lotus"] body #createChBtn:hover{
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 55%,#c9971b 100%) !important;
  border-color:rgba(138,101,18,.5) !important;
  color:#3a2a06 !important;
  transform:scale(1.06) !important;
}

/* ═══ 13. MAHAYAWEN — l'assistant reprend un visage ═════════════════════
   Maha : « regarde la gueule de Mahayawen ». En-tête sans logo, bulle grise,
   bouton brun terne, et un vide au milieu qui ne disait rien. */
html body .maha-chat .maha-chat-header{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  padding:15px 16px !important;
  background:linear-gradient(180deg,#fffdf6 0%,#fbf3df 100%) !important;
  border-bottom:1px solid rgba(201,151,27,.32) !important;
}
html body .maha-chat .mch-logo{
  width:34px !important; height:34px !important;
  border-radius:50% !important; flex-shrink:0 !important;
  filter:drop-shadow(0 2px 5px rgba(138,101,18,.28)) !important;
}
html body .maha-chat .mch-txt{ display:flex !important; flex-direction:column !important; min-width:0 !important; }
html body .maha-chat .mch-name{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:19px !important; font-weight:700 !important;
  color:#221d15 !important; -webkit-text-fill-color:#221d15 !important;
  line-height:1.15 !important;
}
html body .maha-chat .mch-sub{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:600 !important; letter-spacing:.04em !important;
  color:#8A6512 !important; -webkit-text-fill-color:#8A6512 !important;
}
html body .maha-chat .mch-close{
  margin-left:auto !important;
  width:34px !important; height:34px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:1px solid rgba(201,151,27,.4) !important;
  color:#7A5A0B !important; -webkit-text-fill-color:#7A5A0B !important;
  font-size:1.2rem !important; line-height:1 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important; cursor:pointer !important;
}
html body .maha-chat .mch-close:hover{
  background:linear-gradient(135deg,#f7e3a4,#e8b93a) !important;
  color:#3a2a06 !important; -webkit-text-fill-color:#3a2a06 !important;
}
/* la bulle de l'assistant : or pâle, texte encre */
html body .maha-chat .mcm-msg.bot{
  background:rgba(247,227,164,.34) !important;
  border:1px solid rgba(201,151,27,.28) !important;
  color:#3b3225 !important; -webkit-text-fill-color:#3b3225 !important;
  font-size:15px !important; line-height:1.55 !important;
  border-radius:13px !important; padding:13px 15px !important;
}
html body .maha-chat .mcm-msg.user{
  background:#fffefa !important;
  border:1px solid rgba(201,151,27,.22) !important;
  color:#221d15 !important; -webkit-text-fill-color:#221d15 !important;
  font-size:15px !important; line-height:1.55 !important;
}
/* les pistes qui comblent le vide */
html body .maha-chat .mcm-pistes{ margin-top:14px !important; }
html body .maha-chat .mcm-pistes-titre{
  font-size:11px !important; font-weight:800 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#8A6512 !important; -webkit-text-fill-color:#8A6512 !important;
  margin:0 2px 9px !important;
}
html body .maha-chat .mcm-piste{
  display:block !important; width:100% !important; text-align:left !important;
  margin:0 0 8px !important; padding:12px 14px !important;
  background:#fffefa !important;
  border:1px solid rgba(201,151,27,.34) !important;
  border-radius:12px !important;
  color:#443c31 !important; -webkit-text-fill-color:#443c31 !important;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
  font-size:14px !important; font-weight:600 !important; line-height:1.4 !important;
  cursor:pointer !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease !important;
}
html body .maha-chat .mcm-piste:hover{
  background:rgba(247,227,164,.42) !important;
  border-color:rgba(232,185,58,.75) !important;
  transform:translateX(2px) !important;
}
/* la saisie et le bouton d'envoi */
/* la colonne doit s'etirer : sans cela la barre de saisie remontait au
   milieu et laissait un vide sous elle */
/* ⛔ NE PAS forcer `display` sur `.maha-chat` tout court : la fenêtre se ferme
   justement en perdant la classe `.open`. Forcer flex ici la rendait
   INFERMABLE — la croix ne faisait plus que changer sa taille. On ne touche
   donc qu'à l'état OUVERT. */
html body .maha-chat.open{
  display:flex !important;
  flex-direction:column !important;
}
html body .maha-chat .maha-chat-messages{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}
html body .maha-chat .maha-chat-input{
  flex:0 0 auto !important;
  margin-top:auto !important;
  padding:12px 14px !important;
  border-top:1px solid rgba(201,151,27,.28) !important;
  background:linear-gradient(0deg,#fffdf6,#fffefb) !important;
  gap:9px !important;
}
/* [FIX-MAHACHAT-BOTTOMNAV 2026-08-15] Cette regle (html body .maha-chat .maha-chat-input,
   specificite 0-2-2) gagnait sur le padding mobile pose plus haut (body.giri-mobile-shell
   .maha-chat-input, 0-2-1) et ecrasait son padding-bottom : la saisie Ananda retombait
   sous la bottomnav mobile (passee a z-index 2100, meme niveau que .maha-chat, pour
   rester joignable depuis l ecran Prives - elle recouvrait la saisie Ananda sans le
   vouloir). Cible ici avec une specificite superieure (0-4-2) pour gagner a coup sur. */
html body.giri-mobile-shell .maha-chat.open .maha-chat-input{
  padding-bottom: calc(12px + 94px + env(safe-area-inset-bottom, 0px)) !important;
}
html body .maha-chat .maha-chat-input input{
  border:1px solid rgba(201,151,27,.42) !important;
  border-radius:12px !important;
  background:#fffefa !important;
  color:#221d15 !important; -webkit-text-fill-color:#221d15 !important;
  font-size:15px !important; padding:12px 14px !important;
}
html body .maha-chat .maha-chat-input input:focus{
  outline:none !important;
  border-color:#e8b93a !important;
  box-shadow:0 0 0 3px rgba(232,185,58,.2) !important;
}
html body .maha-chat .maha-chat-input button{
  background:linear-gradient(135deg,#fdf3d2 0%,#f7e3a4 18%,#e8b93a 55%,#c9971b 100%) !important;
  border:1px solid rgba(138,101,18,.5) !important;
  color:#3a2a06 !important; -webkit-text-fill-color:#3a2a06 !important;
  font-size:15px !important; font-weight:800 !important;
  border-radius:12px !important; padding:12px 18px !important;
  box-shadow:0 2px 8px rgba(138,101,18,.24), inset 0 1px 0 rgba(255,255,255,.6) !important;
  cursor:pointer !important;
}
html body .maha-chat .maha-chat-input button:hover{
  background:linear-gradient(135deg,#fffaea 0%,#fdeec0 18%,#f0c74e 55%,#d9a621 100%) !important;
}

/* [ANANDA-ROBE-CLAIRE 2026-08-05] Le corps de la fenetre suivait var(--bg) :
   sur un theme sombre, les bulles (pensees pour le marbre clair) devenaient
   du brun sur du noir. La robe du chat ne depend plus du theme.
   NE PAS toucher a la propriete display ici : la fenetre se ferme justement
   en perdant sa classe open. */
html body .maha-chat{
  background:linear-gradient(180deg,#fffdf6 0%,#fff8ea 100%) !important;
  border:1px solid rgba(201,151,27,.38) !important;
  box-shadow:0 20px 60px rgba(40,28,4,.42) !important;
}
html body .maha-chat .maha-chat-messages{ background:transparent !important; }

/* [ANANDA-ROBE-UNIQUE 2026-08-05] En fenêtre étroite, le tiroir gardait la robe
   sombre de la V3-6 alors que les bulles étaient déjà passées au marbre clair :
   texte brun sur fond prune, illisible. Une seule robe, partout. */
body.giri-mobile-shell .maha-chat.open{
  background:linear-gradient(180deg,#fffdf6 0%,#fff8ea 100%) !important;
  border-top:2px solid rgba(201,151,27,.42) !important;
  box-shadow:0 -14px 40px rgba(60,42,6,.35) !important;
}
body.giri-mobile-shell .maha-chat-header{
  background:linear-gradient(135deg,#fffdf4,#fdf3d8) !important;
  border-bottom:1px solid rgba(201,151,27,.3) !important;
}
body.giri-mobile-shell .maha-chat-header .mch-name{ color:#2a2115 !important; }
body.giri-mobile-shell .maha-chat-header::before{ background:rgba(138,101,18,.28) !important; }
body.giri-mobile-shell .maha-chat .mch-close{
  color:#8A6512 !important;
  background:rgba(247,227,164,.5) !important;
  border:1px solid rgba(201,151,27,.42) !important;
}
body.giri-mobile-shell .mcm-msg.bot{
  background:rgba(247,227,164,.42) !important;
  border:1px solid rgba(201,151,27,.28) !important;
  color:#3b3225 !important; -webkit-text-fill-color:#3b3225 !important;
}
body.giri-mobile-shell .mcm-msg.user{
  background:#fffefa !important;
  border:1px solid rgba(201,151,27,.22) !important;
  color:#221d15 !important; -webkit-text-fill-color:#221d15 !important;
}
body.giri-mobile-shell .maha-chat-input{
  background:linear-gradient(0deg,#fffdf6,#fffefb) !important;
  border-top:1px solid rgba(201,151,27,.28) !important;
}
body.giri-mobile-shell .maha-chat-input input{
  background:#fffefa !important;
  border:1px solid rgba(201,151,27,.42) !important;
  color:#221d15 !important; -webkit-text-fill-color:#221d15 !important;
}
body.giri-mobile-shell .maha-chat-input button{
  background:linear-gradient(135deg,#fdf3d2 0%,#f7e3a4 18%,#e8b93a 55%,#c9971b 100%) !important;
  color:#3a2a06 !important; -webkit-text-fill-color:#3a2a06 !important;
}

/* ═══ 14. BARRE LATÉRALE — défilement, pastille flottante, Assistance ═══
   Maha : « on peut pas scroller jusqu'en bas de Ma pratique, ça craint
   grave » · « la taille ne sert à rien ici, vire ce pont » · « Assistance
   Mahayawen prend trop de place ». */

/* 14a. la colonne défile enfin sur toute sa hauteur */
html body .sidebar{
  display:flex !important;
  flex-direction:column !important;
  overflow-y:auto !important;      /* ⛔ surtout pas `hidden` : le tiroir ouvert
                                      poussait alors les derniers items hors de
                                      l'ecran, sans aucun moyen d'y acceder */
  overscroll-behavior:contain !important;
}
html body .sidebar > *{ flex:0 0 auto !important; }
/* le pied (profil · taille du texte · deconnexion) reste sous la main */
html body .sidebar .sb-user{
  position:sticky !important;
  bottom:0 !important;
  z-index:5 !important;
  background:inherit !important;
  backdrop-filter:blur(6px) !important;
}
/* la zone du milieu prend la place restante et défile */
html body .sidebar .sb-scroll,
html body .sidebar .sidebar-scroll,
html body .sidebar #sbScroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}
/* le tiroir « Ma pratique » ne dépasse plus l'écran : il défile en interne */
html body .gamif-tools.open .gamif-tools-body{
  max-height:min(46vh, 420px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
}

/* 14b. la pastille flottante « Aa » disparaît — le réglage vit dans le pied */
html body #giriFsBtn{ display:none !important; }
html body .settings-btn.giri-fs-entree{
  width:30px !important; height:30px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* le panneau, quand on l'ouvre depuis le pied, se pose au-dessus de celui-ci */
html body #giriFsPanel[data-depuis-parametres]{
  position:fixed !important;
  left:14px !important; right:auto !important;
  bottom:78px !important; top:auto !important;
  z-index:100000 !important;
  max-width:min(320px, calc(100vw - 28px)) !important;
}

/* 14c. Assistance : même message, moitié moins de hauteur */
html body .tll-drawer .tll-assist,
html body .sb-assist,
html body a.sb-assist{
  padding:10px 12px !important;
}
html body .sidebar .gamif-lb-btn.lahiri-sanctuary-btn{
  padding:9px 12px !important;
  min-height:0 !important;
}
/* Assistance : le bloc doré tenait sur deux lignes hautes pour trois mots */
html body #sidebarAssistanceBtn,
html body .sb-assistance-btn{
  padding:9px 12px !important;
  gap:9px !important;
  min-height:0 !important;
  border-radius:12px !important;
}
html body #sidebarAssistanceBtn img,
html body .sb-assistance-btn img{
  width:26px !important; height:26px !important;
}
html body #sidebarAssistanceBtn span:first-of-type,
html body .sb-assistance-btn span:first-of-type{ font-size:14px !important; }
html body #sidebarAssistanceBtn span:last-of-type,
html body .sb-assistance-btn span:last-of-type{ font-size:11px !important; }

/* ═══ 15. HARMONIE DES LIGNES — une seule grille ════════════════════════
   Maha : « la ligne du haut déconne, regarde bien : le croisement des lignes
   ne fait pas joli. Il faut que toutes les lignes se croisent harmonieusement
   sur un grillage où les points sont alignés. »
   Mesuré : les trois en-têtes fermaient à **trois hauteurs différentes** —
   panneau membres à 45 px, barre latérale à 73 px, fil central à 77 px — alors
   que les deux séparateurs verticaux, eux, tombent net (x=310 et x=1110). Les
   croisements formaient donc un escalier.
   Tout le monde ferme désormais sur la même ligne : **77 px**. */
:root{ --giri-ligne-entete:77px; }

html body .sb-header,
html body .ch-header,
html body .right-panel .rp-section:first-of-type,
html body .dm-header,
html body .tll-drawer .tll-head{
  height:var(--giri-ligne-entete) !important;
  min-height:var(--giri-ligne-entete) !important;
  max-height:var(--giri-ligne-entete) !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
/* le filet lui-même : même trait, même or, des deux côtés du croisement */
html body .sb-header,
html body .ch-header,
html body .right-panel .rp-section:first-of-type{
  border-bottom:1px solid rgba(201,151,27,.3) !important;
}
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .sb-header,
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .ch-header,
html:not([data-theme="aube"]):not([data-theme="sable"]):not([data-theme="marbre"]):not([data-theme="glacier"]):not([data-theme="lotus"]) body .right-panel .rp-section:first-of-type{
  border-bottom:1px solid rgba(212,168,83,.26) !important;
}

/* le vocal d'Ananda, dans le fil du chat */
html body .maha-chat .mcm-vocal{
  background:rgba(247,227,164,.42) !important;
  border:1px solid rgba(201,151,27,.36) !important;
  border-radius:13px !important;
  padding:11px 13px !important;
}
html body .maha-chat .mcm-vocal-tit{
  font-size:12px !important; font-weight:800 !important;
  letter-spacing:.04em !important; color:#8A6512 !important;
  -webkit-text-fill-color:#8A6512 !important; margin-bottom:3px !important;
}
html body .maha-chat .mcm-vocal-sujet{
  font-size:13.5px !important; color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important; margin-bottom:8px !important; line-height:1.35 !important;
}
html body .maha-chat .mcm-vocal audio{ display:block !important; }

/* Cercle Giri portait un simple cercle vide « ◯ » : c'est le logo qui va là. */
html body .tll-drawer .tll-link-ico.tll-ico-logo{
  background:url('/assets/images/logos/golden-ball-maha.webp') center center / 78% no-repeat !important;
  font-size:0 !important;
  color:transparent !important;
}

/* ═══ 16. ACHETER SANS QUITTER LA COMMUNAUTÉ ════════════════════════════
   La page de vente s'ouvre par-dessus, dans un cadre marbre. On achète, on
   ferme, on est toujours dans la conversation. */
html body .giri-achat{
  position:fixed !important; inset:0 !important;
  z-index:100200 !important;
  display:none !important;
  align-items:center !important; justify-content:center !important;
  padding:min(4vh,34px) min(3vw,26px) !important;
  background:radial-gradient(ellipse at center, rgba(60,44,14,.55) 0%, rgba(28,20,6,.76) 100%) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}
html body .giri-achat.ouvert{ display:flex !important; }
html body .giri-achat-boite{
  width:min(1080px, 100%) !important;
  height:min(92vh, 100%) !important;
  display:flex !important; flex-direction:column !important;
  background:linear-gradient(180deg,#fffefb 0%,#fdf8ec 100%) !important;
  border:1px solid rgba(201,151,27,.42) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 26px 66px rgba(40,28,8,.42) !important;
}
html body .giri-achat-tete{
  flex:0 0 auto !important;
  display:flex !important; align-items:center !important; gap:11px !important;
  padding:13px 15px !important;
  background:linear-gradient(180deg,#fffdf6 0%,#fbf3df 100%) !important;
  border-bottom:1px solid rgba(201,151,27,.3) !important;
}
html body .giri-achat-tete img{ width:30px !important; height:30px !important; flex-shrink:0 !important; }
html body .giri-achat-titre{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:19px !important; font-weight:700 !important;
  color:#221d15 !important; -webkit-text-fill-color:#221d15 !important;
}
html body .giri-achat-onglet{
  margin-left:auto !important;
  font-size:12.5px !important; font-weight:700 !important;
  color:#7A5A0B !important; -webkit-text-fill-color:#7A5A0B !important;
  text-decoration:none !important;
  border:1px solid rgba(201,151,27,.42) !important;
  border-radius:9px !important; padding:7px 11px !important;
}
html body .giri-achat-onglet:hover{
  background:linear-gradient(135deg,#f7e3a4,#e8b93a) !important;
  color:#3a2a06 !important; -webkit-text-fill-color:#3a2a06 !important;
}
html body .giri-achat-fermer{
  width:38px !important; height:38px !important; flex-shrink:0 !important;
  border-radius:50% !important; cursor:pointer !important;
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%) !important;
  border:1px solid rgba(138,101,18,.5) !important;
  color:#3a2a06 !important; -webkit-text-fill-color:#3a2a06 !important;
  font-size:1.4rem !important; line-height:1 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
html body .giri-achat-corps{ flex:1 1 auto !important; min-height:0 !important; background:#fff !important; }
html body .giri-achat-corps iframe{
  width:100% !important; height:100% !important; border:0 !important; display:block !important;
}
/* ═══ 15. AGORA — cartes d'événements jamais repeintes (bug réel du 10/08) ═
   Maha, sur L'Agora : « c'est jaune sur jaune, on voit rien ». Le passage au
   marbre (section 8) a repeint SEULEMENT .giri-hall-box/-head/-sub/-empty —
   jamais les classes réellement générées par le JS pour chaque événement
   (.giri-event-*), qui restaient en or/crème pensés pour un fond sombre.
   Les classes patchées section 11 (.giri-hall-item-title/-sub) n'existent
   dans AUCUN HTML généré : elles ne servaient à rien. Corrigé aux vraies
   classes, liste ET détail (même bug, jamais vérifié car jamais cliqué). */
html body .giri-event-date{
  color:#8A6512 !important;
}
html body .giri-event-title{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .giri-event-meta{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-event-meta .pill{
  border-color:rgba(138,101,18,.45) !important;
}
html body .giri-event-desc{
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
}
html body .giri-event-footer{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-rsvp-btn{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
  border-color:rgba(138,101,18,.45) !important;
}
html body .giri-rsvp-btn:hover{
  background:rgba(201,151,27,.14) !important;
}
html body .giri-rsvp-btn.active{
  color:#1a120a !important;
  -webkit-text-fill-color:#1a120a !important;
}
/* Vue détail d'un événement (clic sur une carte) — même cause, jamais vue */
html body .giri-event-detail h3{
  color:#221d15 !important;
  -webkit-text-fill-color:#221d15 !important;
}
html body .giri-event-detail .when{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-event-detail .desc{
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
}
html body .giri-event-detail .countdown{
  color:#8A6512 !important;
  -webkit-text-fill-color:#8A6512 !important;
}
html body .giri-back{
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
}
html body .giri-attendees .a{
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
  border-color:rgba(201,151,27,.35) !important;
}

/* Même bug en prevention sur la Galerie (Hof) : les cartes de témoignage ne
   sont pas encore peuplées (aucun temoignage publié au 10/08), mais leurs
   classes portent EXACTEMENT le même défaut (crème/or sur fond forcé
   crème par la section 8) — corrigé avant que ça ne se voie en prod. */
html body .giri-hof-card-body p{
  color:#443c31 !important;
  -webkit-text-fill-color:#443c31 !important;
}
html body .giri-hof-metrics .ba{
  background:rgba(201,151,27,.12) !important;
  color:#7A5A0B !important;
  -webkit-text-fill-color:#7A5A0B !important;
  border-color:rgba(138,101,18,.3) !important;
}



/* ═══ 16. TIROIR MOBILE — hiérarchie, galbe premium, cibles tactiles (10/08) ═
   Maha, test réel Xiaomi 14T Pro : logo+titre trop petits face à l'Arbre à
   Liens qui écrase tout par son cadre (pas par son texte, 16px, plus petit
   que le header 22px) ; les salons (Sanctuaire, Accueil) trop discrets ;
   Assistance Mahayawen illisible ; Ma pratique minuscule et peu cliquable ;
   Membres/Moi doivent égaler la générosité de Privés. Correctif additif,
   scopé mobile-shell, theme-agnostique (fonctionne sur tous les thèmes). */

/* En-tête : logo + titre plus présents */
body.giri-mobile-shell .sb-header-logo{ width:88px !important; height:88px !important; }
body.giri-mobile-shell .sb-header .title{ font-size:26px !important; line-height:1.15 !important; }
body.giri-mobile-shell .sb-header .sub{ font-size:14px !important; letter-spacing:1.2px !important; }

/* Salons (Sanctuaire, Accueil, Le Cœur...) : même galbe premium 3D que
   l'Arbre à Liens — dégradé subtil, liseré haut lumineux, ombre portée —
   et texte agrandi pour ne plus paraître minuscule à côté. */
body.giri-mobile-shell .acad-section-header,
body.giri-mobile-shell .ch-item{
  min-height: 64px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 6px 16px rgba(0,0,0,.22) !important;
}
body.giri-mobile-shell .acad-section-label{ font-size: 19px !important; font-weight: 800 !important; letter-spacing: .5px !important; }
body.giri-mobile-shell .acad-section-sub{ font-size: 13px !important; }
body.giri-mobile-shell .ch-item .name{ font-size: 18px !important; }
body.giri-mobile-shell .acad-section-icon,
body.giri-mobile-shell .ch-item .icon{ font-size: 22px !important; }

/* Assistance Mahayawen : label et sous-titre lisibles, icône agrandie */
body.giri-mobile-shell .sb-assistance-btn{ min-height: 78px !important; padding: 16px !important; }
body.giri-mobile-shell .sb-assistance-btn span:first-child{ font-size: 20px !important; }
body.giri-mobile-shell .sb-assistance-btn span:last-child{ font-size: 14px !important; }
body.giri-mobile-shell .sb-assistance-btn img{ width: 44px !important; height: 44px !important; }

/* Ma pratique : même galbe/hauteur que les salons, cible tactile large et
   franchement cliquable (elle l'était déjà en JS — le défaut était visuel). */
body.giri-mobile-shell .gamif-tools-toggle{
  min-height: 64px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 6px 16px rgba(0,0,0,.22) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.giri-mobile-shell .gamif-tools-toggle span:first-child{
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Membres / Moi : même famille et même échelle de titre que Privés
   (Cormorant Garamond, ~28px) — au repos les tailles étaient proches en px
   mais Privés lisait plus « riche » à cause de la police serif dédiée. */
body.giri-mobile-shell .mobile-members-header h3,
body.giri-mobile-shell .profile-modal h2{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 28px !important;
}


/* ═══ 17. ACCESSIBILITÉ RÉELLE — Maha : illisible à 50cm, malvoyants (10/08 bis) ═
   Les bumps de la section 16 étaient trop timides. Ici on vise une lecture
   confortable à bras tendu (50cm), pour tous les publics (malvoyants inclus).
   Correctif additif, scopé mobile-shell, theme-agnostique. */

/* Logo tiroir : la vraie cause du rognage était un transform:scale(1.35)
   animé (hérité d'un sélecteur générique d'orbe) qui pousse le rendu visuel
   ~13px au-dessus du bord du tiroir (overflow-y:auto le tronque). On fige
   la taille réelle en tuant le transform, plus de dépendance au ratio caché. */
body.giri-mobile-shell .sb-header-logo{
  transform: none !important;
  animation: none !important;
  width: 76px !important;
  height: 76px !important;
}
body.giri-mobile-shell .sidebar .sb-header{ padding-top: 26px !important; }

/* Salons : deuxième cran, nettement plus grand */
body.giri-mobile-shell .acad-section-label{ font-size: 22px !important; }
body.giri-mobile-shell .acad-section-sub{ font-size: 15px !important; }
body.giri-mobile-shell .ch-item .name{ font-size: 21px !important; }
body.giri-mobile-shell .acad-section-header,
body.giri-mobile-shell .ch-item{ min-height: 72px !important; padding: 16px !important; }

/* Membres : TOUT le panneau, pas seulement le titre */
body.giri-mobile-shell .mobile-members-header h3{ font-size: 30px !important; }
body.giri-mobile-shell #mobileMemberSearch{ font-size: 19px !important; min-height: 60px !important; }
body.giri-mobile-shell .mobile-members-panel .member-item{ min-height: 96px !important; padding: 18px 16px !important; }
body.giri-mobile-shell .mobile-members-panel .member-item .m-avatar{ width: 72px !important; height: 72px !important; min-width: 72px !important; }
body.giri-mobile-shell .mobile-members-panel .m-name{ font-size: 22px !important; }
body.giri-mobile-shell .mobile-members-panel .role-title{ font-size: 16px !important; }
body.giri-mobile-shell .mobile-members-panel .role-badge{ font-size: 14px !important; padding: 6px 12px !important; }
body.giri-mobile-shell .mobile-members-panel .m-status{ font-size: 14px !important; }

/* Moi : le titre était traité, pas le contenu en dessous */
body.giri-mobile-shell .profile-modal h2{ font-size: 32px !important; }
body.giri-mobile-shell .profile-modal .profile-avatar-circle{ width: 130px !important; height: 130px !important; }
body.giri-mobile-shell .profile-modal .profile-avatar-wrap + *{ font-size: 17px !important; }
body.giri-mobile-shell .profile-modal .profile-field label{ font-size: 17px !important; }
body.giri-mobile-shell .profile-modal .profile-field input,
body.giri-mobile-shell .profile-modal .profile-field textarea{ font-size: 18px !important; padding: 14px 16px !important; }
body.giri-mobile-shell .profile-modal h3,
body.giri-mobile-shell .profile-modal [class*="theme-visuel"],
body.giri-mobile-shell .profile-modal .section-label{ font-size: 18px !important; }
body.giri-mobile-shell .profile-modal .theme-swatch{ min-height: 76px !important; }
body.giri-mobile-shell .profile-modal .theme-swatch .ts-label{ font-size: 17px !important; }

/* Privés : bouton Retour premium, bouton Nouvelle conversation plus épais */
body.giri-mobile-shell .dm-back{
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(212,168,83,.3) !important;
  min-height: 52px !important;
}
body.giri-mobile-shell .dm-new-btn{
  min-height: 64px !important;
  padding: 18px 22px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
}

/* [MOI-SOUS-THEMES 2026-08-10] Notifications sonores + tous les reglages (push, gamification,
   Foret GIRI, confidentialite) n'avaient jamais ete touches : divs inline .88rem/.75rem/.7rem/.82rem
   -> minuscules juste apres le selecteur de themes, alors que theme-grid et profile-field etaient deja gros. */
body.giri-mobile-shell .profile-modal .notif-section label,
body.giri-mobile-shell .profile-modal .prefs-section > label{ font-size: 18px !important; }
body.giri-mobile-shell .profile-modal .notif-vol-label{ font-size: 16px !important; }
body.giri-mobile-shell .profile-modal .pref-toggle-row > div > div:first-child,
body.giri-mobile-shell .profile-modal .prefs-section > div > div:first-child{ font-size: 17px !important; }
body.giri-mobile-shell .profile-modal .pref-toggle-row > div > div:nth-child(2),
body.giri-mobile-shell .profile-modal .prefs-section > div > div:nth-child(2){ font-size: 14px !important; }
body.giri-mobile-shell .profile-modal .prefs-section input,
body.giri-mobile-shell .profile-modal .prefs-section select{ font-size: 16px !important; padding: 10px 14px !important; }
body.giri-mobile-shell .profile-modal .pref-switch{ transform: scale(1.15); }


@media (max-width:640px){
  html body .giri-achat{ padding:0 !important; }
  
html body .giri-achat-boite{ width:100% !important; height:100% !important; border-radius:0 !important; border:0 !important; }
  html body .giri-achat-onglet{ display:none !important; }
}