/* ═══════════════════════════════════════════════════════════════════════════
   Seqooia Campus — 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; }
html { scroll-behavior: smooth; }

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;
}

/* Un seul décor à la fois : la page d'arrivée a son quadrillage animé, les
   autres ont la trame de points. Les deux superposés se brouillaient. */
body.onboarding::before { display: none; }

/* ── 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%);
}

/* ── Trame animée de l'atterrissage ─────────────────────────────────────────
   Deux quadrillages superposés qui défilent en boucle : le premier reste
   très pâle, le second, bien plus net, n'apparaît qu'autour du curseur grâce
   à un masque radial. Les couleurs sont celles de la marque — le composant
   d'origine posait des halos orange et bleus, hors identité.
   ------------------------------------------------------------------------ */
.grid-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  --gx: 0px; --gy: 0px;
}
.grid-fx__layer {
  position: absolute; inset: -40px;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: var(--gx) var(--gy);
}
.grid-fx__layer--base { color: rgba(21, 64, 50, .5); opacity: .05; }
/* La couche vive est révélée par le halo, qui suit le curseur. */
.grid-fx__layer--live {
  color: var(--green); opacity: calc(.5 * var(--halo, 0));
  --mx: 50%; --my: 50%;
  transition: opacity .35s ease;
  -webkit-mask-image: radial-gradient(320px circle at var(--mx) var(--my), #000, transparent);
  mask-image: radial-gradient(320px circle at var(--mx) var(--my), #000, transparent);
}

/* 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);
  /* Colonnes de côté en `1fr` (minimum : leur contenu) : le menu reste au
     centre de la page tant que la place le permet, et ne se décale vers la
     gauche que si le groupe de droite a besoin de plus — jamais de
     chevauchement. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 28px;
  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 ─────────────────────────────────────────────────────────
   Une nacelle en verre ; dedans, une seule pastille pleine qui glisse sous
   l'entrée en cours (cf. js/pastille.js) — le sélecteur Mois / Année de
   Hubooia. Au survol, rien ne s'allume : le texte fonce légèrement, et
   l'icône s'anime selon sa forme. L'appel n'est plus dans le menu : il a son
   propre bouton, à droite.
   ------------------------------------------------------------------------ */
.nav {
  position: relative; justify-self: center;
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 16px;
  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);
}

/* La pastille : posée en absolu, déplacée en transform. Le léger dépassement
   de la courbe fait l'effet « bulle » à l'arrivée. */
.pastille {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0;
  border-radius: 12px; pointer-events: none;
  background: var(--grad);
  box-shadow: 0 4px 12px -4px rgba(29, 158, 117, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* Les onglets passent devant la pastille, qui est en position absolue. */
.has-pastille > :not(.pastille) { position: relative; z-index: 1; }
.pastille.is-ready {
  transition: transform .5s cubic-bezier(.34, 1.3, .5, 1),
              width .5s cubic-bezier(.34, 1.3, .5, 1),
              height .3s ease, opacity .2s ease;
}

.nav__item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 0; border-radius: 12px; background: transparent;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--muted);
  white-space: nowrap; cursor: pointer;
  transition: color .25s ease;
}
.nav__item:hover { color: var(--text); }
/* Sur la pastille, l'entrée passe en blanc — un rien après le départ de la
   pastille, pour ne pas écrire blanc sur blanc pendant qu'elle arrive. */
.nav__item.is-active { color: #fff; transition: color .25s ease .12s; }

.nav__icon { width: 19px; height: 19px; flex: none; display: block; overflow: visible; }
.nav__icon * { transform-box: fill-box; transform-origin: center; }

/* Une animation par icône, au survol, selon sa forme. */
.nav__item:hover .nav__icon--play { animation: nav-play .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes nav-play { 40% { transform: translateX(3px) scale(.92); } }

.nav__item:hover .nav__p1 { animation: nav-hop .7s cubic-bezier(.3, 1.5, .5, 1); }
.nav__item:hover .nav__p2 { animation: nav-hop .7s cubic-bezier(.3, 1.5, .5, 1) .14s; }
@keyframes nav-hop { 35% { transform: translateY(-3px); } 65% { transform: translateY(.5px); } }

.nav__item:hover .nav__k1 { animation: nav-k1 .9s cubic-bezier(.45, 0, .2, 1); }
.nav__item:hover .nav__k2 { animation: nav-k2 .9s cubic-bezier(.45, 0, .2, 1) .06s; }
.nav__item:hover .nav__k3 { animation: nav-k3 .9s cubic-bezier(.45, 0, .2, 1) .12s; }
@keyframes nav-k1 { 50% { transform: translateX(7px); } }
@keyframes nav-k2 { 50% { transform: translateX(-7px); } }
@keyframes nav-k3 { 50% { transform: translateX(6px); } }

.nav__item:hover .nav__icon--star { animation: nav-star .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes nav-star { 45% { transform: rotate(36deg) scale(1.14); } }

.nav__item:hover .nav__needle { animation: nav-needle 1s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes nav-needle { 30% { transform: rotate(-35deg); } 65% { transform: rotate(22deg); } }

@media (prefers-reduced-motion: reduce) {
  .nav__icon, .nav__icon * { animation: none !important; }
  .pastille.is-ready { transition-duration: .01ms; }
}


.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); }
/* PROVISOIRE — bouton de test, volontairement distinct des chips de l'app. */
.chip--test {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: #7A5F16; border-color: rgba(201, 168, 76, .45);
  background: rgba(201, 168, 76, .12);
  cursor: pointer; font-family: var(--font);
}
.chip--test:hover { background: rgba(201, 168, 76, .2); }
.chip--test svg { flex: none; }
.chip--test:disabled { opacity: .5; cursor: progress; }

/* ── Coin du compte ─────────────────────────────────────────────────────────
   La série et le compte formaient deux boutons distincts, chacun avec sa
   bordure, son ombre et ses deux lignes de texte. Côte à côte leurs marges se
   cognaient, et dès que la fenêtre se resserrait l'ensemble débordait de
   l'écran. Ils deviennent une capsule unique : une bordure, un filet entre les
   deux moitiés, deux pastilles rondes de même gabarit. Sous 1200 px le texte
   se replie et ne laisse que les pastilles — le détail revient au survol, en
   étiquette flottante, qui ne pousse rien puisqu'elle sort du flux.
   ------------------------------------------------------------------------ */
.uc {
  display: flex; align-items: stretch; flex: none;
  border: 1px solid rgba(21, 64, 50, .13); border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  transition: border-color .24s ease, box-shadow .24s ease;
}
.uc:hover { border-color: rgba(29, 158, 117, .34); }
/* Le filet ne se pose que si la série est réellement affichée : sans la
   condition, le bouton de compte seul en hériterait. */
.uc > .streak:not([hidden]) + * { box-shadow: inset 1px 0 0 rgba(21, 64, 50, .1); }

.streak, .userbtn {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px;
  border: 0; background: transparent; color: var(--text);
  border-radius: 999px; cursor: pointer;
  font-family: var(--font); line-height: 1.2;
}
/* Rien ne bouge au survol : c'est la pastille qui s'allume d'un anneau. Un
   décalage vertical, ici, faisait vibrer toute la barre. */
.streak__trees, .userbtn__avatar {
  width: 30px; height: 30px; flex: none; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  transition: box-shadow .24s cubic-bezier(.2, .8, .2, 1);
}
.streak:hover .streak__trees,
.userbtn:hover .userbtn__avatar,
.streak:focus-visible .streak__trees,
.userbtn:focus-visible .userbtn__avatar { box-shadow: 0 0 0 3px rgba(43, 196, 138, .22); }

.userbtn__avatar { background: var(--gradTeal); color: #fff; font-weight: 700; font-size: 13px; }
.userbtn__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.streak__meta, .userbtn__meta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; min-width: 0;
}
.streak__days, .userbtn__name {
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  max-width: 104px; overflow: hidden; text-overflow: ellipsis;
}
.streak__label, .userbtn__level {
  font-family: var(--pixel); font-size: 7.5px; color: var(--green);
  letter-spacing: .2px; white-space: nowrap;
}

/* Étiquette de survol, pour l'état replié. Hors flux : elle ne déplace ni la
   capsule ni le menu centré. */
/* Calée sur le bord droit du bouton, jamais centrée : ces boutons touchent le
   bord de la fenêtre, une étiquette centrée en sortirait. */
.topbar__right [data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 11px); right: 0; z-index: 70;
  transform: translateY(-5px);
  padding: 7px 11px; border-radius: 10px;
  background: rgba(17, 40, 33, .95); color: #fff;
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; pointer-events: none; opacity: 0;
  box-shadow: 0 14px 28px -14px rgba(10, 30, 24, .7);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

.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; }

/* Bouton « flow » : la pastille s'ouvre depuis le centre, le texte glisse et
   les deux flèches se relaient de gauche à droite. Les couleurs passent par
   des variables pour pouvoir reposer le bouton sur n'importe quel fond. */
.btn-flow {
  --flow-fg: var(--green3);
  --flow-bd: rgba(21, 64, 50, .28);
  --flow-fill: var(--green3);
  --flow-fg-on: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 13px 32px; overflow: hidden;
  border: 1.5px solid var(--flow-bd); border-radius: 100px;
  background: transparent; color: var(--flow-fg);
  font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: color .6s cubic-bezier(.23, 1, .32, 1),
              border-color .6s cubic-bezier(.23, 1, .32, 1),
              border-radius .6s cubic-bezier(.23, 1, .32, 1),
              transform .18s ease;
}
.btn-flow:hover { color: var(--flow-fg-on); border-color: transparent; border-radius: 12px; }
.btn-flow:active { transform: scale(.95); }
.btn-flow:focus-visible { outline: 2px solid var(--flow-fg); outline-offset: 3px; }

.btn-flow__arr {
  position: absolute; z-index: 9; width: 16px; height: 16px;
  fill: none; stroke: var(--flow-fg); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: left .8s cubic-bezier(.34, 1.56, .64, 1),
              right .8s cubic-bezier(.34, 1.56, .64, 1),
              stroke .6s cubic-bezier(.23, 1, .32, 1);
}
.btn-flow__arr--left { left: -25%; }
.btn-flow__arr--right { right: 16px; }
.btn-flow:hover .btn-flow__arr { stroke: var(--flow-fg-on); }
.btn-flow:hover .btn-flow__arr--left { left: 16px; }
.btn-flow:hover .btn-flow__arr--right { right: -25%; }

.btn-flow__label {
  position: relative; z-index: 1; transform: translateX(-12px);
  transition: transform .8s ease;
}
.btn-flow:hover .btn-flow__label { transform: translateX(12px); }

/* La pastille reste centrée quelle que soit sa taille grâce au translate. */
.btn-flow__circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--flow-fill); opacity: 0;
  transition: width .8s cubic-bezier(.19, 1, .22, 1),
              height .8s cubic-bezier(.19, 1, .22, 1),
              opacity .8s cubic-bezier(.19, 1, .22, 1);
}
.btn-flow:hover .btn-flow__circle { width: 260px; height: 260px; opacity: 1; }

/* Variante remplie : le vert de l'en-tête au repos ; au survol, la pastille
   blanche s'ouvre et le texte repasse en vert — même geste que sur le bloc
   de conversion. */
.btn-flow--filled {
  --flow-fg: #fff;
  --flow-bd: transparent;
  --flow-fill: #fff;
  --flow-fg-on: var(--green3);
  background: var(--grad); box-shadow: var(--shadow-green);
}
.btn-flow--filled:hover { box-shadow: 0 14px 28px -10px rgba(29, 158, 117, .6); }

/* Le bouton d'appel de l'en-tête : le vert dégradé de l'onglet actif, la
   taille de texte des onglets. Au survol, la pastille du bouton « flow »
   s'ouvre en vert profond — blanche, elle se fondrait dans l'en-tête. */
.topcta {
  --flow-fg: #fff;
  --flow-bd: transparent;
  --flow-fill: #0E5E4A;
  --flow-fg-on: #fff;
  justify-content: center; padding: 0 30px;
  background: var(--grad);
  box-shadow: 0 4px 12px -4px rgba(29, 158, 117, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.topcta:hover { box-shadow: 0 8px 18px -6px rgba(20, 117, 92, .6); }
/* Bouton et capsule dans deux colonnes égales : même largeur, même hauteur. */
/* `width: max-content` est la clé : en largeur « au contenu », des colonnes
   en 1fr prennent toutes la largeur de la plus large. Sans elle, quand la
   barre manque de place, chaque colonne retombait à sa propre largeur. */
.tb-duo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 10px; width: max-content; flex: none; }
/* Ni l'un ni l'autre ne se tasse : l'en-tête décale le menu plutôt. */
.tb-duo > * { min-width: max-content; }

@media (prefers-reduced-motion: reduce) {
  .btn-flow, .btn-flow__arr, .btn-flow__label, .btn-flow__circle { transition-duration: .01ms; }
}

/* ── Progression ────────────────────────────────────────────────────────── */
/* ── Progression : points d'étape ────────────────────────────────────────
   Une pastille par vidéo, reliées par des segments qui se remplissent. Les
   segments sont dans une couche à part, d'un centre de pastille à l'autre :
   chacun se remplit seul, sans déplacer le reste.
   ------------------------------------------------------------------------ */
.steps { padding: 2px 6px 0; margin-bottom: 26px; }
/* Le compteur de palier se lit en haut de page, à côté de l'œil-de-bœuf :
   une petite boîte au fond transparent, en noir, et pas une pastille. */
.page-head__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.palier {
  display: inline-block; margin-bottom: 11px; padding: 4px 10px; border-radius: 8px;
  background: var(--text); border: 1px solid var(--text);
  font-family: var(--pixel); font-size: 8px; letter-spacing: .3px;
  color: #fff;
}

.steps__body { position: relative; }
.steps__track { display: flex; list-style: none; margin: 0; padding: 0; }
.step { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.steps__lines { position: absolute; inset: 0; pointer-events: none; }
.steps__line {
  position: absolute; top: 13px; height: 2.5px; margin-top: -1.25px;
  border-radius: 2px; background: rgba(21, 64, 50, .1); overflow: hidden;
}
.steps__fill {
  display: block; height: 100%; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--green2), var(--green));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s cubic-bezier(.33, .7, .3, 1);
}

