@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700&family=MedievalSharp&display=swap');

:root{
  --night:#140e0b;
  --ink:#35231a;
  --red:#842d26;
  --gold:#c99b42;
  --gold-light:#eed28a;
  --vellum:#f7e7c1;
  --serif:"Cormorant Garamond",Georgia,serif;
  --display:"MedievalSharp","Palatino Linotype",serif;
  --ui:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--night)}
body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  color:#f4e9d1;
  font-family:var(--serif);
  font-size:18px;
  background:
    radial-gradient(circle at 50% 0,rgba(152,91,32,.26),transparent 38rem),
    linear-gradient(135deg,#100c0a,#2b1a12 54%,#100c0a);
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--gold-light);outline-offset:4px}

.menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:80px;
  padding:11px max(18px,calc((100vw - 1280px)/2 + 18px));
  border-top:3px solid #d1a34b;
  border-bottom:3px solid #8b5e29;
  background:
    linear-gradient(90deg,rgba(17,9,9,.92),rgba(44,22,24,.72),rgba(17,9,9,.94)),
    url("/file_0000000001288210a70a192fad171c67.png") center 88%/cover;
  box-shadow:0 9px 25px rgba(0,0,0,.5);
}
.menu-brand{display:flex;align-items:center;gap:11px;color:#fff1c8;text-decoration:none}
.menu-brand>span:first-child{display:grid;place-items:center;width:42px;height:42px;color:var(--gold-light);border:1px solid var(--gold);background:rgba(108,31,29,.78);font-size:1.3rem}
.menu-brand b,.menu-brand small{display:block}
.menu-brand b{font:400 1.05rem var(--display)}
.menu-brand small{margin-top:4px;color:#d7bc86;font:650 .68rem var(--serif);letter-spacing:.09em;text-transform:uppercase}
.site-link{padding:8px 11px;color:#f6e4b9;border:1px solid rgba(226,183,91,.52);background:rgba(25,14,10,.62);font:750 .69rem var(--ui);text-decoration:none}
.site-link:hover{background:rgba(121,38,32,.78)}

main{width:min(1280px,100%);margin:0 auto;padding:54px 24px 72px}
.menu-hero{text-align:center}
.eyebrow{margin:0 0 6px;color:#d7ad59;font:800 .68rem/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.menu-hero h1{margin:0;color:#fff3cf;font:400 clamp(2rem,5vw,4rem)/1.08 var(--display)}
.menu-hero>p:not(.eyebrow){margin:10px auto 0;color:#d8c6a3;font-size:1.08rem}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;width:min(430px,85%);margin:22px auto 36px;color:#d0a14a}
.ornament i{display:block;flex:1;height:1px;background:linear-gradient(90deg,transparent,#c99a42)}
.ornament i:last-child{background:linear-gradient(90deg,#c99a42,transparent)}

.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.game-card{
  position:relative;
  overflow:hidden;
  color:var(--ink);
  border:1px solid #ad8248;
  background:linear-gradient(145deg,#fff8df,#e7ce99);
  box-shadow:0 20px 42px rgba(0,0,0,.32);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.game-card:hover{transform:translateY(-5px);border-color:#e1b65d;box-shadow:0 27px 54px rgba(0,0,0,.42)}
.game-card:focus-visible{outline:4px solid #f0d483;outline-offset:4px}
.card-visual{position:relative;height:330px;overflow:hidden;border-bottom:5px solid #8a3027}
.game-number{position:absolute;right:18px;top:16px;z-index:5;display:grid;place-items:center;width:47px;height:47px;color:#f5d88d;border:2px solid #d9ae5c;border-radius:50%;background:rgba(67,26,21,.9);font:400 1rem var(--display);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.card-copy{padding:24px 26px 27px}
.card-copy .eyebrow{color:#8b342b}
.card-copy h2{margin:0;color:#50231d;font:400 clamp(1.35rem,2.6vw,2rem)/1.16 var(--display)}
.card-copy>p:not(.eyebrow){min-height:55px;margin:10px 0 19px;color:#69523f;font-size:.96rem}
.play-link{display:flex;align-items:center;justify-content:space-between;padding-top:14px;color:#722b24;border-top:1px solid rgba(113,73,35,.22);font:800 .72rem var(--ui);letter-spacing:.03em;text-transform:uppercase}
.play-link b{font-size:1.2rem;transition:transform .2s}
.game-card:hover .play-link b{transform:translateX(5px)}

.ladder-preview{
  background:
    linear-gradient(180deg,rgba(7,8,18,.03),rgba(26,8,5,.18)),
    url("/jeu/menu-echelles-six-mondes.webp") center/cover;
}
.ladder-preview::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 45px rgba(0,0,0,.48);pointer-events:none}
.journey-badge{position:absolute;left:17px;bottom:15px;z-index:3;display:grid;grid-template-columns:auto 20px auto;align-items:center;gap:6px;padding:7px 10px;color:#fff1bd;border:1px solid rgba(240,205,112,.72);background:rgba(25,13,11,.82);box-shadow:0 4px 14px rgba(0,0,0,.42);font:750 .59rem var(--ui);letter-spacing:.08em;text-transform:uppercase}
.journey-badge b{color:#f6d979}.journey-badge i{color:#f4c458;font-style:normal;text-align:center}.journey-badge small{color:#f0a17d;font:inherit}

.hidden-preview{
  background:
    linear-gradient(180deg,transparent 50%,rgba(27,15,10,.25)),
    url("/jeu/objets-caches/scene-monastere.webp") center/cover;
}
.search-ring{position:absolute;width:58px;height:58px;border:4px solid rgba(255,235,154,.9);border-radius:50%;box-shadow:0 0 0 5px rgba(111,38,31,.72),0 4px 15px rgba(0,0,0,.38);animation:ringPulse 2s ease-in-out infinite}
.ring-one{left:34%;top:64%}
.ring-two{right:16%;top:34%;animation-delay:.7s}
@keyframes ringPulse{50%{transform:scale(1.14);box-shadow:0 0 0 8px rgba(111,38,31,.28),0 4px 15px rgba(0,0,0,.38)}}


.menu-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:34px auto 0;color:#cdbb99;text-align:center}
.menu-note span{color:#d0a149;font-size:1.35rem}
.menu-note p{margin:0;font-size:.8rem}
footer{padding:18px;border-top:1px solid rgba(220,176,78,.24);color:#ad9b7e;text-align:center}
footer p{margin:0;font-size:.76rem}
footer span{color:#c79a42}


@media (max-width:820px){
  main{padding:38px 15px 55px}
  .games-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .card-visual{height:300px}
  .card-copy>p:not(.eyebrow){min-height:0}
}

@media (max-width:520px){
  .menu-header{display:block;padding:10px 13px;text-align:center}
  .menu-brand{width:max-content;margin:0 auto 9px;text-align:left}
  .site-link{display:inline-block}
  main{padding-left:10px;padding-right:10px}
  .menu-hero h1{font-size:2rem}
  .card-visual{height:235px}
  .card-copy{padding:20px}
  .journey-badge{left:10px;bottom:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}