/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-VÉRITÉ — La Giri Family sur téléphone
   Posé le 2026-08-23 après l'audit mobile demandé par Maha (12 écrans vus,
   5 appareils, clavier compris). Sauvegarde de l'état d'avant : 20260823-193236.

   ⛔ POURQUOI UN SEUL FICHIER, CHARGÉ EN DERNIER :
   `communaute.html` porte ~200 blocs de correctifs empilés depuis juin. Une
   règle posée au milieu se fait battre par une feuille plus basse — c'est ce
   qui a fait revenir des défauts déjà corrigés. Ici, tout ce qui concerne le
   téléphone tient à UN endroit, chargé après tout le monde, retirable en une
   ligne. Ne jamais disperser ces règles ailleurs.

   ⛔ TOUT est scopé `body.giri-mobile-shell` (ou une media query étroite) :
   le bureau et l'app 980 ne doivent RIEN voir passer.

   Chaque section porte le défaut constaté, en clair.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   V1.1 — LE MESSAGE ÉPINGLÉ NE MANGE PLUS L'ÉCRAN
   Constat : le bandeau « À retenir » faisait 227 px de haut sur un écran de
   780 — 29 % de la surface, en permanence, pour un texte qu'on a lu une fois.
   Il ne restait que 3 messages entiers visibles sur 100 (1 seul sur petit
   écran). Désormais : deux lignes, un mot pour ouvrir, et on le replie.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell .gcd-bandeau.gcd-note{
  margin:8px 10px 2px !important;
  padding:11px 14px 9px !important;
  gap:9px !important;
  cursor:pointer;
}
body.giri-mobile-shell .gcd-bandeau.gcd-note .gcd-pastille{
  padding:5px 11px !important;
  font-size:11.5px !important;
}
body.giri-mobile-shell .gcd-bandeau.gcd-note .gcd-titre{
  font-size:17px !important;
  line-height:1.2 !important;
}
body.giri-mobile-shell .gcd-bandeau.gcd-note .gcd-mot{
  font-size:16px !important;
  line-height:1.42 !important;
}
/* replié : deux lignes, avec un dégradé qui dit « il y a une suite » */
body.giri-mobile-shell .gcd-bandeau.gcd-note:not(.gmv-deplie) .gcd-mot{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
}
body.giri-mobile-shell .gcd-bandeau.gcd-note .gmv-plus{
  display:inline-block; margin:5px 0 0; padding:6px 0 2px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.01em;
  color:#8a6a1f; -webkit-text-fill-color:#8a6a1f;
}
body.giri-mobile-shell .gcd-bandeau.gcd-note .gmv-plus::after{ content:' ▾'; }
body.giri-mobile-shell .gcd-bandeau.gcd-note.gmv-deplie .gmv-plus::after{ content:' ▴'; }

/* ───────────────────────────────────────────────────────────────────────────
   V1.2 — RENDRE L'ÉCRAN AU FIL (les barres prenaient 272 px sur 780)
   En-tête 77 → 62 · barre d'écriture 101 → 82 · barre du bas 94 → 84.
   ⛔ Aucune cible ne descend sous 44 px : on retire du vide, pas du doigt.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #channelHeader{
  padding-top:9px !important;
  padding-bottom:9px !important;
  min-height:0 !important;
}
body.giri-mobile-shell #inputWrap{
  padding-top:9px !important;
  padding-bottom:9px !important;
}
body.giri-mobile-shell .giri-bottomnav-btn{
  min-height:56px !important;
  padding:6px 4px !important;
  gap:3px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.3 — LE PIED D'OUTILS NE COUPE PLUS LA LISTE DES SALONS
   Constat : `#userFooter` (photo, ⟳, ⚙, Aa, ⏻) est collé en bas du tiroir et
   passait PAR-DESSUS le dernier salon — « Classe Privée · 120 €/mois », la
   ligne qui rapporte, était tranchée en deux. On réserve sa place.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #sidebar #channelList{
  padding-bottom:96px !important;
}
/* la rangée d'outils touchait le bord droit (0 px de marge contre 16 à gauche) */
body.giri-mobile-shell #sidebar #userFooter{
  padding-left:14px !important;
  padding-right:14px !important;
  gap:8px !important;
}
/* ⚙ ouvrait « Mon profil » — doublon exact de l'onglet « Moi » de la barre du
   bas, avec une icône qui promet des réglages. Sur téléphone, il s'efface. */
body.giri-mobile-shell #sidebar #userFooter .settings-btn[title="Mon profil"]{
  display:none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.4 — PLUS RIEN NE FINIT SOUS LA BARRE DU BAS
   Membres, conversations privées et « Mon profil » se terminaient DERRIÈRE la
   barre : le bouton « Sauvegarder » était à moitié caché, un second bouton
   totalement invisible, et la dernière fiche membre coupée.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #mobileMembersList,