.step__node {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .8); border: 1.5px solid var(--border-2);
  color: var(--muted-2); font-size: 11.5px; font-weight: 800;
  transition: background .35s ease, border-color .35s ease, color .35s ease,
              transform .35s cubic-bezier(.34, 1.5, .5, 1), box-shadow .35s ease;
}
.step__node:hover { transform: scale(1.08); }
.step__check, .step__lock { display: none; }
.step__check svg { width: 13px; height: 13px; display: block; }
.step__lock svg { width: 12px; height: 12px; display: block; }
/* Étape encore à débloquer : cadenas vert, fond blanc, rien de plus. */
.step.is-locked .step__node {
  background: #fff; border-color: var(--border-2); color: var(--green);
  cursor: default;
}
.step.is-locked .step__node:hover { transform: none; }
.step.is-locked .step__num { display: none; }
.step.is-locked .step__lock { display: block; }
.step.is-locked .step__label { color: var(--muted-2); }

/* Palier validé : pastille pleine et coche. */
.step.is-done .step__node {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px -3px rgba(29, 158, 117, .6);
}
.step.is-done .step__num { display: none; }
.step.is-done .step__check { display: block; }

/* Palier en cours : pastille claire, anneau vert, et une respiration lente. */
.step.is-current .step__node {
  background: #fff; border-color: var(--green); color: var(--green3);
  box-shadow: 0 0 0 3px rgba(43, 196, 138, .16);
  animation: step-breathe 2.6s ease-in-out infinite;
}
@keyframes step-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(43, 196, 138, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(43, 196, 138, .09); }
}

/* Onde au moment où la pastille s'allume. */
.step__ripple {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--green2); opacity: 0; pointer-events: none;
}
.step.is-lighting .step__node { animation: step-pop .7s cubic-bezier(.34, 1.5, .5, 1); }
.step.is-lighting .step__ripple { animation: step-ripple .7s cubic-bezier(.2, .7, .3, 1); }
@keyframes step-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes step-ripple {
  0%   { opacity: .75; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.6); }
}

.step__label { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .steps__fill { transition: none; }
  .step.is-current .step__node { animation: none; }
  .step.is-lighting .step__node, .step.is-lighting .step__ripple { animation: none; }
}

/* ── Liste des vidéos ────────────────────────────────────────────────────
   Image calée à gauche, titre et preuve sociale au centre, cœur à droite. Au
   survol, le sous-titre se déplie vers la droite : la carte garde sa hauteur
   au lieu de pousser les suivantes vers le bas.
   ------------------------------------------------------------------------ */
/* Gabarit de la carte : l'image occupe toute la hauteur, d'où une hauteur
   fixe. Ces deux mesures sont aussi celles annoncées dans l'admin. */
/* 220 × 132 : même rapport 5:3 qu'avant (160 × 96), en plus grand, pour
   qu'on voie vraiment l'image. */
:root { --card-h: 132px; --card-img-w: 220px; --card-main-w: 350px; }
.videolist { display: grid; gap: 11px; }
.videocard {
  position: relative;
  display: flex; align-items: stretch;
  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);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, outline-color .28s;
}
.videocard:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: 0 20px 42px -18px rgba(29, 158, 117, .38);
  outline-color: rgba(29, 158, 117, .5);
}
.videocard__link {
  flex: 1; min-width: 0; display: flex; align-items: center;
  height: var(--card-h); cursor: pointer; color: inherit;
}

/* L'image touche le bord gauche, le haut et le bas de la carte. Son bord
   droit s'efface en fondu — un masque plutôt qu'un voile blanc, pour que le
   fond de la carte se voie réellement à travers, quel que soit le décor. */
.videocard__img {
  position: relative; flex: none; align-self: stretch;
  width: var(--card-img-w);
  display: grid; place-items: center;
  background: rgba(21, 64, 50, .06);
  /* Rampe longue et progressive : l'image s'efface sur près de la moitié de
     sa largeur, au lieu de s'arrêter net. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .18) 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .18) 82%, transparent 100%);
}
.videocard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.videocard__num { color: var(--muted); font-weight: 800; font-size: 19px; margin-right: 28%; }
.videocard.is-current .videocard__img {
  background: linear-gradient(135deg, rgba(43, 196, 138, .18), rgba(29, 158, 117, .09));
}
.videocard.is-current .videocard__num { color: var(--green); }
/* Coche d'étape validée, posée sur la partie pleine de l'image. */
.videocard__done {
  position: absolute; left: 8px; bottom: 8px;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 6px -1px rgba(21, 64, 50, .45);
}

.videocard__main { min-width: 0; flex: 0 0 var(--card-main-w); padding-left: 22px; }

/* Étape verrouillée : l'image passe en gris, assombrie et floutée, et porte
   un cadenas plein dans une pastille blanche — impossible à confondre avec
   une vidéo ouverte. Au survol, l'anse se soulève et retombe, et une
   étiquette dit quoi faire pour l'ouvrir. */
.videocard.is-locked .videocard__link { cursor: not-allowed; }
.videocard.is-locked .videocard__img img { filter: grayscale(1) blur(2.5px) brightness(.8); transform: scale(1.06); }
.videocard.is-locked .videocard__img { background: #E3E8E6; }
.videocard.is-locked .videocard__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(14, 32, 27, .55), rgba(14, 32, 27, .3));
}
.videocard.is-locked .videocard__num { opacity: .35; }
.videocard.is-locked .videocard__title { color: var(--muted); }
.videocard.is-locked .videocard__meta .state--locked { color: var(--muted); }
.videocard.is-locked:hover { transform: none; }
.videocard__lock {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
}
.videocard__lockbadge {
  display: grid; place-items: center; width: 46px; height: 46px; margin-right: 28%; border-radius: 50%;
  background: #fff; color: var(--green3);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 8px 18px -6px rgba(0, 0, 0, .55);
}
.videocard__lockbadge svg { width: 22px; height: 22px; display: block; overflow: visible; }
.videocard__lockbadge .lk-anse { transform-origin: 15.5px 11px; }
.videocard.is-locked:hover .videocard__lockbadge { animation: lk-secoue .7s cubic-bezier(.3, 1.4, .5, 1); }
.videocard.is-locked:hover .lk-anse { animation: lk-anse .9s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes lk-anse { 30% { transform: translateY(-3.5px) rotate(-14deg); } 60% { transform: translateY(-3.5px) rotate(-14deg); } }
@keyframes lk-secoue { 20% { transform: rotate(-8deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
/* L'étiquette : sur l'image, sous le cadenas, au survol seulement. */
.videocard__locktip {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px);
  padding: 4px 9px; border-radius: 999px; background: rgba(10, 26, 22, .88); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1);
  pointer-events: none;
}
.videocard.is-locked:hover .videocard__locktip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .videocard.is-locked:hover .videocard__lockbadge, .videocard.is-locked:hover .lk-anse { animation: none; }
}
.state--locked { color: var(--muted-2); }
.videocard__meta {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted-2);
}
.videocard__meta .sep { opacity: .5; }
.videocard__state { font-weight: 700; }
.state--done { color: var(--green); }
.state--todo { color: var(--muted-2); }
/* Le titre passe à la ligne plutôt que de finir en « … » : on le lit en
   entier. Il remplit d'abord toute sa colonne (`pretty` évite seulement le
   mot orphelin) : pas de grand vide entre le titre et le filet du survol. */
.videocard__title {
  font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.2px;
  text-wrap: pretty;
}

/* Pied de carte, en bas à droite : les visages, le décompte, puis le cœur,
   alignés sur une même ligne. Hors du lien : un clic n'ouvre pas la vidéo. */
.videocard__foot {
  position: absolute; right: 14px; bottom: 11px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
/* Preuve sociale : trois visages qui se chevauchent, puis le décompte. */
.videocard__social { display: flex; align-items: center; gap: 8px; }
.faces { display: inline-flex; }
.faces__one {
  width: 24px; height: 24px; flex: none; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  background: var(--gradTeal); color: #fff; font-size: 10px; font-weight: 800;
  border: 2px solid #fff; margin-left: -7px;
}
.faces__one:first-child { margin-left: 0; }
.videocard__count { font-size: 11.5px; color: var(--muted); }

/* Le sous-titre se déplie au survol, à gauche, juste à côté du titre : un
   filet vertical se dessine d'abord, puis le texte se dévoile vers la droite.
   Le bloc du titre a une largeur fixe, assez large pour qu'un long titre
   tienne sur deux lignes, si bien que le sous-titre démarre au même endroit
   sur toutes les cartes. Peu d'écart autour du filet : le titre garde la place. */
.videocard__more {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; align-items: center;
  padding: 0 26px 0 0;
}
.videocard__moreIn {
  position: relative; min-width: 0; max-width: 340px;
  margin-left: 4px; padding-left: 14px;
}
.videocard__moreIn::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px;
  background: var(--border); transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.22, .85, .25, 1);
}
.videocard__moreIn p {
  margin: 0; text-align: left;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  clip-path: inset(0 100% 0 0); opacity: 0;
  transition: clip-path .45s cubic-bezier(.22, .85, .25, 1) .08s, opacity .25s ease .08s;
}
.videocard:hover .videocard__moreIn::before { transform: scaleY(1); }
.videocard:hover .videocard__moreIn p { clip-path: inset(0 0 0 0); opacity: 1; }

/* Le cœur, à la taille du texte à côté de lui. */
.like {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(21, 64, 50, .05); border: 1px solid transparent;
  color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.like:hover { background: rgba(231, 76, 60, .09); color: var(--red); transform: scale(1.05); }
.like__heart svg { width: 11px; height: 11px; display: block; fill: currentColor; }
.like.is-on { background: rgba(231, 76, 60, .11); border-color: rgba(231, 76, 60, .25); color: var(--red); }
.like.is-beating .like__heart { animation: like-beat .5s cubic-bezier(.34, 1.5, .5, 1); }
@keyframes like-beat {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.4); }
  60%      { transform: scale(.92); }
}

@media (max-width: 760px) {
  /* Pas de survol au doigt : le sous-titre reste sur la page de la vidéo. Le
     titre prend toute la place, en gardant dessous celle du pied de carte. */
  :root { --card-img-w: 118px; --card-h: 124px; }
  .videocard__main { max-width: none; flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px 32px 14px; }
  .videocard__title { font-size: 14px; }
  .videocard__more { display: none; }
  .videocard__foot { right: 10px; bottom: 9px; gap: 8px; }
  .videocard__count { font-size: 11px; }
}

