/* Go Muscu — feuille de style du guide.
   Densité et contraste de la première version, transposés sur fond sombre.
   Blocs pleins, titres très gras, or franc, tableaux cadrés.
   Sombre comme Bruce Wayne, mais tranché — pas discret. */

:root {
  --bg:        #111114;
  --bg-deep:   #0A0A0C;
  --surface:   #1A1A1E;
  --surface-2: #232329;
  --line:      #303039;
  --line-soft: #24242B;
  --ink:       #F2F1EE;
  --ink-mute:  #9B9BA3;
  --gold:      #E5B02E;
  --on-gold:   #111114;
  --hot:       #E5B02E;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg:        #F4F3EF;
  --bg-deep:   #E9E7E1;
  --surface:   #FFFFFF;
  --surface-2: #EFEDE7;
  --line:      #D6D3CA;
  --line-soft: #E4E1D9;
  --ink:       #16161A;
  --ink-mute:  #5C5C66;
  --gold:      #8A6300;
  --on-gold:   #FFFFFF;
  --hot:       #8A6300;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

body {
  background: var(--bg); color: var(--ink);
  font-family: Karla, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.6; margin: 0; padding: 0 0 80px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 880px; }

h1, h2, h3 {
  font-family: Anton, "Arial Narrow", ui-sans-serif, sans-serif;
  font-weight: 400; margin: 0; text-transform: uppercase;
  text-wrap: balance; letter-spacing: -.012em;
}
h1 { font-size: clamp(2.7rem, 9vw, 5rem); line-height: .92; }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1; }
h3 { font-size: 1.14rem; line-height: 1.15; }
h1 em, h2 em { font-style: normal; color: var(--gold); }
p { margin: 0; max-width: 66ch; }
strong { font-weight: 700; color: var(--ink); }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .69rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------- Ouverture : bandeau plein écran, photo fondue dans le noir ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--bg-deep);
  border-bottom: 4px solid var(--gold); min-height: 640px;
  display: flex; align-items: flex-end;
}
.hero-img {
  position: absolute; right: 0; bottom: 0; top: 0;
  width: 58%; max-width: 780px; z-index: 0;
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
/* la photo de la page coaching est plus dense à gauche : on la décale */
.hero-img.prog img { object-position: 50% 50%; }
.hero-img.right img { object-position: 50% 50%; }
/* le fondu : la photo se dissout vers la gauche et vers le bas */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--bg-deep) 0%, var(--bg-deep) 34%, transparent 78%),
    linear-gradient(to top, var(--bg-deep) 0%, transparent 34%),
    linear-gradient(to bottom, var(--bg-deep) 0%, transparent 22%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 54px; }
.hero-txt { display: flex; flex-direction: column; gap: 17px; max-width: 30rem; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(2.7rem, 7.6vw, 4.6rem); }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lede { font-size: 1.06rem; color: var(--ink-mute); }
.hero .sig {
  font-family: "IBM Plex Mono", monospace; font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Relance en cours de page ---------- */
.push {
  background: var(--gold); color: var(--on-gold); padding: 30px 30px 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 44px;
}
.push .c { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 7px; }
.push h3 { color: var(--on-gold); font-size: 1.45rem; }
.push p { color: var(--on-gold); font-size: .97rem; max-width: 52ch; }
.push .btn { background: var(--on-gold); color: var(--gold); margin-top: 0; }

/* ---------- Sections ---------- */
.bloc { padding-top: 58px; }
.bloc-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 3px solid var(--ink); padding-bottom: 11px; margin-bottom: 22px;
}
.bloc-head .n {
  font-family: Anton, sans-serif; font-size: 1.35rem; line-height: 1;
  background: var(--gold); color: var(--on-gold); padding: 5px 11px 4px;
  font-variant-numeric: tabular-nums;
}
.prose { display: flex; flex-direction: column; gap: 15px; }
.prose h3 { margin-top: 10px; }

/* ---------- Tableaux cadrés ---------- */
.tbl { border: 1px solid var(--line); background: var(--surface); }
.tbl + .tbl { margin-top: 14px; }
.tbl-head {
  background: var(--ink); color: var(--bg); padding: 13px 20px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: space-between;
}
.tbl-head h3 { color: var(--bg); }
.tbl-head .meta { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .06em; opacity: .84; }
.scroller { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; min-width: 470px; }
thead th {
  font-family: "IBM Plex Mono", monospace; font-size: .65rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute);
  text-align: left; padding: 11px 14px; border-bottom: 2px solid var(--line); white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: .94rem; }