body.giri-mobile-shell #dmMessages,
body.giri-mobile-shell #dmMemberList,
body.giri-mobile-shell #tllDrawer .tll-body,
body.giri-mobile-shell #tllDrawer .tll-content{
  padding-bottom:104px !important;
}
body.giri-mobile-shell .profile-modal .profile-box{
  max-height:calc(100vh - 110px) !important;
  margin-bottom:100px !important;
}
body.giri-mobile-shell .profile-modal{
  padding-bottom:96px !important;
}
/* la croix de « Mon profil » était un rond NOIR au milieu du marbre */
body.giri-mobile-shell .profile-modal .close-modal{
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(201,151,27,.5) !important;
  color:#6b5320 !important; -webkit-text-fill-color:#6b5320 !important;
  box-shadow:0 2px 10px rgba(120,95,45,.18) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.5 — MAHA TV : LE BOUTON « FERMER » RENTRE DANS L'ÉCRAN
   Constat : à 360 px on lisait « × Ferm » — le bouton sortait de 29 px. Le
   repli existait déjà… mais seulement sous 340 px. On l'étend à tous les
   téléphones : la croix seule, en cible pleine.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:430px){
  html body .giri-tv-bar{ padding:8px 10px !important; gap:6px !important; }
  html body .giri-tv-titre{ font-size:.98rem !important; letter-spacing:.06em !important; }
  html body .giri-tv-close span{ display:none !important; }
  html body .giri-tv-close{
    min-width:44px !important; min-height:44px !important;
    padding:0 12px !important; justify-content:center !important;
  }
  html body .giri-tv-btn{ min-height:44px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.6 — LA PASTILLE DE NON-LUS REDEVIENT DE L'OR
   Elle était rouge vif avec un liseré NOIR (reste du thème sombre) et
   dépassait au-dessus de la barre. Ailleurs dans l'app, le même compteur est
   déjà doré (« Annonces 10 ») : on aligne.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell .giri-bottomnav-badge{
  background:linear-gradient(135deg,#e0b95f,#b8860b) !important;
  border:2px solid #fffdf8 !important;
  color:#2a1e06 !important; -webkit-text-fill-color:#2a1e06 !important;
  font-size:11.5px !important; font-weight:800 !important;
  min-width:21px !important; height:21px !important; border-radius:11px !important;
  top:3px !important;
  box-shadow:0 2px 7px rgba(140,105,35,.45) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.7 — LA BARRE DU BAS SE LIT (règle lisibilité clients âgés)
   Étiquettes 11 px → 13,5 px, et elles suivent enfin le réglage « Taille du
   texte » : une personne qui choisit « Ultra » le fait parce qu'elle voit mal.
   Plus la réserve pour la barre gestuelle / l'encoche, qui manquait.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell .giri-bottomnav-label{
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
}
html[data-giri-fs="2"] body.giri-mobile-shell .giri-bottomnav-label{ font-size:15px !important; }
html[data-giri-fs="3"] body.giri-mobile-shell .giri-bottomnav-label{ font-size:16.5px !important; }
body.giri-mobile-shell .giri-bottomnav{
  padding-bottom:env(safe-area-inset-bottom,0px) !important;
  height:auto !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.8 — PLUS DE ZOOM PIÉGÉ SUR IPHONE
   Safari zoome tout seul dès qu'un champ est sous 16 px — et ne se dézoome
   jamais. La recherche de membres (15 px) et trois champs de formulaire
   (14,4 px) tombaient dans le piège.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #mobileMemberSearch,
body.giri-mobile-shell #newChName,
body.giri-mobile-shell #newChDesc,
body.giri-mobile-shell #addMemberEmail,
body.giri-mobile-shell #dmSearch,
body.giri-mobile-shell #giri-lib-q{
  font-size:16px !important;
}
/* ⛔ #gateEmail retiré de cette liste le 23/08 : il était déjà à 16 px, et le
   forcer faisait TREMBLER la porte d'entrée sur iPhone — le bouton « Entrer en
   cercle » oscillait de 14 px à chaque image (mesuré : 12 positions sur 12
   frames), au point qu'un clic simulé n'aboutissait plus. Un doigt vise mal un
   bouton qui bouge. Ne jamais le remettre. */

/* ───────────────────────────────────────────────────────────────────────────
   V2.1 — LA CHARTE D'ENTRÉE : PLUS DE TROU CRÈME, PLUS DE PIED QUI RECOUVRE
   C'est le tout premier écran d'un nouveau membre. Deux designs s'y battaient :
   une carte « cérémonie or & nuit » posée dans un conteneur resté en marbre
   clair, avec 405 px de vide sous la carte → un grand rectangle crème au bas
   de la charte. Et le pied (case à cocher + bouton), en position fixe, mordait
   sur le texte : on lisait « J'accepte… » par-dessus la fin d'une règle.
   ⛔ On ne touche PAS au parti pris « nuit » de la cérémonie : c'est un choix.
      On répare ce qui est cassé autour.
   ─────────────────────────────────────────────────────────────────────────── */
.giri-charter-gate .giri-charter-inner,
.giri-charter-view .giri-charter-inner{
  background:transparent !important;
  padding-bottom:212px !important;   /* la place du pied fixe (150) + le lingot + de l air */
}
/* la case à cocher faisait 30 px : en dessous du doigt. Le label devient la cible. */
.giri-charter-gate .giri-charter-check{
  min-height:48px !important;
  align-items:center !important;
  gap:12px !important;
  font-size:15.5px !important;
  line-height:1.35 !important;
}
.giri-charter-gate #giriCharterCheck{
  width:26px !important; height:26px !important; flex:0 0 26px !important;
}
.giri-charter-gate .giri-charter-card textarea,
.giri-charter-gate .giri-charter-card input[type="text"]{
  font-size:16px !important;         /* sinon Safari zoome et ne revient pas */
  min-height:52px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V2.2 — LES CONVERSATIONS PRIVÉES REVIENNENT DANS LE MARBRE
   C'était le seul écran resté au thème sombre (violet-noir), avec le titre
   « Messages » écrit en blanc cassé SUR DU CLAIR : illisible. Tout le reste de
   la maison — épinglés, membres, salons — est en marbre. On aligne.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #dmOverlay{
  background:linear-gradient(180deg,#fffdf8 0%,#f9f4e9 100%) !important;
}
body.giri-mobile-shell #dmOverlay .dm-header{
  background:rgba(255,253,248,.97) !important;
  border-bottom:1px solid rgba(201,151,27,.30) !important;
  box-shadow:0 2px 10px rgba(120,95,45,.07) !important;
}
body.giri-mobile-shell #dmOverlay .dm-header-info h3{
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
  font-size:19px !important;
}
body.giri-mobile-shell #dmOverlay .dm-header-info small{
  color:#7a6636 !important; -webkit-text-fill-color:#7a6636 !important;
  font-size:13.5px !important;
}
body.giri-mobile-shell #dmOverlay .dm-back{
  min-width:48px !important; min-height:44px !important;
  color:#8a6a1f !important; -webkit-text-fill-color:#8a6a1f !important;
  background:rgba(201,151,27,.10) !important;
  border:1px solid rgba(201,151,27,.32) !important;
}
body.giri-mobile-shell #dmOverlay .dm-conv{
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(201,151,27,.24) !important;
  box-shadow:0 2px 10px rgba(120,95,45,.06) !important;
}
body.giri-mobile-shell #dmOverlay .dm-conv-name{
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
  font-size:17px !important;
}
body.giri-mobile-shell #dmOverlay .dm-conv-last,
body.giri-mobile-shell #dmOverlay .dm-empty p,
body.giri-mobile-shell #dmOverlay .dm-msg-time,
body.giri-mobile-shell #dmOverlay small{
  color:#6a5828 !important; -webkit-text-fill-color:#6a5828 !important;
  font-size:14px !important;
}
body.giri-mobile-shell #dmOverlay .dm-conv-av-ph,
body.giri-mobile-shell #dmOverlay .dm-header-avatar-ph{
  background:linear-gradient(135deg,#f2e4c2,#e5d09a) !important;
  color:#4a3a12 !important; -webkit-text-fill-color:#4a3a12 !important;
}
body.giri-mobile-shell #dmOverlay .dm-bubble{
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(201,151,27,.22) !important;
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
}
body.giri-mobile-shell #dmOverlay .dm-msg.mine .dm-bubble{
  background:linear-gradient(150deg,#f7e9c6,#efdcac) !important;
  border-color:rgba(201,151,27,.42) !important;
}
body.giri-mobile-shell #dmOverlay .dm-empty-icon{ opacity:.75 !important; }
body.giri-mobile-shell #dmOverlay #dmInput,
body.giri-mobile-shell #dmOverlay .dm-input{
  background:rgba(255,255,255,.9) !important;
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
  border:1px solid rgba(201,151,27,.3) !important;
  font-size:16px !important;
}
body.giri-mobile-shell #dmOverlay #dmInputWrap{
  background:rgba(255,253,248,.97) !important;
  border-top:1px solid rgba(201,151,27,.28) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V2.3 — « TAILLE DU TEXTE » : EN MARBRE, ET PLUS PAR-DESSUS LA BARRE
   Le panneau était sombre et recouvrait la barre du bas (la pastille passait
   dessous). C'est l'outil des personnes qui voient mal : il doit être le plus
   lisible de tous.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell .giri-fs-panneau,