/* ── É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; }
/* Vidalytics pose son lecteur dans cet hôte ; le cadre 16/9 vient du parent. */
.player__vidalytics { position: absolute; inset: 0; }
.player--soon { display: grid; place-items: center; color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.player__error { margin: 0; padding: 18px; text-align: center; color: var(--muted); font-size: 13.5px; }
.videohead { margin-bottom: 18px; text-align: center; }
.videohead h1 { margin: 4px 0 4px; font-size: 24px; letter-spacing: -.6px; }
.videohead__sub { color: var(--muted); font-size: 14px; }
/* Même pastille que « Formation gratuite » en tête de la liste. */
.stepper {
  display: inline-block; margin-bottom: 7px; padding: 4px 10px; border-radius: 8px;
  font-family: var(--pixel); font-size: 8px; letter-spacing: .3px;
  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);
}
.videodesc { margin: 18px 0 0; color: #3F5049; line-height: 1.7; font-size: 15px; }
.videonav { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* Sous le lecteur : flèche, appel, flèche. Les flèches gardent leur place même
   éteintes pour que le bouton central ne bouge jamais d'une vidéo à l'autre. */
.videobar {
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 16px;
  margin-top: 16px;
}
.videobar__arrow {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--border);
  color: var(--green3); box-shadow: var(--shadow-sm);
  transition: all .22s cubic-bezier(.2, .8, .2, 1);
}
.videobar__arrow svg { width: 26px; height: 26px; }
.videobar__arrow:hover { border-color: var(--green); background: #fff; transform: scale(1.06); box-shadow: var(--shadow-green); }
.videobar__arrow--prev:hover { transform: scale(1.06) translateX(-2px); }
.videobar__arrow--next:hover { transform: scale(1.06) translateX(2px); }
.videobar__arrow.is-off { opacity: .28; pointer-events: none; box-shadow: none; }
.videobar__cta { justify-self: center; padding: 15px 40px; font-size: 15px; }
@media (max-width: 600px) {
  .videobar { grid-template-columns: 46px 1fr 46px; gap: 10px; }
  .videobar__arrow { width: 46px; height: 46px; }
  .videobar__cta { padding: 13px 24px; font-size: 14px; }
}

/* ── 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; }
/* Sur le dégradé teal, la pastille est blanche et le texte repasse en vert. */
.pitch .btn-flow {
  --flow-fg: #fff;
  --flow-bd: rgba(255, 255, 255, .55);
  --flow-fill: #fff;
  --flow-fg-on: var(--green3);
}
.pitch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Le bouton d'appel, plein, dans un vert fluo qui se détache du dégradé :
   texte vert profond au repos, et la même pastille blanche au survol. */
.pitch .btn-flow--fluo {
  --flow-fg: #053B29;
  --flow-bd: transparent;
  --flow-fill: #fff;
  --flow-fg-on: var(--green3);
  background: linear-gradient(135deg, #7DFFC0 0%, #3BF59B 50%, #1EDB80 100%);
  box-shadow: 0 10px 26px -10px rgba(59, 245, 155, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.pitch .btn-flow--fluo:hover { box-shadow: 0 14px 30px -10px rgba(59, 245, 155, .9); }

@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; }
  .pitch__actions { justify-content: center; }
}

/* ── Série de connexion ─────────────────────────────────────────────────────
   Un arbre par semaine entamée, le compte des jours à côté. Le badge se pose
   à gauche du bouton de compte, dans la barre du haut.
   ------------------------------------------------------------------------ */
/* Gabarit et comportement sont communs au bouton de compte : voir « Coin du
   compte ». Ne reste ici que ce qui distingue la série. */
.streak__trees {
  background: linear-gradient(135deg, rgba(43, 196, 138, .2), rgba(29, 158, 117, .08));
  border: 1px solid rgba(29, 158, 117, .18);
}
/* La pousse du trophée Pionnier : elle se balance un peu au survol. */
.streak__trees svg { width: 17px; height: 17px; display: block; transform-origin: 50% 90%; }
.streak:hover .streak__trees svg { animation: serie-pousse .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes serie-pousse { 30% { transform: rotate(-9deg) scale(1.08); } 65% { transform: rotate(6deg); } }

/* ── Fenêtre de la série ─────────────────────────────────────────────────── */
.modal__card--streak { max-width: 420px; }
.sk-hero { text-align: center; }
.sk-hero__trees {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 17px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .2), rgba(29, 158, 117, .07));
  border: 1px solid rgba(29, 158, 117, .2);
}
.sk-hero__trees .cm-ico { width: 28px; height: 28px; }
.sk-hero__count {
  font-size: 52px; font-weight: 800; line-height: 1.05; letter-spacing: -2.5px;
  color: var(--green3); margin-top: 6px;
}
.sk-hero__unit { font-size: 13px; font-weight: 700; color: var(--muted); }
.sk-msg { margin: -4px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* Calendrier mensuel : une case par jour, l'arbre marque une présence. */
.sk-cal { display: flex; flex-direction: column; gap: 10px; }
.sk-cal__head { display: flex; align-items: center; gap: 8px; }
.sk-cal__month { flex: 1; text-align: center; display: flex; flex-direction: column; }
.sk-cal__month strong { font-size: 14.5px; text-transform: capitalize; }
.sk-cal__count { font-size: 11.5px; color: var(--muted-2); }
.sk-cal__nav {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; cursor: pointer; font-size: 17px; line-height: 1;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .8); color: var(--muted);
  font-family: var(--font); transition: all .2s ease;
}
.sk-cal__nav:hover:not(:disabled) { border-color: var(--green); color: var(--green3); }
.sk-cal__nav:disabled { opacity: .35; cursor: not-allowed; }

.sk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sk-grid__dow {
  text-align: center; font-size: 10px; font-weight: 700; color: var(--muted-2);
  padding-bottom: 2px;
}
.sk-cell {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 9px;
  background: rgba(21, 64, 50, .05); border: 1px solid transparent;
  font-size: 11px; color: var(--muted);
}
.sk-cell--blank { background: transparent; }
.sk-cell.is-on { background: rgba(43, 196, 138, .18); color: var(--green3); font-weight: 700; }
.sk-cell.is-today { border-color: var(--green); }
.sk-cell.is-future { opacity: .35; }
/* Le survol soulève la case seule : `position: relative` + z-index évitent
   qu'elle passe sous ses voisines pendant l'agrandissement. */
.sk-cell:not(.sk-cell--blank):hover {
  transform: scale(1.12); z-index: 2;
  background: rgba(43, 196, 138, .28); border-color: var(--green);
  box-shadow: 0 6px 14px -6px rgba(29, 158, 117, .5);
}
.sk-cell { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .18s ease, box-shadow .18s ease; }
.sk-grid { isolation: isolate; }
/* Le numéro se replie en haut à gauche quand l'arbre occupe la case. */
.sk-cell.is-on .sk-cell__num { position: absolute; top: 2px; left: 4px; font-size: 8.5px; opacity: .75; }
.sk-cell__tree { width: 13px; height: 13px; }

.sk-rows { display: flex; flex-direction: column; gap: 1px; }
.sk-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 13.5px; border-bottom: 1px solid var(--border);
}
.sk-row:last-child { border-bottom: 0; }
.sk-row strong { color: var(--green3); }
.sk-note { margin: 0; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; }

/* ── Révélation au défilement ───────────────────────────────────────────────
   Les blocs montent et s'éclaircissent en entrant dans le champ. Discret
   par construction : 10 px de course et un tiers de seconde.
   ------------------------------------------------------------------------ */
.reveal {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Mon profil ─────────────────────────────────────────────────────────
   Une carte d'identité (photo, nom modifiable, statut), quatre compteurs de
   même gabarit, la formation et le rang côte à côte, les trophées, puis —
   pour le super admin — la liste des membres inscrits.
   ------------------------------------------------------------------------ */
.me { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.me .card + .card, .me-cols > .card + .card, .me-stats > .card + .card { margin-top: 0; }
.me .card { margin-bottom: 0; }

.me-hero { display: flex; align-items: center; gap: 26px; padding: 26px 28px; }
.me-hero__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.me-hero__name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.me-hero__name h1 { margin: 0; font-size: 28px; letter-spacing: -.7px; line-height: 1.15; }
.me-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.me-hero__hint { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.me-edit {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .7);
  font: 700 11.5px var(--font); color: var(--muted); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.me-edit .cm-ico { width: 13px; height: 13px; }
.me-edit:hover { color: var(--green3); border-color: rgba(29, 158, 117, .4); background: rgba(29, 158, 117, .06); }
.me-nameform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.me-nameform input { width: 180px; padding: 9px 12px; font-size: 14px; }

.me-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: rgba(29, 158, 117, .09); border: 1px solid rgba(29, 158, 117, .22);
  font-size: 11.5px; font-weight: 700; color: var(--green3); white-space: nowrap;
}
.me-chip .cm-ico { width: 13px; height: 13px; }
.me-chip--ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.me-chip--super {
  background: linear-gradient(135deg, #E9CF7E, #C9A84C 60%, #A8862F); border-color: transparent; color: #fff;
  box-shadow: 0 4px 10px -5px rgba(168, 134, 47, .8);
}

/* Photo : un rond, l'appareil photo posé en bas à droite. */
.me-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.me-photo__btn { position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.me-photo__img {
  width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--gradTeal); color: #fff;
  font-size: 40px; font-weight: 800;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(29, 158, 117, .25), 0 14px 30px -14px rgba(21, 64, 50, .6);
  transition: box-shadow .25s;
}
.me-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-photo__btn:hover .me-photo__img { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--green), 0 14px 30px -14px rgba(21, 64, 50, .6); }
.me-photo__cam {
  position: absolute; right: 0; bottom: 2px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad); color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 6px 12px -5px rgba(21, 64, 50, .6);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.me-photo__cam .cm-ico { width: 16px; height: 16px; }
.me-photo__btn:hover .me-photo__cam { transform: scale(1.1); }
.me-photo__remove { border: 0; background: transparent; padding: 0; font: 600 11.5px var(--font); color: var(--muted-2); cursor: pointer; }
.me-photo__remove:hover { color: var(--red); }

/* Quatre compteurs de même taille, alignés sur une ligne. */
.me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.me-stat { display: flex; align-items: center; gap: 13px; padding: 16px 18px; min-height: 92px; }
.me-stat .cm-tile { width: 44px; height: 44px; border-radius: 13px; }
.me-stat .cm-tile .cm-ico { width: 21px; height: 21px; }
.me-stat__txt { display: flex; flex-direction: column; min-width: 0; }
.me-stat__val { font-size: 24px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; color: var(--text); }
.me-stat__label { font-size: 12.5px; font-weight: 700; color: var(--text); }
.me-stat__detail { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.me-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.me-card { padding: 18px 20px; display: flex; flex-direction: column; }
.me-card__cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.me-card__cta .cm-ico { width: 15px; height: 15px; }
.me-card__done { margin: auto 0 0; font-size: 13px; font-weight: 700; color: var(--green3); }

.me-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.me-step { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; font-size: 13px; }
.me-step__dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(21, 64, 50, .18); background: #fff;
  font-family: var(--pixel); font-size: 7px; color: var(--muted-2);
}
.me-step__dot .cm-ico { width: 14px; height: 14px; }
.me-step__title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.me-step__state { font-size: 11px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.me-step.is-done .me-step__dot { background: var(--grad); border-color: transparent; color: #fff; }
.me-step.is-done .me-step__title { color: var(--text); }
.me-step.is-done .me-step__state { color: var(--green); }
.me-step.is-next { background: rgba(29, 158, 117, .07); }
.me-step.is-next .me-step__dot { border-color: var(--green); color: var(--green3); }
.me-step.is-next .me-step__title { color: var(--text); }
.me-step.is-next .me-step__state { color: var(--green3); }

.me-rank__top { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.me-rank__label { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.me-rank__lvl { font-size: 12.5px; color: var(--muted); }
.me-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.me-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.me-facts strong { color: var(--text); text-align: right; }
.me-link {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--green3);
}
.me-link .cm-ico { width: 14px; height: 14px; transition: transform .2s; }
.me-link:hover .cm-ico { transform: translateX(3px); }

.me-trophies + .me-trophies { margin-top: 16px; }
.me-trophies__title { display: block; margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.me-trophies__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }

/* Super admin */
.me-admin { gap: 12px; }
.me-admin .cm-card__head { margin-bottom: 0; }
.me-admin__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.me-admin__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.me-admin__actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.me-admin__actions .cm-ico { width: 14px; height: 14px; }
.me-members__figures { display: flex; gap: 22px; }
.me-figure { display: flex; flex-direction: column; }
.me-figure strong { font-size: 22px; font-weight: 800; letter-spacing: -.6px; color: var(--green3); line-height: 1.1; }
.me-figure span { font-size: 11.5px; color: var(--muted); }
.me-members__search { width: 100%; }
.me-members { max-height: 520px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.me-members__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.me-member { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.me-member:hover { background: rgba(21, 64, 50, .04); }
.me-member__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-member__id strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-member__id span { font-size: 11.5px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-member__stat { display: inline-flex; align-items: center; gap: 5px; min-width: 46px; font-size: 12px; font-weight: 700; color: var(--muted); }
.me-member__stat .cm-ico { width: 14px; height: 14px; color: var(--green); }
.me-member__rank { display: inline-flex; align-items: center; gap: 6px; min-width: 70px; font-size: 11.5px; font-weight: 700; color: var(--green3); }
.me-members__empty { margin: 8px 0; font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .me-hero { flex-direction: column; text-align: center; padding: 22px 18px; gap: 16px; }
  .me-hero__id { align-items: center; }
  .me-hero__name, .me-hero__chips { justify-content: center; }
  .me-hero__name h1 { font-size: 23px; }
  .me-nameform { justify-content: center; }
  .me-nameform input { width: 100%; }
  .me-stat { padding: 13px; gap: 10px; min-height: 0; }
  .me-stat .cm-tile { width: 36px; height: 36px; }
  .me-stat__val { font-size: 20px; }
  .me-member__stat:not(:first-of-type), .me-member__rank { display: none; }
  .me-members__figures { gap: 16px; }
}

.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.stat__icon { font-size: 18px; line-height: 1; }
.stat__value { font-size: 24px; font-weight: 800; letter-spacing: -.8px; color: var(--green3); }
.stat__label { font-size: 13px; font-weight: 700; }
.stat__sub { font-size: 11.5px; color: var(--muted-2); }


.modal__card--welcome { max-width: 400px; text-align: center; }
.welcome__mark { font-size: 40px; line-height: 1; }
.modal__card--welcome h2 { margin: 0; font-size: 20px; letter-spacing: -.4px; }


@media (max-width: 760px) {
  .catsbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .search { width: 100%; }
  .search__input { width: 100%; }
  .sk-strip { grid-template-columns: repeat(8, 1fr); }
}

/* ── Verrou de la Communauté ────────────────────────────────────────────────
   L'onglet reste cliquable mais s'affiche grisé, cadenas à l'appui. Derrière
   la fenêtre d'entrée, la page est remplacée par des blocs neutres et floutés :
   on suggère la structure sans inventer de fausses discussions.
   ------------------------------------------------------------------------ */
.nav__item.is-locked { opacity: .55; }
.nav__item.is-locked .nav__label::after {
  /* Un petit cadenas dessiné (pas d'émoji), à la couleur du texte. */
  content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tabbar__item.is-locked { opacity: .55; }

.locked { filter: blur(7px); opacity: .5; pointer-events: none; user-select: none; }
.locked__cats { display: flex; gap: 10px; margin-bottom: 26px; }
.locked__cat { height: 30px; width: 96px; border-radius: 999px; background: rgba(21, 64, 50, .12); }
.locked__head { max-width: 520px; margin-bottom: 26px; }
.locked__line { height: 14px; border-radius: 7px; background: rgba(21, 64, 50, .12); margin-bottom: 12px; }
.locked__line--sm { width: 110px; height: 20px; }
.locked__line--lg { width: 320px; height: 34px; }
.locked__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.locked__main { display: flex; flex-direction: column; gap: 14px; }
.locked__card { height: 96px; border-radius: var(--radius); background: rgba(255, 255, 255, .7); border: 1px solid var(--border); }
.locked__card--tall { height: 430px; }

/* Fenêtre d'entrée : le fond est assombri ET flouté, l'app reste devinable. */
body.has-modal { overflow: hidden; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(21, 37, 32, .38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: modal-in .28s cubic-bezier(.2, .8, .2, 1);
  overflow: auto;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal__card {
  width: 100%; max-width: 470px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 30px 70px -30px rgba(21, 64, 50, .5);
  animation: modal-card-in .34s cubic-bezier(.2, .8, .2, 1);
}
@keyframes modal-card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; } }
.modal__lock {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  color: var(--green3); background: rgba(43, 196, 138, .13);
}
.modal__card h2 { margin: 0; font-size: 21px; letter-spacing: -.5px; }
.modal__lead { margin: -6px 0 4px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal__card--wide { max-width: 620px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__close {
  border: 0; background: transparent; cursor: pointer; font-size: 16px;
  color: var(--muted); padding: 4px 6px; line-height: 1;
}
.modal__close:hover { color: var(--text); }
/* Les volets gardent une hauteur plancher : le bouton ne saute pas d'un
   volet à l'autre. */
.modal__stage { min-height: 208px; }
.modal__dots { display: flex; gap: 6px; }
.modal__dot {
  width: 22px; height: 4px; border-radius: 2px;
  background: rgba(21, 64, 50, .13); transition: background .3s ease;
}
.modal__dot.is-done { background: var(--green2); }
.modal__dot.is-active { background: var(--green); }
.modal__nav { display: flex; align-items: center; gap: 10px; }
.modal__note { margin: 0; font-size: 11.5px; color: var(--muted-2); }
/* Le pourquoi de la demande : sous le bouton, en petit, détaché par un filet
   discret. C'est une précision, pas l'argument principal de la fenêtre. */
.modal__fine {
  margin: 2px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.55; color: var(--muted-2);
}
.req { color: var(--green); font-weight: 800; }

/* Téléphone : indicatif au drapeau à gauche, numéro national à droite. */
.phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.phone__country {
  width: auto; padding: 12px 10px; font-size: 15px; cursor: pointer;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(21, 64, 50, .13); border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
  .modal__grid { grid-template-columns: 1fr; }
  .modal__card { padding: 22px; }
}

/* ── 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. */
/* Thématiques et recherche sur une même ligne : la liste défile si elle
   déborde, la recherche garde sa place à droite. */
.catsbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cats {
  display: flex; gap: 4px; padding-bottom: 2px;
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
  /* Un dégradé de fin signale que la liste défile, plutôt que de donner
     l'impression que la dernière thématique est coupée. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  padding: 8px 11px; 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: flex; gap: 14px; align-items: flex-start;
  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;
}
.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: 15.5px; margin: 8px 0 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 {
  display: flex; gap: 12px; align-items: flex-start;
  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: 8px; 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 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; 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; }

.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; top: auto !important; }
}

/* ── 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], input[type=search], 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;
}
/* Le halo de focus ne concerne que les champs encadrés : sur un input[range],
   il dessinerait un second rectangle par-dessus la barre. */
input:not([type=range]):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; }

/* Le parcours occupe l'écran entier et se centre verticalement, logo compris :
   sur un portable comme sur un grand écran, le bloc est posé au milieu. */
.pf-page {
  min-height: calc(100dvh - 60px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Une marge horizontale « auto » sur un enfant flex annule son étirement :
   sans cette largeur explicite, l'en-tête et la jauge se réduiraient à leur
   contenu au lieu de tenir les 660 px. */
.pf-page > * { width: 100%; }
/* Le parcours se centre sur la hauteur utile : mêmes marges haut et bas. */
body.onboarding .view { padding-top: 30px; padding-bottom: 30px; }
/* La trame animée passe derrière le pied de page, jamais devant. */
body.onboarding .seq-legal-in { position: relative; }
.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-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted-2);
}
.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: 470px;
}
.pf-form { display: flex; flex-direction: column; height: var(--pf-h); overflow: hidden; padding: 24px 22px 18px; }
.pf-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px; }
/* En-tête de question : l'icône dessinée, l'énoncé, la précision. */
.pf-qhead { display: flex; align-items: flex-start; gap: 12px; }
.pf-qhead__icon { width: 38px; height: 38px; border-radius: 11px; margin-top: 1px; }
.pf-qhead__icon .cm-ico { width: 18px; height: 18px; }
.pf-question { margin: 0; font-size: 17px; letter-spacing: -.3px; line-height: 1.35; }
.pf-hint { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pf-qhead + * { margin-top: 18px; }
.pf-qhead + .pf-duals { margin-top: 14px; }
.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: 6px; }
.pf-lab { font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.pf-lab:first-child { margin-top: 0; }
.pf-req { margin: 10px 0 0; font-size: 11.5px; color: var(--muted-2); }
.pf-req--ko { color: var(--red); font-weight: 600; }
.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; }

/* Cartes à choisir : une icône, la réponse, une phrase. Pas de fond coloré,
   juste un cadre net ; la carte choisie prend le vert et sa coche. */
.pf-cards { display: flex; flex-direction: column; gap: 9px; }
.pf-card {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid rgba(21, 64, 50, .13); background: rgba(255, 255, 255, .85);
  font-family: var(--font); color: var(--text);
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.3, 1.4, .5, 1), background .2s;
}
.pf-card:hover { border-color: rgba(29, 158, 117, .5); box-shadow: 0 8px 20px -12px rgba(21, 64, 50, .45); transform: translateY(-2px); }
.pf-card:active { transform: translateY(0) scale(.99); }
.pf-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pf-card__icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .15), rgba(29, 158, 117, .05));
  border: 1px solid rgba(29, 158, 117, .18);
  transition: background .2s, border-color .2s, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.pf-card__icon .cm-ico { width: 20px; height: 20px; }
.pf-card:hover .pf-card__icon { transform: rotate(-6deg) scale(1.06); }
.pf-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-card__txt strong { font-size: 14px; line-height: 1.3; }
.pf-card__txt span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.pf-card__check {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(21, 64, 50, .18); color: transparent; transition: all .2s;
}
.pf-card__check .cm-ico { width: 22px; height: 22px; }
.pf-card.is-picked { border-color: var(--green); background: linear-gradient(135deg, rgba(43, 196, 138, .1), rgba(29, 158, 117, .04)); }
.pf-card.is-picked .pf-card__icon { background: var(--grad); border-color: transparent; color: #fff; }
.pf-card.is-picked .pf-card__check { border-color: transparent; color: var(--green); }
.pf-card.is-picked .pf-card__check .cm-ico svg { fill: rgba(43, 196, 138, .15); }

/* Curseurs : la valeur en grand, modifiable directement ; la règle ; puis
   quelques montants tout prêts. */
.pf-duals { display: flex; flex-direction: column; gap: 10px; }
.pf-slider--sub { padding: 10px 13px 12px; border-radius: 14px; border: 1px solid rgba(21, 64, 50, .1); background: rgba(255, 255, 255, .6); }
.pf-slider__label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.pf-slider__value {
  display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
  padding: 2px 10px 2px 2px; border-radius: 10px; cursor: text;
  border-bottom: 2px dashed rgba(29, 158, 117, .3); transition: border-color .2s;
}
.pf-slider__value:hover, .pf-slider__value:focus-within { border-bottom-color: var(--green); }
.pf-slider input.pf-slider__input {
  border: 0; background: transparent; padding: 0; margin: 0; min-width: 2ch;
  font: 800 28px var(--font); letter-spacing: -.8px; color: var(--green3); text-align: left;
}
.pf-slider__input:focus { outline: none; box-shadow: none !important; }
.pf-slider--sub input.pf-slider__input { font-size: 22px; }
.pf-slider--sub .pf-slider__value { margin-bottom: 4px; }
.pf-slider__unit { font-size: 14px; font-weight: 700; color: var(--muted); }
.pf-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-preset {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(21, 64, 50, .13); background: rgba(255, 255, 255, .85);
  font: 700 11.5px var(--font); color: var(--muted); transition: all .2s;
}
.pf-preset:hover { border-color: rgba(29, 158, 117, .5); color: var(--green3); }
.pf-preset.is-on { background: var(--grad); border-color: transparent; color: #fff; }
/* Piste dessinée à la main : le rendu natif sortait noir, et WebKit ne sait pas
   colorer la portion parcourue. On peint donc la piste avec un dégradé arrêté
   à `--fill`, que le JS met à jour à chaque déplacement. */
.pf-slider input[type=range] {
  width: 100%; height: 22px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  --fill: 0%;
}
.pf-slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #1D9E75 0 var(--fill), rgba(21, 64, 50, .12) var(--fill) 100%);
}
.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: #1D9E75;
}
.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);
}
/* Pas de contour de focus : décalé, il était rogné par le cadre du formulaire.
   La poignée s'éclaire à la place. */
.pf-slider input[type=range]:focus { outline: none; }
.pf-slider input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(43, 196, 138, .28), 0 3px 10px -2px rgba(29, 158, 117, .6);
}
.pf-slider input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(43, 196, 138, .28), 0 3px 10px -2px rgba(29, 158, 117, .6);
}
.pf-slider__bounds {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--muted-2); white-space: nowrap;
}

.pf-video { height: var(--pf-h); }
.pf-video .player { height: 100%; aspect-ratio: auto; }
.pf-video-soon > div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pf-video-soon p { margin: 0; }
.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-video-soon { min-height: 170px; }
  .pf-form { height: auto; min-height: 420px; }
}

/* ── 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);
}
/* Un bloc d'intégration tient sur plusieurs lignes : on le laisse respirer
   sans qu'il mange l'écran. */
.admin-option { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.admin-option input[type=radio] { accent-color: var(--green); flex: none; width: 16px; height: 16px; }

.admin-imgrow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.admin-imgrow__side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.admin-img {
  /* L'aperçu reprend le gabarit réel de la carte : ce qu'on voit ici est ce
     que voit le membre. */
  width: var(--card-img-w); height: var(--card-h); flex: none; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  background: rgba(21, 64, 50, .05); border: 1px solid var(--border);
}
.admin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.admin-embed {
  min-height: 84px; max-height: 180px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}

.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 sans les deux faces du site : ils
   portent donc eux-mêmes leur espacement, sans quoi ils se collent les uns
   aux autres dans la nacelle. */
.nav__item[data-tab] {
  cursor: pointer; font-family: var(--font);
  padding: 9px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  white-space: nowrap;
  transition: color .25s ease;
}
.nav__item[data-tab]:hover { color: var(--text); }
.nav__item[data-tab].is-active { color: #fff; }

/* Tableaux de l'admin : une ligne par membre, dépliable sur ses réponses. */
/* Recherche et filtre des profils : sur une seule ligne. */
.admin-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.admin-filters input[type=text] { flex: 1; min-width: 220px; width: auto; }
.admin-filters select { width: auto; min-width: 160px; }
.answers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }

.table--rows tbody tr.row--head { cursor: pointer; }
.table--rows tbody tr.row--head > td { border-bottom: 1px solid var(--border); }
.table--rows tbody tr.row--head.is-open > td { border-bottom-color: transparent; }
.table--rows td { vertical-align: middle; }
.table__name { font-weight: 700; }
.arrivees {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(201, 168, 76, .16); border: 1px solid rgba(201, 168, 76, .3);
  font-size: 10px; font-weight: 700; color: #8A6D1F;
}
.table__chevron {
  display: inline-block; width: 18px; text-align: center; color: var(--muted-2);
  transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
tr.is-open .table__chevron { transform: rotate(90deg); color: var(--green); }
/* Fiche dépliée : compacte, et bien détachée de la ligne au-dessus. */
.row--detail > td { padding: 0; background: rgba(29, 158, 117, .035); }
.fiche { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 10px; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--muted); }
.row--detail .pf-answer { margin-bottom: 0; padding: 8px 10px; }
.row--detail .pf-answer__q { font-size: 11px; margin-bottom: 1px; }
.row--detail .pf-answer__a { font-size: 13px; }
.table__num { font-variant-numeric: tabular-nums; }
/* En-têtes triables : le sens du tri se lit sur la flèche. */
.th--sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th--sort:hover { color: var(--green3); }
.th--sort.is-sorted { color: var(--green3); }
.th__arrow { display: inline-block; width: 12px; font-size: 9px; }
.dot-row { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 7px; }
.dot-row i { width: 7px; height: 7px; border-radius: 50%; background: rgba(21, 64, 50, .13); }
.dot-row i.is-on { background: var(--green); }

@media (max-width: 860px) {
  .admin-cat { grid-template-columns: 1fr; }
  #admin .topbar .nav { display: flex; overflow-x: auto; max-width: 100%; }
  .nav__item[data-tab] { padding: 9px 14px; }
}

/* ── 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; }

/* Étape pas encore ouverte, atteinte par son adresse. */
.lockscreen {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 54px 24px;
  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);
}
.lockscreen__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(43, 196, 138, .18), rgba(29, 158, 117, .09));
  color: var(--green3);
}
.lockscreen__icon svg { width: 24px; height: 24px; display: block; }
.lockscreen h2 { margin: 0; font-size: 19px; letter-spacing: -.3px; }
.lockscreen p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 420px; }
.lockscreen .btn { margin-top: 6px; }

