/* ============================================================================
   PARFAIT — 24/08/2026
   Lot « visuel + fonctionnel » demandé par Maha : « screen chaque étape de la
   rentrée à l'utilisation, je veux savoir ce qui fonctionne ou non ».
   Chaque règle ci-dessous répond à UN défaut VU à l'écran pendant le parcours
   (captures /root/maha-tools/_screen/parcours/).

   ⛔ Cette feuille est chargée EN DERNIER, après mobile-verite.css : à
   spécificité égale, c'est elle qui gagne. Ne jamais disperser ces règles dans
   les ~200 blocs <style> de la page — une feuille plus basse les rebattrait.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. LE FIL — une bulle sur deux était quasi transparente
   VU : dans « Le Cœur », les messages d'ouverture de groupe ont un fond
   rgba(0,0,0,.03) — 3 % de noir. Le texte tombe alors directement sur les
   veines dorées du marbre : sur téléphone, une ligne entière devenait pénible
   à lire. Les messages « suite » avaient bien, eux, un crème à 88 %.
   On donne la MÊME pierre claire aux deux, uniquement sur les thèmes clairs.
   ───────────────────────────────────────────────────────────────────────── */
html:not([data-theme]) #messagesWrap .msg,
html[data-theme="marbre"] #messagesWrap .msg,
html:not([data-theme]) #dmMessages .msg,
html[data-theme="marbre"] #dmMessages .msg {
  background: rgba(255, 253, 247, .90) !important;
  border: 1px solid rgba(201, 169, 110, .16) !important;
}
html:not([data-theme]) #messagesWrap .msg.giri-msg-suite,
html[data-theme="marbre"] #messagesWrap .msg.giri-msg-suite {
  border-top-color: rgba(201, 169, 110, .10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. LES SÉPARATEURS DE JOUR mangeaient 84 px chacun
   VU : 34 px de marge + 18 de padding en haut, 10 + 22 en bas, pour une ligne
   de 16 px. Sur un fil peu bavard, ça ouvrait des trous de marbre nu entre
   deux messages et le salon paraissait vide. On resserre sans écraser.
   ───────────────────────────────────────────────────────────────────────── */
#messagesWrap .date-sep {
  margin: 16px 0 10px !important;
  padding: 6px 0 4px !important;
  height: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. LE PIED DE LA COLONNE affichait « Can… »
   VU : le bloc du nom était écrasé à 39 px de large (overflow:hidden) alors
   que la colonne en fait 309 — le prénom de la personne connectée était coupé
   au troisième caractère. C'est son nom : il doit tenir.
   ───────────────────────────────────────────────────────────────────────── */
#userFooter { gap: 6px !important; }
#userFooter .info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#userFooter .info > * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
#userFooter .settings-btn { flex: 0 0 auto !important; }

/* ─────────────────────────────────────────────────────────────────────────
   4. LA CLASSE PRIVÉE — la ligne qui rapporte était la plus mal rendue
   VU (bureau, colonne des salons dépliée) : « Classe Privée · Espace Élèves »
   écrasé sur QUATRE lignes verticales d'un mot chacune, parce que la pastille
   « 120 €/mois » prenait la largeur à côté du nom. On met le prix EN DESSOUS,
   sur sa propre ligne, et le nom retrouve toute la largeur.
   ───────────────────────────────────────────────────────────────────────── */
.ch-item[data-slug="classe-privee"] {
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 4px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.ch-item[data-slug="classe-privee"] .name {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}
.ch-item[data-slug="classe-privee"] .giri-prix {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  order: 3 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. LE SALON EN LECTURE SEULE — la phrase d'explication était fantôme
   VU (« Paroles du Maître ») : « Seul·e le Serviteur publie dans ce
   sanctuaire » s'affichait en vert pâle translucide PAR-DESSUS la barre
   d'écriture grisée : illisible, et on ne comprenait pas pourquoi on ne
   pouvait pas écrire. On la rend lisible et on la pose au-dessus de la barre.
   ───────────────────────────────────────────────────────────────────────── */
#roBanner {
  color: #6b5a34 !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: rgba(255, 253, 247, .92) !important;
  border: 1px solid rgba(201, 169, 110, .28) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  text-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. « ÉPINGLÉ » était écrit en rouge vif
   VU (Paroles du Maître) : la mention d'un message épinglé sortait en
   rouge-rose sur le marbre — la seule tache de rouge de toute la maison.
   Or et discret, comme le reste.
   ───────────────────────────────────────────────────────────────────────── */
#messagesWrap .msg .pin-badge, .pin-badge {
  color: #b08820 !important;
  font-size: 12.5px !important;
  letter-spacing: .04em !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. LE BOUTON « SAUVEGARDER » DU PROFIL, SUR ORDINATEUR
   VU : il n'est pas à la fin du formulaire — il vit au MILIEU, juste avant
   les blocs « Ton profil » et « Nom d'affichage », et il recouvrait la ligne
   « Afficher la gamification », coupée en deux. Le texte de la feuille dit
   pourtant « appuie sur Sauvegarder tout en bas ». Sur téléphone, le correctif
   du 15/08 l'a déjà ancré en bas de l'écran ; on fait la même chose ici.
   Spécificité : (1 id, 2 classes) — bat le sticky de giri-profil-fixes.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  html body:not(.giri-mobile-shell) .profile-modal #profileSaveBtn {
    position: fixed !important;
    bottom: 26px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(380px, 86vw) !important;
    margin: 0 !important;
    z-index: 700 !important;
    box-shadow: 0 -2px 0 rgba(255, 253, 247, .9), 0 10px 30px rgba(0, 0, 0, .28),
                0 0 0 1px rgba(201, 169, 110, .5) !important;
  }
  /* et le formulaire garde de l'air sous son dernier champ, pour que rien
     ne finisse jamais sous le bouton posé par-dessus. */
  html body:not(.giri-mobile-shell) .profile-modal .profile-box {
    padding-bottom: 96px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. MAHA TV — deux murs noirs de 350 px
   VU (bureau 1920) : la chaîne diffuse une vidéo verticale dans un cadre
   horizontal ; tout autour, du noir pur, au milieu d'une maison en marbre.
   On remplace le noir par la pierre sombre chaude de la maison — l'image
   garde exactement sa taille, seul le vide autour cesse d'être un trou.
   ───────────────────────────────────────────────────────────────────────── */
#giriTvEmbed,
#giriTvEmbed .tv-stage,
#giriTvEmbed .giri-tv-stage {
  background: linear-gradient(180deg, #1b1611 0%, #12100d 60%, #0d0b09 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. LA CHARTE D'ENTRÉE, SUR TÉLÉPHONE — le pied laissait voir au travers
   VU : la barre « J'accepte la charte » + « Je rejoins l'espace » est posée
   sur un fond translucide : le texte de la carte défilait DERRIÈRE en
   transparence, et une ligne blanche tranchait la carte en deux.
   ───────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell .giri-charter-foot,
body.giri-mobile-shell .giri-charter-actions {
  background: linear-gradient(180deg, rgba(253, 250, 242, .0) 0%,
              rgba(253, 250, 242, .96) 18%, #fdfaf2 100%) !important;
  backdrop-filter: blur(6px) !important;
  border-top: 1px solid rgba(201, 169, 110, .28) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   11. LE THÈME NUIT AVAIT TROIS ZONES RESTÉES EN PLEIN JOUR
   VU (bascule en « Nuit » depuis Ton profil) : la page passe au noir, mais le
   bandeau « À RETENIR », la colonne de droite et la barre d'écriture gardaient
   leur pierre claire — trois rectangles blancs éblouissants dans une page
   sombre, le soir, sur le seul thème fait pour les yeux fatigués.
   On les repeint avec les propres couleurs du thème (--bg2/--bg3), rien
   d'inventé, et uniquement sous data-theme="nuit".
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="nuit"] .gcd-bandeau,
html[data-theme="nuit"] #rightPanel,
html[data-theme="nuit"] #inputWrap,
html[data-theme="nuit"] .msg-input-box {
  background: var(--bg2, #0c0c16) !important;
  border-color: rgba(212, 168, 83, .22) !important;
}
html[data-theme="nuit"] .gcd-bandeau .gcd-titre,
html[data-theme="nuit"] .gcd-bandeau .gcd-mot,
html[data-theme="nuit"] #rightPanel .grp-sub,
html[data-theme="nuit"] #rightPanel .grp-title {
  color: #f0ede4 !important;
}
html[data-theme="nuit"] #msgInput {
  background: var(--bg3, #10101c) !important;
  color: #f0ede4 !important;
}
/* le champ de saisie lui-même restait blanc laiteux en Nuit (mesuré au pixel :
   187,186,184) — une lampe allumée en bas de l'écran. */
html[data-theme="nuit"] body .msg-input-box textarea,
html[data-theme="nuit"] body #msgInput,
html[data-theme="nuit"] body #dmInput {
  background: #14141f !important;
  color: #f0ede4 !important;
  border-color: rgba(212, 168, 83, .25) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. LA COLONNE DE DROITE PROMETTAIT SES FORMATIONS SANS PORTE
   VU (bureau) : le panneau affiche « Accès à mes formations / Retrouve ton
   portail élève », et le SEUL bouton dessous dit « Voir les membres ». La
   porte vers le portail, c'est la boule dorée — mais rien ne dit qu'on peut
   cliquer une boule. On ajoute le geste manquant, en lingot, et la liste des
   membres devient ce qu'elle est : un second choix.
   ───────────────────────────────────────────────────────────────────────── */
#griRpCondensed .grp-cta-portail {
  display: block; width: min(230px, 90%); margin: 2px auto 0;
  padding: 13px 18px; border: none; border-radius: 12px; cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.06rem;
  font-weight: 700; letter-spacing: .01em; color: #3b2f12;
  background: linear-gradient(135deg, #F4D58A 0%, #E8C078 42%, #C9A253 72%, #A07840 100%);
  box-shadow: 0 6px 18px -8px rgba(138, 101, 18, .7), inset 0 1px 0 rgba(255, 255, 255, .55);
}
#griRpCondensed .grp-cta-portail:hover { filter: brightness(1.05); }
#griRpCondensed #grpMembresBtn {
  background: transparent !important;
  border: 1px solid rgba(201, 169, 110, .55) !important;
  color: var(--tm, #6b5a34) !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   13. LE VOILE DE « MON PROFIL » ÉTAIT RESTÉ NOIR SUR TÉLÉPHONE
   VU (relevé de la sentinelle du 24/08, seul panneau sombre restant) :
   #profileModal peint un voile rgba(6,6,14,.96) — presque du noir pur — derrière
   la feuille, dans une maison entièrement en marbre clair. Le bureau, lui, a
   un beau flou clair. On met la même ombre chaude et translucide qu'ailleurs.
   ───────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #profileModal,
html body.giri-mobile-shell .profile-modal {
  background: rgba(58, 44, 18, .52) !important;
  backdrop-filter: blur(7px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.05) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. LA CROIX DE « MON PROFIL » ÉTAIT UN GROS ROND NOIR
   VU (téléphone) : 52 px de noir (rgba(18,12,22,.92)) avec un signe brun
   presque illisible dessus, posé sur une feuille d'ivoire. La maison ferme
   ses feuilles en clair et or — le 23/08 l'avait déjà fait ailleurs.
   ───────────────────────────────────────────────────────────────────────── */
html body #closeProfileModal,
html body .profile-modal .close-modal {
  background: rgba(255, 253, 247, .96) !important;
  color: #8a6a1f !important;
  border: 1px solid rgba(201, 169, 110, .55) !important;
  box-shadow: 0 6px 18px -10px rgba(60, 45, 15, .5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   15. SUR UN TRÈS PETIT ÉCRAN, LE BANDEAU MANGEAIT UN TIERS DE LA VUE
   MESURÉ (320 × 568) : le fil ne dispose que de 247 px de haut, et le bandeau
   « À retenir » en occupe près de 200 — on ne voyait plus un seul message en
   entier. On le resserre là, et là seulement : le texte reste, « Lire en
   entier » reste, seuls l'air et la taille du titre diminuent.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-height: 660px) {
  body.giri-mobile-shell .gcd-bandeau {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }
  body.giri-mobile-shell .gcd-bandeau .gcd-titre {
    font-size: 15px !important;
    margin-bottom: 2px !important;
  }
  body.giri-mobile-shell .gcd-bandeau .gcd-mot {
    font-size: 14px !important;
    line-height: 1.32 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.giri-mobile-shell .gcd-bandeau .gcd-pastille { transform: scale(.86); transform-origin: left center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. LA PORTE DU PORTAIL ÉLÈVE (25/08) — elle avait disparu du téléphone.
   Deux endroits, jamais les deux à la fois : le bouton dans la nav condensée
   (posé par parfait.js) quand la colonne est rangée, la porte pleine quand
   elle est dépliée. Couleurs prises au thème (jamais de teinte figée).
   ═══════════════════════════════════════════════════════════════════════════ */
html body #sidebar .pf-porte-portail{
  display:flex !important;
  align-items:center;
  gap:12px;
  /* collée en haut du tiroir : bandeau pleine largeur, arrondi en bas
     seulement (des coins arrondis rognés par le bord de l'écran font raté),
     et l'encoche du téléphone est respectée par le rembourrage. */
  margin:0 0 10px;
  padding:calc(14px + var(--safe-t, 0px)) 14px 14px;
  border-radius:0 0 16px 16px;
  border-left:0; border-right:0; border-top:0;
  text-decoration:none;
  border:1px solid rgba(212,168,83,.42);
  /* fond OPAQUE du thème + voile doré : la porte est collée en haut du tiroir,
     le contenu défile dessous — sans fond plein, les salons la traversent. */
  background-color:var(--bg2,#17111d);
  background-image:linear-gradient(135deg, rgba(247,227,164,.22), rgba(201,151,27,.15));
  color:var(--t,#f5f0e6);
  /* ⛔ 25/08 : posée en tête du tiroir, elle était HORS ÉCRAN — « Salons »
     fait défiler d'emblée jusqu'aux salons (scrollRevealedIntoView, 15/08).
     Collée en haut, elle reste sous le regard pendant tout le parcours. */
  position:sticky; top:0; z-index:6;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.45);
}
/* colonne rangée : c'est le bouton de la nav condensée qui tient le rôle */
html body #sidebar.giri-condensed .pf-porte-portail{ display:none !important; }
html body #sidebar .pf-porte-orb{ font-size:22px; line-height:1; flex:0 0 auto; }
html body #sidebar .pf-porte-txt{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
html body #sidebar .pf-porte-titre{ font-weight:800; font-size:15px; letter-spacing:.01em; }
html body #sidebar .pf-porte-sub{
  font-size:12.5px; opacity:.78;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html body #sidebar .pf-porte-fleche{ opacity:.7; flex:0 0 auto; font-size:16px; }
html body #sidebar .pf-porte-portail:active{ filter:brightness(.94); }