body.giri-mobile-shell #giriFsPanneau,
body.giri-mobile-shell .giri-taille-panneau{
  background:linear-gradient(180deg,#fffdf8,#f7f1e3) !important;
  border:1px solid rgba(201,151,27,.38) !important;
  box-shadow:0 10px 34px rgba(90,70,30,.22) !important;
  margin-bottom:104px !important;
  color:#2b2318 !important;
}
body.giri-mobile-shell .giri-fs-panneau *,
body.giri-mobile-shell #giriFsPanneau *{
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
}
body.giri-mobile-shell .giri-fs-panneau button,
body.giri-mobile-shell #giriFsPanneau button{
  background:rgba(255,255,255,.85) !important;
  border:1px solid rgba(201,151,27,.35) !important;
  min-height:56px !important;
}
body.giri-mobile-shell .giri-fs-panneau button[aria-pressed="true"],
body.giri-mobile-shell #giriFsPanneau button.actif{
  background:linear-gradient(150deg,#f0d492,#e0bd6a) !important;
  border-color:rgba(160,120,30,.6) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V4.1 — CE QUI SE LIT (barème premium mobile · règle clients âgés)
   Dates 11,5 → 13,5 · rangs 13 → 13,5 · « À retenir » 12,5 → 13 ·
   sous-titres du menu 10,4 → 13. Aucun texte de contenu sous 13 px.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell .msg-time,
body.giri-mobile-shell .msg .time,
body.giri-mobile-shell .m-status,
body.giri-mobile-shell .dm-conv-time{
  font-size:13px !important;
}
body.giri-mobile-shell .role-badge,
body.giri-mobile-shell .rank-badge,
body.giri-mobile-shell .gcd-pastille{
  font-size:12.5px !important;
}
body.giri-mobile-shell .sb-arbre-sub,
body.giri-mobile-shell .acad-section-sub,
body.giri-mobile-shell .sb-sub,
body.giri-mobile-shell .vip-card-sub{
  font-size:13px !important;
}
/* avatars du fil : 38 px → 44, la taille d'un visage qu'on reconnaît */
body.giri-mobile-shell .msg .m-avatar,
body.giri-mobile-shell .msg .avatar,
body.giri-mobile-shell .msg-avatar{
  width:44px !important; height:44px !important; min-width:44px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V4.2 — LE TÉLÉPHONE COUCHÉ N'EST PLUS UN ÉCRAN MORT
   En paysage, le mode « grand rendu » (data-giri-wide, prévu pour l'app qui
   dessine à 980 px) se déclenchait à tort : tout ×2,4, le titre du salon
   écrasé par le sous-titre, et 32 px de haut pour lire. Le JS retire
   maintenant le drapeau ; ici on resserre ce qui reste.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-height:520px) and (orientation:landscape){
  html:not([data-giri-wide]) body.giri-mobile-shell #channelHeader{
    padding-top:5px !important; padding-bottom:5px !important;
  }
  html:not([data-giri-wide]) body.giri-mobile-shell .gcd-bandeau.gcd-note{
    display:none !important;      /* couché, on veut lire le fil, pas l'annonce */
  }
  html:not([data-giri-wide]) body.giri-mobile-shell #inputWrap{
    padding-top:5px !important; padding-bottom:5px !important;
  }
  html:not([data-giri-wide]) body.giri-mobile-shell .giri-bottomnav{
    display:none !important;      /* la barre reprend sa place à la verticale */
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.9 — RÉGLAGE FIN, APRÈS MESURE (23/08, 2ᵉ passe)
   Le premier jet a rendu 8 % d'écran au fil, mais on ne voyait toujours que
   2 messages : le vrai gouffre n'était pas les barres, c'était la BULLE —
   217 px en moyenne, jusqu'à 477 px pour un message long. On resserre la
   bulle sans jamais descendre sous 16 px de texte.
   ─────────────────────────────────────────────────────────────────────────── */
body.giri-mobile-shell #messagesWrap .msg{
  padding:9px 11px !important;
  margin-bottom:7px !important;
}
body.giri-mobile-shell #messagesWrap .msg-content{
  line-height:1.44 !important;
  padding-top:1px !important; padding-bottom:0 !important;
}
body.giri-mobile-shell #messagesWrap .msg-head,
body.giri-mobile-shell #messagesWrap .msg .m-head{
  margin-bottom:3px !important;
}
/* la barre du bas était tombée à 61 px : on lui rend de l'assise (cible 60) */
body.giri-mobile-shell .giri-bottomnav-btn{
  min-height:60px !important;
}
body.giri-mobile-shell .giri-bottomnav{
  padding-top:4px !important;
  padding-bottom:max(6px, env(safe-area-inset-bottom,0px)) !important;
}
/* l'en-tête du salon : le nom sur une ligne, pas deux */
body.giri-mobile-shell #channelHeader .ch-info .ch-name{
  line-height:1.15 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* le bandeau replié gardait 25 px de vide sous le texte */
