:root{
  --bg:#f8f1e2;
  --bg-soft:#fff8eb;
  --ink:#101218;
  --ink-soft:#2a2f3e;
  --line:rgba(16,18,24,0.24);

  --sun:#ffd23f;
  --fire:#ff5e3a;
  --sky:#2acbff;
  --acid:#bbff4f;
  --mint:#9df7e6;

  --paper:#fffdf7;
  --panel:#131722;

  --border-strong:2px;
  --border-ui:1.6px;
  --hero-stroke:1.9px;
  --mobile-menu-offset:68px;
  --shadow:0 18px 42px rgba(16,18,24,0.2);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;overflow-x:hidden;}

body{
  font-family:'Bricolage Grotesque',sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(circle at 8% -16%,#fff8ea 0%,transparent 44%),
    radial-gradient(circle at 90% 2%,#ffe8ba 0%,transparent 40%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-4;
  opacity:0.24;
  background-image:radial-gradient(rgba(16,18,24,0.11) 0.7px, transparent 0.7px);
  background-size:6px 6px;
}

body::after{
  content:'';
  position:fixed;
  inset:-28% -16%;
  pointer-events:none;
  z-index:-5;
  opacity:0.62;
  filter:blur(58px);
  background:
    conic-gradient(from 20deg at 25% 25%, rgba(42,203,255,0.36), rgba(255,94,58,0.24), rgba(157,247,230,0.3), rgba(255,210,63,0.24), rgba(42,203,255,0.36));
  animation:ambientRotate 30s linear infinite;
}

.bg-blob{
  position:fixed;
  z-index:-2;
  pointer-events:none;
  border-radius:56% 44% 62% 38% / 44% 56% 45% 55%;
  filter:blur(26px);
  opacity:0.58;
  will-change:transform;
  mix-blend-mode:multiply;
  animation:blobDrift var(--dur,22s) ease-in-out infinite;
}

.bg-blob.a{width:340px;height:300px;background:rgba(42,203,255,0.34);top:-96px;right:-110px;--dx:66px;--dy:40px;--dur:24s;--rot:11deg;}
.bg-blob.b{width:250px;height:240px;background:rgba(255,94,58,0.26);left:-88px;top:36vh;--dx:48px;--dy:46px;--dur:20s;--rot:-12deg;animation-delay:-6s;}
.bg-blob.c{width:320px;height:290px;background:rgba(157,247,230,0.24);right:-86px;bottom:-66px;--dx:58px;--dy:38px;--dur:26s;--rot:9deg;animation-delay:-12s;}
.bg-blob.d{width:230px;height:210px;background:rgba(255,210,63,0.22);left:43%;top:53vh;--dx:36px;--dy:32px;--dur:18s;--rot:-7deg;animation-delay:-9s;}
.bg-blob.e{width:270px;height:220px;background:rgba(187,255,79,0.2);left:-114px;bottom:9vh;--dx:52px;--dy:28px;--dur:21s;--rot:10deg;animation-delay:-4s;animation-name:blobDriftAlt;}
.bg-blob.f{width:230px;height:250px;background:rgba(42,203,255,0.2);right:20%;top:12vh;--dx:34px;--dy:54px;--dur:19s;--rot:-10deg;animation-delay:-15s;animation-name:blobDriftAlt;}

@keyframes ambientRotate{from{transform:rotate(0deg) scale(1);}to{transform:rotate(360deg) scale(1.08);}}
@keyframes blobDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);} 
  35%{transform:translate3d(var(--dx),calc(var(--dy)*-0.7),0) rotate(var(--rot,0deg)) scale(1.11);} 
  70%{transform:translate3d(calc(var(--dx)*-0.75),var(--dy),0) rotate(calc(var(--rot,0deg)*-0.75)) scale(0.93);} 
}
@keyframes blobDriftAlt{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);} 
  30%{transform:translate3d(calc(var(--dx)*-0.45),calc(var(--dy)*-0.85),0) rotate(calc(var(--rot,0deg)*-0.7)) scale(1.12);} 
  65%{transform:translate3d(calc(var(--dx)*0.92),calc(var(--dy)*0.65),0) rotate(var(--rot,0deg)) scale(0.94);} 
}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:var(--border-strong) solid var(--ink);
  background:rgba(248,241,226,0.84);
  backdrop-filter:blur(10px);
}

