/* =========================================================
   MOBILE — Menu hamburger, header ancré, sélecteur de langue
   =========================================================
   Chargé sur toutes les pages par includes/header.php.
   ========================================================= */

/* ---------- En-tête ancré (topbar + bandeau) ----------
   Avant : seule .topbar était sticky, le bandeau jaune défilait
   et disparaissait. Les deux sont maintenant dans .site-header,
   qui est le seul élément collé en haut. .topbar ne doit donc
   PLUS être sticky elle-même, sinon les deux se disputent la
   position. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0a0c0f;
}
.topbar { position: static; }

/* Les ancres (#simulateur…) ne doivent pas passer sous l'en-tête.
   La valeur est mise à jour en JS selon la hauteur réelle. */
:root { --header-h: 112px; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Sélecteur de langue ---------- */
.lang-switch { position: relative; }
.lang-switch__btn {
  font-family: var(--font-mono, monospace);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 12px;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lang-switch__btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 160px;
  padding: 6px;
  z-index: 120;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.lang-opt {
  display: block;
  padding: 9px 12px;
  color: var(--muted);
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-opt:hover { background: var(--panel-2); color: var(--text); }
.lang-opt--active { color: var(--accent); }

/* ---------- Bouton hamburger ---------- */
.nav-toggle {
  display: none;                /* affiché seulement en mobile */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-med), opacity var(--t-fast);
}
/* Croix quand le menu est ouvert */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile-extra { display: none; }
.nav-backdrop { display: none; }

/* =========================================================
   MOBILE (< 900px)
   ========================================================= */
@media (max-width: 900px) {

  .topbar {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .nav-toggle { display: flex; order: 3; }

  /* Le menu devient un panneau latéral.
     Sélecteur renforcé (.topbar > .nav) pour passer devant les
     règles .nav de responsive.css, qui s'appliquent sous 640px. */
  .topbar > .nav,
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(310px, 84vw);
    background: var(--panel);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 78px 0 30px;
    transform: translateX(100%);
    transition: transform var(--t-med);
    overflow-y: auto;
    z-index: 110;
  }
  .nav.nav--open { transform: translateX(0); }

  .nav a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 17px;
  }
  .nav a.active {
    background: rgba(245, 197, 24, .08);
    border-left: 3px solid var(--accent);
  }

  .nav__mobile-extra { display: block; padding: 22px 24px 0; }
  .nav__mobile-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--dim);
    margin-bottom: 10px;
  }
  .lang-switch--stack .lang-opt { padding: 11px 0; border-bottom: 1px solid var(--border-soft); }

  /* Voile sombre derrière le panneau */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 105;
  }
  .nav-backdrop[hidden] { display: none; }

  /* En mobile, le sélecteur de langue desktop est masqué
     (il est repris dans le panneau), la devise reste visible. */
  #lang-switch { display: none; }
  .topbar__actions { order: 2; gap: 8px; }
  .logo { order: 1; font-size: 21px; }

  /* Bloque le défilement du fond quand le menu est ouvert */
  body.nav-open { overflow: hidden; }
}

@media (max-width: 380px) {
  .logo { font-size: 18px; }
  .currency-toggle__btn { padding: 6px 8px; font-size: 11px; }
}

