/* ========================================================================== */
/* ETHNOS R180 — bloc central finalisé                                         */
/* - bloc haut agrandi et aéré                                                 */
/* - trajectoire alignée avec l'identité Ethnos                                */
/* - trois portes d'entrée illustrées et fonctionnelles                        */
/* - suppression de la section basse Nomades Créatifs                          */
/* ========================================================================== */

/* Le bloc central conserve strictement la largeur fixée en R179. */
html[data-ethnos-ui="discord-r111"] .memberWorkspace.hasBodyView .bodyView-homeR180{
  padding-bottom:20px !important;
}

/* Bloc haut : environ 50 % plus haut, sans ajouter de cadre intérieur. */
.r180HomeHero{
  height:clamp(430px,45vh,525px) !important;
  min-height:430px !important;
  grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr) !important;
  align-items:stretch !important;
  gap:clamp(28px,2vw,44px) !important;
  padding:clamp(30px,2vw,42px) clamp(28px,2.25vw,46px) !important;
  margin-bottom:14px !important;
}

.r180HomeHeroCopy,
.r180Trajectory{
  align-self:stretch !important;
  min-height:0 !important;
}

.r180HomeHeroCopy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.r180HomeEyebrow,
.r180TrajectoryEyebrow{
  display:block !important;
  margin:0 !important;
  color:var(--r110-orange) !important;
  font-family:var(--font-interface,"Manrope",Arial,sans-serif) !important;
  font-size:clamp(8px,.53vw,11px) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

.r180HomeHero .r180HomeHeroCopy h1{
  margin:16px 0 12px !important;
  font-size:clamp(42px,3vw,62px) !important;
  line-height:1.02 !important;
}

/* Les deux textes demandés reprennent la typographie du titre Bienvenue. */
.r180HomePromise{
  max-width:790px !important;
  margin:0 !important;
  color:#dbe5e5 !important;
  font-family:var(--font-title,"Fraunces",Georgia,serif) !important;
  font-size:clamp(22px,1.55vw,32px) !important;
  font-weight:400 !important;
  line-height:1.28 !important;
  letter-spacing:-.012em !important;
}

.r180HomeIntro{
  max-width:760px !important;
  margin:26px 0 0 !important;
  color:#b9c9cd !important;
  font-size:clamp(11px,.72vw,15px) !important;
  line-height:1.58 !important;
  text-align:justify !important;
  text-justify:inter-word !important;
  hyphens:auto !important;
}

/* Trajectoire : aucun trait vertical et titre orange aligné sur l'eyebrow gauche. */
.r180Trajectory{
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  border-left:0 !important;
}

.r180MembersLine{
  grid-template-columns:clamp(82px,6.3vw,110px) minmax(0,1fr) !important;
  gap:clamp(14px,1vw,22px) !important;
  margin:20px 0 0 !important;
}

.r180TrajectoryHead{
  margin-top:24px !important;
}

.r180TrajectoryManifesto{
  margin:0 !important;
  color:#f5f1e8 !important;
  font-family:var(--font-title,"Fraunces",Georgia,serif) !important;
  font-size:clamp(18px,1.32vw,27px) !important;
  font-weight:400 !important;
  line-height:1.24 !important;
  letter-spacing:-.018em !important;
}

.r180TrajectorySteps{
  margin-top:28px !important;
  gap:clamp(12px,1vw,20px) !important;
}

.r180MilestoneTarget strong{
  font-size:clamp(21px,1.45vw,30px) !important;
}

.r180MilestoneTarget i{
  width:30px !important;
  height:30px !important;
  font-size:17px !important;
}

.r180MilestoneReward{
  grid-template-columns:19px minmax(0,1fr) !important;
  gap:7px !important;
  margin-top:8px !important;
}

.r180MilestoneReward b{
  width:19px !important;
  height:19px !important;
  font-size:13px !important;
}

.r180MilestoneReward span{
  font-size:clamp(9px,.64vw,13px) !important;
  line-height:1.22 !important;
}

.r180TrajectoryFoot{
  position:relative !important;
  left:20px !important;
  margin:26px 0 0 !important;
  font-size:clamp(14px,.96vw,20px) !important;
  text-align:center !important;
}

/* Trois portes d'entrée illustrées : un seul bloc par bouton, aucune carte imbriquée. */
html body .r180Pillars{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:13px !important;
  margin:0 !important;
}

html body .r180Pillars > .r180Pillar{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  min-height:245px !important;
  padding:24px 25px 22px !important;
  text-align:left !important;
  border:1px solid rgba(190,226,231,.20) !important;
  border-radius:17px !important;
  background-position:center !important;
  background-size:cover !important;
  color:#fff !important;
  box-shadow:0 15px 32px rgba(0,0,0,.20) !important;
  transform:translateY(0) !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}

html body .r180Pillars > .r180Pillar::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  background:inherit !important;
  background-position:center !important;
  background-size:cover !important;
  transition:transform .35s ease !important;
}

