/* ════════════════════════════════════════════════════════════════
   THW Coaching — Site vitrine « Découvrir »
   Styles partagés : hub des 16 bulles + template de page thème.
   S'appuie sur colors_and_type.css (tokens) — même famille visuelle.
   ════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

/* Per-theme accent, set inline on <body> via --accent / --accent-rgb */
:root { --accent: var(--brand); --accent-rgb: 0,200,224; }

/* Atmospheric glow — tinted by the active accent */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 12%, rgba(var(--accent-rgb), 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 85% 8%, rgba(91, 111, 255, 0.07) 0%, transparent 65%);
  transition: background 0.5s ease;
}
.light .atmosphere {
  background:
    radial-gradient(ellipse 55% 45% at 18% 12%, rgba(var(--accent-rgb), 0.13) 0%, transparent 62%),
    radial-gradient(ellipse 50% 55% at 85% 8%, rgba(91, 111, 255, 0.10) 0%, transparent 62%);
}

main { position: relative; z-index: 1; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }

/* ─── Header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 20px;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.04em; }
.brand-word span { color: var(--accent); }
.header-nav { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.header-link {
  padding: 8px 13px; border-radius: var(--radius-btn);
  font-size: 14px; font-weight: 500; color: var(--text-mid);
  transition: color 0.16s, background 0.16s;
}
.header-link:hover { color: var(--text); background: var(--bg-hover); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  border-radius: var(--radius-btn); border: 1px solid transparent;
  cursor: pointer; transition: all 0.18s ease; white-space: nowrap;
  text-decoration: none;
}
.btn-cyan {
  padding: 10px 18px; color: #fff; border: none;
  background: var(--brand-gradient);
  box-shadow: 0 3px 16px rgba(0,200,224,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-cyan:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 26px rgba(0,200,224,0.42), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-accent {
  padding: 10px 18px; color: #fff; border: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #5b6fff));
  box-shadow: 0 3px 16px rgba(var(--accent-rgb),0.32), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-accent:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-lg { padding: 15px 26px; font-size: 15px; border-radius: 13px; }
.btn-ghost {
  padding: 10px 18px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border-mid);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),0.07); }

/* ─── Eyebrow / kicker ────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--accent); display: inline-block; border-radius: 2px; }
.eyebrow.center { justify-content: center; }

/* ════════════════ DISCOVERY HUB ════════════════ */
.disc-hero { padding: 86px 0 30px; text-align: center; }
.disc-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(42px, 6.4vw, 80px); letter-spacing: -0.045em; line-height: 0.98;
  margin: 0 auto 22px; max-width: 14ch; text-wrap: balance;
}
.disc-hero h1 .grad {
  background: var(--brand-gradient-h); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.disc-hero p {
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--text-mid);
  max-width: 56ch; margin: 0 auto 32px; text-wrap: pretty;
}
.disc-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.disc-hero-note { margin-top: 16px; font-size: 13px; color: var(--text-dim); }

/* Bubble grid */
.bubbles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 48px 0 30px;
}
.bubble {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; min-height: 168px;
  border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}
.bubble::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--b-accent), transparent);
  opacity: 0; transition: opacity 0.22s ease;
}
.bubble:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--b-accent) 50%, transparent);
  background: var(--bg-hover);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28), 0 0 0 1px color-mix(in oklab, var(--b-accent) 22%, transparent);
}
.bubble:hover::after { opacity: 1; }
.light .bubble:hover { box-shadow: 0 16px 38px rgba(0,80,160,0.14); }
.bubble-ico {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: var(--b-accent);
  background: color-mix(in oklab, var(--b-accent) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--b-accent) 30%, transparent);
  transition: transform 0.22s ease;
}
.bubble:hover .bubble-ico { transform: scale(1.06); }
.bubble-num {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
}
.bubble-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; line-height: 1.15; margin-top: auto; }
.bubble-tag { font-size: 12.5px; line-height: 1.4; color: var(--text-mid); text-wrap: pretty; }
.bubble-soon {
  position: absolute; top: 16px; right: 16px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: var(--b-accent); border: 1px solid color-mix(in oklab, var(--b-accent) 40%, transparent);
  background: color-mix(in oklab, var(--b-accent) 12%, transparent);
}