.brand{
  text-decoration:none;
  color:var(--ink);
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:0.96rem;
}

.brand span{
  font-family:'Instrument Serif',serif;
  text-transform:none;
  font-style:italic;
  font-size:1.03rem;
  margin-left:4px;
}

.topnav{display:none;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.topnav a{
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  border:var(--border-ui) solid var(--ink);
  border-radius:999px;
  padding:7px 12px;
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  transition:transform 0.2s ease, background 0.2s ease;
}
.topnav a:hover{transform:translateY(-1px);background:var(--sun);}

.menu-toggle{
  appearance:none;
  border:var(--border-ui) solid var(--ink);
  background:#fff;
  color:var(--ink);
  width:46px;
  height:40px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-toggle .bars{display:grid;gap:4px;}
.menu-toggle .bars span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--ink);
  transition:transform 0.28s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg);} 
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;} 
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} 

.mega-menu{
  position:fixed;
  top:var(--mobile-menu-offset);
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  background:rgba(16,18,24,0.6);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.24s ease;
}
.mega-menu.is-open{opacity:1;pointer-events:auto;}

.mega-menu-panel{
  position:absolute;
  top:0;
  left:0;
  right:0;
  max-height:100%;
  overflow:auto;
  transform:translateY(-105%);
  transition:transform 0.34s cubic-bezier(0.22,1,0.36,1);
  background:linear-gradient(180deg,#141823 0%,#1b2030 100%);
  border-bottom:var(--border-strong) solid #fff;
  color:#fff5df;
  padding:18px 16px 24px;
}
.mega-menu.is-open .mega-menu-panel{transform:translateY(0);} 

.mega-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.mega-title{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:0.06em;font-size:1rem;}
.menu-close{
  appearance:none;
  border:var(--border-ui) solid #fff;
  background:transparent;
  color:#fff;
  border-radius:10px;
  width:40px;
  height:36px;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
}

.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;}
.mega-group{border:var(--border-ui) solid rgba(255,255,255,0.72);border-radius:14px;padding:10px;background:rgba(255,255,255,0.04);}
.mega-group h3{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.15em;opacity:0.78;margin-bottom:8px;}
.mega-links{display:grid;gap:7px;}
.mega-links a{
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,0.06);
  border:var(--border-ui) solid rgba(255,255,255,0.58);
  border-radius:10px;
  padding:9px 10px;
  font-size:0.86rem;
  font-weight:700;
}

body.no-scroll{overflow:hidden;}

.page{max-width:1240px;margin:0 auto;padding:0 0 48px;}

.hero{
  padding:34px 16px 10px;
  display:grid;
  gap:14px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  background:var(--ink);
  color:var(--sun);
  border:var(--border-ui) solid var(--ink);
  border-radius:999px;
  padding:7px 13px;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-weight:800;
  transform:skewX(-10deg);
}

.hero-title{
  margin-top:2px;
  display:grid;
  gap:2px;
  max-width:100%;
  overflow:visible;
  padding-top:10px;
}

.hero-word{
  display:inline-block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  line-height:0.86;
  letter-spacing:0;
  font-size:clamp(2.5rem,15vw,11.5rem);
  transform:translate3d(var(--offset,0px),0,0) rotate(var(--tilt,0deg));
  transition:transform 0.18s linear;
  -webkit-text-stroke:var(--hero-stroke) var(--ink);
  paint-order:stroke fill;
}