body.giri-mobile-shell .gcd-bandeau.gcd-note .gcd-txt{ gap:2px !important; }
body.giri-mobile-shell .gcd-bandeau.gcd-note .gmv-plus{ margin-top:2px !important; padding:4px 0 0 !important; }

/* ───────────────────────────────────────────────────────────────────────────
   V4.3 — LES MÊMES RÈGLES, MAIS ASSEZ FORTES POUR GAGNER (3ᵉ passe, mesurée)
   Le banc a montré que la moitié de la section V4.1 ne s'appliquait pas : des
   feuilles plus anciennes ciblent plus précisément (`body.giri-mobile-shell
   .msg .msg-time` bat `body.giri-mobile-shell .msg-time`). On ne devine pas la
   cascade : on relit la mesure et on monte d'un cran. C'est la leçon maison —
   demander au NAVIGATEUR qui gagne, jamais supposer.
   ─────────────────────────────────────────────────────────────────────────── */
html body.giri-mobile-shell .giri-bottomnav .giri-bottomnav-btn .giri-bottomnav-label{
  font-size:13.5px !important;
}
html[data-giri-fs="2"] body.giri-mobile-shell .giri-bottomnav .giri-bottomnav-btn .giri-bottomnav-label{ font-size:15px !important; }
html[data-giri-fs="3"] body.giri-mobile-shell .giri-bottomnav .giri-bottomnav-btn .giri-bottomnav-label{ font-size:16.5px !important; }