html body .r180Pillars > .r180Pillar::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:
    linear-gradient(180deg,rgba(2,18,28,.10) 0%,rgba(2,19,29,.46) 38%,rgba(2,18,28,.94) 100%),
    linear-gradient(90deg,rgba(4,35,48,.42),rgba(4,22,33,.12)) !important;
}

html body .r180Pillars > .r180Pillar:hover,
html body .r180Pillars > .r180Pillar:focus-visible{
  transform:translateY(-4px) !important;
  border-color:rgba(49,209,207,.58) !important;
  box-shadow:0 22px 44px rgba(0,0,0,.30),0 0 0 1px rgba(49,209,207,.12) !important;
  outline:none !important;
}

html body .r180Pillars > .r180Pillar:hover::before,
html body .r180Pillars > .r180Pillar:focus-visible::before{
  transform:scale(1.035) !important;
}

html body .r180PillarWorld{
  background-image:url('../assets/images/home-r180/world-planisphere.webp') !important;
  background-position:center 50% !important;
}
html body .r180PillarSalons{
  background-image:url('../assets/images/home-r180/public-salons.webp') !important;
  background-position:center 48% !important;
}
html body .r180PillarCreators{
  background-image:url('../assets/images/home-r180/creator-universes.webp') !important;
  background-position:center 48% !important;
}

html body .r180Pillars > .r180Pillar > i{
  position:absolute !important;
  top:18px !important;
  left:20px !important;
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:50% !important;
  background:rgba(3,31,43,.78) !important;
  color:#65e4de !important;
  font-size:8px !important;
  font-style:normal !important;
  backdrop-filter:blur(5px) !important;
}

html body .r180Pillars > .r180Pillar > span{
  order:1 !important;
  display:block !important;
  margin:0 0 7px !important;
  color:#ff9b5e !important;
  font-size:clamp(7px,.46vw,9px) !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:.15em !important;
  text-shadow:0 2px 8px rgba(0,0,0,.65) !important;
}

html body .r180Pillars > .r180Pillar > h3{
  order:2 !important;
  margin:0 !important;
  color:#fffdf7 !important;
  font-family:var(--font-title,"Fraunces",Georgia,serif) !important;
  font-size:clamp(22px,1.55vw,31px) !important;
  font-weight:400 !important;
  line-height:1.08 !important;
  text-shadow:0 3px 16px rgba(0,0,0,.82) !important;
}

html body .r180Pillars > .r180Pillar > strong{
  order:3 !important;
  display:block !important;
  margin:7px 0 0 !important;
  color:#e8f1ef !important;
  font-family:var(--font-title,"Fraunces",Georgia,serif) !important;
  font-size:clamp(12px,.82vw,16px) !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.78) !important;
}

html body .r180Pillars > .r180Pillar > p{
  order:4 !important;
  min-height:0 !important;
  max-width:94% !important;
  margin:8px 0 0 !important;
  color:#d6e2e2 !important;
  font-size:clamp(8px,.55vw,11px) !important;
  line-height:1.42 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.82) !important;
}

html body .r180Pillars > .r180Pillar > b{
  order:5 !important;
  align-self:flex-start !important;
  margin:16px 0 0 !important;
  padding-bottom:3px !important;
  border-bottom:1px solid rgba(49,209,207,.48) !important;
  color:#fff !important;
  font-size:clamp(8px,.55vw,11px) !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
  text-shadow:0 2px 8px rgba(0,0,0,.8) !important;
}

/* Le bloc central devient vide lorsque le bouton Salons guide vers le Tchat. */
.bodyView-salonFocusR180{
  width:100% !important;
  min-height:100% !important;
  background:transparent !important;
}

@keyframes r180SalonPulseOnce{
  0%,100%{box-shadow:inherit;filter:none}
  28%{box-shadow:0 0 0 4px rgba(49,209,207,.28),0 0 42px rgba(49,209,207,.62);filter:brightness(1.18)}
  62%{box-shadow:0 0 0 2px rgba(245,138,75,.24),0 0 24px rgba(245,138,75,.35);filter:brightness(1.08)}
}
.memberExplorerPanel.r180SalonPulse{
  animation:r180SalonPulseOnce 1.05s ease-out 1 !important;
}

/* Adaptations sans modifier les volets, le dock ni la colonne droite. */
@container (max-width:1180px){
  .r180HomeHero{
    grid-template-columns:minmax(310px,.83fr) minmax(0,1.17fr) !important;
    gap:22px !important;
    padding-inline:24px !important;
  }
  .r180HomeHero .r180HomeHeroCopy h1{font-size:clamp(36px,3.6cqw,51px) !important}
  .r180HomePromise{font-size:clamp(19px,2.05cqw,27px) !important}
  .r180HomeIntro{font-size:clamp(9px,.9cqw,12px) !important}
  .r180TrajectoryManifesto{font-size:clamp(16px,1.65cqw,22px) !important}
  .r180MilestoneTarget strong{font-size:clamp(18px,1.8cqw,24px) !important}
  .r180MilestoneReward span{font-size:clamp(8px,.86cqw,10px) !important}
  html body .r180Pillars > .r180Pillar{min-height:225px !important;padding:20px 19px 18px !important}
}