/* ---------- Réseaux sociaux (footer) ---------- */
.footer__social { display: flex; gap: 10px; align-items: center; }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.social--discord:hover { color: #5865F2; border-color: #5865F2; }
.social--youtube:hover { color: #FF0000; border-color: #FF0000; }
.social--steam:hover   { color: #66c0f4; border-color: #66c0f4; }

@media (max-width: 700px) {
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* =========================================================
   VIDÉO DU GUIDE
   ========================================================= */
.guide-video {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 40px;
}
.guide-video__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin-bottom: 14px;
}
.guide-video__player {
  position: relative;
  padding-top: 56.25%;          /* 16/9 */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}
.guide-video__player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.guide-video__chapters { margin-top: 16px; }
.guide-video__chapters-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dim);
  margin-bottom: 8px;
}
.guide-chapter {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 4px;
  color: var(--muted);
  font-size: 14.5px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.guide-chapter:hover { color: var(--text); background: rgba(255,255,255,.03); }
.guide-chapter--active { color: var(--accent); }
.guide-chapter__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  min-width: 44px;
}
.guide-video__empty {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 26px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* =========================================================
   PAGE DEALS
   ========================================================= */
.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}
.deal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deal-card--first { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(245,197,24,.2); }
.deal-card__head { display: flex; justify-content: space-between; align-items: center; }
.deal-card__rank {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 1.5px; color: var(--dim);
}
.deal-card__score {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 600; color: var(--accent);
}
.deal-card__score small { font-size: 12px; color: var(--dim); }
.deal-card__name {
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: 1px; color: var(--text); margin: 0;
}
.deal-card__metrics { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.deal-card__metrics div { display: flex; justify-content: space-between; }
.deal-card__metrics span { color: var(--muted); }
.deal-card__metrics strong { font-family: var(--font-mono); }
.deal-card__bars { display: flex; flex-direction: column; gap: 6px; }
.deal-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.deal-bar__label {
  width: 78px; color: var(--dim);
  font-family: var(--font-display); letter-spacing: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deal-bar__track { flex: 1; height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.deal-bar__fill { display: block; height: 100%; background: var(--accent); }
.deal-card__link {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 1.5px; color: var(--accent); margin-top: auto;
}
.deal-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.deal-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.deal-col__title {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 2px; color: var(--accent); margin-bottom: 10px;
}
.deal-col__empty { color: var(--dim); font-size: 13px; }
.deal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--muted);
}
.deal-row:first-of-type { border-top: none; }
.deal-row:hover { color: var(--text); }
.deal-row__n { font-family: var(--font-display); color: var(--accent); width: 16px; }
.deal-row__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-row__v { font-family: var(--font-mono); font-size: 12.5px; }

/* Portefeuille : marché d'origine + reset */
.pf-flag {
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase;
  border: 1px solid var(--orange); color: var(--orange);
  border-radius: 3px; padding: 1px 5px; margin-left: 6px; cursor: help;
}
.pf-hint { font-size: 12.5px; color: var(--dim); margin-top: 8px; }
.pf-hint strong { color: var(--accent); font-family: var(--font-mono); }
.pf-reset {
  margin-top: 16px; background: transparent;
  border: 1px solid var(--border); color: var(--muted);
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
}
.pf-reset:hover { border-color: var(--red); color: var(--red); }

/* =========================================================
   NEUTRALISATION DES ANCIENNES RÈGLES RESPONSIVE
   =========================================================
   responsive.css (chargé avant) impose sous 640px :
     .nav { width:100%; order:3; justify-content:space-between; }
   ce qui remettait la navigation en ligne dans la topbar et
   cassait le panneau latéral. On annule explicitement ici.
   ========================================================= */
@media (max-width: 640px) {
  .topbar .nav,
  .nav {
    width: min(310px, 84vw);
    order: initial;
    justify-content: flex-start;
    gap: 0;
  }
}

/* ---------- Bandeau informatif ---------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 9px 20px;
  font-size: 13px;
  letter-spacing: 1.5px;
}
.banner__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .5px;
  opacity: .82;
  white-space: nowrap;
}
.banner__meta strong { font-weight: 700; }

@media (max-width: 640px) {
  .banner { font-size: 11px; letter-spacing: 1px; padding: 7px 14px; gap: 4px 10px; }
  .banner__main { max-width: 100%; }
  .banner__meta { font-size: 10.5px; }
}

/* ---------- Retour en haut ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s,
              color var(--t-fast), border-color var(--t-fast);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.to-top--show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
  .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}
@media print { .to-top { display: none; } }

/* En impression, l'en-tête ne doit pas être collé */
@media print {
  .site-header { position: static; }
}

/* =========================================================
   PAGE ARMURERIE
   ========================================================= */
.star-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.star-form label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.star-form__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.star-form__row input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 15px;
  width: 110px;
}
.star-form__row input:focus { outline: none; border-color: var(--accent); }
.star-form__cur { color: var(--accent); font-family: var(--font-mono); }
.star-panel__note { margin: 12px 0 0; font-size: 13px; color: var(--dim); line-height: 1.6; }
.star-panel__note strong { color: var(--muted); }

.armory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.armory-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.armory-card:hover { border-color: var(--accent); }
.armory-card__head { display: flex; justify-content: space-between; align-items: center; }
.armory-card__rank {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 1.5px; color: var(--dim);
}
.armory-type {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 1.5px;
  padding: 3px 8px; border-radius: 3px; border: 1px solid;
}
.armory-type--weapon  { color: #eb4b4b; border-color: #eb4b4b; }
.armory-type--charm   { color: #f0b429; border-color: #f0b429; }
.armory-type--sticker { color: #5aa9ff; border-color: #5aa9ff; }

.armory-card__img {
  width: 100%; height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.armory-card__name {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: .8px; color: var(--text);
  margin: 0; line-height: 1.15;
}
.armory-card__cost {
  font-family: var(--font-mono);
  font-size: 18px; color: var(--accent);
}
.armory-card__cost small { color: var(--dim); font-size: 12px; margin-left: 6px; }

.armory-card__stats { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.armory-card__stats div { display: flex; justify-content: space-between; }
.armory-card__stats span { color: var(--muted); }
.armory-card__stats strong { font-family: var(--font-mono); }

.armory-card__bar {
  height: 4px; background: var(--panel-2);
  border-radius: 2px; overflow: hidden;
}
.armory-card__fill { height: 100%; background: var(--accent); }

.armory-details { font-size: 13px; }
.armory-details summary {
  cursor: pointer; color: var(--muted);
  font-family: var(--font-display); font-size: 12px; letter-spacing: 1px;
  padding: 6px 0;
}
.armory-details summary:hover { color: var(--accent); }
.armory-tier { margin: 10px 0; }
.armory-tier__head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1px; margin-bottom: 5px;
}
.armory-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.armory-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0 4px 15px;
  color: var(--muted); font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
}
.armory-item span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.armory-item span:last-child { font-family: var(--font-mono); flex-shrink: 0; }
.armory-item--win { color: var(--green); }
.armory-warn { font-size: 12px; color: var(--orange); margin: 0; }
.armory-card__stats--empty p {
  margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5;
}

/* =========================================================
   PULSE — « depuis ta dernière visite »
   ========================================================= */
.pulse {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.pulse__title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pulse__since {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--dim);
}
.pulse__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.pulse__sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--dim);
  margin-bottom: 6px;
}
.pulse__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--muted);
}
.pulse__row:hover { color: var(--text); }
.pulse__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse__price { font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.pulse__diff { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.pulse__diff.up   { color: var(--green); }
.pulse__diff.down { color: var(--red); }
.pulse__calm { margin: 0; color: var(--muted); font-size: 13.5px; }
.pulse--intro { border-left-color: var(--dim); }
.pulse--intro p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* ---------- Simulateur : bascule caisse / armurerie ---------- */
.sim-modes { display: flex; gap: 8px; margin-bottom: 14px; }
.sim-mode { flex: 1; cursor: pointer; }
.sim-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sim-mode span {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--muted);
  transition: all var(--t-fast);
}
.sim-mode:hover span { border-color: var(--accent); color: var(--text); }
.sim-mode input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}
.sim-mode input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================
   PROFIL DE RISQUE — code couleur
   =========================================================
   Vert / jaune / rouge selon la position du chiffre par rapport
   au seuil de rentabilité (le coût d'une ouverture). La couleur
   porte sur la valeur ET sur la bordure gauche, pour rester
   lisible même en daltonisme deutan/protan : la position et le
   libellé restent les repères principaux, la couleur ne fait
   que confirmer.
   ========================================================= */
.risk-box { border-left: 3px solid var(--border); }

.risk-box--good { border-left-color: var(--green); }
.risk-box--warn { border-left-color: var(--orange); }
.risk-box--bad  { border-left-color: var(--red); }

.risk-box--good .risk-box__value { color: var(--green); }
.risk-box--warn .risk-box__value { color: var(--orange); }
.risk-box--bad  .risk-box__value { color: var(--red); }

.risk-box--good { background: linear-gradient(90deg, rgba(74,222,128,.06), transparent 60%); }
.risk-box--warn { background: linear-gradient(90deg, rgba(255,138,61,.06), transparent 60%); }
.risk-box--bad  { background: linear-gradient(90deg, rgba(255,77,77,.05), transparent 60%); }

/* Légende */
.risk-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--dim);
}
.risk-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.risk-dot--good { background: var(--green); }
.risk-dot--warn { background: var(--orange); }
.risk-dot--bad  { background: var(--red); }