/* =========================================================
   Rising Horizon — feuille de styles
   ========================================================= */

/* ---------- thème ---------- */
:root{
  --bg:#0B0806; --bg-2:#120D09; --bg-3:#181109;
  --txt:#EFE3CC; --txt-soft:#B7A88C; --txt-faint:rgba(239,227,204,.52);
  --gold:#C9982F; --gold-br:#EBC163; --rust:#A8442C;
  --line:rgba(201,152,47,.24);
  --btn-bg:#8A6A4B; --btn-fg:#1B140E; --btn-bg-hover:#A38058;
  --live:#D23B26; --live-dot:#E0442E;
  --twitch:#9146FF; --youtube:#FF0033;
}
html[data-theme="jour"]{
  --bg:#1C1510; --bg-2:#241A12; --bg-3:#2E2116;
  --txt:#F6EEDC; --txt-soft:#C9B896; --txt-faint:rgba(246,238,220,.58);
  --gold:#D9A94A; --gold-br:#F4CE7A; --rust:#C05537;
  --line:rgba(217,169,74,.28);
  --btn-bg:var(--gold-br); --btn-fg:#120D09; --btn-bg-hover:#fff;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--txt); overflow-x:clip; text-wrap:pretty;
  font-family:Barlow, system-ui, sans-serif; font-size:16px; line-height:1.6;
}
a{ color:var(--gold-br); text-decoration:none; }
a:hover{ color:var(--rust); }
img{ display:block; max-width:100%; }
button{ font:inherit; }
::selection{ background:rgba(201,152,47,.35); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
main{ flex:1; }
[hidden]{ display:none !important; }

/* ---------- animations ---------- */
@keyframes rh-pan{ 0%{transform:scale(1.12) translate3d(-1.5%,0,0);} 50%{transform:scale(1.18) translate3d(1.5%,-1%,0);} 100%{transform:scale(1.12) translate3d(-1.5%,0,0);} }
@keyframes rh-dust{ 0%{transform:translate3d(0,0,0); opacity:0;} 15%{opacity:.6;} 85%{opacity:.4;} 100%{transform:translate3d(140px,-120px,0); opacity:0;} }
@keyframes rh-haze{ 0%{transform:translate3d(-6%,0,0);} 100%{transform:translate3d(6%,0,0);} }
@keyframes rh-slide{ 0%{opacity:1;} 44%{opacity:1;} 56%{opacity:0;} 94%{opacity:0;} 100%{opacity:1;} }
@keyframes rh-up{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.09; mix-blend-mode:overlay; filter:url(#rh-n);
}

/* ---------- typographie commune ---------- */
.kicker{
  display:block; margin-bottom:10px;
  font-family:Oswald, sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--rust);
}
.kicker--gold{ color:var(--gold); margin-bottom:14px; }
.title{
  margin:0; font-family:Oswald, sans-serif; font-weight:700; line-height:1;
  text-transform:uppercase; color:#fff;
}
.title--xl{ font-size:clamp(28px,4vw,52px); }
.title--lg{ font-size:clamp(28px,3.6vw,46px); }
.title--md{ font-size:clamp(26px,3.4vw,44px); }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px;
  font-family:Oswald, sans-serif; font-size:13.5px; letter-spacing:.16em; text-transform:uppercase;
}
.btn--ghost{ font-weight:500; color:var(--txt); border:1px solid var(--line); }
.btn--ghost:hover{ color:var(--gold-br); border-color:var(--gold-br); }
.btn--solid{
  font-weight:600; padding:14px 28px; color:var(--btn-fg); background:var(--btn-bg);
  clip-path:polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%);
}
.btn--solid:hover{ color:var(--btn-fg); background:var(--btn-bg-hover); }