/* ════════════════ THEME PAGE ════════════════ */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); padding: 26px 0 0; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.5; }

.th-hero { padding: 30px 0 56px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.th-hero-ico {
  width: 60px; height: 60px; border-radius: 16px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
}
.th-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.04em; line-height: 1.02;
  margin: 0 0 18px; text-wrap: balance;
}
.th-hero .lede { font-size: 17px; line-height: 1.6; color: var(--text-mid); max-width: 52ch; text-wrap: pretty; margin: 0 0 26px; }
.th-benefits { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.th-benefits li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.th-benefits .bchk {
  flex: none; width: 21px; height: 21px; border-radius: 6px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}
.th-audience {
  margin-top: 4px; padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 13.5px; line-height: 1.5; color: var(--text-mid);
}
.th-audience b { color: var(--text); font-weight: 600; }

/* Section scaffolding */
.section { padding: 30px 0; }
.section-head { max-width: 60ch; margin-bottom: 38px; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; line-height: 1.08; margin: 0; text-wrap: balance;
}

/* Subtheme cards */
.sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sub-card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.sub-card:hover { border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: translateY(-3px); background: var(--bg-hover); }
.sub-card.span2 { grid-column: span 2; }
.sub-card.feat { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 7%, var(--bg-card)); }
.sub-badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; color: #fff;
}
.sub-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.sub-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.sub-desc { font-size: 14px; line-height: 1.55; color: var(--text-mid); margin: 0; text-wrap: pretty; }
.sub-example {
  font-size: 13px; line-height: 1.5; color: var(--text-mid);
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.06); border: 1px solid color-mix(in oklab, var(--accent) 16%, transparent);
}
.sub-example b { color: var(--accent); font-weight: 600; letter-spacing: 0.03em; font-size: 10.5px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.sub-quote {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  line-height: 1.3; color: var(--text); text-wrap: balance;
}
.sub-quote::before { content: '“'; color: var(--accent); margin-right: 1px; }
.sub-quote::after { content: '”'; color: var(--accent); }
.sub-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.sub-list li {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.2; color: var(--text-mid);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.09); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
}

/* Plans / comparison table */
.plan-table-wrap {
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--bg-card); overflow: hidden;
}
.plan-table { width: 100%; border-collapse: collapse; }
.plan-table th, .plan-table td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.plan-table thead th {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  color: var(--text); background: rgba(var(--accent-rgb),0.07);
}
.plan-table thead th:not(:first-child) { text-align: center; }
.plan-table tbody td:not(:first-child) { text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-mid); }
.plan-table tbody td:first-child { color: var(--text); font-weight: 500; }
.plan-table tbody tr:last-child td { border-bottom: none; }
.plan-table tbody tr:hover { background: var(--bg-hover); }
.plan-table .ok { color: var(--accent); font-weight: 700; }
.plan-caption { font-size: 13.5px; line-height: 1.55; color: var(--text-mid); margin: 16px 2px 0; text-wrap: pretty; }

/* Pricing cards (abonnements) */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.price-card {
  position: relative; border-radius: var(--radius-lg); padding: 28px 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px rgba(var(--accent-rgb),0.18); }
.price-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; color: #fff; background: var(--accent);
}
.price-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.price-amt { font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -0.04em; }
.price-amt small { font-size: 15px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.price-year { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.price-for { font-size: 13.5px; color: var(--text-mid); margin: 6px 0 16px; }
.price-coach { font-size: 12px; color: var(--text-mid); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.price-coach b { color: var(--accent); }

/* Related themes */
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rel-card {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border);
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.rel-card:hover { transform: translateY(-3px); background: var(--bg-hover); border-color: color-mix(in oklab, var(--rc-accent) 45%, transparent); }
.rel-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px; color: var(--rc-accent);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--rc-accent) 15%, transparent);
}
.rel-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: -0.01em; }