.hero-word.one{--tilt:-1.4deg;color:var(--sun);}
.hero-word.two{--tilt:1deg;color:transparent;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,var(--sky) 10px 20px);-webkit-background-clip:text;background-clip:text;}
.hero-word.three{--tilt:-0.8deg;color:var(--fire);text-shadow:2px 2px 0 var(--sky);}

.hero-sub{max-width:760px;color:var(--ink-soft);font-size:1.03rem;line-height:1.65;}
.hero-sub strong{color:var(--ink);font-weight:800;}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:var(--border-strong) solid var(--ink);
  padding:13px 18px;
  font-size:0.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.btn.primary{background:var(--ink);color:#fff4de;box-shadow:var(--shadow);} 
.btn.secondary{background:transparent;color:var(--ink);} 
.btn:hover{transform:translateY(-2px) rotate(-0.8deg);} 

.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.stat{
  background:rgba(255,255,255,0.8);
  border:var(--border-ui) solid var(--ink);
  border-radius:14px;
  padding:12px 12px 10px;
}
.stat-label{font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;opacity:0.66;}
.stat-value{margin-top:4px;font-family:'Archivo Black',sans-serif;font-size:1.08rem;letter-spacing:0.01em;}

.ticker{
  margin:30px 0 10px;
  margin-inline:calc(50% - 50vw);
  width:100vw;
  border-top:var(--border-strong) solid var(--ink);
  border-bottom:var(--border-strong) solid var(--ink);
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}

.track{display:flex;width:max-content;gap:34px;padding:12px 0;animation:marquee 22s linear infinite;}
.track span{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:0.03em;font-size:1.02rem;}
.track span:nth-child(3n+1){color:var(--sun);} 
.track span:nth-child(3n+2){color:#fff5df;} 
.track span:nth-child(3n+3){color:var(--mint);} 
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.section{padding:14px 16px 10px;}
#jeux.section{margin-top:104px;}
#comment.section{margin-top:126px;}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.section-title{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  line-height:0.86;
  letter-spacing:0.01em;
  font-size:clamp(2rem,11.5vw,5.1rem);
}
.section-note{max-width:560px;line-height:1.6;color:var(--ink-soft);background:rgba(255,255,255,0.66);border:var(--border-ui) solid var(--ink);border-radius:14px;padding:10px 12px;}
.section-note strong{color:var(--ink);}

.games-grid{display:grid;grid-template-columns:1fr;gap:16px;counter-reset:cards;}

.game-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,0.92);
  border:var(--border-strong) solid var(--ink);
  border-radius:24px;
  box-shadow:var(--shadow);
  transition:transform 0.26s ease, box-shadow 0.26s ease;
  transform-style:preserve-3d;
  counter-increment:cards;
}

.game-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--tone,#ddd);} 
.game-card::after{
  content:counter(cards, decimal-leading-zero);
  position:absolute;
  right:12px;
  top:4px;
  font-family:'Archivo Black',sans-serif;
  font-size:3rem;
  line-height:1;
  color:rgba(16,18,24,0.08);
  pointer-events:none;
}

.game-card:hover{transform:translateY(-4px) rotate(-0.3deg);box-shadow:0 20px 40px rgba(16,18,24,0.24);} 