/* ── Prise de rendez-vous ────────────────────────────────────────────────
   Le calendrier s'ouvre par-dessus la page. Aucun écouteur de clic sur le
   fond : la fenêtre ne se ferme que par sa croix (ou Échap au clavier).
   ------------------------------------------------------------------------ */
.booking {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 32px;
  background: rgba(10, 26, 21, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: booking-in .25s ease;
}
@keyframes booking-in { from { opacity: 0; } to { opacity: 1; } }
/* La carte porte le décor de l'application — le même dégradé et la même
   trame de points de seize pixels — et le calendrier s'y pose en retrait :
   la trame fait la marge, au lieu d'un simple vide blanc. */
.booking__card {
  /* La largeur décide du gabarit servi par iClosed : trop étroite, leur
     calendrier bascule en version téléphone et renvoie les créneaux sous le
     mois. Assez large donc, mais pas plus — leur formulaire porte déjà sa
     propre carte blanche, et tout l'espace en trop deviendrait du vide.
     De l'air en haut pour la croix, presque rien ailleurs. */
  /* Marges égales tout autour, et le calendrier centré : il annonce sa
     propre hauteur, on la lui donne, et la place qui reste se partage à
     parts égales au-dessus et au-dessous. */
  position: relative; width: min(1080px, 100%); height: min(860px, 100%);
  border-radius: var(--radius); overflow: hidden;
  padding: 26px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 380px at 85% -10%, rgba(43, 196, 138, .16), transparent 62%),
    radial-gradient(560px 320px at -10% 40%, rgba(50, 90, 90, .12), transparent 58%),
    var(--bg);
  box-shadow: 0 30px 70px -20px rgba(10, 26, 21, .6);
  animation: booking-rise .32s cubic-bezier(.22, .9, .3, 1);
}
.booking__card::before {
  content: ''; position: absolute; 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(760px 520px at 50% -8%, #000 8%, transparent 78%);
  mask-image: radial-gradient(760px 520px at 50% -8%, #000 8%, transparent 78%);
}
@keyframes booking-rise { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
.booking__close {
  position: absolute; top: 8px; right: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border-2);
  color: var(--text); box-shadow: var(--shadow-sm);
  transition: background .2s, transform .2s, color .2s;
}
.booking__close:hover { background: var(--text); color: #fff; transform: rotate(90deg); }
.booking__close svg { width: 17px; height: 17px; display: block; }
/* Aucun fond ici : le seul blanc doit être celui du formulaire d'iClosed,
   posé sur la trame. Un panneau blanc de notre côté doublait le sien et
   laissait une grande plage vide sous le widget. */
.booking__frame { position: relative; z-index: 1; width: 100%; height: 100%; background: transparent; }
.booking__loading { position: absolute; inset: 0; }
.booking__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.booking__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: 13.5px;
}
/* Tablette : la fenêtre garde des marges, mais prend tout ce qu'elle peut. */
@media (max-width: 1100px) {
  .booking { padding: 24px 16px; }
  .booking__card { padding: 18px; }
}
/* Téléphone : plein écran, la moindre marge est prise sur le calendrier. */
@media (max-width: 700px) {
  .booking { padding: 0; }
  .booking__card { width: 100%; height: 100%; border-radius: 0; padding: 44px 6px 6px; }
}

.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); }

/* ── Repli de l'en-tête ─────────────────────────────────────────────────────
   Entre la bascule mobile et le grand écran, il n'y a pas la place pour le
   logo, quatre entrées de menu et trois pastilles écrites. Plutôt que de
   laisser les marges se manger, on retire le texte du coin droit par paliers.
   ------------------------------------------------------------------------ */
/* PROVISOIRE : ce bouton de test ne doit jamais dicter la mise en page. Il se
   réduit à son icône partout, et dit son nom au survol. */
.chip--test .chip__label { display: none; }
.chip--test { padding: 6px 7px; }
#profile-reset:hover::after,
#profile-reset:focus-visible::after { opacity: 1; transform: translateY(0); }

