
:root{
  --ink:#17113c;
  --ink-2:#2a2258;
  --purple:#6525d9;
  --purple-2:#7a32ee;
  --purple-3:#a377ff;
  --lav:#f4efff;
  --lav-2:#ebe0ff;
  --line:#e8e1f7;
  --muted:#6e6882;
  --white:#fff;
  --shadow:0 14px 36px rgba(45,25,92,.10);
  --shadow-sm:0 8px 22px rgba(45,25,92,.07);
  --radius:20px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    linear-gradient(135deg,rgba(120,50,238,.035),transparent 24%),
    #fff;
  line-height:1.58;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit}
.container{width:min(calc(100% - 32px),var(--max));margin:auto}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:16px;top:16px;background:#fff;padding:10px 14px;border-radius:10px;z-index:9999}

header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
.nav-wrap{height:82px;display:flex;align-items:center;gap:24px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;min-width:220px;flex:0 1 auto}
.brand img{
  width:70px;height:58px;object-fit:cover;object-position:center;
  border-radius:12px;background:#fff
}
.brand-copy strong{display:block;font-size:1.18rem;letter-spacing:.08em}
.brand-copy small{display:block;color:var(--purple);font-size:.62rem;letter-spacing:.34em;font-weight:900}
nav{margin-left:auto;min-width:0}
.nav-list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav-list a{display:block;padding:11px 8px;font-size:.9rem;color:#443c62;border-bottom:3px solid transparent;white-space:nowrap}
.nav-list a:hover,.nav-list a.active{color:var(--purple);border-bottom-color:var(--purple)}
.nav-contact{margin-left:8px;padding:11px 12px!important;border-radius:12px;border:0!important;color:#fff!important;background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 7px 18px rgba(101,37,217,.22)}
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:9px 12px}

.pixel-corner{position:absolute;pointer-events:none;opacity:.88}
.pixel-corner::before,.pixel-corner::after{content:"";position:absolute;background:var(--purple)}
.pixels-a{width:130px;height:130px;left:0;top:0;background:linear-gradient(135deg,rgba(116,49,226,.2),rgba(116,49,226,.02) 55%,transparent 56%);clip-path:polygon(0 0,100% 0,0 100%)}
.pixels-b{right:0;top:30px;width:130px;height:130px;background:
  linear-gradient(var(--purple),var(--purple)) 90px 0/24px 24px no-repeat,
  linear-gradient(#aa83ff,#aa83ff) 64px 30px/18px 18px no-repeat,
  linear-gradient(#d2bcff,#d2bcff) 98px 62px/14px 14px no-repeat,
  linear-gradient(var(--purple-2),var(--purple-2)) 35px 82px/20px 20px no-repeat
}
.kicker{font-size:.75rem;letter-spacing:.34em;text-transform:uppercase;font-weight:900;color:var(--purple)}
.hero{position:relative;overflow:hidden;padding:58px 0 32px;background:
  radial-gradient(circle at 72% 43%,rgba(126,68,240,.14),transparent 26%),
  linear-gradient(110deg,#fff 0 58%,#faf7ff 58% 100%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center}
.hero h1,.page-hero h1{margin:12px 0 6px;font-size:clamp(3rem,7vw,6.4rem);line-height:.9;letter-spacing:-.06em}
.hero h1 span,.page-hero h1 span{background:linear-gradient(90deg,var(--ink) 5%,var(--purple-2) 73%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{font-weight:900;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
.lead{font-size:1.08rem;color:var(--muted);max-width:690px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:12px;font-weight:900;border:1px solid transparent;transition:.18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;box-shadow:0 9px 22px rgba(101,37,217,.22)}
.btn-secondary{background:#fff;color:var(--purple);border-color:var(--purple-3)}
.quick-values{display:flex;gap:12px 20px;flex-wrap:wrap;margin-top:8px;color:#51486e;font-size:.88rem}
.quick-values span{display:inline-flex;gap:6px;align-items:center}.quick-values b{color:var(--purple)}
.logo-stage{position:relative;min-height:390px;display:grid;place-items:center}
.logo-stage::before{
  content:"";position:absolute;width:350px;height:350px;border-radius:50%;
  background:radial-gradient(circle,rgba(116,49,226,.12),rgba(116,49,226,.025) 62%,transparent 63%)
}
.logo-stage img{width:min(470px,90%);position:relative;z-index:2;border-radius:22px;mix-blend-mode:multiply}
.pixel-field{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--purple),var(--purple)) 16% 20%/20px 20px no-repeat,
  linear-gradient(#b291ff,#b291ff) 8% 32%/11px 11px no-repeat,
  linear-gradient(var(--purple-2),var(--purple-2)) 88% 24%/17px 17px no-repeat,
  linear-gradient(#d4c3ff,#d4c3ff) 82% 72%/12px 12px no-repeat,
  linear-gradient(var(--purple),var(--purple)) 94% 82%/20px 20px no-repeat
}
.hero-slogan{position:absolute;right:15px;top:28px;color:var(--purple);font-family:"Segoe Print","Bradley Hand",cursive;font-size:1.18rem;line-height:1.25;transform:rotate(-5deg);max-width:145px;text-align:center}

.activity-strip{padding:18px 0 8px;background:#faf8ff;border-top:1px solid #f1ebfb}
.activity-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.activity-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.activity-card .ico{font-size:2rem;color:var(--purple)}
.activity-card strong{display:block;margin-top:5px}
.activity-card small{color:var(--muted)}

section{padding:48px 0}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:22px}
.section-head h2{margin:0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em}
.section-head p{max-width:610px;margin:0;color:var(--muted)}
.home-panels{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.community-card{
  min-height:310px;position:relative;overflow:hidden;border-radius:24px;color:#fff;
  background:
    linear-gradient(90deg,rgba(23,17,60,.90),rgba(38,21,82,.68)),
    radial-gradient(circle at 75% 40%,#7a32ee,transparent 40%),
    #24194a;
  padding:32px;box-shadow:var(--shadow)
}
.community-card::after{
  content:"";position:absolute;right:-55px;bottom:-90px;width:330px;height:330px;border-radius:50%;
  border:56px solid rgba(255,255,255,.08)
}
.community-card h2{font-size:2rem;max-width:490px;margin:8px 0 10px}
.community-card p{max-width:590px;color:#e8defd}
.play-pill{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-weight:800}
.play-circle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--purple-2);box-shadow:0 7px 18px rgba(0,0,0,.18)}
.events-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow-sm)}
.events-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.events-head h3{margin:0}
.events-head a{font-size:.85rem;color:var(--purple);font-weight:800}
.mini-event{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.mini-event:first-of-type{border-top:0}
.date-box{background:var(--lav);color:var(--purple);border-radius:11px;padding:7px;text-align:center;font-weight:900;line-height:1.1;font-size:.78rem}
.mini-event strong{font-size:.91rem}.mini-event small{display:block;color:var(--muted)}
.age-tag{font-size:.68rem;background:var(--lav);color:var(--purple);padding:5px 7px;border-radius:999px;font-weight:800}

.cta-band{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 26px;border:1px solid #ded0fa;background:linear-gradient(90deg,#f7f2ff,#fff,#f4ecff);border-radius:20px}
.cta-band strong{font-size:1.35rem}.cta-band span{color:var(--muted);display:block}

.page-hero{position:relative;overflow:hidden;padding:52px 0 28px;background:linear-gradient(120deg,#fff,#f7f1ff)}
.page-hero h1{font-size:clamp(2.6rem,6vw,5rem);max-width:930px}
.page-hero .lead{max-width:800px}
.breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:12px}.breadcrumb a{color:var(--purple)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card,.game-card,.partner-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:21px;box-shadow:var(--shadow-sm)}
.card h3,.partner-card h3{margin:10px 0 7px}.card p,.partner-card li,.game-card p{color:var(--muted)}
.icon-badge{width:48px;height:48px;display:grid;place-items:center;background:var(--lav);color:var(--purple);border-radius:15px;font-size:1.35rem}
.tag,.chip{display:inline-flex;background:var(--lav);color:var(--purple);border-radius:999px;padding:5px 9px;font-size:.76rem;font-weight:800}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)}
.feature b{display:block}.feature span{color:var(--muted);font-size:.94rem}
.prose{max-width:900px}.prose h2{margin-top:32px}.prose p,.prose li{color:var(--muted)}
.notice{border-left:4px solid var(--purple);background:var(--lav);padding:14px 16px;border-radius:0 14px 14px 0;color:#554d6c}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.input,.select{background:#fff;border:1px solid var(--line);color:var(--ink);padding:12px 14px;border-radius:12px;outline:none;box-shadow:var(--shadow-sm)}
.input{min-width:270px;flex:1}.input:focus,.select:focus{border-color:var(--purple-3)}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.game-card h3{margin:0}.game-card .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.empty{display:none;color:var(--muted)}
.rule-list{display:grid;gap:12px}
.rule-item{display:grid;grid-template-columns:1.2fr .65fr .65fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:15px 16px;background:#fff;box-shadow:var(--shadow-sm)}
.rule-item small{display:block;color:var(--muted)}.rule-link{padding:8px 11px;border-radius:10px;background:var(--lav);color:var(--purple);font-weight:800}
.timeline{display:grid;gap:14px}
.event{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)}
.event-date{font-weight:900;color:var(--purple)}.event small{display:block;color:var(--muted)}
.status{padding:6px 9px;border-radius:999px;background:#ecfff7;color:#168359;font-size:.78rem;font-weight:800}
.partner-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.partner-card ul{padding-left:18px}

footer{margin-top:56px;background:#1e183f;color:#d8d1ec;padding:34px 0 18px;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:28px}
.footer-brand{display:flex;gap:12px;align-items:center}.footer-brand img{width:82px;height:68px;object-fit:cover;border-radius:10px;filter:brightness(1.15)}
.footer-title{color:#fff;font-weight:900;margin-bottom:8px}.footer-links{display:grid;gap:7px}.footer-links a:hover{color:#fff}
.copyright{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:1100px){
  .brand{min-width:auto}.brand-copy{display:none}
  .nav-toggle{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:82px;background:#fff;padding:10px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
  nav.open{display:block}.nav-list{display:grid}.nav-list a{border-bottom:0;border-left:3px solid transparent}.nav-list a.active{border-left-color:var(--purple)}
  .nav-contact{margin-left:0;margin-top:4px}
  .hero-grid,.home-panels{grid-template-columns:1fr}.logo-stage{min-height:330px}
  .activity-grid{grid-template-columns:repeat(3,1fr)}
  .grid-3,.game-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-wrap{height:72px}.brand img{width:64px;height:52px}nav{top:72px}
  .hero{padding-top:42px}.hero-grid{gap:10px}.hero h1{font-size:clamp(3rem,18vw,4.5rem)}
  .logo-stage{min-height:270px}.hero-slogan{display:none}
  .activity-grid{grid-template-columns:1fr 1fr}.activity-card:last-child{grid-column:1/-1}
  .section-head{display:block}.section-head p{margin-top:8px}
  .grid-3,.grid-4,.game-grid,.feature-list,.partner-grid,.footer-grid{grid-template-columns:1fr}
  .mini-event{grid-template-columns:50px 1fr}.age-tag{display:none}
  .cta-band{display:block}.cta-band .btn{margin-top:14px;width:100%}
  .rule-item,.event{grid-template-columns:1fr}
  .input{min-width:100%}
  .community-card{padding:25px;min-height:280px}
}


/* --- Nos activités / parcours --- */
.activities-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
.activities-promise{
  border:1px solid var(--line);background:linear-gradient(145deg,#fff,#f8f3ff);
  border-radius:24px;padding:24px;box-shadow:var(--shadow-sm)
}
.activities-promise h3{margin-top:0}
.activities-promise ul{padding-left:18px;color:var(--muted)}
.pathway-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pathway-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:24px;box-shadow:var(--shadow-sm)
}
.pathway-card::after{
  content:"";position:absolute;right:-28px;top:-28px;width:110px;height:110px;
  border-radius:28px;background:linear-gradient(135deg,rgba(101,37,217,.12),rgba(163,119,255,.04));
  transform:rotate(18deg)
}
.pathway-top{display:flex;gap:14px;align-items:flex-start;position:relative;z-index:1}
.pathway-icon{
  width:56px;height:56px;display:grid;place-items:center;border-radius:17px;
  background:var(--lav);font-size:1.55rem;flex:0 0 auto
}
.pathway-card h3{margin:0 0 4px;font-size:1.35rem}
.pathway-card .subtitle{color:var(--purple);font-weight:800;font-size:.91rem}
.pathway-card p{color:var(--muted)}
.pathway-meta{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.pathway-meta span{background:var(--lav);color:var(--purple);border-radius:999px;padding:6px 9px;font-size:.76rem;font-weight:800}
.pathway-card details{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.pathway-card summary{cursor:pointer;color:var(--purple);font-weight:900}
.pathway-card details ul{padding-left:18px;color:var(--muted)}
.pathway-card details p{margin-bottom:8px}
.activity-section-title{margin-bottom:18px}
.activity-section-title h2{margin-bottom:6px}
.activity-section-title p{color:var(--muted);max-width:830px}
.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.format-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)}
.format-card strong{display:block;margin:6px 0}.format-card p{margin:0;color:var(--muted);font-size:.92rem}
.method-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.method-step{padding:18px;border-radius:18px;background:linear-gradient(145deg,#fff,#faf7ff);border:1px solid var(--line)}
.method-step .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;font-weight:900;margin-bottom:10px}
.method-step p{margin:0;color:var(--muted)}
.age-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.age-scale div{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;text-align:center}
.age-scale strong{display:block;color:var(--purple)}
.activity-note{font-size:.88rem;color:var(--muted);margin-top:10px}
@media(max-width:980px){
  .activities-intro,.pathway-grid{grid-template-columns:1fr}
  .format-grid,.method-steps{grid-template-columns:1fr 1fr}
  .age-scale{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .format-grid,.method-steps,.age-scale{grid-template-columns:1fr}
  .pathway-card{padding:20px}
}