.tone-quest{--tone:var(--sun);} 
.tone-pop{--tone:#ff7aa7;} 
.tone-galactic{--tone:var(--sky);} 
.tone-grimoire{--tone:#ff9656;} 
.tone-safari{--tone:var(--mint);} 

.game-top{padding:18px 18px 8px 24px;}
.game-tag{display:inline-block;border:var(--border-ui) solid var(--ink);border-radius:999px;background:#fff;padding:6px 11px;font-size:0.63rem;font-weight:800;text-transform:uppercase;letter-spacing:0.16em;}
.game-title{margin-top:10px;font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(1.7rem,10vw,2.8rem);line-height:0.93;}

.game-copy{padding:8px 18px 16px 24px;line-height:1.62;color:var(--ink-soft);font-size:0.95rem;}
.game-list{list-style:none;margin-top:9px;display:grid;gap:6px;}
.game-list li{display:flex;gap:9px;align-items:flex-start;color:var(--ink);} 
.game-list li span:first-child{font-size:1rem;}

.game-cta-wrap{padding:0 18px 18px 24px;}
.game-cta{text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--ink);border:var(--border-strong) solid var(--ink);border-radius:999px;background:rgba(255,255,255,0.94);padding:10px 14px;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;}

.how-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.how-card{border:var(--border-strong) solid var(--ink);border-radius:18px;background:rgba(255,255,255,0.9);padding:14px;}
.how-card:nth-child(2n){transform:rotate(-0.6deg);} 
.how-card:nth-child(2n+1){transform:rotate(0.5deg);} 
.how-step{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:0.08em;font-size:0.75rem;opacity:0.62;}
.how-title{margin-top:4px;font-size:1.04rem;font-weight:800;}
.how-text{margin-top:5px;color:var(--ink-soft);line-height:1.56;font-size:0.93rem;}

.donation{
  margin:136px 16px 24px;
  border:var(--border-strong) solid var(--ink);
  border-radius:30px;
  padding:44px 34px 38px;
  background:linear-gradient(130deg,var(--sun) 0%,#ffad34 38%,#ff7a3d 100%);
  color:#111;
  position:relative;
  overflow:hidden;
}

.donation::before{content:'';position:absolute;width:230px;height:230px;border-radius:50%;right:-90px;top:-96px;background:rgba(16,18,24,0.18);} 
.donation h2{position:relative;font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:0.86;font-size:clamp(1.9rem,11vw,4rem);} 
.donation p{position:relative;margin-top:18px;max-width:720px;line-height:1.62;font-size:1rem;color:#171a23;} 
.twint-wrap{position:relative;margin-top:30px;} 
.twint-button{height:58px;border:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;margin:4px 0 0;padding:0;transition:transform 0.2s ease;} 
.twint-button:hover{transform:scale(1.04);} 
.twint-button img{height:58px;border-radius:8px;} 

.footer{margin:34px 16px 0;border-top:var(--border-strong) solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:12px;} 
.footer-links{display:flex;gap:10px;flex-wrap:wrap;} 
.footer-links a{text-decoration:none;color:var(--ink);border:var(--border-ui) solid var(--ink);border-radius:999px;background:#fff;padding:8px 12px;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;} 
.footer-credit{font-size:0.8rem;line-height:1.54;color:var(--ink-soft);} 
.footer-credit a{color:var(--ink);} 

html.js .reveal{opacity:0;transform:translateY(18px);} 
html.js .reveal.is-visible{opacity:1;transform:none;transition:opacity 0.55s ease, transform 0.55s ease;} 

@media (min-width:760px){
  .topbar{padding:16px 24px;}
  .topnav{display:flex;}
  .menu-toggle,.mega-menu{display:none !important;}

  .hero{padding:56px 24px 12px;gap:18px;}
  .hero-word{font-size:clamp(3.8rem,13vw,11.2rem);} 
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));}

  .section,.donation,.footer{margin-left:24px;margin-right:24px;}
  #jeux.section{margin-top:132px;}
  #comment.section{margin-top:156px;}

  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .donation{margin-top:170px;padding:58px 50px 46px;}
}

@media (min-width:1080px){
  .games-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .how-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media (max-width:430px){
  .hero-word{font-size:clamp(2.2rem,14.3vw,4.6rem);line-height:0.88;-webkit-text-stroke:1.35px var(--ink);} 
  .hero-sub{font-size:0.98rem;} 
  .how-card:nth-child(2n),.how-card:nth-child(2n+1){transform:none;} 
}

@media (max-width:360px){
  .hero-word{font-size:clamp(1.95rem,13.8vw,4.2rem);-webkit-text-stroke:1.18px var(--ink);} 
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;} 
}