:root{
  --bg:#f2f3f5;      /* blanc grisâtre */
  --fg:#0a0a0a;      /* noir doux */
  --muted:#6b7280;   /* gris texte secondaire */
  --ring:#0a0a0a;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.5;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  width:min(960px, 92vw);
  margin-inline:auto;
  padding-inline:2vw;
}

header{
  padding:10vh 0 2vh;
}

.brand{
  margin:0;
  font-size:clamp(23px, 4.5vw, 44px); /* taille plus contenue pour éviter le wrap sur petits écrans [web:85][web:94][web:88] */
  letter-spacing:-0.02em;
  font-weight:800;
  white-space:nowrap;                 /* empêche le retour à la ligne [web:92][web:98] */
  overflow:hidden;                    /* nécessaire pour l’ellipsis [web:83] */
  text-overflow:ellipsis;             /* ajoute … si l’espace manque [web:83][web:80] */
  text-align:center;
}


/* HERO centré sous le titre */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:28vh;           /* place visuelle sous le titre */
  padding:6vh 0 10vh;
  margin:0 auto;
}

.tagline{
  margin:0;
  font-size:clamp(16px, 2.6vw, 24px);
  color:var(--muted);
}

footer.footer{
  border-top:1px solid rgba(10,10,10,0.12);
  padding:24px 0 40px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

a{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:3px;
}

a:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
}

.contact{ font-weight:600; }
.creators{
  margin:0;
  color:var(--muted);
  letter-spacing:0.01em;
}

/* Animations (opacity/transform pour perf) */
.fade-base{ opacity:0; transform:translateY(12px); }
.fade-in{ animation:fadeIn .8s var(--ease) .1s both; }
.fade-in-up{ animation:fadeInUp .9s var(--ease) 0s both; }
.fade-in-delayed{ animation:fadeIn .8s var(--ease) .3s both; }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Respecte prefers-reduced-motion: réduit la translation et garde le fondu */
@media (prefers-reduced-motion: reduce){
  .fade-in, .fade-in-up, .fade-in-delayed{
    animation-duration:.01ms;
    animation-iteration-count:1;
    animation-name:none;
    opacity:1; transform:none;
  }
}