/* =========================================================
   NEKO — page /community
   Deux portes et une annonce. Rien d'autre.
   DA inchangee : encre / papier / ambre, ni rouge ni vert.
   ========================================================= */

/* ---------- hero centre ----------
   Les autres sous-pages sont ferrees a gauche. Celle-ci est une
   invitation, pas un document : elle s'ouvre au centre. */
.thero--center{ text-align:center; padding-bottom:clamp(40px,6vh,70px); }
.thero--center .thero__inner{ max-width:880px; }
/* centre, la taille de la landing partait sur trois lignes et criait :
   deux lignes pleines valent mieux qu'un titre qui deborde */
.thero--center .thero__h{ font-size:clamp(34px,5.4vw,66px); }
.thero--center .thero__lede{ margin-inline:auto; }

/* =========================================================
   02 — les deux canaux
   ========================================================= */
.tsec--join{ border-top:0; padding-top:0; }

.join{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
}

.join__card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(30px,3.6vw,46px);
  border:1px solid var(--line); border-radius:24px;
  background:linear-gradient(165deg, rgba(244,242,237,.035), transparent 62%);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
/* la lueur ambre vit sur un pseudo-element : on anime une opacite,
   pas un degrade — un degrade en transition se recalcule a chaque frame */
.join__card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 110% at 22% 0%, rgba(240,196,138,.16), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.join__card:hover{ transform:translateY(-4px); border-color:rgba(240,196,138,.34); }
.join__card:hover::before{ opacity:1; }

.join__mark{
  display:flex; align-items:center;
  height:34px; margin-bottom:26px;
  color:var(--paper-mute);
  transition:color .4s var(--ease);
}
.join__mark svg{ height:34px; width:auto; }
.join__card:hover .join__mark{ color:var(--warm); }

.join__k{
  margin:0 0 12px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper-mute);
}
.join__t{
  margin:0 0 14px;
  font-size:clamp(21px,2.3vw,28px); line-height:1.15;
  font-weight:600; letter-spacing:-.025em;
}
.join__d{
  margin:0 0 34px; max-width:40ch;
  font-size:14px; line-height:1.6; color:var(--paper-dim);
}

.join__go{
  display:inline-flex; align-items:center; gap:10px;
  margin:auto 0 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--paper);
}
.join__go span{ transition:transform .35s var(--ease); color:var(--warm); }
.join__card:hover .join__go span{ transform:translateX(6px); }

/* =========================================================
   03 — ce qui arrive
   Une annonce, pas une maquette : pas de fausses cartes de projet,
   pas de graphique vide. Ce qui n'existe pas n'est pas dessine.
   ========================================================= */
.tsec--soon{ border-top:0; padding-bottom:clamp(80px,14vh,170px); }

.soon{
  position:relative; overflow:hidden;
  padding:clamp(40px,6vw,76px);
  border:1px solid var(--line); border-radius:24px;
  background:var(--ink-soft);
  text-align:center;
}
/* meme trame que le footer : ca signale « la meme maison », et ca
   remplit le cadre sans rien promettre */
.soon::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-size:52px 52px;
  background-image:
    linear-gradient(to right,  rgba(244,242,237,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,242,237,.04) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 50%, #000, transparent 75%);
          mask-image:radial-gradient(70% 80% at 50% 50%, #000, transparent 75%);
}
.soon > *{ position:relative; }

.soon__chip{
  display:inline-block; margin:0 0 24px;
  padding:7px 18px;
  border:1px solid rgba(240,196,138,.3); border-radius:999px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--warm);
}
.soon__h{
  margin:0 0 16px;
  font-size:clamp(25px,3.6vw,42px); line-height:1.08;
  font-weight:700; letter-spacing:-.03em;
}
.soon__d{
  margin:0 auto; max-width:52ch;
  font-size:15px; line-height:1.65; color:var(--paper-dim);
}