/* Sous cette largeur, le menu centré et le coin droit écrit se chevauchent :
   le coin droit se replie sur ses deux pastilles et rend son texte au survol.
   (1459 px avec six entrées au menu : au-delà, au moins 20 px séparent le menu du prénom.) */
@media (max-width: 1459px) {
  .topbar { padding: 12px 22px; gap: 12px 24px; }
}
/* La capsule se replie sur ses pastilles quand le menu entier, le bouton
   d'appel et la capsule dépliée ne tiennent plus ensemble (mesuré : sous
   1440 px, avec l'étiquette « Campus » et les cadenas du menu). */
@media (max-width: 1439px) {
  .streak__meta, .userbtn__meta { display: none; }
  .streak, .userbtn { padding: 5px; }
  /* Capsule réduite à ses pastilles : le bouton garde son mot, à sa largeur. */
  .tb-duo { display: flex; }
  .topcta { padding: 0 24px; }
  .uc [data-tip]:hover::after,
  .uc [data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); }
}
/* Encore plus étroit : le menu lui-même n'a plus la place de s'écrire en
   entier. Seule l'entrée en cours garde son mot — on voit toujours où l'on
   est — les autres se réduisent à leur icône et disent leur nom au survol.
   Le bouton d'appel garde le sien : c'est le seul qu'on vient chercher. */
@media (max-width: 1220px) {
  .nav__item[data-nav]:not(.is-active) .nav__label { display: none; }
  .nav__item[data-nav]:not(.is-active) { padding: 9px 11px; }
}

/* Le bouton de remise à zéro cède la place avant le menu. */
@media (max-width: 1000px) {
  #profile-reset { display: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .topbar { padding: 12px 16px; }
  .topbar .nav { display: none; }
  /* Le bouton d'appel est dans la barre du bas, comme les onglets. */
  .topcta { display: none !important; }
  .brand__tag { display: none; }
  .logo-img { width: 96px; height: 26px; }
  .view { padding: 22px 16px calc(var(--tabbar-h) + 30px); }

  .tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    /* Sept entrées sur une ligne : chacune prend la largeur de son mot, au
       lieu de quatre colonnes égales qui renvoyaient la fin à la ligne. */
    display: flex; justify-content: space-between; gap: 2px;
    padding: 7px 6px calc(7px + 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 {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 7px 3px; border-radius: var(--radius-sm);
    font-size: 10px; font-weight: 700; letter-spacing: -.1px; color: var(--teal-deep);
  }
  .tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item svg { width: 20px; height: 20px; flex: none; }
  .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; }
  .steps { padding: 0; margin-bottom: 22px; }
  .step__node { width: 24px; height: 24px; font-size: 11px; }
  .steps__line { top: 12px; }
  .step__label { font-size: 10px; }
}

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

/* ── Pied de page légal ─────────────────────────────────────────────────────
   Repris tel quel de My Seqooia (public/static/style.css) : mêmes couleurs
   slate et teal, qui sont déjà celles de ce design. Deux formes : discrète en
   bas de l'application, et encadrée en verre sur l'accueil, où il n'y a ni
   barre ni onglets pour l'ancrer.
   ------------------------------------------------------------------------ */
/* Pied de page légal : un trait de séparation, du vide au-dessus, et rien
   d'autre. Ces liens doivent être trouvables, pas mis en avant. */
.seq-legal{margin-top:auto;padding:2rem 1rem 1.6rem;border-top:1px solid var(--border);color:var(--muted-2);position:relative;z-index:1}
.seq-legal-in{max-width:1080px;margin:0 auto;text-align:center}
.seq-legal-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem .55rem;font-size:11.5px;font-weight:500;line-height:1.4}
.seq-legal-links a{display:inline-block;min-height:0!important;color:var(--muted-2);text-decoration:none;text-underline-offset:3px;transition:color .15s}
.seq-legal-links a:hover,.seq-legal-links a:focus-visible{color:#0d9488;text-decoration:underline;outline:none}
.seq-legal-sep{color:#cbd5e1;font-weight:500}
.seq-legal-copy{margin:.55rem 0 0;font-size:11px;color:var(--muted-2)}
.seq-legal-disc{margin:.55rem auto 0;max-width:1040px;padding:0 .5rem;font-size:10.5px;line-height:1.6;color:#a3aebb}
.seq-legal-flag{display:inline-block;font-size:.85em;margin-right:.3em;vertical-align:-1px;line-height:1}

/* Le parcours d'arrivée avait droit à une carte blanche : elle mettait en
   avant ce qui doit rester en retrait. Le pied de page est le même partout,
   posé plus bas et détaché par son seul trait. */
body.onboarding .seq-legal{margin-top:56px;z-index:2}

@media (max-width:640px){
  .seq-legal-links{flex-direction:column;gap:.15rem}
  .seq-legal-links a{padding:.3rem .6rem}
  .seq-legal-sep{display:none}
  /* Les onglets ancrés en bas ne doivent pas recouvrir le pied de page. */
  .seq-legal-app{padding-bottom:calc(var(--tabbar-h) + 1.3rem)}
}

/* ── Simulateurs ────────────────────────────────────────────────────────────
   Trois calculateurs, un même gabarit : titre centré, onglets en pilules,
   curseurs, graphique, deux cartes, puis le chiffre qui compte en grand.
   ------------------------------------------------------------------------ */
.sim-head { text-align: center; max-width: 600px; margin: 2px auto 16px; min-height: 62px; }
.sim-head h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.6px; }
.sim-head p { margin: 0; color: var(--muted); font-size: 14px; }

/* Changement de simulateur : le contenu sort en se floutant, le suivant entre
   de la même façon. La barre d'onglets, elle, ne bouge pas. */
.sim-head, .sim-panel { transition: opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.22, .9, .3, 1); }
.sim-head.is-leaving, .sim-panel.is-leaving {
  opacity: 0; filter: blur(9px); transform: scale(.985);
  transition-duration: .17s; pointer-events: none;
}
.sim-head.is-entering, .sim-panel.is-entering { opacity: 0; filter: blur(9px); transform: scale(1.015); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sim-head, .sim-panel, .sim-tabs__pill { transition: none; }
}

/* Sélecteur segmenté : un contenant, trois segments, le segment actif en blanc. */
.sim-tabs {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(21, 64, 50, .06); border: 1px solid var(--border);
  margin: 0 auto 28px; position: relative; left: 50%; transform: translateX(-50%);
}
/* La pastille blanche est un seul élément qui glisse d'un onglet à l'autre,
   avec un petit gonflement en cours de route. */
.sim-tabs__pill {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm);
  pointer-events: none; z-index: 0;
  transition: transform .42s cubic-bezier(.34, 1.28, .4, 1), width .42s cubic-bezier(.34, 1.28, .4, 1);
}
.sim-tabs__pill.is-moving { animation: sim-pill-pop .42s cubic-bezier(.34, 1.28, .4, 1); }
@keyframes sim-pill-pop {
  0%, 100% { scale: 1 1; }
  45%      { scale: 1.05 1.14; }
}
.sim-tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: color .25s ease, transform .25s cubic-bezier(.34, 1.28, .4, 1);
}
.sim-tab__icon { font-size: 13px; transition: transform .3s cubic-bezier(.34, 1.4, .4, 1); }
.sim-tab:hover { color: var(--green3); }
.sim-tab:hover .sim-tab__icon { transform: scale(1.18) rotate(-6deg); }
.sim-tab.is-active { color: var(--green3); }
.sim-tab.is-active .sim-tab__icon { transform: scale(1.1); }

/* Hypothèses à gauche, courbe à droite, résultats en dessous. */
.sim-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; margin-bottom: 12px; align-items: stretch; }
/* Les deux cartes partent du même bord : pas de marge héritée de `.card + .card`. */
.sim-layout > .card + .card { margin-top: 0; }
.sim-controls { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
/* Les curseurs se répartissent sur la hauteur disponible, alignée sur la courbe. */
.sim-controls .sim-slider { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sim-controls__title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.sim-controls__hint { margin: -8px 0 2px; font-size: 11.5px; color: var(--muted-2); line-height: 1.45; }
.sim-slider__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sim-slider__label { font-size: 12px; font-weight: 500; color: var(--muted); }
.sim-slider__value {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 2px 7px; border-radius: 7px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; color: var(--text); white-space: nowrap;
  cursor: text; transition: border-color .15s ease, background .15s ease;
}
.sim-slider__value:hover { background: rgba(21, 64, 50, .05); }
.sim-slider__value:focus-within { background: #fff; border-color: rgba(29, 158, 117, .45); box-shadow: 0 0 0 3px rgba(43, 196, 138, .16); }
.sim-slider input.sim-slider__num, .sim-slider input.sim-slider__num:focus {
  width: 4ch; min-width: 1.5ch; height: auto; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; font: inherit; color: inherit; text-align: right; outline: none;
}
.sim-slider__unit { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sim-slider input[type=range] {
  width: 100%; height: 16px; margin: 0; --fill: 0%;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.sim-slider input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--green) 0 var(--fill), rgba(21, 64, 50, .1) var(--fill) 100%);
}
.sim-slider input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(21, 64, 50, .1); }
.sim-slider input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--green); }
.sim-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5.5px; border-radius: 50%;
  background: var(--green); border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(21, 64, 50, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sim-slider input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(43, 196, 138, .18), 0 1px 4px rgba(21, 64, 50, .3); }
.sim-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.sim-slider input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(21, 64, 50, .3);
}
.sim-slider input[type=range]:focus { outline: none; }
.sim-slider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(43, 196, 138, .25); }

