/* ═══════════════════════════════════════════════════════════════════════════
   Mission 100 — design system Seqooia
   Repris de l'Incubateur (preappel.seqooia.com) : fond clair à halos verts,
   cartes en verre, dégradé vert signature, badges pixel.
   Croisé avec My Seqooia : teals #0D9488/#0F766E et neutres slate.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Verts signature (Incubateur) */
  --green:      #1D9E75;
  --green2:     #2BC48A;
  --green3:     #14755C;
  /* Teals (My Seqooia) */
  --teal:       #0F766E;
  --teal-br:    #0D9488;
  --teal-deep:  #325A5A;
  --gold:       #C9A84C;
  --red:        #E74C3C;

  /* Fonds et neutres */
  --bg:         #F2F6F4;
  --tint:       #F0FDFA;
  --text:       #152520;
  --muted:      #64748B;
  --muted-2:    #94A3B8;
  --card:       rgba(255, 255, 255, .78);
  --border:     rgba(21, 64, 50, .09);
  --border-2:   #E2E8F0;

  --grad:       linear-gradient(135deg, #2BC48A 0%, #1D9E75 55%, #14755C 100%);
  --gradTeal:   linear-gradient(135deg, #325A5A 0%, #1D9E75 100%);

  --shadow-sm:    0 2px 10px -4px rgba(21, 64, 50, .10);
  --shadow-md:    0 14px 34px -16px rgba(21, 64, 50, .22);
  --shadow-green: 0 10px 26px -10px rgba(29, 158, 117, .45);

  --font:  'Telegraf', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pixel: 'Press Start 2P', monospace;

  --radius:    18px;
  --radius-sm: 12px;
  --topbar-h:  58px;
  --tabbar-h:  66px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  min-height: 100dvh;
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(43, 196, 138, .14), transparent 60%),
    radial-gradient(900px 520px at -8% 34%, rgba(50, 90, 90, .11), transparent 55%),
    radial-gradient(700px 420px at 60% 108%, rgba(29, 158, 117, .08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ── Trame de points ────────────────────────────────────────────────────────
   Équivalent CSS du composant DotPattern : même tuile de 16 px, point de
   rayon 1 posé en (1, 1). Teinte verte Seqooia plutôt que le gris d'origine.
   Un masque radial la fait respirer — dense en haut, effacée vers le bas —
   pour qu'elle reste un fond et ne concurrence pas le texte.
   ------------------------------------------------------------------------ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(29, 158, 117, .28) 1px, transparent 0);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(1200px 780px at 50% -5%, #000 10%, transparent 80%);
  mask-image: radial-gradient(1200px 780px at 50% -5%, #000 10%, transparent 80%);
}

/* Le contenu passe systématiquement au-dessus de la trame.
   (Le toast a déjà son propre z-index, plus haut.) */
.boot, .app { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ── Écran de démarrage ─────────────────────────────────────────────────── */
.boot { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.boot__inner { width: 100%; max-width: 460px; text-align: center; }
.boot__tagline { color: var(--muted); margin: 14px 0 28px; font-size: 15px; line-height: 1.55; }
.boot__auth { display: flex; justify-content: center; }
.boot__status { color: var(--muted); font-size: 13px; margin-top: 20px; }

/* ── Marque ─────────────────────────────────────────────────────────────── */
/* Le logo Seqooia est un PNG blanc sur fond transparent : on s'en sert comme
   masque pour le teinter avec le dégradé de marque, exactement comme sur
   preappel.seqooia.com. */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.logo-img {
  display: inline-block;
  width: 116px; height: 30px; flex-shrink: 0;
  background: var(--gradTeal);
  -webkit-mask: url('/logo.png') no-repeat left center / contain;
  mask: url('/logo.png') no-repeat left center / contain;
}
.brand__tag {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--green); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .15), rgba(29, 158, 117, .07));
  border: 1px solid rgba(29, 158, 117, .22);
}
.brand--lg { flex-direction: column; gap: 12px; }
.brand--lg .logo-img { width: 190px; height: 50px; background: var(--grad); }
.brand--lg .brand__tag { font-size: 12px; }

/* ── Barre supérieure ───────────────────────────────────────────────────── */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--topbar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 12px 32px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.topbar > .brand { justify-self: start; }
/* ── Menu principal ─────────────────────────────────────────────────────────
   Transposition du composant MenuBar « glow » : nacelle en verre, halo radial
   au survol de la barre, et bascule 3D de l'étiquette sur chaque entrée. Les
   dégradés multicolores d'origine laissent place au vert et au teal Seqooia.
   Framer Motion est remplacé par des transitions CSS — l'app n'embarque pas
   React.
   ------------------------------------------------------------------------ */
.nav {
  position: relative; justify-self: center;
  display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
/* Halo qui s'allume quand la souris entre dans la barre. */
.nav::before {
  content: ''; position: absolute; inset: -8px; z-index: 0; border-radius: 26px;
  pointer-events: none; opacity: 0; transition: opacity .5s cubic-bezier(.4, 0, .2, 1);
  background:
    radial-gradient(closest-side at 22% 50%, rgba(43, 196, 138, .30), transparent),
    radial-gradient(closest-side at 55% 50%, rgba(13, 148, 136, .26), transparent),
    radial-gradient(closest-side at 85% 50%, rgba(50, 90, 90, .24), transparent);
}
.nav:hover::before { opacity: 1; }

.nav__item {
  position: relative; z-index: 1;
  display: block; padding: 0; border: 0; background: transparent;
  border-radius: 12px; cursor: pointer;
  perspective: 600px;
  font-family: var(--font);
}
/* Lueur derrière l'entrée active ou survolée. */
.nav__item::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 16px;
  pointer-events: none; opacity: 0; transform: scale(.8);
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1),
              transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.nav__item:hover::before,
.nav__item.is-active::before { opacity: 1; transform: scale(1.6); }
.nav__item[data-nav="formation"]::before {
  background: radial-gradient(circle, rgba(43, 196, 138, .18) 0%, rgba(29, 158, 117, .07) 50%, transparent 100%);
}
.nav__item[data-nav="communaute"]::before {
  background: radial-gradient(circle, rgba(13, 148, 136, .18) 0%, rgba(15, 118, 110, .07) 50%, transparent 100%);
}

/* Deux faces empilées : la première bascule vers le haut, la seconde arrive. */
.nav__face {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  white-space: nowrap;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1),
              opacity .5s cubic-bezier(.2, .8, .2, 1),
              color .3s;
}
.nav__face--front { transform-origin: center bottom; }
.nav__face--back {
  position: absolute; inset: 0; z-index: 1;
  transform-origin: center top; transform: rotateX(90deg); opacity: 0;
}
.nav__item:hover .nav__face--front { transform: rotateX(-90deg); opacity: 0; }
.nav__item:hover .nav__face--back { transform: rotateX(0deg); opacity: 1; }
.nav__item:hover .nav__face,
.nav__item.is-active .nav__face { color: var(--text); }
.nav__item.is-active .nav__face { color: var(--green3); }

.nav__icon { width: 19px; height: 19px; flex: none; display: block; transition: color .3s; }
.nav__item[data-nav="formation"]:hover .nav__icon,
.nav__item[data-nav="formation"].is-active .nav__icon { color: var(--green); }
.nav__item[data-nav="communaute"]:hover .nav__icon,
.nav__item[data-nav="communaute"].is-active .nav__icon { color: var(--teal-br); }

/* Le CTA garde son remplissage plein : il ne se confond avec rien. */
.nav__item--cta::before { display: none; }
.nav__item--cta .nav__face {
  background: var(--grad); color: #fff;
  box-shadow: 0 5px 14px -3px rgba(29, 158, 117, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.nav__item--cta:hover .nav__face,
.nav__item--cta .nav__face { color: #fff; }
.nav__item--cta:hover { transform: translateY(-1px); }
.nav__item--cta .nav__icon { width: 17px; height: 17px; }

.topbar__right { justify-self: end; display: flex; align-items: center; gap: 10px; position: relative; }

.chip {
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 9px;
  border: 1px solid rgba(29, 158, 117, .22);
  background: linear-gradient(135deg, rgba(43, 196, 138, .15), rgba(29, 158, 117, .07));
  color: var(--green);
}
.chip--staff { color: var(--teal-br); border-color: rgba(13, 148, 136, .28); background: var(--tint); }

.userbtn {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .66); color: var(--text);
  border: 1px solid rgba(21, 64, 50, .13); border-radius: 999px;
  padding: 4px 14px 4px 4px;
  backdrop-filter: blur(10px);
  transition: all .22s cubic-bezier(.2, .8, .2, 1);
}
.userbtn:hover { border-color: rgba(29, 158, 117, .4); transform: translateY(-1px); }
.userbtn__avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gradTeal); color: #fff; font-weight: 700; font-size: 13px;
}
.userbtn__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.userbtn__name { font-size: 12.5px; font-weight: 700; }
.userbtn__level {
  font-family: var(--pixel); font-size: 7.5px; color: var(--green); letter-spacing: .2px;
}

.usermenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 232px; padding: 8px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.usermenu__head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.usermenu__head span { font-size: 11.5px; color: var(--green); font-weight: 700; }
.usermenu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font-size: 13.5px; cursor: pointer;
}
.usermenu button:hover { background: rgba(29, 158, 117, .08); color: var(--green); }

