/* ═══════════════════════════════════════════════════════════════════════════
   LISIBILITÉ DU SALON — ORDINATEUR (31/08/2026)

   Maha, écran 1920×1080 : « côté taille de la police, je trouve ça si petit
   que je ne suis pas heureux », « la police est trop étrange ».

   Mesuré à l'écran (styles calculés, thème marbre, 1920×1080) :
     · .msg-content ....... 14,4 px  (.9rem de communaute-base.css:609)
     · .msg-author ........ 17,0 px  → LE NOM ÉTAIT PLUS GROS QUE LA PAROLE
     · #msgInput .......... 16,64 px en « Cormorant Garamond » = une SERIF de
       livre dans un champ de chat → c'est ça, « la police étrange »
     · #dmInput ........... 14,4 px
   Toutes les grandes tailles déjà écrites dans la page (24, 30, 44 px) sont
   enfermées derrière `body.giri-mobile-shell` ou `html[data-giri-wide]` :
   l'ordinateur n'en a JAMAIS profité, il est resté au .9rem d'origine.

   Ce qu'on pose ici : la parole passe devant le nom, une ligne de lecture
   qui ne traverse plus tout l'écran, et une seule voix typographique —
   on écrit dans la même police qu'on lit.

   ⛔ Scopé ≥ 901 px : on ne touche pas au téléphone (chantier séparé).
   Ce fichier est le DERNIER chargé : à spécificité égale, il gagne.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px){

  /* ─── 1. LA PAROLE PASSE DEVANT LE NOM ─────────────────────────────────── */
  html body .msg .msg-content{
    font-size:17px !important;
    line-height:1.62 !important;
    letter-spacing:.002em !important;
    /* une ligne de ~78 caractères : au-delà, l'œil perd le début de la suivante.
       Les bulles font 1154 px, soit ~140 caractères par ligne avant ce plafond. */
    max-width:78ch;
  }

  /* Le nom : présent, doré, mais il ne crie plus plus fort que le message. */
  html body .msg .msg-author{
    font-size:16px !important;
    letter-spacing:.005em !important;
  }

  /* L'heure reste discrète, sans descendre sous le plancher de lisibilité. */
  html body .msg .msg-time{ font-size:12.5px !important; }

  /* Les mentions de rôle (Guide, Étudiant, Méditant…) : lisibles, pas criardes. */
  html body .msg .gamif-badge,
  html body .msg .msg-badge{ font-size:12px !important; }

  /* Une réponse citée reste secondaire mais déchiffrable. */
  html body .msg .reply-ref{ font-size:13.5px !important; line-height:1.45 !important; }

  /* ─── 2. UNE SEULE VOIX : ON ÉCRIT DANS LA POLICE QU'ON LIT ─────────────
     Le champ était en Cormorant Garamond — une serif de livre, dessinée pour
     de grands corps sur du papier. Dans un champ de saisie de 17 px, elle
     paraît maigre et étrangère au reste de l'interface. On revient à Inter,
     la police des messages : ce qu'on tape ressemble enfin à ce qui s'affiche.
     Le bloc d'origine porte `!important` sur `#msgInput` (1,0,0) :
     `html body .msg-input-box #msgInput` (1,0,3) le bat proprement. */
  html body .msg-input-box #msgInput,
  html body .msg-input-box textarea{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
    font-size:17px !important;
    line-height:1.5 !important;
    letter-spacing:0 !important;
  }
  html body .msg-input-box #msgInput::placeholder,
  html body .msg-input-box textarea::placeholder{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
    font-style:normal !important;   /* l'italique de livre n'a rien à faire ici */
    font-size:16px !important;
    letter-spacing:.01em !important;
  }

  /* ─── 3. MESSAGES PRIVÉS — LA BARRE D'ÉCRITURE REPOSE SUR LE SOL ────────
     `#dmOverlay{padding-bottom:96px !important}` (ligne ~16970) a été écrit
     pour dégager la barre de navigation du bas SUR TÉLÉPHONE, mais posé hors
     de toute media query : sur ordinateur, où cette barre n'existe pas, il
     laissait 96 px de vide blanc SOUS le champ « Écrire un message… », qui
     flottait sans rien en dessous. Mesuré : panneau 1080 px, barre à 984. */
  html body #dmOverlay{ padding-bottom:0 !important; }

  /* Le champ privé parle la même langue que le champ public. */
  html body .dm-input-box #dmInput,
  html body .dm-input-box textarea{
    font-size:16px !important;
    line-height:1.5 !important;
    padding:10px 0 !important;
  }
  html body .dm-input-wrap{ padding:10px 14px 14px !important; }
  html body .dm-input-box{ padding:5px 8px 5px 16px !important; }

  /* Le rond d'envoi faisait 32 px : sous la cible confortable. */
  html body .dm-send-btn{
    width:40px !important; height:40px !important;
    min-width:40px !important; min-height:40px !important;
    font-size:1.05rem !important;
  }
  html body .dm-attach-btn{
    width:40px !important; height:40px !important;
    min-width:40px !important; min-height:40px !important;
  }

  /* Les bulles privées : même confort de lecture que le salon. */
  html body .dm-bubble{ font-size:15.5px !important; line-height:1.5 !important; }
  html body .dm-time{ font-size:12px !important; }
  html body .dm-header-info h3{ font-size:1.02rem !important; }

}

