/* R500 — consolidation complète depuis R496 + R497/R498/R499. */
/* R498 — identité de l'Univers dans le salon officiel actif. */
.r287v14RoomHead.r498OfficialRoomHead{
  min-height:68px;
  padding:8px 12px;
  background-color:var(--r287-slate-2);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle strong{
  color:#fffaf2;
  font-size:15px;
  line-height:1.1;
  text-shadow:0 1px 3px rgba(0,0,0,.62);
}
.r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle small{
  margin-top:4px;
  color:rgba(255,250,242,.9);
  font-size:9px;
  line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.68);
}
.r287v14RoomHead.r498OfficialRoomHead .r287v14Tool{
  background:rgba(5,38,52,.72);
  border-color:rgba(255,250,242,.3);
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}
.r287v14RoomHead.r498OfficialRoomHead .r287v14Tool.isActive,
.r287v14RoomHead.r498OfficialRoomHead .r287v14Tool:hover{
  background:#fffaf2;
  color:var(--r287-slate);
}
@media (max-width:1536px){
  .r287v14RoomHead.r498OfficialRoomHead{min-height:62px;padding:7px 10px}
  .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle strong{font-size:14px}
}
@media (max-width:1366px){
  .r287v14RoomHead.r498OfficialRoomHead{min-height:56px;padding:6px 9px}
  .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle strong{font-size:13px}
  .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle small{font-size:8px}
}
@media (width:1280px) and (height:720px){
  .r287v14RoomHead.r498OfficialRoomHead{min-height:52px!important;padding:5px 8px}
  .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle strong{font-size:12px}
  .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle small{margin-top:2px;font-size:7.5px}
}

/* ========================================================================== 
   R499 — finition visuelle validée
   - bannière salon officielle sans filtre global
   - identité officielle dans le volet contextuel
   - onglets salon standard Ethnos
   - logo des créateurs dans Maps sans agrandir les cartes
   - hero photographique Univers des créateurs
   ========================================================================== */

/* 1. Salon officiel : l'image reste naturelle. La lisibilité est portée par
      une plaque locale sous le texte, jamais par un filtre sur toute l'image. */