tbody tr:last-child td { border-bottom: none; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
td.ex { font-weight: 700; }
td.ex .alt { display: block; font-weight: 400; font-size: .84rem; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; }
td.n, th.n {
  text-align: right; font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
td.n b { color: var(--gold); font-weight: 600; }
td.desc { color: var(--ink-mute); }
td.desc strong { color: var(--ink); }

/* ---------- Semaine ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; }
.day { border: 1px solid var(--line); background: var(--surface); padding: 11px 5px 13px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.day .d { font-family: "IBM Plex Mono", monospace; font-size: .61rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.day .s { font-family: Anton, sans-serif; font-size: .98rem; line-height: 1; }
.day.on { background: var(--gold); border-color: var(--gold); }
.day.on .d { color: var(--on-gold); opacity: .7; }
.day.on .s { color: var(--on-gold); }
.day.off .s { color: var(--ink-mute); font-family: Karla, sans-serif; font-weight: 400; font-size: .8rem; }

/* ---------- Encadrés ---------- */
.key { background: var(--gold); color: var(--on-gold); padding: 22px 26px; display: flex; flex-direction: column; gap: 11px; }
.key h3, .key p, .key li, .key strong, .key em { color: var(--on-gold); }
.key ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

.note {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold);
  padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-mute);
}
.note strong { color: var(--ink); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* ---------- Voix off ---------- */
.voice {
  background: var(--surface-2); border: 1px dashed var(--line);
  padding: 20px 24px; display: flex; gap: 18px; align-items: flex-start;
}
.voice img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; }
.voice .c { display: flex; flex-direction: column; gap: 7px; }
.voice .who { font-family: "IBM Plex Mono", monospace; font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.voice p { font-style: italic; font-size: 1.02rem; }

/* ---------- Avant / après ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba .shot { aspect-ratio: 4 / 5; }
.ba figure { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); }
.ba .shot { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.ba img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.ba figcaption {
  background: var(--ink); color: var(--bg); padding: 11px 15px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.ba figcaption b { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1rem; }
.ba figcaption span { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 1rem; }

.delta {
  background: var(--gold); color: var(--on-gold); padding: 20px 24px; margin-top: 12px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.delta .big { font-family: Anton, sans-serif; font-size: 2.6rem; line-height: 1; }
.delta p { flex: 1; min-width: 240px; font-size: .97rem; color: var(--on-gold); }
.delta strong { color: var(--on-gold); }

/* ---------- Trois repères ---------- */
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.three .it { background: var(--surface); border: 1px solid var(--line); padding: 17px 19px; display: flex; flex-direction: column; gap: 5px; }
.three .k { font-family: "IBM Plex Mono", monospace; font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); }
.three .v { font-family: Anton, sans-serif; font-size: 1.65rem; line-height: 1; color: var(--gold); }
.three .s { font-size: .87rem; color: var(--ink-mute); line-height: 1.45; }

/* ---------- Erreurs ---------- */
ol.err { margin: 0; padding: 0; list-style: none; counter-reset: e; display: flex; flex-direction: column; gap: 10px; }
ol.err li {
  counter-increment: e; background: var(--surface); border: 1px solid var(--line);
  padding: 16px 20px 16px 58px; position: relative; color: var(--ink-mute);
}
ol.err li::before {
  content: counter(e); position: absolute; left: 18px; top: 14px;
  font-family: Anton, sans-serif; font-size: 1.5rem; color: var(--gold); line-height: 1;
}
ol.err strong { display: block; margin-bottom: 3px; }

ul.plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 66ch; }
ul.plain li::marker { color: var(--gold); }

/* ---------- Fin ---------- */
.end { margin-top: 62px; background: var(--bg-deep); border-top: 4px solid var(--gold); padding: 44px 0 40px; }
.end .wrap { display: flex; flex-direction: column; gap: 15px; }
.end h2 em { color: var(--gold); }
.offer { border: 2px solid var(--gold); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; max-width: 430px; margin: 8px 0; }
.offer .eyebrow { color: var(--gold); }
.offer .price { font-family: Anton, sans-serif; font-size: 2rem; line-height: 1; color: var(--gold); }
.offer p { color: var(--ink-mute); font-size: .93rem; }
.btn {
  align-self: flex-start; background: var(--gold); color: var(--on-gold);
  font-family: Anton, sans-serif; text-transform: uppercase; font-size: 1.12rem;
  letter-spacing: .01em; padding: 16px 34px; text-decoration: none; margin-top: 6px;
  border: 2px solid var(--gold);
}
.btn.ghost { background: transparent; color: var(--gold); }
.btn.ghost:hover { background: var(--gold); color: var(--on-gold); filter: none; }
.btn:hover { filter: brightness(1.08); }

footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .8rem; display: flex; flex-direction: column; gap: 7px; line-height: 1.55; }

a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 860px) {
  .hero { min-height: 560px; }
  .hero-img { width: 78%; }
  .hero::after {
    background:
      linear-gradient(to right, var(--bg-deep) 0%, var(--bg-deep) 18%, transparent 92%),
      linear-gradient(to top, var(--bg-deep) 0%, var(--bg-deep) 26%, transparent 62%),
      linear-gradient(to bottom, var(--bg-deep) 0%, transparent 26%);
  }
  .hero .wrap { padding-top: 60px; padding-bottom: 40px; }
  .hero-txt { max-width: none; }
}
@media (max-width: 520px) {
  .hero { min-height: 520px; }
  .hero-img { width: 100%; }
  .hero-img img { object-position: 55% 10%; }
}
@media (max-width: 640px) {
  .week { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .voice { flex-direction: column; gap: 13px; }
  .push { padding: 24px 22px 26px; }
}

/* ---------- Déclaration : phrase en énorme, coupe la page ---------- */
.shout {
  border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold);
  padding: 44px 0; margin: 52px 0; background: var(--bg-deep);
}
.shout > .wrap { padding-left: 20px; padding-right: 20px; }
.shout p {
  font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase;
  font-size: clamp(1.9rem, 6.2vw, 3.4rem); line-height: .98; letter-spacing: -.015em;
  max-width: 18ch; margin: 0;
}
.shout em { font-style: normal; color: var(--gold); }
.shout .sub { font-family: Karla, sans-serif; text-transform: none; font-size: 1rem; color: var(--ink-mute); max-width: 56ch; margin-top: 16px; line-height: 1.6; letter-spacing: 0; }