/* ─── 4. GRAND ÉCRAN (≥ 1600 px) — un cran de plus, l'écran le permet ───── */
@media (min-width: 1600px){
  html body .msg .msg-content{ font-size:17.5px !important; }
  html body .msg-input-box #msgInput,
  html body .msg-input-box textarea{ font-size:17.5px !important; }
}

/* ═══ L'ANCRE DU BAS — la pastille de retour au dernier message (31/08/2026) ═══
   Elle n'apparaît QUE si l'on a délibérément remonté ET qu'un message est arrivé.
   Posée au-dessus du composer, centrée : la colonne de droite est déjà occupée
   par le bouton flottant #ga-fab, et un flottant qui se pose sur un geste, on
   l'a déjà payé une fois. */
/* ⛔ Sans `!important`, les règles génériques des boutons du composer gagnaient :
   la pastille sortait TRANSLUCIDE, le texte du message se lisait au travers.
   Vu à l'œil sur la capture — aucune mesure ne l'aurait signalé, l'élément
   était bien « visible » et son opacité valait 1. */
html body #giriAncrePastille.giri-ancre-pastille{
  position:absolute !important; left:50% !important;
  transform:translateX(-50%) translateY(10px) !important;
  bottom:calc(100% + 12px) !important; right:auto !important; top:auto !important;
  display:none; align-items:center !important; gap:8px !important;
  padding:10px 20px !important; border-radius:999px !important; cursor:pointer !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:700 !important;
  color:#3a2a06 !important; letter-spacing:.01em !important; white-space:nowrap !important;
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%) !important;
  background-color:#e8b93a !important;      /* le dégradé peut être ignoré, la couleur non */
  border:1px solid rgba(138,101,18,.55) !important;
  box-shadow:0 8px 26px rgba(90,62,6,.38), inset 0 1px 0 rgba(255,255,255,.5) !important;
  opacity:0; pointer-events:none;
  backdrop-filter:none !important; filter:none !important;
  transition:opacity .22s ease, transform .22s ease;
  z-index:60 !important; min-width:0 !important; min-height:0 !important; width:auto !important;
}
html body #giriAncrePastille.giri-ancre-pastille.visible{
  display:inline-flex !important; opacity:1 !important; pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
html body #giriAncrePastille.giri-ancre-pastille:hover{ filter:brightness(1.06) !important; }
html body #giriAncrePastille.giri-ancre-pastille:active{ transform:translateX(-50%) translateY(1px) !important; }
html body #giriAncrePastille.giri-ancre-pastille .gap-fleche{ font-size:15px !important; line-height:1 !important; color:#3a2a06 !important; }
html body #giriAncrePastille.giri-ancre-pastille .gap-texte{ color:#3a2a06 !important; }

/* le composer est le repère : la pastille se pose juste au-dessus de lui */
.msg-input-wrap{ position:relative; }

@media (max-width:600px){
  html body #giriAncrePastille.giri-ancre-pastille{ font-size:13px !important; bottom:calc(100% + 8px) !important; padding:10px 14px !important; }
  html body #giriAncrePastille.giri-ancre-pastille .gap-texte{ display:none !important; }   /* la flèche suffit sur un écran étroit */
}

/* ═══ LA PORTE DES NOTIFICATIONS (31/08/2026) ═══════════════════════════════
   Une cloche dans le pied de la barre latérale, et un panneau de marbre qui
   dit la vérité de la situation. Tout est en ID : les boutons de cette barre
   et les modales de la page portent des règles `!important` qu'une classe
   ne bat pas — la leçon du lingot translucide, payée le même jour. */

#giriNotifCloche.gnp-cloche{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:#8a6512 !important; position:relative;
}
#giriNotifCloche.gnp-cloche svg{ display:block; }
#giriNotifCloche.gnp-cloche-eteinte{ opacity:.72 !important; }
/* une pastille d'or quand la cloche est éteinte : ça se remarque sans crier */
#giriNotifCloche.gnp-cloche-eteinte::after{
  content:''; position:absolute; top:3px; right:3px;
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ffe9a8 0%, #e8b93a 46%, #b8801c 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75);
}

