: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;
}
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;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; 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;
  display:flex; flex-direction:column; min-height:100vh;
}
a{ color:var(--gold-br); text-decoration:none; }
a:hover{ color:var(--rust); }
img{ display:block; max-width:100%; }
::selection{ background:rgba(201,152,47,.35); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- 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); }

/* ---------- header ---------- */
.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);
}
.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; flex:none; }
.nav-logo img{ flex:none; width:auto; }
.nav-wordmark{ height:clamp(26px,3.4vw,34px); }
.nav-mark{ display:none; height:clamp(26px,3.4vw,32px); }
.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; }

.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; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:Oswald, sans-serif;
  font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; padding:14px 26px;
}
.btn-solid{
  font-weight:600; 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); }
.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); }
.nav-cta{ font-size:12px; letter-spacing:.16em; padding:9px 18px; white-space:nowrap; }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; min-height:100svh; overflow:hidden;
  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; pointer-events:none; overflow:hidden; }
.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); margin:0 auto 20px; filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)); }
.eyebrow{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; }
.eyebrow hr{ width:42px; height:1px; border:0; background:var(--gold); margin:0; }
.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 h1{ margin:0 0 16px; font-family:Oswald, sans-serif; font-weight:700; font-size:clamp(38px,6.4vw,88px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-shadow:0 8px 40px rgba(0,0,0,.6); }
.hero h1 em{ display:block; font-style:normal; color:var(--gold-br); }
.hero p{ margin:0 0 26px; max-width:52ch; font-size:16.5px; color:var(--txt-soft); }
.cta-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---------- sections ---------- */
main{ flex:1; }
.section{ padding:clamp(46px,6vw,78px) clamp(20px,3vw,44px); scroll-margin-top:64px; }
.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; }
.kicker{ display:block; font-family:Oswald, sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--rust); margin-bottom:10px; }
h1.title, h2.title{ margin:0; font-family:Oswald, sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,46px); line-height:1; text-transform:uppercase; color:#fff; }
.lede{ margin:0; max-width:62ch; font-size:15.5px; color:var(--txt-soft); }

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

/* carte */
.map-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:clamp(20px,3vw,48px); align-items:center; }
.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); }

/* embeds */
.embed{ position:relative; z-index:91; border:1px solid var(--line); background:#000; padding:8px; }
.embed-16x9{ position:relative; aspect-ratio:16 / 9; }
.embed-16x9 iframe{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; display:block; }

/* cta final */
.cta-final{ text-align:center; background:var(--bg-2); padding:clamp(54px,7vw,92px) clamp(20px,3vw,44px); }
.cta-final .kicker{ color:var(--gold); margin-bottom:14px; }
.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; }
.cta-final p{ margin:0 0 26px; font-size:16px; color:var(--txt-soft); }

/* pages internes */
.page{ padding:clamp(104px,12vh,124px) clamp(20px,3vw,44px) clamp(48px,6vw,78px); }
.page .quote{ margin:14px 0 0; white-space:nowrap; font-style:italic; font-size:15.5px; color:var(--txt-soft); }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-bottom:28px; }
.rule{ border-left:2px solid var(--rust); padding-left:16px; max-width:66ch; margin:0 0 24px; font-size:15.5px; color:var(--txt-soft); }
.card{ border:1px solid var(--line); background:var(--bg-2); padding:clamp(22px,3vw,40px); }
.card + .card{ margin-top:clamp(20px,3vw,32px); }
.card p{ margin:0 0 18px; font-size:16.5px; line-height:1.75; color:var(--txt); }
.card p:last-child{ margin-bottom:0; }
.card .muted{ color:var(--txt-soft); }
.card .lore-p{ font-style:italic; }
.divider{ display:flex; align-items:center; justify-content:center; gap:12px; margin:26px 0; }
.divider .l{ width:90px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.divider .r{ width:90px; height:1px; background:linear-gradient(90deg, var(--gold), transparent); }
.divider .d{ width:6px; height:6px; transform:rotate(45deg); background:var(--gold); }
.flourish{ margin:0; font-family:Rye, serif; font-size:clamp(19px,2.2vw,26px); line-height:1.4; color:var(--gold-br); text-align:center; }
.poster{ border:1px solid var(--line); background:var(--bg-2); padding:25px 20px; width:min(800px,100%); margin:0 auto; }
.poster img{ width:100%; height:auto; aspect-ratio:1024 / 1536; margin:0 auto; }

/* routage */
[data-route]{ display:none; }
[data-route].is-active{ display:block; }

/* footer */
.site-footer{
  background:#070504; border-top:1px solid var(--line); padding:22px clamp(20px,3vw,44px);
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  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:780px){ .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 h1{ font-size:clamp(30px,9vw,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; }
  .page .quote{ white-space:normal; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-bg div, .hero-haze, .hero-dust i, .hero-inner{ animation:none !important; }
}