/* ============================================================
   Bandeau d'en-tête des pages de l'espace membres
   Une seule définition pour l'Espace Daara, les Enseignements
   Médicaux, la Bibliothèque, le Forum, l'Annuaire et la
   Médiathèque : les six pages s'ouvrent de la même façon, et un
   changement de dessin se fait ici une fois pour toutes.
   Les textes et la photo sont modifiables dans le CMS
   (content/espace-membre-bandeaux.json).

   VERT FONCÉ, et non plus un dégradé clair. Le tableau de bord
   ouvre sur une bannière vert profond ; les pages qui suivaient
   ouvraient sur un vert très pâle, presque blanc, et l'espace
   semblait changer de maison d'une page à l'autre. Le dégradé est
   maintenant celui du tableau de bord, dans les deux thèmes : le
   fond est le même de jour comme de nuit, seuls les textes
   posés dessus restent clairs.
   ============================================================ */

.bm{
  position:relative; overflow:hidden; border-radius:20px; border:0;
  background:linear-gradient(103deg, var(--green-deep, #06441C) 0%, var(--green-deep-2, #0A5324) 48%, var(--green-deep-3, #12622F) 100%);
  padding:26px 28px; margin:24px 0 18px;
}
/* La photo occupe la moitié droite et se fond dans le vert du bandeau. */
.bm-photo{
  position:absolute; inset:0 0 0 auto; width:54%; z-index:0;
  /* La photo s efface en fondu - un masque, et non un voile de couleur :
     le fond est un degrade, un voile uni y laissait une bande visible. */
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 30%, #000 68%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 30%, #000 68%);
}
.bm-photo img{width:100%; height:100%; object-fit:cover;}
.bm-texte{position:relative; z-index:1; display:flex; align-items:flex-start; gap:18px;}
.bm-ic{
  width:64px; height:64px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.24);
  color:var(--gold, #F8B718); font-size:28px;
}
.bm-retour{
  display:inline-flex; align-items:center; gap:7px; font-size:0.82rem;
  color:rgba(255,255,255,0.72); margin-bottom:8px;
}
.bm-retour:hover{color:#FFFFFF;}
.bm h1{
  font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.1rem); font-weight:700;
  color:#FFFFFF; line-height:1.15; margin:0;
}
.bm-soustitre{font-size:0.95rem; color:#FFE3A0; font-weight:600; margin-top:4px;}
.bm-intro{color:rgba(255,255,255,0.86); font-size:0.93rem; margin-top:8px; max-width:58ch;}
.bm-bouton{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:11px 20px; border-radius:999px;
  background:var(--gold, #F8B718); color:var(--green-deep, #06441C); font-weight:600; font-size:0.88rem;
}
.bm-bouton:hover{background:#FFD35C; color:var(--green-deep, #06441C);}
/* Rangée de pastilles sous le texte : mots-clés du forum, types de la
   médiathèque, catégories de la bibliothèque. */
.bm-actions{position:relative; z-index:1; display:flex; gap:9px; flex-wrap:wrap; margin-top:18px;}
.bm-mot{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.24); background:rgba(255,255,255,0.13);
  font-size:0.84rem; font-weight:600; color:#FFFFFF;
}
.bm-mot:hover{background:rgba(255,255,255,0.22);}
.bm-mot .ti{color:#FFE3A0; font-size:16px;}
@media(max-width:620px){
  .bm{padding:20px;}
  .bm-photo{display:none;}
  .bm-texte{gap:14px;}
  .bm-ic{width:52px; height:52px; font-size:23px;}
}