.tabbar { display: none; }

/* ── Contenu ────────────────────────────────────────────────────────────── */
.view { flex: 1; width: 100%; max-width: 1060px; margin: 0 auto; padding: 30px 24px 80px; outline: none; }

.page-head { margin-bottom: 24px; }
.page-head h1 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.7px; }
.page-head p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.eyebrow {
  display: inline-block; margin-bottom: 11px; padding: 4px 10px; border-radius: 8px;
  font-family: var(--pixel); font-size: 8px; letter-spacing: .3px; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(43, 196, 138, .15), rgba(29, 158, 117, .07));
  border: 1px solid rgba(29, 158, 117, .22);
  color: var(--green);
}

/* ── Cartes en verre ────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 14px;
  border: 1px solid rgba(21, 64, 50, .12);
  background: rgba(255, 255, 255, .75); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: all .25s cubic-bezier(.2, .8, .2, 1);
}
.btn:hover:not(:disabled) { border-color: rgba(29, 158, 117, .45); color: var(--green); transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(29, 158, 117, .55);
}
.btn--primary:hover:not(:disabled) {
  color: #fff; transform: translateY(-2px); filter: brightness(1.07);
  box-shadow: 0 14px 28px -10px rgba(29, 158, 117, .6);
}
.btn--ghost { background: transparent; border-color: transparent; }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: 12.5px; border-radius: 11px; }

/* ── Progression ────────────────────────────────────────────────────────── */
.progress {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; margin-bottom: 20px;
  background: var(--card);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.progress__bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(21, 64, 50, .1); overflow: hidden; }
