/* InazukyDark — affinage visuel (26/09/2026), chargé en dernier sur toutes les pages.
   Objectif : garder les animations et les couleurs de la maquette 3D, mais avec une écriture
   plus naturelle (sans empattements), des boutons plus propres et des cartes plus sobres. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ---------- écriture ---------- */
body, .btn, button, input, select, textarea { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, h4, .section-title, .panel h2, .role-btn strong, .formation-group, .player-title, .trainer-card h3, .approach-card h3,
.method-statement, .method-term, .hero-card-avatars .av, .trainer-card .avatar, .fx-brand {
  font-family: "Inter", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: -0.02em;
}
h1, h2, h3 { font-weight: 800; }
.hero h1 { font-weight: 800; letter-spacing: -0.03em; }
.eyebrow, .kicker, .approach-card .tag, .fx-eyebrow, .phase-title {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-style: normal !important; font-weight: 500 !important;
  font-size: 0.74rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
}
.eyebrow, .kicker, .fx-eyebrow { color: var(--accent-strong); }
.method-statement { font-weight: 700; background: none; -webkit-text-fill-color: initial; color: #fff; }
.section-head h2, .reframe h2, .trainer-card h3, .approach-card h3 { background: none !important; -webkit-text-fill-color: initial !important; color: #fff !important; }
.method-term { background: none; -webkit-text-fill-color: initial; color: var(--accent-strong); animation: none; font-weight: 700; font-size: 1.3rem; }
.method-item::before { display: none; }                     /* gros numéro creux en serif */
.price-card .amount { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-weight: 500; letter-spacing: -0.03em; }
.hero-card-avatars .av, .trainer-card .avatar { font-weight: 700; }
.hero-card .beam-inner .hero-card-live, .hero-card-pair, .hero-card-caption, .hero-stats, .price-chip { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- boutons ---------- */
.btn, button.submit, #login-form button[type="submit"], .module-row button.save, .support-form button[type="submit"], .nav-actions .btn, .discord-btn, #copy-code, .tab-btn, .legal-tab, .formation-tab, .account-nav a { border-radius: 6px; }
.btn-primary, .nav-actions .btn-primary, .hero .btn-primary, .price-card .btn-primary, button.submit, #login-form button[type="submit"], .module-row button.save, .support-form button[type="submit"], .discord-btn, #copy-code, #support-send-btn {
  background: var(--accent) !important; background-image: none !important; color: var(--accent-ink) !important; border-color: transparent;
  box-shadow: 0 6px 18px rgba(216, 162, 74, 0.22); animation: none !important; filter: none;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover, .nav-actions .btn-primary:hover, .hero .btn-primary:hover, button.submit:hover:not(:disabled), #login-form button[type="submit"]:hover, .module-row button.save:hover, .support-form button[type="submit"]:hover, .discord-btn:hover, #copy-code:hover, #support-send-btn:hover {
  background: var(--accent-strong) !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(216, 162, 74, 0.3); filter: none;
}
.nav-actions .btn-primary::after, button.submit::after, #login-form button[type="submit"]::after, .module-row button.save::after, .support-form button[type="submit"]::after { display: none; }
.btn-ghost, .nav-actions .btn-ghost { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.btn-ghost:hover, .nav-actions .btn-ghost:hover { border-color: rgba(240, 190, 110, 0.7); background: rgba(216, 162, 74, 0.08); box-shadow: none; }
.nav-actions .btn-ghost::before { display: none; }
.nav-actions .btn { padding: 10px 18px; }

/* ---------- cartes de l'accueil ---------- */
.trainer-card, .method-item, .approach-card, .phase-block, .discord-card, .reframe-card, .price-card, .hero-card .beam-inner {
  background: rgba(17, 19, 25, 0.86) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 12px !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38) !important;
}
.trainer-card::after, .method-item::after, .approach-card::after, .phase-block::after, .discord-card::after, .reframe-card::after { display: none; }   /* spot sous la souris */
.trainer-card::before, .phase-block::before, .discord-card::before, .approach-card::before { display: none; }                                    /* filets et halos en haut */
.trainer-card:hover, .method-item:hover, .approach-card:hover, .phase-block:hover { transform: translateY(-3px); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45) !important; }
.approach-card { border-top: 2px solid var(--tone) !important; }
.approach-card .spark { filter: none; }
.approach-card li::before { box-shadow: none; }
.trainer-card .avatar { background: #171a21; box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 12%, transparent); }
.beam-wrap { padding: 0; background: none; }
.beam-wrap::before { display: none; }
.beam-inner { border-radius: 12px; }
.hero-card .beam-inner { padding: 22px 22px 18px; }
.module.unlocked .week { box-shadow: none; border-radius: 4px; }
.flow-step .dot { background: #171a21; box-shadow: none; color: var(--accent-strong); }
.discord-card .chan { border-radius: 6px; }
.price-card { border-color: rgba(216, 162, 74, 0.35) !important; }
.method-term::after { background: var(--accent); opacity: 0.6; }

/* ---------- cartes et panneaux des pages intérieures ---------- */
.card, .panel, .fx-panel, .todo-box, .stat-tile {
  background: rgba(17, 19, 25, 0.86) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 12px !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38) !important;
}
.card::after, .fx-panel::after { display: none; }                                                    /* contour lumineux tournant */
.card::before, .fx-panel::before, .stat-tile::before, .module::before, .module-row::before, .panel::before { display: none; }   /* spots */
.stat-tile:hover { transform: none; }
.module:not(.locked):hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); }
.panel h2::before { background: var(--accent); box-shadow: none; }
.todo-box { border-color: rgba(216, 162, 74, 0.35) !important; }
.legal-tab.active, .tab-btn.active, .account-nav a.active, .role-switch button.active { background: var(--accent); background-image: none; color: var(--accent-ink); box-shadow: none; }
.formation-tab.active { box-shadow: none; }
.role-switch { border-radius: 8px; }
.role-switch button { border-radius: 6px; }
.role-btn { border-radius: 12px; }
.role-btn .ico { display: none; }
.role-btn:hover, .role-btn.admin:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); background: rgba(216, 162, 74, 0.06); border-color: rgba(240, 190, 110, 0.6); }
.formation-group .dot { box-shadow: none; }
.player-title { color: #fff; }
.vp { border-radius: 10px; }
.module.unlocked .week { display: inline-block; width: max-content; justify-self: start; }

#support-send-btn { border: 0; padding: 10px 18px; font-size: 0.88rem; font-weight: 600; cursor: pointer; }

/* 26/09 (owner) : page formation — titres de module dans la carte, cartes de cours plus grandes */
html.fx-inner .phase-block { padding: 22px 20px 14px; margin-bottom: 26px; }
html.fx-inner .phase-block + .phase-block { margin-top: 0; }
html.fx-inner .phase-title { margin-bottom: 16px; }
html.fx-inner .module { padding: 20px 20px; margin-bottom: 12px; border-radius: 10px; gap: 16px; }
html.fx-inner .module .num { font-size: 0.92rem; }
html.fx-inner .module .title { font-size: 1.04rem; font-weight: 500; }
html.fx-inner .module .tag, html.fx-inner .module .presenter { font-size: 0.76rem; padding: 5px 11px; }
@media (max-width: 560px) {
  html.fx-inner .module { flex-wrap: wrap; padding: 16px; gap: 10px 12px; }
  html.fx-inner .module .title { flex-basis: calc(100% - 40px); }
  html.fx-inner .phase-block { padding: 18px 14px 10px; }
}

/* audit 26/09 : bandeau défilant du hero retiré (doublon des chiffres clés), tableaux admin sur mobile */
.hero-marquee { display: none !important; }
@media (max-width: 860px) {
  html.fx-inner .table-wrap { position: relative; }
  html.fx-inner .table-wrap::after { content: "← faire défiler le tableau →"; display: block; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text-faint); padding: 8px 0 2px; }
}