/* Graphique : titre et légende en tête, courbes lissées, grille en pointillés. */
.sim-chart { padding: 16px 18px 14px; display: flex; flex-direction: column; min-width: 0; }
.sim-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sim-chart__title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.sim-chart__plot { position: relative; flex: 1; display: flex; align-items: center; }
.sim-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.sim-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sim-legend__swatch { display: inline-block; width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.sim-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.sim-grid { stroke: rgba(21, 64, 50, .11); stroke-width: 1; stroke-dasharray: 4 4; }
.sim-tick { font-size: 11px; fill: var(--muted); transition: opacity .18s linear; }
.sim-cursor { stroke: var(--green); stroke-width: 1.2; stroke-dasharray: 4 4; }
/* Anneaux posés sur chaque année : coeur blanc, bord de la série. */
.sim-marker { stroke-width: 1.6; }
.sim-dot { filter: drop-shadow(0 2px 4px rgba(21, 64, 50, .25)); }
/* Pastille de repère, sur l'axe des années. */
.sim-pill rect { fill: var(--text); }
.sim-pill text { fill: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1px; }
.sim-hover { transition: opacity .15s ease; }
.sim-tip {
  position: absolute; z-index: 2; pointer-events: none;
  min-width: 180px; padding: 9px 11px; border-radius: 11px;
  background: rgba(21, 37, 32, .95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 34px -14px rgba(10, 26, 21, .55);
  font-size: 12px; line-height: 1.4; color: #fff;
}
.sim-tip__when {
  margin: 0 0 5px; padding-bottom: 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: rgba(255, 255, 255, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sim-tip__row { margin: 3px 0; display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .72); }
.sim-tip__row strong { margin-left: auto; padding-left: 12px; color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Résultats : deux repères et le chiffre à retenir, sur une seule ligne. */
.sim-results { display: grid; grid-template-columns: 1fr 1fr 1.25fr; grid-auto-rows: 1fr; gap: 12px; margin-bottom: 12px; }
.sim-results > .card + .card { margin-top: 0; }
.sim-card { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 16px; min-height: 100%; }
.sim-card__label { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sim-card__value { font-size: 21px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sim-card__sub { font-size: 11.5px; color: var(--muted-2); }
.sim-card--neutral .sim-card__label { color: var(--muted); }
.sim-card--neutral .sim-card__value { color: var(--text); }
.sim-card--good .sim-card__label, .sim-card--good .sim-card__value { color: var(--green3); }
.sim-card--bad .sim-card__label, .sim-card--bad .sim-card__value { color: var(--red); }

.sim-big {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 14px 18px; border-radius: var(--radius); border: 1px solid transparent; min-height: 100%;
}
.sim-big__label { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sim-big__value { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sim-big--bad { background: rgba(231, 76, 60, .07); border-color: rgba(231, 76, 60, .18); }
.sim-big--bad .sim-big__label, .sim-big--bad .sim-big__value { color: var(--red); }
.sim-big--good { background: rgba(43, 196, 138, .09); border-color: rgba(29, 158, 117, .2); }
.sim-big--good .sim-big__label, .sim-big--good .sim-big__value { color: var(--green3); }
.sim-cta { display: flex; justify-content: center; margin: 40px 0 8px; }
.sim-cta .btn-flow { padding: 13px 34px; font-size: 14px; }
.sim-disclaimer { margin: -4px 0 0; text-align: center; font-size: 11px; color: var(--muted-2); line-height: 1.55; }

@media (max-width: 860px) {
  .sim-layout { grid-template-columns: 1fr; }
  .sim-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
  .sim-controls__title, .sim-controls__hint { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sim-head { min-height: 92px; }
  /* Le SVG est mis à l'échelle : on grossit ses étiquettes pour qu'elles restent lisibles. */
  .sim-tick { font-size: 17px; }
  .sim-tabs { display: flex; left: 0; transform: none; }
  .sim-tab { flex: 1; justify-content: center; padding: 7px 8px; }
  .sim-controls { grid-template-columns: 1fr; }
  .sim-results { grid-template-columns: 1fr 1fr; }
  .sim-results .sim-big { grid-column: 1 / -1; }
  .sim-big__value { font-size: 26px; }
}

/* ── FAQ — accordéon repris du pré-appel ────────────────────────────────── */
#faq-list .faq-card{margin-bottom:16px}
.faq-card{cursor:pointer}
.faq-q{display:flex;align-items:center;gap:16px;justify-content:space-between}
.faq-q strong{font-size:15px;line-height:1.4}
.faq-plus{width:28px;height:28px;border-radius:50%;background:rgba(29,158,117,.1);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;flex-shrink:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s;line-height:1}
.faq-card.open .faq-plus{transform:rotate(45deg);background:var(--grad);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,.85,.25,1)}
.faq-card.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;font-size:13px;color:#4d5f58;line-height:1.65;white-space:pre-line;opacity:0;transition:opacity .35s ease .1s,padding-top .45s cubic-bezier(.22,.85,.25,1)}
.faq-card.open .faq-a-inner{opacity:1;padding-top:12px}
.faq-video{position:relative;border-radius:13px;overflow:hidden;margin-bottom:12px;background:rgba(21,64,50,.05);aspect-ratio:16/9}
.faq-video iframe{display:block;width:100%;height:100%;border:0}
.faq-video .faq-player{position:absolute;inset:0}
.faq-txt{white-space:pre-line}

/* ══ Avis et Univers ═══════════════════════════════════════════════════════
   Les deux onglets repris de la plateforme pré-appel. Le dessin vient de là
   presque tel quel — les deux projets partagent les mêmes variables de
   couleur, d'ombre et de rayon, donc rien n'a eu à être retraduit. Ce qui
   change : la trame de points du Campus remplace la photo de fond du
   pré-appel, et les cartes s'appuient sur `.card` d'ici.
   ---------------------------------------------------------------------- */

/* En-tête de vidéo, commun aux deux onglets. */
.video-head { padding: 16px 20px 13px; border-bottom: 1px solid var(--border); text-align: center; }
.video-label { font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: .8px; margin-bottom: 3px; }
.video-title { font-size: 17px; font-weight: 700; color: var(--teal); }

/* ── Onglet Avis ─────────────────────────────────────────────────────────── */
.avis-video { padding: 0; overflow: hidden; margin-bottom: 20px; }
.avis-video .player { border-radius: 0; }

/* La bande des chiffres : le compteur d'élèves et la note, dos à dos. */
.avis-band {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px 40px;
  padding: 20px 26px; margin-bottom: 26px;
  border-radius: var(--radius); color: #fff; text-align: center;
  background: radial-gradient(closest-side at 85% -20%, rgba(255, 255, 255, .16), transparent), var(--gradTeal);
  box-shadow: var(--shadow-md);
}
.avis-band__col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.avis-band__n { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.avis-band__sur { font-size: 15px; font-weight: 700; opacity: .7; }
.avis-band__l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; opacity: .88; }
.avis-band__sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .28); }
.avis-band .av5 svg { fill: #fff; }

.av5 { display: inline-flex; gap: 2px; }
.av5 svg { width: 15px; height: 15px; fill: #F5B544; flex: none; }

/* Le mur d'avis : des colonnes qui remontent en continu, chacune à son
   rythme, et s'effacent en fondu en haut et en bas du cadre.
   Le cadre occupe toute la largeur de la fenêtre, alors que les colonnes
   restent dans la largeur de la page : le halo d'une carte du bord n'est
   plus coupé net au ras de la colonne, il s'éteint dans la marge. La marge
   intérieure vaut exactement ce qui dépasse de part et d'autre (50vw moins
   la moitié de la largeur de la page), d'où des colonnes pas plus écartées. */
.avis-wall {
  display: flex; gap: 18px;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  box-sizing: border-box;
  max-height: 720px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.avis-col { flex: 1; min-width: 0; }
/* La liste est posée deux fois : on la remonte de la moitié exacte, puis on
   repart. Le padding du bas vaut l'écart entre cartes, sinon la boucle
   sauterait d'autant à chaque tour. */
.avis-col__track {
  display: flex; flex-direction: column; gap: 18px; padding: 12px 0 18px;
  animation: avis-defile var(--duree, 50s) linear infinite;
}
@keyframes avis-defile { to { transform: translateY(-50%); } }
/* Le défilement continue sous la souris. Il ne s'arrête que pour qui
   navigue au clavier : on ne peut pas viser un bouton qui s'enfuit. */
.avis-wall:has(:focus-visible) .avis-col__track { animation-play-state: paused; }
@media (max-width: 700px) { .avis-wall { max-height: 600px; } }
@media (prefers-reduced-motion: reduce) {
  .avis-col__track { animation: none; }
  .avis-wall { overflow-y: auto; }
  .avis-card[aria-hidden="true"] { display: none; }
}

/* ── La carte d'avis, avec son halo ────────────────────────────────────────
   Toutes à la même hauteur, quel que soit le texte. Le halo reprend le
   composant « spotlight card » en vert Seqooia, en trois couches :
     - un voile vert très léger sur le fond, centré sur la souris ;
     - un liseré vert vif sur la bordure (::before), et son cœur blanc (::after) ;
     - une lueur floue qui déborde autour de la carte (.avis-card__glow).
   `--mx` / `--my` sont posés par le script, dans le repère de la carte. */
.avis-card {
  --mx: -400px; --my: -400px;
  position: relative; flex: none;
  height: 300px; display: flex; flex-direction: column; gap: 9px;
  padding: 20px; border-radius: 18px;
  background:
    radial-gradient(240px circle at var(--mx) var(--my), hsl(158 72% 42% / .045), transparent 70%),
    rgba(255, 255, 255, .86);
  border: 1px solid rgba(21, 64, 50, .09);
  box-shadow: 0 16px 32px -22px rgba(21, 64, 50, .45);
}
.avis-card::before,
.avis-card::after,
.avis-card__glow::before {
  content: ''; position: absolute; pointer-events: none; border-radius: inherit;
  /* Ne garder que l'anneau : la zone de contenu est retirée du masque. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.avis-card::before,
.avis-card::after { inset: -1px; padding: 2px; opacity: 0; transition: opacity .35s ease; }
.avis-card::before {
  background: radial-gradient(160px circle at var(--mx) var(--my), hsl(158 70% 42% / .42), transparent 100%);
}
.avis-card::after {
  background: radial-gradient(80px circle at var(--mx) var(--my), hsl(150 80% 94% / .5), transparent 100%);
}
.avis-card__glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  filter: blur(12px); opacity: 0; transition: opacity .35s ease;
}
.avis-card__glow::before {
  inset: -10px; padding: 10px;
  background: radial-gradient(190px circle at var(--mx) var(--my), hsl(158 70% 45% / .35), transparent 100%);
}
.avis-card.is-lit::before,
.avis-card.is-lit::after { opacity: 1; }
.avis-card.is-lit .avis-card__glow { opacity: .55; }

.avis-t {
  margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.avis-q {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden;
}
.avis-plus {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--green);
}
.avis-plus:hover { text-decoration: underline; }
.avis-plus[hidden] { display: none; }
/* L'auteur se cale toujours en bas : c'est ce qui aligne les cartes entre
   elles, qu'elles aient un titre sur une ligne ou sur deux. */
.avis-who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.avis-av {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradTeal); color: #fff; font-weight: 700; font-size: 13px;
}
.avis-n { display: block; font-size: 13px; font-weight: 700; }
.avis-d { display: block; font-size: 11px; color: var(--muted-2); }

/* L'avis en entier, dans sa fenêtre. */
.avis-full { max-width: 540px; }
.avis-full h2 { font-size: 19px; }
.avis-full__q { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text); white-space: pre-line; }
.avis-source { margin: 16px 0 0; text-align: center; font-size: 11.5px; color: var(--muted-2); }
.avis-source a { color: var(--green); font-weight: 600; }

/* ── Onglet Explorer l'univers ───────────────────────────────────────────── */
.uv-sec { margin-bottom: 44px; }
.uv-sec__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.uv-sec__ico {
  width: 42px; height: 42px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .16), rgba(29, 158, 117, .08));
  border: 1px solid rgba(29, 158, 117, .22);
}
.uv-sec__head h2 { margin: 0; font-size: 21px; letter-spacing: -.4px; }
.uv-sec__head p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

/* Les modules : une ligne par module, qui se déplie sur son programme. */
.uv-mods { display: flex; flex-direction: column; gap: 10px; }
.uv-mod { padding: 0; margin-bottom: 0; overflow: hidden; transition: box-shadow .26s, outline-color .26s; }
.uv-mod:hover { box-shadow: var(--shadow-md); }
.uv-mod__head {
  display: flex; align-items: center; gap: 15px; width: 100%;
  padding: 16px 18px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); text-align: left; color: var(--text);
}
.uv-mod__num {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(29, 158, 117, .55);
}
.uv-mod__txt { flex: 1; min-width: 0; }
.uv-mod__t { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.uv-mod__d { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.uv-mod__meta { display: block; font-size: 11px; color: var(--muted-2); font-weight: 600; margin-top: 5px; }
.uv-mod__meta .sep { margin: 0 5px; }
.uv-mod__chev { flex: none; color: var(--green); display: grid; place-items: center; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.uv-mod__chev svg { width: 22px; height: 22px; }
.uv-mod.is-open .uv-mod__chev { transform: rotate(180deg); }
/* Dépliage par la hauteur de grille : la liste n'a pas de hauteur fixe à
   deviner, et l'animation reste fluide quel que soit le nombre de leçons. */
.uv-mod__lessons {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .36s cubic-bezier(.2, .8, .2, 1);
}
.uv-mod.is-open .uv-mod__lessons { grid-template-rows: 1fr; }
.uv-mod__lessonsIn { overflow: hidden; }
.uv-mod.is-open .uv-mod__lessonsIn { padding: 2px 18px 18px; }
.uv-mod__lesson {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 6px; border-radius: 11px;
  background: rgba(29, 158, 117, .06); border: 1px solid rgba(29, 158, 117, .12);
  font-size: 13px; line-height: 1.45; color: #3C4F48;
}
.uv-mod__lesson span {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-size: 10px; font-weight: 800;
}

/* Les outils MySeqooia. */
.uv-video { padding: 0; overflow: hidden; margin-bottom: 18px; }
.uv-video .player { border-radius: 0; }
.uv-video__note {
  margin: 0; padding: 18px 24px 20px; text-align: center;
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
}
.uv-outils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1080px) { .uv-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .uv-outils { grid-template-columns: 1fr; } }
.uv-outil {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; padding: 18px;
  transition: transform .25s, box-shadow .25s;
}
.uv-outil:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.uv-outil__ico {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .16), rgba(29, 158, 117, .08));
  border: 1px solid rgba(29, 158, 117, .22);
}
.uv-outil h3 { margin: 4px 0 0; font-size: 14px; font-weight: 800; line-height: 1.35; }
.uv-outil p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; flex: 1; }
.uv-outil__tag {
  align-self: flex-start; margin-top: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(29, 158, 117, .1); border: 1px solid rgba(29, 158, 117, .2);
  font-size: 10.5px; font-weight: 700; color: var(--green);
}

/* ── Le parcours des 90 jours, en frise ─────────────────────────────────────
   Repris du composant « how it works » : une ligne pointillée verticale, un
   checkpoint numéroté par étape posé dessus, et à droite une carte qui dit
   quand (la pastille), quoi (le titre) et ce que l'étape débloque. Le
   Jour 90 passe en or : c'est l'arrivée.
   ------------------------------------------------------------------------ */
.uv-tl-sec { max-width: 760px; margin-left: auto; margin-right: auto; }
.uv-tl__intro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 40px; }
.uv-tl__kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green);
}
.uv-tl__intro h2 {
  margin: 0; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -.03em;
  text-wrap: balance;
}
.uv-tl__intro p { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.uv-tl {
  position: relative; list-style: none; margin: 0 0 0 18px; padding: 0 0 0 40px;
  display: flex; flex-direction: column; gap: 22px;
  border-left: 2px dashed rgba(29, 158, 117, .32);
}
.uv-tl__step { position: relative; }
/* Le checkpoint, centré sur la ligne. La carte commence 42 px après la
   ligne (2 px de trait + 40 px de marge) ; le centre du trait est à 1 px ;
   le rond fait 38 px : 1 − 19 − 42 = −60. */
.uv-tl__dot {
  position: absolute; left: -60px; top: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 9px; color: #fff;
  background: var(--grad);
  box-shadow: 0 0 0 5px var(--bg), 0 8px 18px -8px rgba(29, 158, 117, .7);
}
.uv-tl__step--final .uv-tl__dot {
  background: linear-gradient(135deg, #D9BC66, #C9A84C 55%, #A8862F);
  box-shadow: 0 0 0 5px var(--bg), 0 8px 18px -8px rgba(201, 168, 76, .8);
}

.uv-tl__card {
  padding: 20px 22px; border-radius: 18px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.uv-tl__step--final .uv-tl__card {
  border-color: rgba(201, 168, 76, .45);
  box-shadow: 0 0 22px rgba(201, 168, 76, .18), var(--shadow-sm);
}
.uv-tl__head h3 { margin: 10px 0 0; font-size: 18px; letter-spacing: -.3px; }
.uv-tl__head p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.uv-tl__when {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--green3);
  background: rgba(29, 158, 117, .1); border: 1px solid rgba(29, 158, 117, .22);
}
.uv-tl__step--final .uv-tl__when { color: #8A6D1F; background: rgba(201, 168, 76, .14); border-color: rgba(201, 168, 76, .4); }

.uv-tl__unlocks { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.uv-tl__label {
  display: block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}
.uv-tl__unlocks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.uv-tl__unlocks li { display: flex; align-items: flex-start; gap: 12px; }
.uv-tl__ico {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px;
  background: rgba(29, 158, 117, .08); border: 1px solid rgba(29, 158, 117, .16);
}
.uv-tl__unlocks strong { display: block; font-size: 13.5px; line-height: 1.4; }
.uv-tl__unlocks p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.uv-tl__note { margin: 14px 0 0; font-size: 11px; font-style: italic; color: var(--muted-2); }

/* Après le Jour 90 : la ligne s'arrête, l'accompagnement continue. */
.uv-tl__life {
  margin-top: 30px; padding: 26px 26px 28px; border-radius: 20px; text-align: center; color: #fff;
  background: radial-gradient(closest-side at 85% -20%, rgba(255, 255, 255, .18), transparent),
              linear-gradient(135deg, var(--teal), var(--green));
  box-shadow: var(--shadow-md);
}
.uv-tl__lifeChip {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45);
}
.uv-tl__life h3 { margin: 14px 0 0; font-size: 20px; letter-spacing: -.3px; }
.uv-tl__life p { margin: 10px auto 0; max-width: 580px; font-size: 13px; line-height: 1.7; opacity: .92; }

@media (max-width: 560px) {
  .uv-tl { margin-left: 14px; padding-left: 30px; }
  .uv-tl__dot { left: -47px; width: 32px; height: 32px; font-size: 8px; } /* 1 − 16 − 32 */
  .uv-tl__card { padding: 16px; }
}

/* ── Éditeurs de l'admin ─────────────────────────────────────────────────────
   Deux champs par ligne quand ils vont par paire (un nom et une date, une
   note et un total) : sur une seule colonne, ces formulaires deviennent des
   kilomètres de défilement. */
.admin-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 720px) { .admin-duo { grid-template-columns: 1fr; } }
.admin-sec { margin: 34px 0 14px; font-size: 17px; letter-spacing: -.3px; }
/* Un point de phase, imbriqué dans la carte de sa phase : fond légèrement
   creusé pour qu'on voie tout de suite qu'il lui appartient. */
.admin-point { background: rgba(29, 158, 117, .05); box-shadow: none; }

/* ── En-tête de l'admin ──────────────────────────────────────────────────────
   Sept onglets au lieu de quatre : sous 1440 px le menu centré vient buter
   contre l'email et les boutons. Plutôt que de rogner les libellés — ici on
   travaille, on ne vend rien — la barre passe sur deux rangées : la marque et
   les boutons en haut, les onglets dessous sur toute la largeur.
   ---------------------------------------------------------------------- */
@media (max-width: 1440px) {
  #admin .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'marque actions' 'onglets onglets';
    row-gap: 10px;
  }
  #admin .topbar > .brand { grid-area: marque; }
  #admin .topbar__right { grid-area: actions; }
  #admin .topbar .nav {
    grid-area: onglets; justify-self: stretch;
    /* Si même là ça ne tient pas, on fait défiler plutôt que de déborder. */
    overflow-x: auto; scrollbar-width: none;
  }
  #admin .topbar .nav::-webkit-scrollbar { display: none; }
  #admin .topbar .nav__item { flex: none; }
}
@media (max-width: 620px) {
  #admin #admin-email { display: none; }
}

/* ── Sous-onglets de l'univers ───────────────────────────────────────────────
   Repris du composant « bottom nav bar » : une gélule blanche qui entre avec
   un petit ressort, des boutons ronds, et l'onglet actif teinté de vert.
   Sur grand écran, les trois libellés restent écrits — ils disent où mène
   chaque bouton. Sur téléphone, où ils ne tiennent pas côte à côte, on
   retrouve le comportement d'origine : seul l'onglet actif garde son mot, qui
   se déplie en largeur quand on le choisit.
   ------------------------------------------------------------------------ */
.page-head--center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

.uv-tabs {
  display: flex; align-items: center; gap: 4px;
  width: fit-content; max-width: 100%; margin: -4px auto 34px;
  padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--border);
  box-shadow: 0 18px 36px -18px rgba(21, 64, 50, .35), var(--shadow-sm);
  animation: uv-tabs-in .5s cubic-bezier(.34, 1.4, .5, 1) both;
}
@keyframes uv-tabs-in { from { opacity: 0; transform: scale(.9); } }