@container (max-width:900px){
  .r180HomeHero{
    height:auto !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:28px !important;
  }
  .r180Trajectory{
    padding-top:22px !important;
    border-top:1px solid rgba(190,226,231,.18) !important;
  }
  .r180TrajectoryEyebrow{margin-bottom:0 !important}
  html body .r180Pillars{grid-template-columns:1fr !important}
  html body .r180Pillars > .r180Pillar{min-height:230px !important}
}

@container (max-width:660px){
  .r180TrajectorySteps{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .r180TrajectoryFoot{left:0 !important}
}

@media(max-height:900px) and (min-width:901px){
  .r180HomeHero{
    height:430px !important;
    min-height:430px !important;
    padding-block:25px !important;
  }
  .r180HomeHero .r180HomeHeroCopy h1{margin-top:13px !important;font-size:clamp(36px,2.55vw,50px) !important}
  .r180HomePromise{font-size:clamp(19px,1.3vw,26px) !important}
  .r180HomeIntro{margin-top:20px !important;font-size:clamp(9px,.62vw,12px) !important;line-height:1.5 !important}
  .r180MembersLine{margin-top:15px !important}
  .r180TrajectoryHead{margin-top:18px !important}
  .r180TrajectoryManifesto{font-size:clamp(16px,1.08vw,21px) !important}
  .r180TrajectorySteps{margin-top:18px !important}
  .r180TrajectoryFoot{margin-top:16px !important}
  html body .r180Pillars > .r180Pillar{min-height:215px !important}
}

/* Correctifs de contrôle visuel R180 : alignement strict et typo officielle. */
.r180HomeHeroCopy{justify-content:flex-start !important}
.r180HomePromise,
.r180TrajectoryManifesto{
  font-family:"Fraunces",Georgia,serif !important;
}
@media(max-height:900px) and (min-width:901px){
  html body .r180Pillars > .r180Pillar{min-height:185px !important;padding-top:18px !important;padding-bottom:16px !important}
  html body .r180Pillars > .r180Pillar > p{margin-top:6px !important;line-height:1.32 !important}
  html body .r180Pillars > .r180Pillar > b{margin-top:10px !important}
}
/* La règle globale .memberApp p/spans est plus spécifique : verrouillage éditorial. */
html body .memberApp .r180HomeHero .r180HomePromise,
html body .memberApp .r180Trajectory .r180TrajectoryManifesto{
  font-family:"Fraunces",Georgia,serif !important;
  font-weight:400 !important;
}
@media(max-height:900px) and (min-width:901px){
  html body .r180Pillars > .r180Pillar{
    min-height:172px !important;
    padding:14px 17px 13px !important;
  }
  html body .r180Pillars > .r180Pillar > i{top:12px !important;left:14px !important;width:30px !important;height:30px !important}
  html body .r180Pillars > .r180Pillar > span{margin-bottom:4px !important;font-size:7px !important}
  html body .r180Pillars > .r180Pillar > h3{font-size:clamp(18px,1.35vw,24px) !important;line-height:1.04 !important}
  html body .r180Pillars > .r180Pillar > strong{margin-top:4px !important;font-size:clamp(9px,.68vw,12px) !important}
  html body .r180Pillars > .r180Pillar > p{margin-top:4px !important;font-size:clamp(6.5px,.48vw,8.5px) !important;line-height:1.25 !important}
  html body .r180Pillars > .r180Pillar > b{margin-top:7px !important;font-size:clamp(6.5px,.48vw,8.5px) !important}
}
@media(max-height:760px) and (min-width:901px){
  .r180HomeHero{
    height:390px !important;
    min-height:390px !important;
    padding-block:21px !important;
  }
  .r180HomeHero .r180HomeHeroCopy h1{margin-top:11px !important;font-size:clamp(32px,2.45vw,43px) !important}
  .r180HomePromise{font-size:clamp(17px,1.24vw,22px) !important}
  .r180HomeIntro{margin-top:16px !important;font-size:clamp(8px,.58vw,10px) !important;line-height:1.42 !important}
  .r180MembersLine{margin-top:12px !important}
  .r180TrajectoryHead{margin-top:14px !important}
  .r180TrajectoryManifesto{font-size:clamp(14px,1vw,18px) !important;line-height:1.16 !important}
  .r180TrajectorySteps{margin-top:14px !important}
  .r180TrajectoryFoot{margin-top:12px !important}
  html body .r180Pillars > .r180Pillar{min-height:168px !important}
}
/* Action toujours visible au bas de chaque porte d'entrée. */
html body .r180Pillars > .r180Pillar{padding-bottom:48px !important}
html body .r180Pillars > .r180Pillar > b{
  position:absolute !important;
  left:25px !important;
  bottom:18px !important;
  margin:0 !important;
}
@media(max-height:900px) and (min-width:901px){
  html body .r180Pillars > .r180Pillar{padding-bottom:34px !important}
  html body .r180Pillars > .r180Pillar > b{left:17px !important;bottom:11px !important;margin:0 !important}
}