.badge{
  display:inline-flex; align-items:center; padding:3px 8px;
  font-family:Oswald, sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.3;
}
.badge--live{ color:#fff; background:var(--live); }

/* ---------- en-tête ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:linear-gradient(180deg, rgba(8,6,4,.92), rgba(8,6,4,.55) 70%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.nav{
  max-width:1560px; margin:0 auto; padding:12px clamp(16px,3vw,44px);
  display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(10px,1.6vw,30px);
}
.nav__logo{ display:flex; align-items:center; gap:10px; flex:none; }
.nav__wordmark{ height:clamp(26px,3.4vw,34px); width:auto; flex:none; }
.nav__mark{ display:none; height:clamp(26px,3.4vw,32px); width:auto; flex:none; }
.nav__live{ height:20px; padding:0 8px; font-size:11px; }
.nav__links{
  display:flex; align-items:center; gap:clamp(12px,1.5vw,24px); margin-left:8px;
  flex:1 1 auto; flex-wrap:nowrap; min-width:0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
.nav__links::-webkit-scrollbar{ display:none; }
.nav__links a{
  font-family:Oswald, sans-serif; font-size:12px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt); white-space:nowrap;
}
.nav__links a:hover{ color:var(--gold-br); }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; }
.nav__cta{
  font-family:Oswald, sans-serif; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap; padding:9px 18px;
  color:var(--btn-fg); background:var(--btn-bg);
  clip-path:polygon(0 0, 100% 0, 100% 68%, calc(100% - 10px) 100%, 0 100%);
}
.nav__cta:hover{ color:var(--btn-fg); background:var(--btn-bg-hover); }

.theme-toggle{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px 0 8px;
  border-radius:999px; border:1px solid var(--line); background:rgba(0,0,0,.4);
  color:var(--gold-br); cursor:pointer; flex:none;
}
.theme-toggle:hover{ border-color:var(--gold-br); }
.theme-toggle span{ font-family:Oswald, sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
html[data-theme="jour"] .icon-moon{ display:none; }
html:not([data-theme="jour"]) .icon-sun{ display:none; }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; align-items:flex-start;
  padding:clamp(88px,10vh,108px) clamp(20px,3vw,44px) 0;
}
.hero__bg{ position:absolute; inset:0; z-index:-5; overflow:hidden; background:#0B0806; }
.hero__bg div{ position:absolute; inset:-6%; background-size:cover; }
.hero__bg-1{ background-image:url('../assets/fond-western.webp'); background-position:center 40%; animation:rh-pan 40s ease-in-out infinite, rh-slide 18s linear infinite 0s; }
.hero__bg-2{ background-image:url('../assets/fond-western-nuit.webp'); background-position:center 45%; animation:rh-pan 40s ease-in-out infinite reverse, rh-slide 18s linear infinite 9s; }
.hero__veil-h{ position:absolute; inset:0; z-index:-4; background:linear-gradient(90deg, rgba(8,6,4,.94) 0%, rgba(8,6,4,.72) 34%, rgba(8,6,4,.18) 62%, rgba(8,6,4,.55) 100%); }
.hero__veil-v{ position:absolute; inset:0; z-index:-4; background:linear-gradient(180deg, rgba(8,6,4,.75) 0%, transparent 26%, transparent 52%, rgba(8,6,4,.92) 100%); }
.hero__haze{ position:absolute; left:-10%; right:-10%; bottom:6%; height:34%; z-index:-3; background:linear-gradient(180deg, transparent, rgba(201,152,47,.10) 60%, transparent); filter:blur(22px); animation:rh-haze 24s ease-in-out infinite alternate; }
.hero__dust{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.hero__dust i{ position:absolute; border-radius:50%; background:rgba(255,236,196,.8); animation:rh-dust 20s linear infinite; }

.hero__inner{
  position:relative; z-index:2; width:100%; max-width:1560px; margin:0 auto;
  padding-bottom:clamp(16px,2vh,28px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  animation:rh-up .9s ease both;
}
.hero__logo{ width:min(760px,82vw); height:auto; margin:0 auto 20px; filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)); }
.hero__eyebrow{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; }
.hero__eyebrow i{ width:42px; height:1px; background:var(--gold); }
.hero__eyebrow span{ font-family:Oswald, sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-br); }
.hero__text{ margin:0 auto 26px; max-width:52ch; font-size:16.5px; line-height:1.6; color:var(--txt-soft); }
.cta-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---------- sections ---------- */
.section{ scroll-margin-top:64px; padding:clamp(46px,6vw,78px) clamp(20px,3vw,44px); background:var(--bg); }
.section--alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.wrap{ max-width:1560px; margin:0 auto; }
.wrap--narrow{ max-width:1180px; margin:0 auto; }

/* système RP */
.rp-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:30px; }
.rp-grid article{ position:relative; background:var(--bg-2); padding:24px clamp(18px,2vw,26px); transition:background .22s ease, box-shadow .22s ease; }
.rp-grid article:hover{ z-index:1; background:var(--bg-3); box-shadow:inset 3px 0 0 var(--gold-br), inset 0 0 0 1px var(--gold-br); }
.rp-grid__num{ display:block; margin-bottom:10px; font-family:Oswald, sans-serif; font-size:11px; letter-spacing:.26em; color:var(--gold); }
.rp-grid h3{ margin:0 0 8px; font-family:Oswald, sans-serif; font-weight:600; font-size:18px; text-transform:uppercase; color:#fff; }
.rp-grid p{ margin:0; font-size:15px; color:var(--txt-soft); }
.rp-grid .soon{ font-family:Oswald, sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* carte */
.map-layout{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:clamp(20px,3vw,48px); align-items:center; }
.map-intro h2{ font-size:clamp(26px,3.2vw,42px); line-height:1.02; margin-bottom:14px; }
.map-intro p{ margin:0 0 16px; max-width:44ch; font-size:15.5px; color:var(--txt-soft); }
.map-frame{ position:relative; border:1px solid var(--line); background:#000; padding:8px; }
.map-view{ position:relative; overflow:hidden; aspect-ratio:5000 / 3612; background:#100B07; touch-action:none; }
.map-view img{
  position:absolute; left:50%; top:50%; max-width:none; width:100%; height:100%;
  object-fit:cover; transform:translate(-50%,-50%); transform-origin:center center; user-select:none;
}
.map-tools{ position:absolute; top:18px; right:18px; display:flex; flex-direction:column; gap:6px; }
.map-tools button{
  width:34px; height:34px; font-family:Oswald, sans-serif; font-size:17px;
  color:var(--txt); background:rgba(10,7,5,.85); border:1px solid var(--line); cursor:pointer;
}
.map-tools button:hover{ background:var(--gold-br); color:#120D09; }
.map-hint{ margin:12px 0 0; text-align:center; font-family:Oswald, sans-serif; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-faint); }

/* vidéo */
.center{ text-align:center; }
.embed{ border:1px solid var(--line); background:#000; padding:8px; }
.embed__ratio{ position:relative; aspect-ratio:16 / 9; }
.embed__ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* appel final */
.cta-final{ text-align:center; background:var(--bg-2); padding:clamp(54px,7vw,92px) clamp(20px,3vw,44px); }
.cta-final h2{ margin:0 0 32px; font-family:Oswald, sans-serif; font-weight:700; font-size:clamp(30px,4.6vw,62px); line-height:.98; text-transform:uppercase; color:#fff; }

/* ---------- pages internes ---------- */
.page{ padding:clamp(104px,12vh,124px) clamp(20px,3vw,44px) clamp(48px,6vw,78px); background:var(--bg); }

/* stream */
.rule{ margin:0 0 24px; padding-left:16px; border-left:2px solid var(--rust); font-size:15.5px; color:var(--txt-soft); }
.stream-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap;
  margin:clamp(28px,4vw,44px) 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.stream-bar__stats{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.stream-bar__stats h2{ margin:0; font-family:Oswald, sans-serif; font-weight:600; font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:#fff; }
.stream-bar__stats h2 span, .platform-head h2 span.count{ color:var(--gold-br); }
.stream-bar__viewers{ display:inline-flex; align-items:center; gap:8px; font-family:Oswald, sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-soft); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--live-dot); flex:none; }
.stream-bar__tools{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; max-width:100%; }
.stream-bar__tools input{
  height:34px; flex:1 1 220px; min-width:120px; width:240px; padding:0 12px;
  font-family:Barlow, sans-serif; font-size:14px; color:var(--txt);
  background:var(--bg-2); border:1px solid var(--line); outline:none;
}
.stream-bar__tools input:focus{ border-color:var(--gold); }
.stream-bar__label{ flex:none; margin:0 2px 0 8px; white-space:nowrap; font-family:Oswald, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint); }
.sort-btn{
  flex:none; height:34px; padding:0 14px; white-space:nowrap; cursor:pointer;
  font-family:Oswald, sans-serif; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); background:transparent; color:var(--txt);
}
.sort-btn.is-active{ background:var(--gold-br); color:#120D09; }

.platform-head{ display:flex; align-items:center; gap:14px; }
.platform-head + .platform-head, .platform-head--spaced{ margin-top:clamp(36px,4.4vw,52px); }
.platform-head__num{ font-family:Oswald, sans-serif; font-size:11px; letter-spacing:.26em; color:var(--gold); }
.platform-head h2{ margin:0; display:inline-flex; align-items:center; gap:10px; font-family:Oswald, sans-serif; font-weight:600; font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:#fff; }
.platform-head__sq{ width:8px; height:8px; }
.platform-head__line{ flex:1; height:1px; background:var(--line); }

.stream-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin-top:14px; }
.stream-empty{ margin:14px 0 0; padding:22px; text-align:center; font-size:15px; color:var(--txt-faint); border:1px dashed var(--line); }

.stream-card{ position:relative; border:1px solid var(--line); background:var(--bg-2); transition:border-color .2s ease, background .2s ease; }
.stream-card:hover{ border-color:var(--gold-br); background:var(--bg-3); }
.stream-card__btn{ display:block; width:100%; padding:0; margin:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.stream-card__thumb{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#0A0705; }
.stream-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.stream-card__shade{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(8,6,4,.88)); }
.stream-card__badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; }
.stream-card__meta{ position:absolute; left:10px; right:10px; bottom:8px; display:flex; justify-content:space-between; gap:8px; font-family:Oswald, sans-serif; font-size:12px; font-weight:500; color:#fff; }
.stream-card__meta span:first-child{ display:inline-flex; align-items:center; gap:6px; }
.stream-card__body{ padding:12px 52px 14px 14px; min-height:64px; }
.stream-card__body h3{ margin:0 0 3px; font-family:Oswald, sans-serif; font-weight:600; font-size:17px; line-height:1.2; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stream-card__body p{ margin:0; font-size:13.5px; line-height:1.4; color:var(--txt-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stream-card__ext{
  position:absolute; right:12px; bottom:16px; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--txt-soft); font-size:13px;
}
.stream-card__ext:hover{ color:var(--gold-br); border-color:var(--gold-br); }

/* lecteur plein écran */
.player{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,4vw,48px); background:rgba(6,4,3,.62);
  backdrop-filter:blur(10px) saturate(.8); -webkit-backdrop-filter:blur(10px) saturate(.8);
}
.player__box{ width:min(1280px, 100%, calc((100vh - 150px) * 16 / 9)); border:1px solid var(--gold); background:#000; box-shadow:0 30px 90px rgba(0,0,0,.7); }
.player__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 16px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.player__info{ display:flex; align-items:center; gap:10px; min-width:0; }
.player__name{ font-family:Oswald, sans-serif; font-weight:600; font-size:16px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__title{ font-size:13.5px; color:var(--txt-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.player__ext{ height:32px; display:inline-flex; align-items:center; padding:0 12px; border:1px solid var(--line); font-family:Oswald, sans-serif; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt); }
.player__close{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:transparent; color:var(--txt); font-size:18px; line-height:1; cursor:pointer; }
.player__ext:hover, .player__close:hover{ color:var(--gold-br); border-color:var(--gold-br); }

/* lore */
.lore{ max-width:900px; margin:0 auto; }
.lore h1{ margin-bottom:24px; }
.lore-card{ border:1px solid var(--line); background:var(--bg-2); padding:clamp(22px,3vw,40px); }
.lore-card + .lore-card{ margin-top:clamp(20px,3vw,32px); }
.lore-card p{ margin:0 0 18px; font-size:16.5px; line-height:1.75; color:var(--txt); font-style:italic; }
.lore-card p:last-child{ margin-bottom:0; }
.lore-card .soon{ font-family:Oswald, sans-serif; font-size:12px; font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.divider{ display:flex; align-items:center; justify-content:center; gap:12px; margin:26px 0; }
.divider i:first-child{ width:90px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.divider i:nth-child(2){ width:6px; height:6px; transform:rotate(45deg); background:var(--gold); }
.divider i:last-child{ width:90px; height:1px; background:linear-gradient(90deg, var(--gold), transparent); }
.lore-card .flourish{ margin:0; font-family:Rye, serif; font-style:normal; font-size:clamp(19px,2.2vw,26px); line-height:1.4; color:var(--gold-br); text-align:center; }

/* ---------- pied de page ---------- */
.site-footer{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:22px clamp(20px,3vw,44px); background:#070504; border-top:1px solid var(--line);
  font-family:Oswald, sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-faint);
}
.site-footer img{ width:18px; height:18px; opacity:.8; }

/* ---------- responsive ---------- */
@media (max-width:1180px){ .nav__links{ gap:14px; } .nav__links a{ letter-spacing:.12em; } }
@media (max-width:1080px){ .nav__cta{ display:none; } }
@media (max-width:640px){
  body{ font-size:15.5px; }
  .nav__wordmark{ display:none; }
  .nav__mark{ display:block; }
  .hero{ min-height:auto; padding-bottom:44px; }
  .hero__logo{ width:min(420px,88vw); }
  .cta-row{ flex-direction:column; align-items:stretch; width:min(320px,100%); margin-inline:auto; }
  .cta-row a{ justify-content:center; }
  .map-view{ aspect-ratio:4 / 3; }
  .section, .page{ padding-left:18px; padding-right:18px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero__bg div, .hero__haze, .hero__dust i, .hero__inner{ animation:none !important; }
}