/* ---------- échelle fluide (26/09) : tout le site (tailles de texte, cartes, largeurs en rem) grandit avec l'écran ---------- */
html { font-size: clamp(15px, 0.42vw + 10px, 20px); }        /* 1366 px → 15,7 ; 1920 → 18 ; 2560 → 20 */
@media (max-width: 640px) { html { font-size: 16px; } }
/* petites étiquettes : une seule taille lisible partout (avant : 0,6 à 0,76 rem selon les endroits) */
.hero-stats, .price-chip, .hero-card-caption, .hero-card-pair, .hero-card-live, .module .week, .module .tag, .toc .toc-label, .fx-footer .legal-links, footer .legal-links { font-size: 0.8rem !important; }
.eyebrow, .kicker, .approach-card .tag, .fx-eyebrow, .phase-title, .ps-label, .ps-kicker, .pm-kicker { font-size: 0.78rem !important; }
.hero .lede, .section-head p, .subtitle, .reframe p.body, .approach-card .desc, .trainer-card .bio, .method-item p, .flow-step p, .panel p, .panel li { font-size: 1.02rem !important; line-height: 1.6; }
.hero h1 { font-size: clamp(2.3rem, 3.6vw + 0.6rem, 3.6rem) !important; }
html.fx-inner h1 { font-size: clamp(1.9rem, 2.2vw + 0.6rem, 2.8rem) !important; }
.section-head h2, .reframe h2 { font-size: clamp(1.6rem, 1.6vw + 0.6rem, 2.3rem) !important; }
.hero-card { max-width: 30rem; }
.hero-card-avatars .av { width: 2rem; height: 2rem; }
.hero-card-foot { font-size: 0.9rem; }
.hero-flex { gap: 3.5rem; }
@media (min-width: 1600px) { .hero-flex { grid-template-columns: 1.05fr 0.95fr; } }
/* écran vertical (tablette/moniteur portrait) : colonnes des pages membres plus larges, moins de vide latéral */
@media (max-aspect-ratio: 1/1) and (min-width: 700px) { html.fx-inner .wrap { max-width: min(52rem, 88vw) !important; } }
/* pied de page collé en bas (26/09) : sur un écran très haut, le contenu court ne laisse plus un grand vide sous le pied de page ;
   les pages membres respirent : texte et cartes un peu plus grands quand l'écran est haut */
html.fx-inner body { min-height: 100vh; display: flex; flex-direction: column; }
html.fx-inner body > .wrap { flex: 1 0 auto; width: 100%; box-sizing: border-box !important; }
html.fx-inner .fx-footer { margin-top: auto !important; }
@media (max-aspect-ratio: 3/4) and (min-height: 1400px) {
  html { font-size: clamp(17px, 0.9vh + 5px, 21px); }
  html.fx-inner .wrap { max-width: min(58rem, 90vw) !important; padding-top: 56px !important; }
  html.fx-inner .wrap > * + * { margin-top: 6px; }
}