/* ==========================================================================
   Navigation inter-offres — WinAcademy
   Chargée APRÈS style.css, qu'elle ne modifie pas.

   WinAcademy vit sur un sous-domaine et était jusqu'ici la seule page de
   l'écosystème sans aucun lien vers les autres : on y entrait, on n'en
   sortait que par le pied de page. Ce fichier porte le même bandeau que les
   sept pages de winvesttrade.com, pour que la navigation soit la même
   partout.

   Les liens pointent sur les ANCIENNES adresses (trading.html, crypto.html…)
   et non sur les nouvelles (/winvest-pro, /wincrypto…) : les anciennes
   fonctionnent aujourd'hui et basculeront d'elles-mêmes par les 301 de
   winvest-site/vercel.json une fois le nouveau site en ligne. L'inverse
   donnerait des liens morts jusqu'au déploiement. À repasser en adresses
   canoniques le jour de la bascule.
   ========================================================================== */

.sitenav { display: flex; align-items: center; gap: 4px; }
.sitenav a {
  padding: 8px 13px; border-radius: 999px;
  font-size: 15px; color: var(--light-muted); white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.sitenav a:hover { background: rgba(139, 63, 232, 0.08); color: var(--light-ink); }
.sitenav a[aria-current="page"] {
  background: rgba(139, 63, 232, 0.12); color: var(--purple-deep); font-weight: 500;
}
.sitenav a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Relais mobile : le .header est masqué sous 760px, cette barre prend le relais. */
.navrail { display: none; }

@media (max-width: 759px) {
  .navrail {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 12px 16px; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .navrail::-webkit-scrollbar { display: none; }
  .navrail a {
    flex: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
    padding: 8px 14px; font-size: 14px; color: rgba(244, 242, 248, 0.68); white-space: nowrap;
  }
  .navrail a[aria-current="page"] {
    background: rgba(139, 63, 232, 0.18); border-color: rgba(185, 140, 255, 0.4); color: var(--lilac-light);
  }
}


/* Sept entrées de menu ne tiennent sur une ligne qu'au-delà de 1200 px.
   En dessous on resserre, plutôt que de laisser les libellés se couper.
   Ici l'en-tête porte en plus une pastille et un bouton à prix : la pastille
   passe à la trappe avant les liens, c'est la moins utile des trois. */
/* La pastille disparaît de l'en-tête de bureau à toutes les largeurs.
   Mesuré : logo 122 + nav 772 + bloc droit 333 = 1227 px pour un conteneur de
   1180. Comme le hero est en `overflow: hidden`, le surplus n'était pas un
   débordement mais un rognage — le bouton se faisait couper sans que rien ne
   le signale. La pastille est la moins coûteuse à retirer : « +30 h · 3
   niveaux » est déjà dans l'accroche du hero juste en dessous, et la version
   mobile la garde dans le topbar. Sans elle : 122 + 772 + 203 = 1097, ça passe. */
.header .header__pill { display: none; }

@media (min-width: 1000px) and (max-width: 1319px) {
  .sitenav { gap: 1px; }
  .sitenav a { padding: 8px 8px; font-size: 13.5px; }
  .header { gap: 10px; padding-left: clamp(14px, 2vw, 28px); padding-right: clamp(14px, 2vw, 28px); }
  .header .btn--sm { font-size: 14px; padding: 10px 14px; }
}

/* En dessous de 1000 px, l'en-tête de bureau ne rentre plus : sept entrées plus
   un bouton qui porte un prix, c'est 885 px incompressibles. Plutôt que de
   réduire les libellés jusqu'à l'illisible, on bascule sur le bandeau mobile,
   qui défile. Le système de design fait ce passage à 760 px ; ici il doit se
   faire plus tôt, parce que le bouton de cette page est plus long. */
@media (max-width: 999px) {
  .header { display: none; }
  .navrail {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 12px 16px; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .navrail::-webkit-scrollbar { display: none; }
  .navrail a {
    flex: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
    padding: 8px 14px; font-size: 14px; color: rgba(244, 242, 248, 0.68); white-space: nowrap;
  }
  .navrail a[aria-current="page"] {
    background: rgba(139, 63, 232, 0.18); border-color: rgba(185, 140, 255, 0.4); color: var(--lilac-light);
  }
}

@media (min-width: 1000px) { .navrail { display: none; } }

/* Contrainte de contraste reprise de winvest-site : #6B7280 ne donne que 3,88
   contre le bas du dégradé du hero. */
:root { --light-subtle: #5B6270; }
.footer__col-title { color: rgba(244, 242, 248, 0.56); }

/* --------------------------------------------------------------------------
   Place dans l'en-tête
   `.brand__logo` est déjà en `flex: none`, mais `.brand` ne l'était pas : le
   conteneur se laissait comprimer par la nav et rognait le logo, qui n'était
   plus qu'un éclat de « W » à 900 px.
   -------------------------------------------------------------------------- */
.header .brand { flex: none; }

/* Sous 1100 px, le prix du bouton est ce qui coûte le plus de largeur pour ce
   qu'il apporte : il est répété deux fois plus bas dans la page. Le verbe
   reste, le montant s'efface. */
@media (max-width: 1099px) {
  .header .btn__price { display: none; }
}