/* Final CTA band */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 22px; padding: 60px 32px;
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(var(--accent-rgb),0.20), transparent 70%),
    var(--bg-card);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border));
}
.cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.04em; line-height: 1.04; margin: 0 0 14px; text-wrap: balance; }
.cta-band p { font-size: 16px; color: var(--text-mid); max-width: 50ch; margin: 0 auto 28px; }
.cta-band-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Coming soon block */
.soon-wrap { text-align: center; padding: 90px 0 70px; }
.soon-ico {
  width: 88px; height: 88px; border-radius: 24px; margin: 0 auto 28px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.soon-wrap h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,5vw,56px); letter-spacing: -0.04em; margin: 0 0 18px; }
.soon-wrap p { font-size: 17px; line-height: 1.6; color: var(--text-mid); max-width: 48ch; margin: 0 auto 30px; }
.soon-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); padding: 7px 15px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ─── Footer ──────────────────────────────────────────────────── */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); margin-top: 70px; padding: 56px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { font-size: 13.5px; line-height: 1.6; color: var(--text-mid); max-width: 32ch; margin: 16px 0 0; }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--text-mid); padding: 5px 0; transition: color 0.16s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.footer-copy { font-size: 13px; color: var(--text-dim); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--text-mid); background: var(--bg-card); border: 1px solid var(--border); transition: all 0.16s;
}
.footer-social a:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }

/* ─── Scroll-reveal ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .th-hero { grid-template-columns: 1fr; gap: 38px; }
  .th-hero-media { order: -1; }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .wrap, .site-header-inner { padding-left: 22px; padding-right: 22px; }
  .bubbles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sub-grid, .price-grid { grid-template-columns: 1fr; }
  .sub-card.span2 { grid-column: auto; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .header-nav { display: none; }
  .plan-table th, .plan-table td { padding: 12px 12px; font-size: 12.5px; }
}
/* Le header d\u00e9borde entre 820 et 1000px : replier la nav d\u00e8s 1000px.
   Le burger prend le relais : il ouvre le menu complet (nav + toutes les pages). */
@media (max-width: 1000px) {
  .header-nav { display: none; }
  .header-burger { display: inline-flex !important; }
}
@media (max-width: 480px) {
  .disc-hero { padding-top: 58px; }
  .header-cta-label { display: none; }
}

/* Hide theme-toggle labels on tight screens (matches landing) */
@media (max-width: 600px) { .theme-toggle-label { display: none !important; } }

/* ─── Mobile : cadrage ───────────────────────────────────────
   Le header débordait à droite sur téléphone (logo + langue + thème +
   CTA + burger plus larges que l'écran) : on resserre les paddings, les
   gaps et les pastilles pour que toute la barre tienne sans défilement
   horizontal. Et la grille des piliers passe à DEUX bulles par ligne
   (au lieu d'une seule) jusqu'au plus petit écran. */
@media (max-width: 820px) {
  /* « Ouvrir » Mac / Windows n'a aucun sens sur un téléphone :
     on ne garde que l'app web et les deux stores natifs. */
  .dl-desktop-only { display: none !important; }
}
@media (max-width: 600px) {
  .site-header-inner { padding: 11px 16px; gap: 9px; }
  .header-right { gap: 6px; min-width: 0; }
  .brand-lockup { gap: 8px; }
  .brand-word { font-size: 16px; }
  .theme-toggle > button { padding: 7px 9px !important; }
  .lang-select-btn { padding: 7px 10px !important; }
}
@media (max-width: 480px) {
  .wrap, .site-header-inner { padding-left: 16px; padding-right: 16px; }

  /* Deux bulles par ligne, en version compacte. */
  .bubbles { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 32px 0 24px; }
  .bubble { padding: 14px; min-height: 132px; gap: 10px; border-radius: 16px; }
  .bubble-ico { width: 38px; height: 38px; border-radius: 11px; }
  .bubble-ico svg { width: 20px; height: 20px; }
  .bubble-title { font-size: 13.5px; }
  .bubble-tag { font-size: 11px; line-height: 1.35; }
  .bubble-num { top: 11px; right: 12px; font-size: 10px; }
  .bubble-soon { top: 10px; right: 10px; font-size: 8px; padding: 2px 6px; }

  /* Pages piliers : la rangée de CTA (« Commence ton essai… » + « Tous les
     thèmes ») est plus large que l'écran et, comme .btn est en nowrap, elle
     poussait toute la page en scroll horizontal. On laisse la colonne se
     réduire et le libellé passer à la ligne. */
  .th-hero-copy { min-width: 0; }
  .btn-lg { padding: 13px 18px; font-size: 14.5px; }
  .th-hero .btn-lg { white-space: normal; text-align: center; }

  /* « À voir aussi » : deux colonnes ne tiennent pas dès qu'un titre est
     long (« Récupération et bien-être ») → une colonne sur téléphone. */
  .rel-grid { grid-template-columns: 1fr; }
  .rel-card { min-width: 0; }
}
/* Sous ~420 px (iPhone 12/13/14/15, Android courants) la barre ne peut plus
   contenir le mot « THW. » EN PLUS de la langue, du thème, du CTA et du
   burger : on garde la marque (le logo reste cliquable vers l'accueil) et on
   retire le mot, sinon tout le site part en scroll horizontal. */