.uv-tab {
  display: inline-flex; align-items: center;
  height: 42px; min-width: 44px; padding: 0 16px 0 13px; border-radius: 999px;
  color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.uv-tab:hover { background: rgba(21, 64, 50, .05); color: var(--text); }
.uv-tab:active { transform: scale(.97); }
.uv-tab.is-active { background: rgba(29, 158, 117, .12); color: var(--green3); }
.uv-tab__icon { display: grid; place-items: center; flex: none; }
.uv-tab__icon svg { width: 20px; height: 20px; }
/* Le libellé se replie par la largeur de sa colonne de grille : pas de
   largeur fixe à deviner, et le ressort reste fluide quel que soit le texte. */
.uv-tab__label {
  display: grid; grid-template-columns: 1fr; margin-left: 8px;
  transition: grid-template-columns .42s cubic-bezier(.34, 1.3, .5, 1),
              margin-left .2s ease, opacity .2s ease;
}
.uv-tab__label > span { overflow: hidden; min-width: 0; }

@media (max-width: 700px) {
  .uv-tab { padding: 0 12px; }
  .uv-tab:not(.is-active) .uv-tab__label { grid-template-columns: 0fr; margin-left: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uv-tabs { animation: none; }
  .uv-tab__label, .uv-panel { transition: none; }
}

/* Changement de section : même fondu flouté que les simulateurs. */
.uv-panel { transition: opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.22, .9, .3, 1); }
.uv-panel.is-leaving {
  opacity: 0; filter: blur(9px); transform: scale(.985);
  transition-duration: .17s; pointer-events: none;
}
.uv-panel.is-entering { opacity: 0; filter: blur(9px); transform: scale(1.015); transition: none; }

/* Les éléments à pleine largeur (le mur d'avis) comptent la barre de
   défilement dans 100vw : on coupe ce qui dépasse horizontalement. `clip`,
   contrairement à `hidden`, ne crée pas de conteneur de défilement — l'en-tête
   collant reste collant. */
#app { overflow-x: clip; }

/* ══ Communauté ════════════════════════════════════════════════════════════
   Deux colonnes dès le haut : le titre et le mur à gauche, et à droite — à
   la hauteur du titre — le rang, le classement, le barème et les trophées.
   Façon Skool, aux couleurs Seqooia. Aucune icône n'est un émoji : ce sont
   des tracés au trait vert dégradé, souvent posés dans une pastille.
   ---------------------------------------------------------------------- */
.cm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.cm-wall { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cm-head { margin-bottom: 4px; }
/* Pas de colonne collante : elle est plus haute que l'écran, et sa fin (les
   trophées) resterait hors de vue tant qu'on n'a pas atteint le bas du mur. */
.cm-side { display: flex; flex-direction: column; gap: 10px; }
/* L'espacement vient du `gap` : pas de marge héritée de `.card + .card`, qui
   doublait l'écart entre les cartes de droite et entre les posts. */
.cm-side > .card + .card,
.cm-feed > .card + .card { margin-top: 0; }
@media (max-width: 980px) {
  .cm { grid-template-columns: 1fr; }
}

/* ── Icônes ── */
.cm-ico { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; }
.cm-ico svg { display: block; width: 100%; height: 100%; }
.cm-tile {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .16), rgba(29, 158, 117, .06));
  border: 1px solid rgba(29, 158, 117, .18);
}
.cm-tile .cm-ico { width: 15px; height: 15px; }
.cm-tile--sm { width: 26px; height: 26px; border-radius: 8px; }
.cm-tile--sm .cm-ico { width: 13px; height: 13px; }
.cm-tile--lg { width: 52px; height: 52px; border-radius: 15px; }
.cm-tile--lg .cm-ico { width: 24px; height: 24px; }

/* Rappel du rang en tête du mur, seulement quand la colonne passe dessous. */
.cm-strip {
  display: none; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); font-size: 13px; color: var(--text);
}
.cm-strip span { color: var(--muted); }
.cm-strip strong { color: var(--text); }
.cm-strip__go { margin-left: auto; color: var(--green); font-weight: 800; }
@media (max-width: 980px) { .cm-strip { display: flex; } }

