/* ============ PAGE D'ACCUEIL ============ */
#screen-home{ padding:0 0 70px; }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--wrap); margin:0 auto; padding:1.1em clamp(16px,4vw,32px);
}
.logo{
  font-family:var(--f-title); font-weight:900; letter-spacing:-.035em;
  display:inline-flex; align-items:center; gap:.1em;
  font-size:clamp(2.6rem,8vw,var(--fs-3xl));
}
.logo--sm{ font-size:1.25rem; }
.logo-dot{
  width:.30em; height:.30em; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 rgba(255,59,92,.7); animation:pulseLive 1.9s infinite; margin:0 .12em;
}

/* --- héros --- */
.hero{
  max-width:820px; margin:0 auto; text-align:center;
  padding:clamp(30px,7vw,76px) clamp(16px,4vw,32px) clamp(24px,5vw,56px);
}
.hero-tag{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.4em 1.1em; border-radius:var(--r-pill);
  background:var(--live-soft); border:1px solid rgba(255,59,92,.32); color:#FF9AAF;
  font-family:var(--f-title); font-weight:800; font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase;
}
.hero-h1{
  font-size:clamp(2.4rem,7.5vw,4.2rem); font-weight:900; line-height:1.04;
  letter-spacing:-.035em; margin:.5em 0 .35em;
  background:linear-gradient(180deg,#FFFFFF 0%,#B9AEE4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-p{
  font-size:var(--fs-lg); color:var(--txt-2); line-height:1.6;
  max-width:620px; margin:0 auto 2em;
}
.hero-cta{ display:flex; flex-direction:column; align-items:center; gap:.7em; }
.hero-cta .btn{ min-width:min(340px,100%); }
.hero-note{ font-size:var(--fs-sm); color:var(--txt-3); margin-top:1.3em; }

/* --- les trois temps --- */
.steps{
  max-width:var(--wrap); margin:0 auto; padding:0 clamp(16px,4vw,32px);
  display:grid; gap:clamp(12px,2vw,20px); grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,3vw,28px); position:relative;
}
.step-n{
  display:grid; place-items:center; width:2.1em; height:2.1em; border-radius:12px;
  background:var(--violet-soft); border:1px solid rgba(155,107,255,.35); color:#C6A9FF;
  font-family:var(--f-title); font-weight:900; font-size:var(--fs-lg); margin-bottom:.7em;
}
.step h2, .step-h{ font-size:var(--fs-lg); font-weight:800; margin-bottom:.4em; }
.step p{ font-size:var(--fs-sm); color:var(--txt-2); line-height:1.6; }

.home-foot{
  text-align:center; font-size:var(--fs-xs); color:var(--txt-3);
  margin-top:clamp(30px,6vw,60px); padding:0 16px;
}

/* --- bouton de profil dans la barre du haut --- */
.profile-btn{
  width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer; overflow:hidden;
  background:var(--surface-2); border:2px solid var(--line-strong);
  transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.profile-btn:hover{ transform:scale(1.07); border-color:var(--violet); box-shadow:var(--sh-glow); }
.profile-av, .profile-av svg, .profile-av img{ width:100%; height:100%; display:block; object-fit:cover; }

/* --- titres de section --- */
.sec-h{
  text-align:center; font-size:clamp(1.5rem,4vw,2.1rem); font-weight:900; letter-spacing:-.025em;
}
.sec-p{ text-align:center; color:var(--txt-2); font-size:var(--fs-md); margin:.5em auto 1.6em; max-width:46ch; }
.sec-p b{ color:var(--violet); font-family:var(--f-title); }

/* --- l'échelle des paliers --- */
.ladder-sec, .coll-sec{
  max-width:var(--wrap); margin:clamp(36px,6vw,72px) auto 0; padding:0 clamp(16px,4vw,32px);
}
.ladder{ display:flex; align-items:flex-end; gap:.5em; overflow-x:auto; padding-bottom:.5em; }
.rung{
  flex:1 1 0; min-width:112px; display:flex; flex-direction:column; align-items:center; gap:.5em;
}
.rung-bar{
  width:100%; height:var(--h); border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent));
  border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow:0 -6px 24px color-mix(in srgb, var(--c) 22%, transparent);
}
.rung-t{ font-family:var(--f-title); font-weight:800; font-size:var(--fs-sm); color:var(--c); text-align:center; }
.rung-v{ font-size:var(--fs-xs); color:var(--txt-3); text-align:center; }

/* --- collection de badges --- */
.coll-filters{ display:flex; gap:.4em; justify-content:center; flex-wrap:wrap; margin-bottom:1.2em; }
.cfilter{
  padding:.45em 1.05em; border-radius:var(--r-pill); cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  font-family:var(--f-title); font-weight:700; font-size:var(--fs-xs); color:var(--txt-2);
  transition:all .15s var(--ease);
}
.cfilter:hover{ color:var(--txt); border-color:var(--line-strong); }
.cfilter.is-on{ background:var(--violet-soft); border-color:var(--violet); color:#C6A9FF; }

.coll{ display:grid; gap:.6em; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); }
.bdg{
  position:relative; padding:1em .7em; border-radius:var(--r-md); text-align:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  opacity:.5; transition:transform .16s var(--ease), opacity .16s var(--ease);
}
.bdg.is-got{
  opacity:1;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c1) 14%, transparent), rgba(255,255,255,.03));
  border-color:color-mix(in srgb, var(--c1) 45%, transparent);
}
.bdg.is-got:hover{ transform:translateY(-3px); }
.bdg-ico{ display:block; font-size:1.9rem; line-height:1; margin-bottom:.35em; filter:grayscale(1); }
.bdg.is-got .bdg-ico{ filter:none; }
.bdg-l{ display:block; font-family:var(--f-title); font-weight:800; font-size:var(--fs-sm); }
.bdg-r{
  display:inline-block; margin-top:.35em; padding:.15em .6em; border-radius:var(--r-pill);
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c1); background:color-mix(in srgb, var(--c1) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--c1) 40%, transparent);
}
.bdg-d{ display:block; font-size:var(--fs-xs); color:var(--txt-3); margin-top:.5em; line-height:1.45; }
.bdg:not(.is-got) .bdg-d{ filter:blur(3px); user-select:none; }

/* --- pied de page --- */
.foot-links{ display:flex; gap:.3em 1.2em; justify-content:center; flex-wrap:wrap; margin-top:.8em; }
.foot-links button{
  background:none; border:none; cursor:pointer; padding:.2em;
  color:var(--txt-3); font-size:var(--fs-xs); text-decoration:underline; text-underline-offset:3px;
}
.foot-links button:hover{ color:var(--violet); }