html body .r287v14RoomHead.r498OfficialRoomHead{
  background-color:#062534;
  background-position:center 42%;
  background-size:cover;
}
html body .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle{
  flex:0 1 auto;
  max-width:min(720px,68%);
  padding:6px 10px 7px;
  border:1px solid rgba(255,250,242,.18);
  border-radius:9px;
  background:rgba(4,25,36,.78);
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
html body .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle strong,
html body .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle small{
  text-shadow:none;
}

/* 2. Logo/photo officielle dans le volet de contexte du salon. */
html body .r287v14ContextHead.r499OfficialContextHead{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:10px;
  align-items:center;
  padding-top:12px;
  padding-bottom:12px;
}
html body .r499OfficialContextLogo:not([hidden]){
  display:block;
  grid-column:1;
  grid-row:1 / 4;
  width:54px;
  height:54px;
  object-fit:cover;
  border:2px solid #e07a3d;
  border-radius:14px;
  background:#fff9ef;
  box-shadow:0 3px 10px rgba(36,31,26,.12);
}
html body .r287v14ContextHead.r499OfficialContextHead .r287v14Eyebrow,
html body .r287v14ContextHead.r499OfficialContextHead h2,
html body .r287v14ContextHead.r499OfficialContextHead p{
  grid-column:2;
  min-width:0;
}

/* 3. Onglet de salon : nouveau standard visuel pour TOUS les salons R287. */
html body.r287v14Active .r287v14Tabs{
  height:44px;
  gap:5px;
  padding:5px 7px 0;
  border-bottom:1px solid rgba(224,122,61,.34);
  background:#062534;
}
html body.r287v14Active .r287v14Tab{
  height:36px;
  gap:7px;
  padding:0 10px;
  border:1px solid rgba(225,213,194,.16);
  border-bottom-color:transparent;
  border-radius:10px 10px 0 0;
  background:rgba(255,249,239,.065);
  color:#d9e3e2;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif);
  font-size:clamp(10px,.67vw,12px);
  font-weight:700;
  letter-spacing:.005em;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
html body.r287v14Active .r287v14Tab:hover{
  border-color:rgba(224,122,61,.50);
  background:rgba(255,249,239,.11);
  color:#fff9ef;
}
html body.r287v14Active .r287v14Tab.isActive{
  position:relative;
  border-color:#d7c6ad;
  border-bottom-color:#f5ead9;
  background:linear-gradient(180deg,#f7ead3 0%,#e7cfaa 100%);
  color:#08263a;
  box-shadow:0 -1px 0 rgba(255,255,255,.22),0 3px 10px rgba(0,0,0,.12);
}
html body.r287v14Active .r287v14Tab.isActive::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:-1px;
  height:2px;
  border-radius:999px 999px 0 0;
  background:#e2793d;
}
html body.r287v14Active .r287v14Tab > span:first-child{
  flex:0 0 auto;
  color:#55b9bf;
  font-size:1.05em;
  font-weight:900;
}
html body.r287v14Active .r287v14Tab.isActive > span:first-child{color:#0e5260}
html body.r287v14Active .r287v14TabLabel{
  font-weight:800;
}
html body.r287v14Active .r287v14TabClose{
  width:20px;
  height:20px;
  border-radius:50%;
  font-size:13px;
  opacity:.78;
}
html body.r287v14Active .r287v14TabClose:hover{
  background:rgba(224,122,61,.15);
  opacity:1;
}

/* 4. Maps > créateurs : ajout du logo sans changer la hauteur standard du bloc. */
html body .salonDrawerListButton.r499OfficialCreatorRow{
  grid-template-columns:38px minmax(0,1fr) 18px !important;
  column-gap:9px !important;
}
html body .r499OfficialCreatorRow .salonDrawerListIcon{
  width:38px !important;
  height:38px;
  display:grid;
  place-items:center;
}
html body .r499OfficialCreatorRow .salonDrawerListIcon .r499DrawerOfficialLogo{
  display:block;
  width:36px !important;
  height:36px !important;
  object-fit:cover;
  border:2px solid #e07a3d;
  border-radius:10px;
  background:#fffaf2;
  box-shadow:0 2px 7px rgba(40,34,28,.12);
}

/* 5. Univers des créateurs : la photo de la carte d'accueil devient un vrai
      bandeau d'ouverture, puis les surfaces crème restent fonctionnelles. */
html body .bodyView-houses.r499UniverseHeroView{
  padding-top:clamp(12px,1.2vw,22px) !important;
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
  align-items:end;
  min-height:clamp(220px,20vw,330px);
  margin:0 0 16px;
  padding:clamp(26px,3vw,54px) clamp(24px,3.2vw,62px);
  overflow:hidden;
  border:1px solid rgba(76,202,198,.58);
  border-radius:20px;
  background-image:url('../assets/images/home-r182/creator-universes.webp');
  background-repeat:no-repeat;
  background-position:center 42%;
  background-size:cover;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(3,22,31,.94) 0%,rgba(3,22,31,.78) 42%,rgba(3,22,31,.30) 70%,rgba(3,22,31,.16) 100%);
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto 0 0;
  height:40%;
  background:linear-gradient(0deg,rgba(3,22,31,.58),transparent);
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero > *{
  position:relative;
  z-index:1;
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero > div:first-child{
  max-width:min(850px,58%);
  align-self:end;
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero > div:first-child > span{
  color:#33d0cf;
  text-shadow:0 2px 10px rgba(0,0,0,.32);
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero h1{
  max-width:820px;
  color:#fff9ef;
  text-shadow:0 2px 12px rgba(0,0,0,.36);
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero p{
  max-width:760px;
  color:#d8e3e2;
  font-size:clamp(12px,.82vw,15px);
  text-shadow:0 1px 8px rgba(0,0,0,.38);
}
html body .bodyView-houses .bodyViewHeader.r499UniverseHero .r493UniverseHeaderTools{
  align-self:end;
  padding:12px;
  border:1px solid rgba(255,249,239,.16);
  border-radius:13px;
  background:rgba(3,22,31,.72);
  box-shadow:0 5px 18px rgba(0,0,0,.16);
}

/* Responsive ciblé : les composants restent lisibles sans rogner la photo. */
@media(max-width:1707px){
  html body .r287v14ContextHead.r499OfficialContextHead{grid-template-columns:52px minmax(0,1fr);column-gap:8px}
  html body .r499OfficialContextLogo:not([hidden]){width:48px;height:48px;border-radius:12px}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{min-height:250px;background-position:center 44%}
}
@media(max-width:1536px){
  html body.r287v14Active .r287v14Tabs{height:42px;padding-top:5px}
  html body.r287v14Active .r287v14Tab{height:34px;padding-inline:8px}
  html body .r499OfficialCreatorRow .salonDrawerListIcon{width:34px !important;height:34px}
  html body .r499OfficialCreatorRow .salonDrawerListIcon .r499DrawerOfficialLogo{width:32px !important;height:32px !important}
  html body .salonDrawerListButton.r499OfficialCreatorRow{grid-template-columns:34px minmax(0,1fr) 16px !important;column-gap:7px !important}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{
    min-height:230px;
    grid-template-columns:1fr;
    align-content:end;
  }
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero > div:first-child{max-width:760px}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero .r493UniverseHeaderTools{width:min(100%,760px)}
}
@media(max-width:1366px){
  html body .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle{max-width:72%;padding:5px 8px 6px}
  html body .r287v14ContextHead.r499OfficialContextHead{grid-template-columns:46px minmax(0,1fr);padding:10px 11px}
  html body .r499OfficialContextLogo:not([hidden]){width:42px;height:42px;border-radius:11px}
  html body.r287v14Active .r287v14Tabs{height:40px;gap:4px;padding:4px 5px 0}
  html body.r287v14Active .r287v14Tab{height:32px;gap:5px;padding-inline:7px;font-size:9.5px}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{min-height:210px;padding:24px 26px;background-position:55% 44%}
}
@media(max-width:1180px){
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero::before{background:linear-gradient(90deg,rgba(3,22,31,.95),rgba(3,22,31,.68) 72%,rgba(3,22,31,.38))}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero > div:first-child{max-width:100%}
}
@media(max-width:720px){
  html body .r287v14RoomHead.r498OfficialRoomHead .r287v14RoomTitle{max-width:78%;padding:4px 7px 5px}
  html body.r287v14Active .r287v14Tabs{height:38px;gap:3px;padding:4px 4px 0}
  html body.r287v14Active .r287v14Tab{height:30px;padding-inline:5px;font-size:8.5px}
  html body.r287v14Active .r287v14TabClose{width:17px;height:17px;font-size:11px}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{min-height:220px;padding:20px 18px;background-position:62% center}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero .r493UniverseHeaderTools{padding:9px}
}
@media (width:1280px) and (height:720px){
  html body.r287v14Active .r287v14Tabs{height:38px !important}
  html body.r287v14Active .r287v14Tab{height:30px !important;font-size:8.5px !important}
  html body .r499OfficialCreatorRow .salonDrawerListIcon{width:30px !important;height:30px}
  html body .r499OfficialCreatorRow .salonDrawerListIcon .r499DrawerOfficialLogo{width:28px !important;height:28px !important}
  html body .salonDrawerListButton.r499OfficialCreatorRow{grid-template-columns:30px minmax(0,1fr) 14px !important;column-gap:6px !important}
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{min-height:185px;padding:18px 20px}
}


/* ========================================================================== 
   R500 — preuves de cascade : ces deux composants étaient écrasés par des
   règles historiques !important (R117 pour le hero, R317 pour les onglets).
   Les valeurs ci-dessous sont donc volontairement explicites et ciblées.
   ========================================================================== */

/* HERO Univers des créateurs : autoriser explicitement l'image éditoriale. */
html body .memberWorkspace.hasBodyView .bodyView-houses .bodyViewHeader.r499UniverseHero,
html body .memberWorkspace.hasSalonContent.hasBodyView .bodyView-houses .bodyViewHeader.r499UniverseHero,
html body .bodyView-houses .bodyViewHeader.r499UniverseHero{
  background-image:url('../assets/images/home-r182/creator-universes.webp') !important;
  background-repeat:no-repeat !important;
  background-position:center 42% !important;
  background-size:cover !important;
  background-color:#062534 !important;
}
@media(max-width:1707px){
  html body .memberWorkspace.hasBodyView .bodyView-houses .bodyViewHeader.r499UniverseHero,
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{background-position:center 44% !important;}
}
@media(max-width:1280px){
  html body .memberWorkspace.hasBodyView .bodyView-houses .bodyViewHeader.r499UniverseHero,
  html body .bodyView-houses .bodyViewHeader.r499UniverseHero{background-position:58% center !important;}
}

/* ONGLET salon : standard visuel R500 réellement prioritaire sur R315/R317. */
html body.r287v14Active .r287v14Tabs{
  height:44px !important;
  gap:5px !important;
  padding:5px 7px 0 !important;
  border-bottom:1px solid rgba(224,122,61,.34) !important;
  background:#062534 !important;
  align-items:start !important;
}
html body.r287v14Active .r287v14Tab{
  height:36px !important;
  gap:7px !important;
  padding:0 12px !important;
  border:1px solid rgba(225,213,194,.20) !important;
  border-bottom-color:transparent !important;
  border-radius:10px 10px 0 0 !important;
  background:rgba(255,249,239,.075) !important;
  color:#e6efee !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.005em !important;
}
html body.r287v14Active .r287v14Tab:hover{
  border-color:rgba(224,122,61,.58) !important;
  background:rgba(255,249,239,.13) !important;
  color:#fff9ef !important;
}
html body.r287v14Active .r287v14Tab.isActive{
  background:linear-gradient(180deg,#faefd9 0%,#e5c99d 100%) !important;
  color:#08263a !important;
  border-color:#d7b98d !important;
  border-bottom-color:#f5ead9 !important;
  box-shadow:0 -1px 0 rgba(255,255,255,.24),0 3px 10px rgba(0,0,0,.12) !important;
}
html body.r287v14Active .r287v14TabLabel{
  color:inherit !important;
  font-size:inherit !important;
  font-weight:800 !important;
  line-height:1 !important;
}
html body.r287v14Active .r287v14TabClose{
  width:20px !important;
  height:20px !important;
  color:inherit !important;
  font-size:13px !important;
  line-height:20px !important;
}
@media(max-width:1536px){
  html body.r287v14Active .r287v14Tabs{height:42px !important;padding:5px 6px 0 !important;}
  html body.r287v14Active .r287v14Tab{height:34px !important;padding:0 10px !important;font-size:11px !important;}
}
@media(max-width:1366px){
  html body.r287v14Active .r287v14Tabs{height:40px !important;gap:4px !important;padding:4px 5px 0 !important;}
  html body.r287v14Active .r287v14Tab{height:33px !important;padding:0 9px !important;font-size:10.5px !important;}
}
@media(width:1280px) and (height:720px){
  html body.r287v14Active .r287v14Tabs{height:38px !important;padding:4px 5px 0 !important;}
  html body.r287v14Active .r287v14Tab{height:31px !important;padding:0 8px !important;font-size:10px !important;}
}