/* ── Badge de rang (TierBadge de closers-tracking), icône seule ── */
.rk {
  position: relative; flex: none; display: inline-grid; place-items: center;
  border-radius: 28%; color: #fff;
  background: linear-gradient(135deg, #CBD5E1, #64748B);
  box-shadow: 0 3px 8px -3px rgba(21, 64, 50, .45);
}
/* Investisseur : bleu nuit tirant sur le bleu canard — se distingue d'un
   coup d'œil du vert de Stratège. */
.rk--investisseur { background: linear-gradient(135deg, #2F7F9E, #17566E 55%, #0C3346); }
.rk--stratege { background: linear-gradient(135deg, #14755C, #0F766E); }
.rk--maitre { background: linear-gradient(135deg, #E9CF7E, #C9A84C 55%, #A8862F); }
.rk--legende {
  background: linear-gradient(135deg, #E9CF7E, #1D9E75 55%, #E9CF7E);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, .4), 0 4px 12px -3px rgba(201, 168, 76, .7);
}
.rk--xs { width: 20px; height: 20px; }
.rk--xs .rk__icon { width: 11px; height: 11px; }
.rk--sm { width: 28px; height: 28px; }
.rk--sm .rk__icon { width: 14px; height: 14px; }
.rk--md { width: 48px; height: 48px; }
.rk--md .rk__icon { width: 22px; height: 22px; }
.rk .rk__icon svg { stroke-width: 2.3; }

/* ── Avatars ── */
.cm-av {
  width: var(--av, 36px); height: var(--av, 36px); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; object-fit: cover;
  background: var(--gradTeal); color: #fff; font-weight: 800; font-size: calc(var(--av, 36px) * .4);
}
img.cm-av--team { object-position: 50% 12%; background: linear-gradient(135deg, #E8F5EF, #CFEADF); }
.cm-team {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--grad);
}
.cm-team::before { content: '✓'; font-size: 9px; }
.cm-team--plain::before { content: none; }

/* ── Éditeur de post (admin) ── */
.cm-ed { display: flex; flex-direction: column; gap: 10px; }
.cm-ed.card { padding: 18px; margin-bottom: 0; border: 1px solid rgba(29, 158, 117, .3); }
.cm-ed__head { display: flex; align-items: center; gap: 8px; }
.cm-ed input[type=text], .cm-ed textarea { width: 100%; }
.cm-ed textarea { min-height: 96px; resize: vertical; }
.cm-ed__preview { position: relative; border-radius: 14px; overflow: hidden; max-height: 280px; }
.cm-ed__preview img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.cm-ed__rm {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;
}
.cm-ed__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-ed__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-ed__tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; transition: all .2s;
}
.cm-ed__tool .cm-ico { width: 14px; height: 14px; }
.cm-ed__tool:hover { color: var(--green3); border-color: rgba(29, 158, 117, .35); }
.cm-ed__tool.is-on { color: var(--green3); background: rgba(29, 158, 117, .1); border-color: rgba(29, 158, 117, .35); }

/* ── Filtres ── */
.cm-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-filter {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .8);
  font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; transition: all .2s;
}
.cm-filter .cm-ico { width: 14px; height: 14px; color: var(--green); }
.cm-filter:hover { color: var(--text); }
.cm-filter.is-active { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -8px rgba(29, 158, 117, .7); }
.cm-filter.is-active .cm-ico { color: #fff; }
.cm-feed { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; }
.cm-feed.is-loading { opacity: .45; pointer-events: none; }
.cm-more { align-self: center; }
.cm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 38px 20px;
  border-radius: var(--radius); background: var(--card); border: 1px dashed var(--border-2);
}
.cm-empty p { margin: 0 auto; max-width: 380px; font-size: 13px; color: var(--muted); }

/* ── Un post ── */
.cm-post { padding: 20px 22px 16px; margin-bottom: 0; }
.cm-post.is-pinned { border-color: rgba(201, 168, 76, .45); box-shadow: 0 0 0 1px rgba(201, 168, 76, .18), var(--shadow-sm); }
.cm-post__head { display: flex; align-items: center; gap: 11px; }
.cm-post__who { min-width: 0; flex: 1; }
.cm-post__name { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.cm-post__meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--muted-2); }
.cm-post__cat { display: inline-flex; align-items: center; gap: 4px; }
.cm-post__cat .cm-ico { width: 12px; height: 12px; color: var(--green); }
.cm-pin {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #8A6D1F; background: rgba(201, 168, 76, .14);
}
.cm-pin .cm-ico { width: 12px; height: 12px; }
.cm-post__title { margin: 14px 0 0; font-size: 19px; letter-spacing: -.3px; line-height: 1.3; }
.cm-post__body { margin-top: 8px; font-size: 14.5px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.cm-post__body a, .cm-c__body a { color: var(--green); font-weight: 600; }
.cm-post__img { display: block; width: 100%; margin-top: 14px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: rgba(21, 64, 50, .05); }
.cm-post__img img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.cm-post__video { margin-top: 14px; }
.cm-post__actions {
  display: flex; align-items: center; gap: 4px; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cm-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  border: 0; background: transparent; font: 600 13px var(--font); color: var(--muted); cursor: pointer;
  transition: background .2s, color .2s;
}
.cm-act .cm-ico { width: 17px; height: 17px; }
.cm-act:hover { background: rgba(21, 64, 50, .05); color: var(--text); }
.cm-heart.is-on { color: var(--red); }
.cm-heart.is-on svg { fill: currentColor; }
.cm-heart.is-beating .cm-ico { animation: like-beat .5s cubic-bezier(.34, 1.5, .5, 1); }
.cm-heart--sm { padding: 3px 7px; font-size: 11.5px; }
.cm-heart--sm .cm-ico { width: 13px; height: 13px; }

/* Menu ⋯ de l'admin */
.cm-menuwrap { position: relative; flex: none; }
.cm-dots { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; font-size: 18px; color: var(--muted); cursor: pointer; }
.cm-dots:hover { background: rgba(21, 64, 50, .06); }
.cm-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md);
}
.cm-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; font: 500 13px var(--font); color: var(--text); cursor: pointer;
}
.cm-menu button .cm-ico { width: 15px; height: 15px; color: var(--green); }
.cm-menu button:hover { background: rgba(29, 158, 117, .08); }
.cm-menu .is-danger, .cm-menu .is-danger .cm-ico { color: var(--red); }
.cm-menu[hidden] { display: none; }

/* ── Commentaires ── */
.cm-comments { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.cm-comments__list { display: flex; flex-direction: column; gap: 10px; }
.cm-showall { align-self: flex-start; padding: 0; border: 0; background: none; font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; }
.cm-showall:hover { color: var(--green); }
.cm-c { display: flex; gap: 9px; align-items: flex-start; }
.cm-c__main { min-width: 0; flex: 1; }
.cm-c__bubble { display: inline-block; max-width: 100%; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: rgba(21, 64, 50, .05); }
.cm-c--team .cm-c__bubble { background: rgba(29, 158, 117, .09); }
.cm-c__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.cm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.cm-chip .rk--xs { width: 17px; height: 17px; border-radius: 5px; }
.cm-chip .rk--xs .rk__icon { width: 10px; height: 10px; }
.cm-c__body { margin-top: 3px; font-size: 13.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.cm-c__actions { display: flex; align-items: center; gap: 6px; margin: 3px 0 0 4px; font-size: 11.5px; color: var(--muted-2); }
.cm-c__del { padding: 0; border: 0; background: none; font: 600 11.5px var(--font); color: var(--muted-2); cursor: pointer; }
.cm-c__del:hover { color: var(--red); }
.cm-compose { display: flex; gap: 9px; align-items: flex-end; }
.cm-compose__box {
  flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 13px;
  border-radius: 20px; border: 1px solid var(--border-2); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.cm-compose__box:focus-within { border-color: rgba(29, 158, 117, .5); box-shadow: 0 0 0 3px rgba(29, 158, 117, .12); }
.cm-compose textarea {
  flex: 1; min-height: 0; padding: 6px 0; border: 0; outline: none; resize: none; background: transparent;
  font: 13.5px/1.5 var(--font); box-shadow: none;
}
.cm-compose textarea:focus { box-shadow: none; }
.cm-send {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--grad); color: #fff; cursor: pointer; transition: opacity .2s, transform .2s;
}
.cm-send .cm-ico { width: 15px; height: 15px; }
.cm-send:disabled { opacity: .35; cursor: default; }
.cm-send:not(:disabled):hover { transform: scale(1.06); }

/* ── Cartes de la colonne de droite : serrées, une seule respiration ── */
.cm-card { padding: 15px 16px; margin-bottom: 0; }
.cm-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cm-card__head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; }
.cm-card__count { font-family: var(--pixel); font-size: 8px; color: var(--muted); }
.cm-card__foot { margin: 10px 0 0; font-size: 11.5px; color: var(--muted-2); text-align: center; }
.cm-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green);
}
.cm-kicker .cm-ico { width: 12px; height: 12px; }

.cm-me__top { display: flex; align-items: center; gap: 12px; }
.cm-me__id { flex: 1; min-width: 0; }
/* « En savoir plus » : en haut à droite, son bord droit tombe sur celui de la barre. */
.cm-me__more {
  align-self: flex-start; flex: none;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(29, 158, 117, .32); background: rgba(29, 158, 117, .07);
  font: 700 11px var(--font); color: var(--green3); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
/* Au survol, il se remplit du vert de l'onglet actif : impossible à rater. */
.cm-me__more:hover, .cm-me__more:focus-visible {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px -6px rgba(29, 158, 117, .7); transform: translateY(-1px);
}
.cm-me__rank { margin-top: 2px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.cm-me__lvl { font-size: 12.5px; color: var(--muted); }
.cm-bar { height: 7px; margin-top: 12px; border-radius: 999px; background: rgba(21, 64, 50, .08); overflow: hidden; }
.cm-bar span { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.cm-me__next { margin: 7px 0 0; font-size: 12px; color: var(--muted); }

/* Même pastille glissante que l'en-tête (js/pastille.js). */
.cm-seg { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(21, 64, 50, .06); margin-bottom: 4px; }
.cm-seg .pastille { border-radius: 9px; }
.cm-seg__b { flex: 1; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; font: 600 11.5px var(--font); color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .25s ease; }
.cm-seg__b:hover { color: var(--text); }
.cm-seg__b.is-active { color: #fff; transition: color .25s ease .12s; }

/* Le podium : 2e, 1er, 3e — la marche du milieu est la plus haute. */
.cm-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding-top: 24px; }
.cm-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.cm-step__av { position: relative; }
.cm-step__av .cm-av { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ring, #CBD5E1); }
.cm-step--1 { --ring: #D9BC66; }
.cm-step--2 { --ring: #B8C2CC; }
.cm-step--3 { --ring: #CD8B5A; }
.cm-medal {
  position: absolute; right: -6px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ring); color: #fff;
  font-family: var(--pixel); font-size: 7px; box-shadow: 0 0 0 2px #fff;
}
.cm-crown { position: absolute; top: -21px; width: 18px; height: 18px; color: #C9A84C; animation: cm-crown 2.6s ease-in-out infinite; }
.cm-crown svg { fill: rgba(233, 207, 126, .55); }
@keyframes cm-crown { 50% { transform: translateY(-2px) rotate(-6deg); } }
.cm-step__name { margin-top: 5px; max-width: 100%; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-step__xp { font-size: 11px; font-weight: 700; color: var(--green); }
.cm-step__block {
  width: 100%; margin-top: 3px; display: grid; place-items: center; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(29, 158, 117, .14), rgba(29, 158, 117, .04));
  border: 1px solid rgba(29, 158, 117, .16);
}
.cm-step--1 .cm-step__block { height: 56px; background: linear-gradient(180deg, rgba(217, 188, 102, .3), rgba(217, 188, 102, .06)); border-color: rgba(201, 168, 76, .35); }
.cm-step--2 .cm-step__block { height: 40px; }
.cm-step--3 .cm-step__block { height: 30px; }
.cm-step.is-me .cm-step__name { color: var(--green3); }
.cm-empty-small { margin: 0; padding: 16px 6px 6px; text-align: center; font-size: 12.5px; color: var(--muted); }

.cm-rows { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; font-size: 13px; }
.cm-row:hover { background: rgba(21, 64, 50, .04); }
.cm-row.is-me { background: rgba(29, 158, 117, .09); }
.cm-row__pos { width: 18px; text-align: center; font-family: var(--pixel); font-size: 8px; color: var(--muted); }
.cm-row__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row__xp { font-size: 11.5px; font-weight: 700; color: var(--green); white-space: nowrap; }
.cm-rows__sep { margin: 4px 0 -6px; text-align: center; color: var(--muted-2); letter-spacing: 3px; }

/* ── « En savoir plus » : rangs et XP ──
   Une fenêtre large : comment on gagne de l'XP, puis les cinq rangs l'un
   sous l'autre, reliés par un fil, le rang du membre en évidence. */
.cm-guide { max-width: 780px; gap: 18px; }
/* Les deux grandes parties respirent : un vrai écart entre les gains et les rangs. */
.cm-guide__sec + .cm-guide__sec { margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--border); }
.cm-guide__head { display: flex; align-items: flex-start; gap: 14px; }
.cm-guide__head > div { flex: 1; min-width: 0; }
.cm-guide__head h2 { margin: 2px 0 4px; }
.cm-guide__head p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 560px; }
.cm-guide__me {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: rgba(29, 158, 117, .07); border: 1px solid rgba(29, 158, 117, .2);
  font-size: 13px; color: var(--muted);
}
.cm-guide__me strong { color: var(--text); }
.cm-guide__sec h3 {
  margin: 0 0 14px; text-align: center;
  font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--text);
}
.cm-guide__gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cm-guide__gain {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(21, 64, 50, .02);
}
.cm-guide__gain > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-guide__gain strong { font-size: 13.5px; }
.cm-guide__gain span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.cm-guide__xp { flex: none; font-size: 16px !important; font-weight: 800; color: var(--green) !important; letter-spacing: -.3px; }
.cm-guide__note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); }

.cm-guide__ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-guide__rank {
  position: relative; display: grid; grid-template-columns: 18px 48px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid transparent;
}
/* Le fil qui relie un rang au suivant, sous les badges. */
.cm-guide__rank:not(:last-child)::after {
  content: ''; position: absolute; left: calc(14px + 18px + 12px + 23px); top: 60px; bottom: -18px; width: 2px;
  border-radius: 2px; background: rgba(21, 64, 50, .1);
}
.cm-guide__rank.is-past:not(:last-child)::after { background: rgba(29, 158, 117, .45); }
.cm-guide__rank.is-here { background: rgba(29, 158, 117, .07); border-color: rgba(29, 158, 117, .25); }
.cm-guide__step { padding-top: 20px; font-family: var(--pixel); font-size: 8px; color: var(--muted-2); text-align: center; }
.cm-guide__txt { padding-top: 3px; }
.cm-guide__rank.is-here .cm-guide__step { color: var(--green); }
.cm-guide__rank .rk { position: relative; z-index: 1; }
.cm-guide__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-guide__name strong { font-size: 14.5px; }
.cm-guide__here {
  padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.cm-guide__ok { width: 15px; height: 15px; color: var(--green); }
.cm-guide__txt p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cm-guide__subs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cm-guide__sub {
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
}
.cm-guide__meta { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cm-guide__meta strong { font-size: 13px; white-space: nowrap; }
.cm-guide__meta span { font-size: 11.5px; color: var(--muted-2); max-width: 190px; }

@media (max-width: 640px) {
  .cm-guide { padding: 22px 18px; }
  .cm-guide__gains { grid-template-columns: 1fr; }
  .cm-guide__rank { grid-template-columns: 48px minmax(0, 1fr); padding: 12px; }
  .cm-guide__step { display: none; }
  .cm-guide__meta { grid-column: 2; align-items: flex-start; text-align: left; }
  .cm-guide__meta span { max-width: none; }
  .cm-guide__rank:not(:last-child)::after { left: calc(12px + 23px); }
  .cm-guide__head .cm-tile--lg { width: 40px; height: 40px; border-radius: 12px; }
  .cm-guide__head .cm-tile--lg .cm-ico { width: 19px; height: 19px; }
}

/* ── Trophées, dessinés comme ceux de Hubooia ──
   Une tuile par trophée : icône, nom, critère sur deux lignes, rareté. La
   rareté donne la bordure et le fond ; un trophée verrouillé est grisé et
   porte un petit cadenas. Commun, rare, épique, légendaire : gris, vert,
   teal, or — la palette Seqooia plutôt que le bleu et le violet d'origine. */
.cm-trophies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.cm-trophy {
  --t-bord: rgba(100, 116, 139, .32); --t-fond: rgba(100, 116, 139, .07); --t-icone: linear-gradient(135deg, #CBD5E1, #64748B);
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 11px 7px 9px; border-radius: 12px; border: 1px solid var(--t-bord); background: var(--t-fond);
  font-family: var(--font); color: var(--text); cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.cm-trophy:hover { transform: scale(1.02); box-shadow: var(--shadow-sm); }
/* Couleurs par défaut (commun) pour tout ce qui porte une rareté : tuile,
   fenêtre de détail, fenêtre de déblocage. Le commun a sa propre teinte
   ardoise, comme les autres raretés ont la leur : pas de tuile blanche. */
[class*="cm-trophy--"] { --t-bord: rgba(100, 116, 139, .32); --t-fond: rgba(100, 116, 139, .07); --t-icone: linear-gradient(135deg, #CBD5E1, #64748B); }
.cm-trophy--rare { --t-bord: rgba(29, 158, 117, .4); --t-fond: rgba(29, 158, 117, .06); --t-icone: var(--grad); }
.cm-trophy--epique { --t-bord: rgba(15, 118, 110, .42); --t-fond: rgba(15, 118, 110, .07); --t-icone: linear-gradient(135deg, #1D9E75, #0F766E 60%, #325A5A); }
.cm-trophy--legendaire { --t-bord: rgba(201, 168, 76, .55); --t-fond: rgba(201, 168, 76, .1); --t-icone: linear-gradient(135deg, #E9CF7E, #C9A84C 55%, #A8862F); }
.cm-trophy__icon {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 7px; border-radius: 10px;
  background: var(--t-icone); color: #fff; box-shadow: 0 4px 10px -5px rgba(21, 64, 50, .5);
}
.cm-trophy__icon .cm-ico { width: 17px; height: 17px; }
.cm-trophy__label { font-size: 11px; font-weight: 700; line-height: 1.25; }
.cm-trophy__hint {
  margin-top: 2px; font-size: 10px; line-height: 1.3; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-trophy__rarity { margin-top: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.cm-trophy:not(.is-earned) { filter: grayscale(1); opacity: .5; }
.cm-trophy__lock { position: absolute; top: 6px; right: 6px; width: 11px; height: 11px; color: var(--muted); }

/* Détail d'un trophée (fenêtre de Hubooia) */
.cm-td { max-width: 420px; gap: 12px; }
.cm-td__head { display: flex; align-items: flex-start; gap: 12px; }
.cm-td__head > div { flex: 1; }
.cm-td__head h2 { margin: 0; font-size: 17px; }
.cm-td__icon {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 13px;
  background: var(--t-icone); color: #fff; box-shadow: 0 6px 14px -7px rgba(21, 64, 50, .55);
}
.cm-td__icon .cm-ico { width: 22px; height: 22px; }
.cm-td__rarity {
  display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--t-bord);
  background: var(--t-fond); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.cm-td__state { display: flex; align-items: center; gap: 7px; padding: 11px 12px; border-radius: 10px; font-size: 12.5px; background: rgba(21, 64, 50, .04); border: 1px solid var(--border); color: var(--muted); }
.cm-td__state .cm-ico { width: 16px; height: 16px; }
.cm-td__state.is-on { background: rgba(29, 158, 117, .08); border-color: rgba(29, 158, 117, .3); color: var(--green3); }
.cm-td__how { padding: 12px; border-radius: 10px; background: rgba(29, 158, 117, .06); border: 1px solid rgba(29, 158, 117, .2); }
.cm-td__how p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }

/* ── Fenêtres ── */
.cm-win { max-width: 360px; text-align: center; align-items: center; }
.cm-win h2 { margin: 0; }
.cm-win p { margin: 0; }
.cm-win__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  background: var(--t-icone); color: #fff; box-shadow: 0 10px 24px -10px rgba(21, 64, 50, .6);
  animation: cm-pop .6s cubic-bezier(.34, 1.6, .5, 1);
}
.cm-win__icon .cm-ico { width: 30px; height: 30px; }
.cm-win__list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cm-win__list li { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px; background: rgba(29, 158, 117, .07); }
.cm-win__list strong { display: block; font-size: 13.5px; }
.cm-win__list div > span { display: block; font-size: 12px; color: var(--muted); }
.cm-win__mini { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--t-icone); color: #fff; }
/* Fenêtre de bravo de la série : la pousse, le cap suivant en barre. */
.bv-serie { max-width: 380px; }
.bv-serie__icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(43, 196, 138, .22), rgba(29, 158, 117, .07));
  border: 1px solid rgba(29, 158, 117, .22); animation: cm-pop .6s cubic-bezier(.3, 1.5, .5, 1);
}
.bv-serie__icon .cm-ico { width: 36px; height: 36px; animation: serie-pousse 1.2s cubic-bezier(.3, 1.4, .5, 1) .35s; transform-origin: 50% 90%; }
.bv-serie h2 { font-size: 20px; line-height: 1.3; text-wrap: balance; }
.bv-serie__cap { width: 100%; }
.bv-serie__cap .cm-bar { margin-top: 2px; }
.bv-serie__bornes { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted-2); }
.cm-win__mini .cm-ico { width: 16px; height: 16px; }
@keyframes cm-pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.cm-zoom { max-width: min(1100px, 96vw); padding: 0; overflow: hidden; position: relative; background: #0B1512; }
.cm-zoom__img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; }
.cm-zoom__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }

/* Pastille « nouveau » sur l'onglet Communauté. */
/* Dans le coin de l'onglet, hors du texte : la marge intérieure de l'entrée
   (13 px) est plus large que la pastille. */
.nav__item[data-nav="communaute"].has-news::after,
.tabbar__item[data-nav="communaute"].has-news::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px #fff; z-index: 3;
}
.tabbar__item { position: relative; }

@media (max-width: 560px) {
  .cm-post { padding: 16px 14px 12px; }
  .cm-post__title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-crown, .cm-win__icon { animation: none; }
}