@media (max-width: 420px) {
  .brand-word { display: none; }
}
@media (max-width: 370px) {
  /* Dernière marge de sécurité sur les petits Android (360 px). */
  .site-header-inner { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .wrap { padding-left: 14px; padding-right: 14px; }
  .bubbles { gap: 8px; }
  .bubble { padding: 12px; }
}

/* ════════════════ APP MOCKUPS ════════════════
   Stylized, replaceable. Wrapped in [data-replace] for future
   real-screenshot swaps. Tinted by the active theme --accent. */
.th-hero-media { position: relative; }
.mk {
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border: 1px solid var(--border-mid);
  box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--accent-rgb),0.08), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: mkFloat 7s ease-in-out infinite;
}
.light .mk { box-shadow: 0 30px 70px rgba(20,40,80,0.16), 0 0 0 1px rgba(var(--accent-rgb),0.1); }
@keyframes mkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .mk { animation: none; } }
.mk-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-mid); }
.mk-title { margin-left: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: -0.01em; color: var(--text-mid); }
.mk-title .acc { color: var(--accent); }
.mk-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mk-replace-tag {
  position: absolute; bottom: 10px; right: 12px; z-index: 3;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  color: var(--text-dim); opacity: 0.5; pointer-events: none;
}

/* Generic mockup atoms */
.mk-row { display: flex; align-items: center; gap: 10px; }
.mk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
.mk-chip { font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(var(--accent-rgb),0.12); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
.mk-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.mk-val { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.mk-mono { font-family: var(--font-mono); }
.mk-line { height: 8px; border-radius: 5px; background: var(--bg-hover); }
.mk-bubble { max-width: 86%; padding: 11px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; }
.mk-bubble.me { align-self: flex-end; background: var(--brand-gradient); color: #fff; border-bottom-right-radius: 5px; }
.mk-bubble.ai { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 5px; }
.mk-typing { display: inline-flex; gap: 4px; }
.mk-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: mkBlink 1.2s infinite; }
.mk-typing i:nth-child(2) { animation-delay: 0.2s; } .mk-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes mkBlink { 0%,60%,100% { opacity: 0.3; } 30% { opacity: 1; } }

/* Bars / gauges */
.mk-bars { display: flex; align-items: flex-end; gap: 7px; height: 86px; }
.mk-bars span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 30%, transparent)); }
.mk-gauge { height: 9px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.mk-gauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #5b6fff)); }
.mk-ring { position: relative; width: 96px; height: 96px; }
.mk-ring .mk-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Calendar wheel */
.mk-wheel { display: block; margin: 4px auto; }
.mk-wheel-month { font-family: var(--font-mono); fill: var(--text-dim); font-size: 6px; }

/* Skill / connection tiles */
.mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-tile { border-radius: 10px; padding: 10px 8px; text-align: center; font-size: 10.5px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-mid); }
.mk-tile.on { background: rgba(var(--accent-rgb),0.14); border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent); }

@media (max-width: 1024px) { .mk { max-width: 460px; margin: 0 auto; } }