html body.giri-mobile-shell #messagesWrap .msg .msg-time,
html body.giri-mobile-shell #messagesWrap .msg .msg-meta-time,
html body.giri-mobile-shell #dmMessages .dm-time{
  font-size:13px !important; opacity:.8 !important;
}
html body.giri-mobile-shell .gcd-bandeau.gcd-note .gcd-pastille{
  font-size:12.5px !important;              /* V1.1 disait 11,5 : c'était trop petit */
}
/* l'avatar d'un message : 44 px de haut pour de bon (la largeur seule ne suffit pas) */
html body.giri-mobile-shell #messagesWrap .msg .msg-avatar,
html body.giri-mobile-shell #messagesWrap .msg .m-avatar{
  width:44px !important; height:44px !important;
  min-width:44px !important; min-height:44px !important;
  flex:0 0 44px !important;
}
/* le mot « Lire » du bandeau : 36 px de large, c'est étroit pour un pouce */
html body.giri-mobile-shell .gcd-bandeau.gcd-note .gmv-plus{
  min-width:68px !important; text-align:left !important;
}
/* le voile de « Mon Profil » était un noir bleuté (6,6,14) : dans une maison en
   marbre, l'ombre est chaude, jamais froide. */
html body.giri-mobile-shell .profile-modal{
  background:rgba(46,36,18,.82) !important;
  backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V1.10 — LES DERNIERS PIXELS RENDUS AU FIL (4ᵉ passe, mesurée)
   Il restait deux gourmands en haut : le sous-titre du salon (« Présente-toi
   et fais connaissance »), déjà écrit en gros dans l'écran d'accueil, et le
   bandeau épinglé sur les petits écrans. Sur un téléphone, ce qui compte c'est
   de VOIR LES GENS PARLER.
   ─────────────────────────────────────────────────────────────────────────── */
html body.giri-mobile-shell #channelHeader .ch-info .ch-desc,
html body.giri-mobile-shell #channelHeader .ch-info small,
html body.giri-mobile-shell #channelHeader .ch-sub{
  display:none !important;
}
@media (max-height:640px){
  html body.giri-mobile-shell .gcd-bandeau.gcd-note:not(.gmv-deplie) .gcd-mot{
    -webkit-line-clamp:1 !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   V3.1 — LE BOUTON D'ENVOI DES MESSAGES PRIVÉS REDEVIENT DE L'OR
   Vu à l'écran en envoyant un vrai message : un rond BLEU-VIOLET dégradé
   (`#7c5cff → #38e8d0`, vestige d'un ancien thème) au milieu du marbre. Le
   même bouton dans le salon est doré depuis longtemps — seul celui des privés
   avait été oublié.
   ─────────────────────────────────────────────────────────────────────────── */
html body .dm-send-btn,
html body #dmSendBtn{
  background:linear-gradient(150deg,#e8c574,#c39a3e) !important;
  color:#2a1e06 !important; -webkit-text-fill-color:#2a1e06 !important;
  border:1px solid rgba(160,120,30,.55) !important;
  box-shadow:0 2px 10px rgba(140,105,35,.35) !important;
}
html body .dm-send-btn:disabled,
html body #dmSendBtn:disabled{
  background:linear-gradient(150deg,#efe4cb,#e2d4b4) !important;
  opacity:.75 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   V3.2 — LA PASTILLE DE CONNEXION NE RECOUVRE PLUS LE NOM DU SALON
   Vue sur iPhone : une pastille VERTE VIF « Connecte » (sans accent) posée à
   8 px du haut, en plein sur l'entête, pendant 2 s à chaque connexion. On la
   descend sous l'entête et on la met dans les tons de la maison.
   ─────────────────────────────────────────────────────────────────────────── */
html body #conn-status{
  top:78px !important;
  padding:7px 18px !important;
  font-size:13px !important;
  border-radius:999px !important;
  box-shadow:0 4px 14px rgba(90,70,30,.22) !important;
}
html body.giri-mobile-shell #conn-status{ top:72px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   V7 — LA CHARTE D'ENTRÉE EN MARBRE PREMIUM
   Ordre de Maha, 23/08 au soir : « la charte est dégueu, mets-la en marbre
   premium, et fais ce qu'il faut pour qu'elle soit parfaite sur téléphone ».

   Elle était en « cérémonie or & nuit » : carte noire, fond bleu nuit, dans une
   maison entièrement en marbre. C'est le PREMIER écran d'un nouveau membre.

   Ce qu'on pose (skill `bouton` — la collection de la maison) :
   · la PIERRE : la texture maison `marbre-affiliation.webp`, pas des veines CSS
     (des courbes à 5 % d'opacité donnent un beige plat — deux tours perdus
     là-dessus le 19/08) ;
   · là où l'on LIT longtemps, la pierre se voile (voile de lait) ;
   · le geste principal : le lingot « L'Affilié », le favori n°1 — recette
     exacte, ni réinventée ni « améliorée » ;
   · un seul lingot par écran, le reste est creux ou nu.
   ⛔ NON scopé mobile : la charte est la même partout, elle passe au marbre
      sur téléphone ET sur le bureau.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la pierre ─────────────────────────────────────────────────────────────── */
html body .giri-charter-gate,
html body .giri-charter-gate.sacred,
html body .giri-charter-view{
  background:
    linear-gradient(180deg, rgba(255,253,248,.30), rgba(255,252,245,.42)),
    url('/css/textures/marbre-affiliation.webp') center center / cover no-repeat,
    linear-gradient(160deg,#fffdf8 0%,#fdfaf2 45%,#f4ecda 100%) !important;
  background-attachment:scroll !important;      /* fixed saccade sur téléphone */
}
html body .giri-charter-gate::after,
html body .giri-charter-gate.sacred::after,
html body .giri-charter-view::after{
  content:'' !important; position:absolute !important; inset:0 !important;
  pointer-events:none !important; z-index:0 !important;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(70% 50% at 12% 108%, rgba(212,168,83,.10), transparent 70%) !important;
}

/* ── la carte : la pierre, voilée là où l'on lit ───────────────────────────── */
html body .giri-charter-gate .giri-charter-card,
html body .giri-charter-gate .giri-charter-card.serment,
html body .giri-charter-view .giri-charter-card,
html body .giri-charter-view .giri-charter-card.serment{
  position:relative !important; z-index:1 !important;
  background:
    linear-gradient(180deg, rgba(255,253,248,.90), rgba(253,250,242,.94)),
    url('/css/textures/marbre-affiliation.webp') center center / cover no-repeat,
    #fffdf8 !important;
  border:1px solid rgba(201,151,27,.42) !important;
  border-radius:22px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 48px rgba(96,74,32,.16),
    0 2px 10px rgba(96,74,32,.08) !important;
}

/* ── l'en-tête ─────────────────────────────────────────────────────────────── */
html body .giri-charter-card .giri-charter-head,
html body .giri-charter-card.serment .giri-charter-head{
  border-bottom:1px solid rgba(201,151,27,.26) !important;
  padding-bottom:14px !important; margin-bottom:16px !important;
}
html body .giri-charter-card .giri-charter-head h2,
html body .giri-charter-card.serment .giri-charter-head h2{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
  font-weight:700 !important; letter-spacing:.005em !important;
}
html body .giri-charter-card .giri-charter-ver,
html body .giri-charter-card.serment .giri-charter-ver{
  background:rgba(201,151,27,.13) !important;
  border:1px solid rgba(201,151,27,.34) !important;
  color:#8a6a1f !important; -webkit-text-fill-color:#8a6a1f !important;
  font-size:12.5px !important; font-variant-numeric:lining-nums !important;
}
html body .giri-charter-card .giri-charter-preamble,
html body .giri-charter-card.serment .giri-charter-preamble{
  color:#5a4a22 !important; -webkit-text-fill-color:#5a4a22 !important;
  font-style:normal !important;                /* l'italique serif fatigue en petit */
  font-size:16.5px !important; line-height:1.62 !important;
}

/* ── les repères, en cartes d'ivoire ───────────────────────────────────────── */
html body .giri-charter-card .giri-charter-list,
html body .giri-charter-card.serment .giri-charter-list{ gap:12px !important; }
html body .giri-charter-card .giri-charter-list li,
html body .giri-charter-card.serment .giri-charter-list li{
  background:linear-gradient(158deg, rgba(255,253,249,.96), rgba(248,243,233,.90)) !important;
  border:1px solid rgba(201,151,27,.28) !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  box-shadow:0 2px 8px rgba(96,74,32,.06) !important;
  align-items:flex-start !important;
}
html body .giri-charter-card .giri-charter-list strong,
html body .giri-charter-card.serment .giri-charter-list strong{
  color:#3a2c0a !important; -webkit-text-fill-color:#3a2c0a !important;
  font-size:16.5px !important; margin-bottom:3px !important;
}
html body .giri-charter-card .giri-charter-list span,
html body .giri-charter-card.serment .giri-charter-list span{
  color:#5a4a22 !important; -webkit-text-fill-color:#5a4a22 !important;
  font-size:15.5px !important; line-height:1.55 !important;
}
html body .giri-charter-card .giri-charter-pic,
html body .giri-charter-card.serment .giri-charter-pic{ filter:none !important; }
html body .giri-charter-card .giri-charter-foot,
html body .giri-charter-card.serment .giri-charter-foot{
  background:rgba(201,151,27,.07) !important;
  border:1px solid rgba(201,151,27,.24) !important;
  border-left:3px solid rgba(201,151,27,.55) !important;
  border-radius:14px !important;
  color:#5a4a22 !important; -webkit-text-fill-color:#5a4a22 !important;
  font-size:15.5px !important; line-height:1.58 !important;
  padding:14px 16px !important;
}

/* ── le mot qu'on laisse en arrivant ───────────────────────────────────────── */
html body .giri-charter-card textarea,
html body .giri-charter-card.serment textarea,
html body .giri-charter-card input[type="text"],
html body .giri-charter-card.serment input[type="text"]{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(201,151,27,.34) !important;
  border-radius:14px !important;
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
  font-size:16px !important; padding:14px 15px !important;
}
html body .giri-charter-card textarea::placeholder,
html body .giri-charter-card.serment textarea::placeholder,
html body .giri-charter-card input[type="text"]::placeholder,
html body .giri-charter-card.serment input[type="text"]::placeholder{
  color:#9a8a63 !important;
}

/* ── le pied : marbre opaque, il ne laisse rien passer au travers ──────────── */
html body .giri-charter-gate .giri-charter-actions,
html body .giri-charter-gate.sacred .giri-charter-actions{
  background:
    linear-gradient(180deg, rgba(255,253,248,0) 0%, rgba(255,253,248,.86) 22%, rgba(255,253,248,.98) 46%, #fffdf8 100%) !important;
  border-top:1px solid rgba(201,151,27,.30) !important;
  box-shadow:0 -6px 22px rgba(96,74,32,.10) !important;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)) !important;
}
html body .giri-charter-gate .giri-charter-actions .giri-charter-check,
html body .giri-charter-gate.sacred .giri-charter-actions .giri-charter-check{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(201,151,27,.34) !important;
  border-radius:14px !important;
  color:#3a2c0a !important; -webkit-text-fill-color:#3a2c0a !important;
  min-height:52px !important; padding:10px 14px !important;
  font-size:15.5px !important; line-height:1.3 !important;
  box-shadow:0 2px 8px rgba(96,74,32,.06) !important;
}
html body .giri-charter-gate #giriCharterCheck,
html body .giri-charter-gate.sacred #giriCharterCheck{
  width:26px !important; height:26px !important; flex:0 0 26px !important;
  accent-color:#b8860b !important;
}

/* ── LE LINGOT « L'AFFILIÉ » — le favori n°1, recette exacte ───────────────── */
html body .giri-charter-gate .giri-charter-accept,
html body .giri-charter-gate.sacred .giri-charter-accept,
html body .giri-charter-view .giri-charter-accept{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:21px !important; font-weight:500 !important; letter-spacing:.2px !important;
  color:#3a2708 !important; -webkit-text-fill-color:#3a2708 !important;
  font-variant-numeric:lining-nums !important;
  padding:18px 34px !important; border-radius:16px !important;
  border:1px solid rgba(160,120,64,.55) !important;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%) !important;
  box-shadow:
    0 2px 6px rgba(74,48,12,.12),
    0 10px 26px rgba(74,48,12,.18),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  text-shadow:0 1px 1px rgba(60,40,4,.20) !important;
  min-height:58px !important;
}
html body .giri-charter-gate .giri-charter-accept:active,
html body .giri-charter-gate.sacred .giri-charter-accept:active{
  transform:translateY(1px) !important;
}
html body .giri-charter-gate .giri-charter-accept:disabled,
html body .giri-charter-gate.sacred .giri-charter-accept:disabled{
  filter:saturate(.55) !important; opacity:.7 !important;
}

/* ── le téléphone : de l'air, et rien qui dépasse ──────────────────────────── */
@media (max-width:620px){
  html body .giri-charter-gate{ padding:12px !important; }
  html body .giri-charter-gate .giri-charter-card{ padding:20px 16px 22px !important; border-radius:18px !important; }
  html body .giri-charter-card .giri-charter-head h2{ font-size:26px !important; line-height:1.12 !important; }
  html body .giri-charter-card .giri-charter-preamble{ font-size:16px !important; }
  html body .giri-charter-gate .giri-charter-actions{ padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px)) !important; gap:10px !important; }
  html body .giri-charter-gate .giri-charter-accept{ width:100% !important; font-size:19.5px !important; padding:16px 20px !important; }
}