.progress__fill {
  height: 100%; border-radius: 4px; background: var(--grad);
  box-shadow: 0 0 8px rgba(43, 196, 138, .6);
  transition: width .7s cubic-bezier(.22, .85, .25, 1);
}
.progress__label {
  font-family: var(--pixel); font-size: 8.5px; color: var(--green);
  white-space: nowrap; letter-spacing: .2px;
}
.progress__level { font-size: 12px; font-weight: 700; color: var(--teal-deep); white-space: nowrap; }

/* ── Liste des vidéos ───────────────────────────────────────────────────── */
.videolist { display: grid; gap: 11px; }
.videocard {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 19px;
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, outline-color .28s;
}
.videocard:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 20px 42px -18px rgba(29, 158, 117, .38);
  outline-color: rgba(29, 158, 117, .5);
}
.videocard__num {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(21, 64, 50, .06); color: var(--muted);
  font-weight: 800; font-size: 15px;
}
.videocard.is-done .videocard__num { background: var(--grad); color: #fff; box-shadow: var(--shadow-green); }
.videocard.is-current { outline-color: rgba(29, 158, 117, .55); }
.videocard.is-current .videocard__num {
  background: linear-gradient(135deg, rgba(43, 196, 138, .18), rgba(29, 158, 117, .09));
  color: var(--green);
}
.videocard__body { min-width: 0; }
.videocard__title { font-weight: 700; font-size: 15px; margin-bottom: 3px; letter-spacing: -.2px; }
.videocard__sub { font-size: 13px; color: var(--muted); }
.videocard__state { margin-left: auto; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.state--done { color: var(--green); }
.state--todo { color: var(--muted-2); }

/* ── Écran vidéo ────────────────────────────────────────────────────────── */
.player {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: #0B1512;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videohead { margin-bottom: 16px; }
.videohead h1 { margin: 6px 0 4px; font-size: 24px; letter-spacing: -.6px; }
.videohead__sub { color: var(--muted); font-size: 14px; }
.stepper { font-family: var(--pixel); font-size: 8px; color: var(--green); letter-spacing: .4px; }
.videodesc { margin: 18px 0 0; color: #3F5049; line-height: 1.7; font-size: 15px; }

/* ── Quiz ───────────────────────────────────────────────────────────────── */
.quiz { margin-top: 24px; }
.quiz__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.quiz__head h2 { margin: 0; font-size: 18px; letter-spacing: -.3px; }
.quiz__q { margin-top: 18px; }
.quiz__prompt { font-weight: 700; font-size: 14.5px; margin-bottom: 10px; line-height: 1.5; }
.quiz__opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 15px; margin-bottom: 8px;
  border: 1px solid rgba(21, 64, 50, .12); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .8);
  cursor: pointer; font-size: 14px; line-height: 1.5;
  transition: all .22s cubic-bezier(.2, .8, .2, 1);
}
.quiz__opt:hover { border-color: rgba(29, 158, 117, .5); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.quiz__opt input { margin-top: 2px; accent-color: var(--green); }
.quiz__opt.is-picked {
  border: 2px solid var(--green);
  background: linear-gradient(135deg, rgba(43, 196, 138, .14), rgba(29, 158, 117, .07));
  font-weight: 600;
}
.quiz__feedback { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.quiz__feedback.is-ok { color: var(--green); }
.quiz__feedback.is-ko { color: var(--red); }
.quiz__result { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.55; }
.quiz__result.is-ok {
  background: linear-gradient(135deg, rgba(43, 196, 138, .14), rgba(29, 158, 117, .06));
  border: 1px solid rgba(29, 158, 117, .3); color: var(--green3);
}
.quiz__result.is-ko { background: rgba(231, 76, 60, .06); border: 1px solid rgba(231, 76, 60, .28); color: #A93226; }

.videonav { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ── Bloc de conversion ─────────────────────────────────────────────────── */
/* Le portrait est détouré : on l'ancre en bas du bloc et on le laisse dépasser
   par le haut. La marge supérieure réserve la place de ce débordement. */
.pitch {
  position: relative;
  display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 30px; align-items: center;
  /* Hauteur plancher inférieure à celle du portrait : la tête dépasse donc
     toujours du même nombre de pixels, quel que soit le texte. */
  min-height: 252px;
  margin-top: 78px; padding: 28px 34px;
  border-radius: var(--radius);
  background:
    radial-gradient(closest-side at 85% -20%, rgba(255, 255, 255, .18), transparent),
    var(--gradTeal);
  color: #fff; box-shadow: var(--shadow-md);
  overflow: visible;
}
.pitch__photo {
  position: absolute; left: 22px; bottom: 0;
  height: 306px; width: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}
/* Sans photo disponible, le bloc reprend toute la largeur. */
.pitch--nophoto { grid-template-columns: 1fr; margin-top: 28px; }
.pitch--nophoto .pitch__photo { display: none; }

/* La photo étant en position absolue, elle sort du flux de la grille : le
   texte doit donc être placé explicitement dans la seconde colonne. */
.pitch__body { grid-column: 2; }
.pitch--nophoto .pitch__body { grid-column: 1; }
.pitch__body h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.4px; line-height: 1.3; }
.pitch__body p { margin: 0 0 18px; color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.65; }
.pitch .btn--primary { background: #fff; color: var(--green3); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .3); }
.pitch .btn--primary:hover { color: var(--green3); filter: none; transform: translateY(-2px); }

@media (max-width: 700px) {
  /* En colonne, la photo reprend le flux et se centre au-dessus du texte. */
  .pitch { grid-template-columns: 1fr; justify-items: center; text-align: center; margin-top: 60px; padding-top: 0; }
  .pitch__photo { position: static; width: 150px; margin-top: -52px; }
  .pitch__body { grid-column: 1; }
}

/* ── Communauté ─────────────────────────────────────────────────────────── */
/* Sous-onglets : ils filtrent tout l'écran, donc ils se lisent avant le titre.
   Défilement horizontal en petit écran plutôt qu'un retour à la ligne. */
.cats {
  display: flex; gap: 6px; margin-bottom: 20px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; flex: none;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--teal-deep);
  border: 1px solid transparent; background: transparent;
  transition: all .2s cubic-bezier(.2, .8, .2, 1);
}
.cat:hover { background: rgba(29, 158, 117, .08); color: var(--green); }
.cat.is-active {
  background: linear-gradient(135deg, rgba(43, 196, 138, .16), rgba(29, 158, 117, .08));
  border-color: rgba(29, 158, 117, .28);
  color: var(--green3); font-weight: 700;
}
.cat__count { opacity: .5; margin-left: 5px; font-weight: 500; }

.thread {
  display: block; padding: 17px 19px; margin-bottom: 10px;
  background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, outline-color .28s;
}
.thread:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -18px rgba(29, 158, 117, .35);
  outline-color: rgba(29, 158, 117, .5);
}
.thread__title { font-weight: 700; font-size: 15px; margin-bottom: 6px; line-height: 1.45; letter-spacing: -.2px; }
.thread__excerpt { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }
.thread__meta { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted-2); flex-wrap: wrap; }

.author { display: inline-flex; align-items: center; gap: 7px; }
.author__pseudo { font-weight: 700; color: var(--text); font-size: 13px; }
.grade {
  font-family: var(--pixel); font-size: 7.5px; padding: 4px 8px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .15), rgba(29, 158, 117, .08));
  border: 1px solid rgba(29, 158, 117, .25); color: var(--green);
  white-space: nowrap;
}
.grade--team { background: var(--tint); border-color: rgba(13, 148, 136, .3); color: var(--teal-br); }

.badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.badge--pending { background: rgba(201, 168, 76, .14); color: #8A6D1F; border: 1px solid rgba(201, 168, 76, .3); }
.badge--hidden  { background: rgba(231, 76, 60, .1); color: #A93226; border: 1px solid rgba(231, 76, 60, .25); }
.badge--helpful { background: linear-gradient(135deg, rgba(43, 196, 138, .16), rgba(29, 158, 117, .08)); color: var(--green); border: 1px solid rgba(29, 158, 117, .28); }

.message {
  padding: 17px 19px; margin-bottom: 10px;
  background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.message--auto {
  background: linear-gradient(135deg, rgba(43, 196, 138, .10), rgba(255, 255, 255, .8));
  outline-color: rgba(29, 158, 117, .3);
}
.message__body { margin-top: 10px; white-space: pre-wrap; line-height: 1.7; font-size: 14.5px; color: #3F5049; }
.message__body a { color: var(--green); text-decoration: underline; font-weight: 600; }
.message__actions { margin-top: 12px; }

/* ── Communauté : deux colonnes + podium ────────────────────────────────── */
.comm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.comm-main { min-width: 0; }
.comm-side { position: sticky; top: calc(var(--topbar-h) + 20px); }

.lb__title { font-weight: 700; font-size: 14.5px; letter-spacing: -.2px; }

/* Podium — transposition du composant LeaderboardPodium. */
.lp-podium { display: grid; gap: 10px; align-items: end; margin-top: 18px; }
.lp-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }

.lp-figure { position: relative; margin-bottom: 8px; }
.lp-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow-sm);
}
.lp-avatar--initial {
  display: grid; place-items: center;
  background: var(--gradTeal); color: #fff; font-weight: 700; font-size: 20px;
}
.lp-col--1 .lp-avatar { width: 62px; height: 62px; font-size: 24px; }
.lp-col--1 .lp-avatar--initial { background: var(--grad); }

.lp-crown {
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow-sm);
}
.lp-crown svg { width: 13px; height: 13px; }
.lp-col--1 .lp-crown { color: #C9A84C; }
.lp-col--2 .lp-crown { color: #A8B4BC; }
.lp-col--3 .lp-crown { color: #C08552; }

.lp-name {
  margin-top: 2px; font-size: 12.5px; font-weight: 700; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-value { font-family: var(--pixel); font-size: 7px; color: var(--green); margin-top: 4px; }

.lp-block {
  width: 100%; margin-top: 10px; border-radius: 10px 10px 0 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 7px;
  font-weight: 800; font-size: 14px;
}
.lp-col--1 .lp-block { height: 76px; background: rgba(201, 168, 76, .30); color: #8A6D1F; }
.lp-col--2 .lp-block { height: 56px; background: rgba(168, 180, 188, .32); color: #5A6B75; }
.lp-col--3 .lp-block { height: 44px; background: rgba(192, 133, 82, .28); color: #8A5A33; }

.lb__avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none;
}
.lb__avatar--initial {
  display: grid; place-items: center;
  background: var(--gradTeal); color: #fff; font-size: 10px; font-weight: 700;
}

.lb__list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.lb__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.lb__rank { width: 18px; color: var(--muted-2); font-weight: 700; font-size: 11.5px; }
.lb__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.lb__pts { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 980px) {
  .comm-layout { grid-template-columns: 1fr; }
  .comm-side { position: static; }
}

/* ── Formulaires ────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.field .hint,
.pf-field .hint { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
input[type=text], input[type=tel], textarea, select {
  width: 100%; padding: 12px 15px;
  background: rgba(255, 255, 255, .9); color: var(--text);
  border: 1px solid rgba(21, 64, 50, .13); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(43, 196, 138, .18);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.65; }

.notice { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.6; border: 1px solid var(--border); background: rgba(255, 255, 255, .8); }
.notice--warn { border-color: rgba(201, 168, 76, .35); background: rgba(201, 168, 76, .08); color: #7A5F16; }
.notice--error { border-color: rgba(231, 76, 60, .35); background: rgba(231, 76, 60, .07); color: #A93226; }

/* ── Espace équipe ──────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.table tbody tr:hover { background: rgba(29, 158, 117, .04); }
.table__scroll { overflow-x: auto; }
.tier { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.tier--chaud { background: rgba(231, 76, 60, .1); color: #A93226; border: 1px solid rgba(231, 76, 60, .25); }
.tier--tiède { background: rgba(201, 168, 76, .14); color: #8A6D1F; border: 1px solid rgba(201, 168, 76, .3); }
.tier--froid { background: rgba(100, 116, 139, .1); color: var(--muted); border: 1px solid rgba(100, 116, 139, .2); }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
  padding: 17px; background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .65); outline: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.stat__value { font-size: 25px; font-weight: 800; letter-spacing: -.7px; color: var(--teal-deep); }
.stat__label { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Profil d'investisseur (page d'atterrissage) ────────────────────────── */
/* Écran d'immersion : aucun en-tête, aucun onglet, aucun bouton d'appel.
   Rien qui détourne de la première étape. */
.onboarding .topbar,
.onboarding .tabbar { display: none; }
.onboarding .view { max-width: 1240px; padding-top: 40px; padding-bottom: 60px; }

.pf-brand { display: flex; justify-content: center; margin-bottom: 26px; }
.pf-brand .logo-img { width: 150px; height: 38px; background: var(--gradTeal); }

.pf-head { text-align: center; max-width: 660px; margin: 0 auto 22px; }
.pf-head h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.8px; }
.pf-head p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.pf-gauge { max-width: 660px; margin: 0 auto 24px; }
.pf-gauge__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pf-gauge__step { font-family: var(--pixel); font-size: 8px; color: var(--muted-2); letter-spacing: .3px; }
.pf-gauge__tag { font-size: 12px; font-weight: 700; color: var(--green); }
.pf-gauge__bar { height: 7px; border-radius: 4px; background: rgba(21, 64, 50, .1); overflow: hidden; }
.pf-gauge__fill {
  height: 100%; width: 0; border-radius: 4px; background: var(--grad);
  box-shadow: 0 0 8px rgba(43, 196, 138, .6);
  transition: width .55s cubic-bezier(.22, .85, .25, 1);
}

/* La vidéo prend plus de place que le formulaire : c'est elle qu'on regarde
   en répondant. Les deux colonnes partagent la même hauteur fixe et le même
   haut, pour que rien ne saute d'une question à l'autre. */
.pf-layout {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 700px);
  gap: 24px; align-items: start; justify-content: center;
  --pf-h: 394px;
}
.pf-form { display: flex; flex-direction: column; height: var(--pf-h); overflow: hidden; }
.pf-stage { flex: 1; min-height: 0; overflow-y: auto; }
.pf-question { margin: 0 0 5px; font-size: 17px; letter-spacing: -.3px; line-height: 1.35; }
.pf-hint { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pf-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.pf-error { color: var(--red); }

.pf-field { margin-top: 16px; }
.pf-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }

.pf-identity__names { display: flex; flex-direction: column; gap: 10px; }
.pf-pseudo { display: flex; align-items: center; gap: 10px; }
.pf-pseudo__state { font-size: 12px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.pf-pseudo__state.is-ok { color: var(--green); }
.pf-pseudo__state.is-ko { color: var(--red); }

.pf-avatar { display: flex; align-items: center; gap: 14px; }
.pf-avatar__preview {
  width: 58px; height: 58px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center;
  background: var(--gradTeal); color: #fff; font-weight: 700; font-size: 22px;
  border: 2px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-sm);
}
.pf-avatar__preview img { width: 100%; height: 100%; object-fit: cover; }

.pf-choices { display: flex; flex-direction: column; gap: 7px; }
.pf-choice {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(21, 64, 50, .12);
  background: rgba(255, 255, 255, .82);
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--text);
  line-height: 1.4;
  transition: all .2s cubic-bezier(.2, .8, .2, 1);
}
.pf-choice:hover { border-color: rgba(29, 158, 117, .5); box-shadow: var(--shadow-sm); }
.pf-choice.is-picked {
  border-color: var(--green); color: var(--green3);
  background: linear-gradient(135deg, rgba(43, 196, 138, .14), rgba(29, 158, 117, .07));
}
/* Pastille de sélection : vide au repos, cochée une fois choisie. */
.pf-choice__mark {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(21, 64, 50, .2);
  display: grid; place-items: center; color: transparent;
  transition: all .2s;
}
.pf-choice__mark svg { width: 11px; height: 11px; }
.pf-choice:hover .pf-choice__mark { border-color: rgba(29, 158, 117, .55); }
.pf-choice.is-picked .pf-choice__mark {
  background: var(--grad); border-color: transparent; color: #fff;
}

/* Curseurs : valeur en gros, saisie exacte possible sous la règle. */
.pf-duals { display: flex; flex-direction: column; gap: 18px; }
.pf-slider__label { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.pf-slider__value {
  display: block; font-size: 24px; font-weight: 800; letter-spacing: -.7px;
  color: var(--green3); margin-bottom: 10px;
}
/* Le rendu natif donnait une piste noire : on la dessine nous-mêmes. */
.pf-slider input[type=range] {
  width: 100%; height: 22px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.pf-slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 4px; background: rgba(21, 64, 50, .12);
}
.pf-slider input[type=range]::-moz-range-track {
  height: 6px; border-radius: 4px; background: rgba(21, 64, 50, .12);
}
.pf-slider input[type=range]::-moz-range-progress {
  height: 6px; border-radius: 4px; background: var(--grad);
}
.pf-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--grad); border: 2px solid #fff;
  box-shadow: 0 3px 10px -2px rgba(29, 158, 117, .6);
}
.pf-slider input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); border: 2px solid #fff;
  box-shadow: 0 3px 10px -2px rgba(29, 158, 117, .6);
}
.pf-slider input[type=range]:focus-visible { outline: 2px solid rgba(43, 196, 138, .5); outline-offset: 4px; }
.pf-slider__bounds {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; font-size: 11.5px; color: var(--muted-2); white-space: nowrap;
}
.pf-slider__exact { display: flex; align-items: center; gap: 6px; }
.pf-slider__manual {
  width: 108px; padding: 7px 10px; text-align: right;
  font-size: 13.5px; font-weight: 700;
}

.pf-video { height: var(--pf-h); }
.pf-video .player { height: 100%; aspect-ratio: auto; }
.pf-video-soon {
  display: grid; place-items: center; gap: 8px; text-align: center;
  height: 100%; border-radius: var(--radius);
  background: var(--card); border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border); color: var(--muted); font-size: 13.5px;
}

