/* ============================================================
 * MX Pass — chrome du site « Terrain 2 » (chargé sur tout le front)
 * Tokens partagés, logo, boutons, nav, footer, blog et encart app.
 * Même ADN que l'app : nuit + papier chaud, orange brûlé, Barlow
 * Condensed italique en capitales.
 * ============================================================ */

.mx-chrome, .mxpass-landing, .mxpass-dashboard, .mxpass-setup, .mxpass-reset, .mx-blog-wrap {
  --bg: #f4f0e8;
  --card: #fffcf7;
  --surface: #e9e3d7;
  --ink: #16110b;
  --muted: #5c4f40;
  --mud: #be531c;
  --mud-2: #de7a33;
  --mud-deep: #9a4114;
  --forest: #3d6b28;
  --night: #120e0a;
  --night-2: #1e1812;
  --line: rgba(255,255,255,0.12);
  --tan: #f5d9b8;
  --lime: #c6ef4e;
  --ff-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ff-body: Inter, system-ui, -apple-system, sans-serif;
}
.mxpass-landing { font-family: var(--ff-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.mx-chrome, .mx-chrome * , .mxpass-landing *, .mxpass-landing *::before, .mxpass-landing *::after { box-sizing: border-box; }
.mx-chrome { font-family: var(--ff-body); -webkit-font-smoothing: antialiased; }
.mx-chrome a, .mxpass-landing a { text-decoration: none; }
.mx-chrome img, .mxpass-landing img { max-width: 100%; display: block; }
.mx-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---------- Thème : le chrome MX Pass remplace header/footer Kadence ---------- */
body.mx-chrome-on #masthead,
body.mx-chrome-on #mobile-header,
body.mx-chrome-on .site-header,
body.mx-chrome-on #colophon,
body.mx-chrome-on .site-footer { display: none !important; }
body.mx-chrome-on { background: #f4f0e8; }

/* ---------- Eyebrow ---------- */
.mx-eyebrow {
  font: 800 14px/1 var(--ff-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mud-deep); display: inline-flex; align-items: center; gap: 10px;
}
.mx-eyebrow--tan { color: var(--tan); }

/* ---------- Logo ---------- */
.mx-logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.mx-logo__mx { font: italic 900 34px/0.9 var(--ff-head); color: #fff; letter-spacing: -.02em; padding-right: 4px; }
.mx-logo__bar { display: flex; gap: 3px; margin: 3px 0; transform: skewX(-22deg); }
.mx-logo__bar i { display: block; height: 4px; background: var(--mud); width: 30px; }
.mx-logo__bar i:nth-child(2) { width: 5px; background: var(--mud-2); }
.mx-logo__bar i:nth-child(3) { width: 3px; background: var(--tan); }
.mx-logo__pass { font: italic 900 11px/1 var(--ff-head); letter-spacing: .32em; color: var(--tan); }

/* ---------- Boutons ---------- */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 28px; border-radius: 16px;
  font: italic 900 20px/1 var(--ff-head); text-transform: uppercase; letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer; border: 2px solid transparent; white-space: nowrap; text-decoration: none !important;
}
.mx-btn:hover { transform: translateY(-2px); }
.mx-btn:active { transform: translateY(0) scale(.98); }
.mx-btn--primary { background: var(--mud); color: #fff !important; box-shadow: 0 14px 30px -10px rgba(190,83,28,.7); }
.mx-btn--primary:hover { background: var(--mud-deep); }
.mx-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.mx-btn--ghost:hover { border-color: #fff; }
.mx-btn--dark { background: var(--night); color: #fff !important; }
.mx-btn--dark:hover { background: #000; }
.mx-btn--light { background: var(--tan); color: var(--night) !important; }
.mx-btn--sm { height: 44px; padding: 0 18px; font-size: 17px; border-radius: 22px; }
.mx-btn--lg { height: 64px; padding: 0 34px; font-size: 22px; }

/* Rangée de boutons */
.mx-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.mx-ctas--center { justify-content: center; }
@media (max-width: 640px) { .mx-ctas { flex-direction: column; align-items: stretch; gap: 12px; } .mx-ctas .mx-btn { width: 100%; } }

/* ---------- Pastille live ---------- */
.mx-live { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); display: inline-block; flex: none; }
.mx-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: mx-pulse 1.6s ease-out infinite; }
@keyframes mx-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }

/* ---------- Nav ---------- */
.mx-nav { z-index: 50; padding: 16px 0; }
.mx-nav--overlay { position: absolute; top: 0; left: 0; right: 0; }
.mx-nav--solid { position: sticky; top: 0; background: rgba(18,14,10,.94); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
body.admin-bar .mx-nav--solid { top: 32px; }
.mx-nav__inner { display: flex; align-items: center; gap: 28px; }
.mx-nav__links { display: flex; gap: 26px; margin-left: auto; }
.mx-nav__links a { font: 700 15px/1 var(--ff-body); color: rgba(255,255,255,.82); transition: color .15s; }
.mx-nav__links a:hover { color: #fff; }
.mx-nav__menu { display: none; position: relative; }
.mx-nav__menu summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 23px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mx-nav__menu summary::-webkit-details-marker { display: none; }
.mx-nav__menu summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }
.mx-nav__drawer { position: absolute; right: 0; top: 56px; min-width: 220px; padding: 10px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); display: grid; }
.mx-nav__drawer a { padding: 14px 14px; border-radius: 12px; font: 700 17px/1 var(--ff-body); color: #fff; }
.mx-nav__drawer a:hover { background: rgba(255,255,255,.06); }

/* ---------- Footer ---------- */
.mx-footer { background: var(--night); color: #fff; padding: 64px 0 34px; }
.mx-footer__inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mx-footer__tag { color: rgba(255,255,255,.65); margin: 14px 0 0; font-size: 16px; }
.mx-footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 40px; align-content: start; }
.mx-footer__links a { color: rgba(255,255,255,.8); font: 600 16px/1.2 var(--ff-body); }
.mx-footer__links a:hover { color: var(--tan); }
.mx-footer__legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: rgba(255,255,255,.45); font-size: 14px; }

@media (max-width: 760px) {
  .mx-nav__links { display: none; }
  .mx-nav__inner { gap: 12px; }
  .mx-nav__inner > .mx-btn--sm { margin-left: auto; }
  .mx-nav__menu { display: block; }
  .mx-footer__links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mx-live::after { animation: none; } }

/* Blog (liste + articles + encarts app) : voir assets/blog.css,
 * chargé uniquement sur les vues blog par includes/blog.php. */

/* ============================================================
 * Sommaires automatiques d'extensions (Easy Table of Contents, Rank Math,
 * LuckyWP, TOC+) : masqués partout. Le blog a son propre sommaire ; sur les
 * autres pages (activation club, CGU…) ils cassent la mise en page.
 * ============================================================ */
body.mx-chrome-on #ez-toc-container,
body.mx-chrome-on .ez-toc-container,
body.mx-chrome-on [class*="ez-toc-v"],
body.mx-chrome-on .ez-toc-widget-container,
body.mx-chrome-on .wp-block-rank-math-toc-block,
body.mx-chrome-on .rank-math-toc,
body.mx-chrome-on .lwptoc,
body.mx-chrome-on #toc_container { display: none !important; }

/* ============================================================
 * PAGES ordinaires (CGU, confidentialité, mentions légales,
 * suppression de compte…) : bandeau nuit + carte papier lisible.
 * ============================================================ */
body.mx-page { background: #f4f0e8 !important; }
body.mx-page .entry-hero.page-hero-section { position: relative; overflow: hidden; background: #120e0a !important; }
body.mx-page .entry-hero.page-hero-section .hero-section-overlay { background: transparent !important; opacity: 0 !important; }
body.mx-page .entry-hero .entry-hero-container-inner { background: transparent !important; min-height: 0 !important; }
body.mx-page .entry-hero .hero-container { max-width: 900px !important; margin: 0 auto; padding: 64px 22px 58px !important; position: relative; z-index: 1; }
body.mx-page .entry-hero::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 380px; pointer-events: none;
  background: linear-gradient(90deg, #be531c 0 60px, transparent 60px 82px, #de7a33 82px 104px, transparent 104px 124px, #f5d9b8 124px 136px, transparent 136px);
  transform: rotate(24deg); opacity: .8;
}
body.mx-page .entry-hero .entry-header { text-align: left !important; }
body.mx-page .entry-hero .entry-title {
  font: italic 900 clamp(40px, 6vw, 76px)/.92 "Barlow Condensed", "Arial Narrow", sans-serif !important;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff !important; margin: 0 !important; padding-right: .1em;
}
body.mx-page .entry-hero .entry-title::before {
  content: "MX Pass"; display: block; margin-bottom: 16px;
  font: 800 14px/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .16em; color: #f5d9b8;
}
body.mx-page .content-container.site-container,
body.mx-page .site-container.content-container { max-width: 900px !important; }
body.mx-page .content-area { margin: 40px 0 72px !important; }
body.mx-page article.single-entry {
  background: #fffcf7 !important; border-radius: 24px; border: 1px solid rgba(22,17,11,.08);
  box-shadow: 0 18px 40px -28px rgba(42,26,10,.45); overflow: hidden;
}
body.mx-page article.single-entry .entry-content-wrap { padding: 44px 48px !important; }
body.mx-page .entry-content { font: 400 17px/1.7 Inter, system-ui, sans-serif; color: #2a2017; }
body.mx-page .entry-content > p:first-child strong:only-child { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #f4ece0; color: #5c4f40; font-size: 14px; letter-spacing: .02em; }
body.mx-page .entry-content h2 {
  font: italic 900 clamp(28px, 3.4vw, 38px)/1 "Barlow Condensed", "Arial Narrow", sans-serif !important;
  text-transform: uppercase; color: #16110b !important; margin: 2.2em 0 .6em !important; padding: 0 .1em 0 0 !important; border: 0 !important;
}
body.mx-page .entry-content h2::before { content: ""; display: block; width: 52px; height: 6px; border-radius: 3px; background: #be531c; margin-bottom: 14px; transform: skewX(-22deg); }
body.mx-page .entry-content h3 { font: italic 900 24px/1.05 "Barlow Condensed", "Arial Narrow", sans-serif !important; text-transform: uppercase; color: #20391a !important; margin: 1.6em 0 .5em !important; }
body.mx-page .entry-content ul, body.mx-page .entry-content ol { padding-left: 1.3em; }
body.mx-page .entry-content li { margin: .45em 0; }
body.mx-page .entry-content li::marker { color: #be531c; font-weight: 800; }
body.mx-page .entry-content a { color: #9a4114; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(190,83,28,.35); }
body.mx-page .entry-content a:hover { text-decoration-color: #be531c; }
body.mx-page .entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(22,17,11,.1); font-size: 15px; }
body.mx-page .entry-content th { background: #120e0a; color: #f5d9b8; text-align: left; padding: 12px 14px; font: 800 13px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
body.mx-page .entry-content td { padding: 12px 14px; border-top: 1px solid rgba(22,17,11,.08); vertical-align: top; }
body.mx-page .entry-content hr { border: 0; height: 6px; width: 70px; background: #be531c; border-radius: 3px; margin: 2.2em 0; transform: skewX(-22deg); }
@media (max-width: 640px) {
  body.mx-page .entry-hero .hero-container { padding: 44px 18px 40px !important; }
  body.mx-page .entry-hero::after { right: -170px; opacity: .5; }
  body.mx-page article.single-entry { border-radius: 20px; }
  body.mx-page article.single-entry .entry-content-wrap { padding: 26px 20px !important; }
  body.mx-page .content-area { margin: 20px 0 48px !important; }
}

/* Bandes de course du bandeau blog / encart app : discrètes sur mobile */
@media (max-width: 640px) {
  .mx-cta::after { display: none; }
}