#giriNotifPorteVoile.giri-notif-porte-voile{
  position:fixed !important; inset:0 !important; z-index:2147483200 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:22px !important; background:rgba(28,20,8,.52) !important;
  backdrop-filter:blur(5px); opacity:0; transition:opacity .25s ease;
}
#giriNotifPorteVoile.visible{ opacity:1; }

#giriNotifPorteVoile .giri-notif-porte{
  position:relative; width:min(470px, 100%); max-height:88vh; overflow-y:auto;
  padding:32px 30px 26px; border-radius:20px; text-align:center;
  background:linear-gradient(168deg, #fffdf7 0%, #fdf8ea 52%, #f7eed8 100%);
  border:1px solid rgba(184,128,28,.30);
  box-shadow:0 26px 70px rgba(60,42,8,.36), inset 0 1px 0 rgba(255,255,255,.85);
  transform:translateY(10px) scale(.985); transition:transform .28s cubic-bezier(.2,.9,.3,1);
  font-family:'Inter',system-ui,sans-serif; color:#3a2e1c;
}
#giriNotifPorteVoile.visible .giri-notif-porte{ transform:none; }

/* la boule d'or de la maison, jamais un rond dessiné */
#giriNotifPorteVoile .gnp-orbe{
  width:58px; height:58px; margin:0 auto 16px;
  background:url('/arbre/img/golden-ball.png') center/contain no-repeat;
  filter:drop-shadow(0 6px 16px rgba(150,110,20,.38));
}
#giriNotifPorteVoile .gnp-titre{
  margin:0 0 10px; font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.72rem; font-weight:700; line-height:1.18; color:#2e1f06;
  font-variant-numeric:lining-nums;
}
#giriNotifPorteVoile .gnp-corps{
  margin:0 0 18px; font-size:15px; line-height:1.62; color:#5a4a30;
}
#giriNotifPorteVoile .gnp-etapes{
  list-style:none; margin:0 0 20px; padding:0; text-align:left;
}
#giriNotifPorteVoile .gnp-etapes li{
  display:flex; align-items:flex-start; gap:11px; padding:10px 12px; margin-bottom:8px;
  background:rgba(255,255,255,.62); border:1px solid rgba(184,128,28,.18);
  border-radius:12px; font-size:14.5px; line-height:1.5; color:#4a3c26;
}
#giriNotifPorteVoile .gnp-etapes b{ color:#7a5a10; font-weight:700; }
#giriNotifPorteVoile .gnp-num{
  flex:0 0 auto; width:23px; height:23px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:#3a2a06;
  background:linear-gradient(135deg,#f7e3a4,#e8b93a);
  font-variant-numeric:lining-nums;
}
#giriNotifPorteVoile .gnp-actions{ display:flex; flex-direction:column; gap:10px; }
#giriNotifPorteVoile .gnp-lingot{
  width:100%; padding:15px 22px; border-radius:14px; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:16px; font-weight:700;
  color:#3a2a06; letter-spacing:.01em;
  background:linear-gradient(135deg,#f7e3a4 0%,#e8b93a 48%,#c9971b 100%);
  border:1px solid rgba(138,101,18,.5);
  box-shadow:0 8px 24px rgba(120,85,10,.30), inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .18s ease, transform .12s ease;
}
#giriNotifPorteVoile .gnp-lingot:hover{ filter:brightness(1.05); }
#giriNotifPorteVoile .gnp-lingot:active{ transform:translateY(1px); }
#giriNotifPorteVoile .gnp-lingot:disabled{ opacity:.62; cursor:default; }
#giriNotifPorteVoile .gnp-nu{
  width:100%; padding:12px 18px; border-radius:12px; cursor:pointer;
  background:transparent; border:1px solid rgba(120,95,45,.28);
  font-family:'Inter',system-ui,sans-serif; font-size:14.5px; font-weight:600; color:#6b5a3c;
}
#giriNotifPorteVoile .gnp-nu:hover{ background:rgba(184,128,28,.07); }
#giriNotifPorteVoile .gnp-note{
  margin-top:14px; font-size:13.5px; line-height:1.5; color:#7a6a4c; min-height:1px;
}
#giriNotifPorteVoile .gnp-fermer{
  position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%;
  background:transparent; border:0; cursor:pointer;
  font-size:24px; line-height:1; color:#8a7550;
}
#giriNotifPorteVoile .gnp-fermer:hover{ background:rgba(120,95,45,.10); color:#3a2e1c; }

@media (max-width:600px){
  #giriNotifPorteVoile .giri-notif-porte{ padding:28px 20px 22px; border-radius:18px; }
  #giriNotifPorteVoile .gnp-titre{ font-size:1.5rem; }
  #giriNotifPorteVoile .gnp-corps{ font-size:14.5px; }
}