/* ── V7 bis — les trois finitions vues à l'écran (2ᵉ regard) ──────────────────
   1. Le vide sous la carte : la réserve pour le pied était posée sur le
      conteneur, donc on voyait 230 px de pierre nue en arrivant en bas. On la
      met DANS la carte : le marbre voilé descend derrière le pied, sans trou.
   2. « Un mot sur ce qui t'amène ici » s'écrivait en ROSE PÂLE sur crème —
      illisible (couleur héritée de la cérémonie nuit, où le fond était noir).
   3. Le liseré du haut de la carte était mauve : il passe à l'or.
   ─────────────────────────────────────────────────────────────────────────── */
/* la carte s'arrête JUSTE au-dessus du pied : ni trou de pierre nue, ni texte
   avalé. 168 = la hauteur du pied (155) + un doigt d'air. */
html body .giri-charter-gate .giri-charter-inner,
html body .giri-charter-view .giri-charter-inner{
  padding-bottom:168px !important;
}
html body .giri-charter-gate .giri-charter-card,
html body .giri-charter-gate .giri-charter-card.serment{
  padding-bottom:26px !important;
  margin-bottom:0 !important;
}
html body .giri-charter-intention,
html body .giri-charter-card.serment .giri-charter-intention{
  background:linear-gradient(158deg, rgba(255,253,249,.94), rgba(248,243,233,.88)) !important;
  border:1px solid rgba(201,151,27,.28) !important;
  border-radius:16px !important;
}
html body .giri-charter-intention label,
html body .giri-charter-card.serment .giri-charter-intention label{
  color:#3a2c0a !important; -webkit-text-fill-color:#3a2c0a !important;
  font-style:normal !important; font-size:16px !important; font-weight:600 !important;
}
html body .giri-charter-intention input,
html body .giri-charter-card.serment .giri-charter-intention input{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(201,151,27,.34) !important;
  color:#2b2318 !important; -webkit-text-fill-color:#2b2318 !important;
  font-size:16px !important;
}
html body .giri-charter-intention input::placeholder{
  color:#9a8a63 !important; -webkit-text-fill-color:#9a8a63 !important; font-style:normal !important;
}
html body .giri-charter-card.serment::before{
  background:linear-gradient(90deg, transparent, rgba(201,151,27,.55), transparent) !important;
}
/* le préambule : sans-serif, il se lit mieux qu'une italique en petit */
html body .giri-charter-card .giri-charter-preamble,
html body .giri-charter-card.serment .giri-charter-preamble{
  font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;
  font-style:normal !important;
}

/* ⛔ LA VRAIE CAUSE DU GRAND VIDE, trouvée en mesurant (3ᵉ regard) :
   `#giriCharterInner{ padding-bottom:52vh !important }` — un demi-écran de
   réserve, posé par un ID. Aucune de nos règles par classe ne pouvait le
   battre : un sélecteur d'ID pèse plus lourd que n'importe quelle pile de
   classes. On repasse devant avec `html body #…` (même ID + deux éléments).
   Le pied fait 155 px : 168 suffisent, et la pierre nue disparaît. */
html body #giriCharterInner,
html body #giriCharterViewInner{
  padding-bottom:168px !important;
}
@media (max-height:640px){
  html body #giriCharterInner{ padding-bottom:158px !important; }
}