/* ---------- Pour qui / pas pour qui ---------- */
.forwho { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.forwho .col { border: 1px solid var(--line); background: var(--surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.forwho .col.no { background: transparent; }
.forwho h3 { font-size: 1.05rem; }
.forwho .col.yes h3 { color: var(--gold); }
.forwho .col.no h3 { color: var(--ink-mute); }
.forwho ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.forwho li { padding-left: 26px; position: relative; font-size: .95rem; }
.forwho .col.yes li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.forwho .col.no li { color: var(--ink-mute); }
.forwho .col.no li::before { content: "×"; position: absolute; left: 2px; color: var(--ink-mute); font-weight: 700; }

/* ---------- Ce qui est inclus ---------- */
.incl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.incl li { padding: 13px 0 13px 30px; position: relative; border-bottom: 1px solid var(--line); font-size: .96rem; }
.incl li:last-child { border-bottom: none; }
.incl li::before { content: "✓"; position: absolute; left: 0; top: 13px; color: var(--gold); font-weight: 700; }
.incl b { color: var(--ink); }

/* ---------- Exercices : cartes sur téléphone ---------- */
@media (max-width: 620px) {
  table { min-width: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 14px 18px; }
  .tbl tbody tr:last-child { border-bottom: none; }
  .tbl tbody td { display: block; border: none; padding: 0; }
  .tbl td.ex { font-size: 1.02rem; }
  .tbl td.n { text-align: left; display: inline-block; margin-top: 9px; margin-right: 20px; font-size: .88rem; color: var(--ink-mute); }
  .tbl td.n::before { content: attr(data-l) " "; color: var(--ink-mute); }
  .tbl td.n b { color: var(--gold); font-size: 1.02rem; }
  .tbl td.desc { margin-top: 8px; font-size: .93rem; }
  .forwho { grid-template-columns: 1fr; }
  .shout { padding: 32px 0; margin: 40px 0; }
}

/* ---------- Apparition au défilement ----------
   Par défaut tout est visible : si le script ne tourne pas, rien n'est caché.
   C'est le script qui pose .js-anim sur <html> pour activer l'effet. */
.js-anim .reveal { opacity: 0; transform: translateY(16px); }
.js-anim .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Barre d'action collée en bas, sur téléphone ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg-deep); border-top: 2px solid var(--gold);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 14px;
  transform: translateY(110%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.sticky.up { transform: none; }
.sticky .t { flex: 1; min-width: 0; font-size: .84rem; line-height: 1.3; color: var(--ink-mute); }
.sticky .t b { display: block; color: var(--ink); font-size: .95rem; }
.sticky .btn { margin: 0; padding: 12px 20px; font-size: .92rem; white-space: nowrap; }

@media (max-width: 760px) {
  .sticky { display: flex; }
  body { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .sticky { transition: none; }
}

/* ---------- Boutons : réaction au survol et au clic ---------- */
.btn { transition: transform .12s ease, filter .15s ease, background-color .15s ease, color .15s ease; }
.btn:active { transform: translateY(1px); }
.day, .it, ol.err li { transition: border-color .2s ease; }
.it:hover, ol.err li:hover { border-color: var(--gold); }

/* ---------- Aura : le bouton s'allume au survol et pulse au clic ---------- */
.btn { position: relative; isolation: isolate; overflow: visible; }
.btn::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: var(--gold); opacity: 0; filter: blur(11px);
  transition: opacity .28s ease, inset .28s ease;
}
.btn:hover::before, .btn:focus-visible::before { opacity: .55; inset: -7px; }
.btn:hover { filter: brightness(1.06); }
.btn.ghost:hover { background: var(--gold); color: var(--on-gold); filter: none; }

/* l'onde qui part au clic */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--gold); opacity: 0;
}
.btn:active::after { animation: onde .5s ease-out; }
@keyframes onde {
  0%   { box-shadow: 0 0 0 0 var(--gold); opacity: .7; }
  100% { box-shadow: 0 0 0 22px var(--gold); opacity: 0; }
}

/* le mot en or dans les titres s'allume aussi quand il est mis en avant */
h1 em, .shout em { text-shadow: 0 0 0 transparent; transition: text-shadow .5s ease; }
.hero:hover h1 em, .shout:hover em { text-shadow: 0 0 26px color-mix(in srgb, var(--gold) 55%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after { display: none; }
  h1 em, .shout em { text-shadow: none !important; transition: none; }
}