.pf-answer { padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); border: 1px solid var(--border); }
.pf-answer__q { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.pf-answer__a { font-size: 14.5px; font-weight: 700; color: var(--teal-deep); }

@media (max-width: 1080px) {
  /* La vidéo passe au-dessus : on la regarde, puis on répond. */
  .pf-layout { grid-template-columns: minmax(0, 660px); justify-content: center; }
  .pf-video { order: -1; height: auto; }
  .pf-video .player { aspect-ratio: 16 / 9; height: auto; }
  .pf-form { height: auto; min-height: 380px; }
}

/* ── Espace admin ───────────────────────────────────────────────────────── */
.admin-sub { font-size: 15px; margin: 22px 0 12px; letter-spacing: -.2px; }

.admin-video { padding: 0; overflow: hidden; }
.admin-video__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  cursor: pointer; list-style: none; font-weight: 700;
}
.admin-video__head::-webkit-details-marker { display: none; }
.admin-video__num {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 13px; font-weight: 800;
}
.admin-video__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-video__body { padding: 0 20px 20px; border-top: 1px solid var(--border); padding-top: 16px; }

.admin-question {
  padding: 16px; margin-bottom: 12px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--border);
}
.admin-options { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.admin-option { display: flex; align-items: center; gap: 9px; }
.admin-option input[type=radio] { accent-color: var(--green); flex: none; width: 17px; height: 17px; }
.admin-option input[type=text] { flex: 1; }

.pf-answer { padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); border: 1px solid var(--border); }
.pf-answer__q { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.pf-answer__a { font-size: 14.5px; font-weight: 700; color: var(--teal-deep); }

.admin-cat { display: grid; grid-template-columns: 1fr 1.4fr auto auto auto; gap: 10px; align-items: center; }
.admin-cat__active { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-cat input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; }

/* Les onglets de l'admin sont des boutons : même rendu que les liens du site. */
.nav__item[data-tab] { cursor: pointer; font-family: var(--font); }

@media (max-width: 860px) {
  .admin-cat { grid-template-columns: 1fr; }
  #admin .topbar .nav { display: flex; overflow-x: auto; }
}

/* ── Divers ─────────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.skeleton {
  height: 84px; border-radius: var(--radius); margin-bottom: 10px;
  background: var(--card); border: 1px solid rgba(255, 255, 255, .65);
  outline: 1px solid var(--border);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  max-width: 90vw; padding: 13px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px);
  border: 1px solid rgba(29, 158, 117, .3);
  box-shadow: var(--shadow-md); font-size: 14px; font-weight: 600; color: var(--green3);
}
.toast--error { border-color: rgba(231, 76, 60, .4); color: #A93226; }

.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 16px; font-weight: 600; }
.backlink:hover { color: var(--green); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .topbar { padding: 12px 16px; }
  .topbar .nav { display: none; }
  .brand__tag { display: none; }
  .logo-img { width: 96px; height: 26px; }
  .userbtn__meta { display: none; }
  .userbtn { padding: 4px; }
  .view { padding: 22px 16px calc(var(--tabbar-h) + 30px); }

  .tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 700; color: var(--teal-deep);
  }
  .tabbar__item svg { width: 21px; height: 21px; }
  .tabbar__item.is-active {
    background: linear-gradient(135deg, rgba(43, 196, 138, .16), rgba(29, 158, 117, .08));
    color: var(--green);
  }
  .tabbar__item--cta,
  .tabbar__item--cta.is-active {
    background: var(--grad); color: #fff;
    box-shadow: 0 5px 14px -3px rgba(29, 158, 117, .5);
  }
  .videohead h1 { font-size: 21px; }
  .page-head h1 { font-size: 23px; }
  .progress { flex-wrap: wrap; }
  .progress__bar { order: 3; flex-basis: 100%; }
}

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