/* PacePlotter — langage visuel du dossard de course et du pace band.
   Mobile-first strict : base 360px, media queries min-width uniquement. */

@font-face {
  font-family: 'Anton';
  src: url('/static/fonts/anton-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/plexsans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/plexsans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bib-white: #FBFBF8;
  --paper: #FFFFFF;
  --ink: #15181D;
  --asphalt: #5D636E;
  --line: #D8D8D2;
  --blue: #2743C7;
  --blue-dark: #1D339C;
  --zone-easy: #3D74C6;
  --zone-long: #1B2A6B;
  --zone-tempo: #D99000;
  --zone-interval: #C93B2B;
  --zone-race: #2743C7;
  --err: #B3261E;
  --ok: #1D6F42;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bib-white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-family: var(--display); font-weight: 400; font-size: 2rem;
     letter-spacing: .01em; text-transform: uppercase; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink);
        color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-head {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  position: relative; z-index: 20;
}
.head-in { display: flex; align-items: center; justify-content: space-between;
           min-height: 56px; flex-wrap: wrap; }
.brand { font-family: var(--display); font-size: 1.3rem; text-decoration: none;
         letter-spacing: .02em; padding: 8px 0; }
.brand-q { color: var(--ink); }
.brand-v { color: var(--blue); }
.burger { display: inline-flex; flex-direction: column; gap: 5px;
          background: none; border: 2px solid var(--ink); border-radius: 4px;
          padding: 12px 10px; cursor: pointer; min-width: 44px; min-height: 44px;
          justify-content: center; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); }
.nav { display: none; width: 100%; flex-direction: column; padding: 8px 0 16px; }
.nav.open { display: flex; }
.nav a { display: block; padding: 12px 4px; text-decoration: none;
         color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.nav a:hover { color: var(--blue); }
.nav-cta { color: var(--blue) !important; }
@media (min-width: 950px) {
  .burger { display: none; }
  /* Nav sur UNE ligne, structurellement : nowrap partout — si un rendu
     exotique (police fallback large, zoom, autre moteur) manque de place,
     la nav défile horizontalement au lieu de wrapper. Le CTA ne peut donc
     jamais passer sous la bordure basse du header (bug remonté 2× le 31/08). */
  .head-in { flex-wrap: nowrap; padding: 4px 0; }
  .brand { flex-shrink: 0; }
  /* SURTOUT PAS d'overflow sur .nav : un scrollport rogne la bordure du CTA
     (bas sous Chromium, haut ailleurs — bug « la bordure ne fait pas le
     tour », reproduit pixel par pixel le 31/08). nowrap suffit : une seule
     ligne garantie, et en cas extrême (zoom énorme) la nav déborde
     visiblement au lieu de tronquer. */
  .nav { display: flex !important; flex-direction: row; flex-wrap: nowrap;
         width: auto; min-width: 0; overflow: visible;
         padding: 0 2px; gap: 0 2px; align-items: center;
         justify-content: flex-end; }
  .nav a { border-bottom: none; padding: 8px 7px; font-size: .9rem;
           white-space: nowrap; flex-shrink: 0; }
  /* a.nav-cta : spécificité > `.nav a` — sinon son border-bottom:none
     (annulation du séparateur mobile) ampute le bas de la bordure du bouton
     (bug « la bordure ne fait pas tout le tour », résolu le 31/08). */
  .nav a.nav-cta { border: 2px solid var(--blue); border-radius: 4px;
                   padding: 6px 10px; margin: 5px 0 5px 4px;
                   align-self: center; }
}
@media (min-width: 1100px) {
  .nav { gap: 0 6px; }
  .nav a { font-size: 1rem; padding: 9px 10px; }
}

/* ---------- hero ---------- */
.hero { padding: 28px 0 36px; }
.hero-grid { display: grid; gap: 28px; }
.hero h1 { font-size: 2.1rem; max-width: 22ch; }
.hero-intro { color: var(--asphalt); max-width: 60ch; margin: 0 0 20px; }
@media (min-width: 950px) {
  .hero h1 { font-size: 3rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

/* ---------- formulaire générateur (carte dossard) ---------- */
.gen-form {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 20px 16px;
  position: relative;
}
.gen-form::before, .gen-form::after {
  content: ''; position: absolute; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bib-white);
  border: 2px solid var(--line);
}
.gen-form::before { left: 12px; }
.gen-form::after { right: 12px; }
.gen-grid { display: grid; gap: 16px; }
.field label, .field-group legend {
  display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; font-size: 16px; font-family: var(--body);
  padding: 11px 12px; border: 2px solid var(--ink); border-radius: 4px;
  background: var(--paper); color: var(--ink); min-height: 46px;
}
.field-hint { font-size: .85rem; color: var(--asphalt); margin: 5px 0 0; }
.field-err { font-size: .9rem; color: var(--err); font-weight: 600; margin: 5px 0 0; }
.field-group { border: none; padding: 0; margin: 0; }
.ref-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form-error-global {
  background: #FBEAE9; border: 2px solid var(--err); border-radius: 4px;
  color: var(--err); padding: 12px; font-weight: 600; margin-bottom: 16px;
}
.form-success {
  background: #E8F3EC; border: 2px solid var(--ok); border-radius: 4px;
  color: var(--ok); padding: 12px; font-weight: 600; margin: 16px 0;
}
.seg { display: flex; gap: 8px; }
.seg-opt { flex: 1; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px;
                 font-size: 16px; }
.hp input { font-size: 16px; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border: 2px solid var(--ink); border-radius: 4px;
  font-family: var(--display); font-size: 1.25rem; cursor: pointer;
  background: var(--paper);
}
.seg-opt input:checked + span { background: var(--ink); color: var(--bib-white); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.btn-primary {
  display: block; width: 100%; margin-top: 18px;
  background: var(--blue); color: #fff; border: none; border-radius: 4px;
  font-family: var(--display); font-size: 1.3rem; letter-spacing: .03em;
  text-transform: uppercase; padding: 14px 24px; cursor: pointer;
  min-height: 52px; text-align: center; text-decoration: none;
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-inline { display: inline-block; width: auto; font-size: 1.05rem;
              min-height: 44px; padding: 10px 20px; margin-top: 8px; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 4px; font-weight: 600; font-size: .95rem;
  padding: 10px 14px; min-height: 44px; cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { background: var(--ink); color: var(--bib-white); }
@media (min-width: 640px) {
  .gen-grid { grid-template-columns: 1fr 1fr; }
  .gen-grid .field-group { grid-column: 1 / -1; }
  .btn-primary { width: auto; min-width: 280px; }
}

/* ---------- pace band (signature) ---------- */
.band {
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 6px;
  border-left: 2px dashed var(--asphalt);
  max-width: 320px;
}
.band-head { display: flex; justify-content: space-between; align-items: center;
             padding: 10px 14px; border-bottom: 2px solid var(--ink); }
.band-title { font-family: var(--display); font-size: .95rem;
              letter-spacing: .05em; text-transform: uppercase; }
.band-holes { color: var(--line); font-size: .6rem; letter-spacing: .4em; }
.band-table { width: 100%; border-collapse: collapse; }
.band-table th { text-align: left; font-size: .85rem; font-weight: 600;
                 padding: 9px 0 9px 14px; }
.band-table td { text-align: right; font-family: var(--mono);
                 font-variant-numeric: tabular-nums; font-size: 1.15rem;
                 padding: 9px 14px 9px 0; }
.band-table tr { border-bottom: 1px solid var(--line); }
.band-table tr th { position: relative; padding-left: 26px; }
.band-table tr th::before {
  content: ''; position: absolute; left: 12px; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; border-radius: 2px;
}
.zone-interval th::before { background: var(--zone-interval); }
.zone-tempo th::before { background: var(--zone-tempo); }
.zone-marathon th::before { background: var(--zone-long); }
.zone-easy th::before { background: var(--zone-easy); }
.zone-race th::before { background: var(--zone-race); }
.band-race { background: #F0F2FC; }
.band-unit { font-size: .75rem; color: var(--asphalt); margin-left: 2px; }
.band-foot { display: flex; justify-content: space-between; align-items: center;
             padding: 10px 14px; font-size: .9rem; }
.band-foot strong { font-family: var(--mono); font-size: 1.2rem; }
.band-hint { font-size: .85rem; color: var(--asphalt); padding: 0 14px 12px;
             margin: 0; }
.band-note { font-size: .85rem; color: var(--asphalt); max-width: 320px; }

/* ---------- sections home ---------- */
.how { background: var(--paper); border-top: 3px solid var(--ink);
       border-bottom: 3px solid var(--ink); padding: 32px 0; }
.how-list { margin: 0; padding-left: 0; list-style: none;
            counter-reset: how; display: grid; gap: 16px; }
.how-list li { counter-increment: how; position: relative; padding-left: 56px;
               min-height: 44px; }
.how-list li::before {
  content: counter(how, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--display); font-size: 1.7rem; color: var(--blue);
}
@media (min-width: 950px) { .how-list { grid-template-columns: 1fr 1fr 1fr; } }

.goals { padding: 32px 0 44px; }
.goals-row { margin-bottom: 20px; }
.goals-row h3 a { color: var(--ink); text-decoration: none; }
.goals-row h3 a:hover { color: var(--blue); }
.goals-chips { list-style: none; margin: 8px 0 0; padding: 0;
               display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; padding: 8px 14px;
  border: 2px solid var(--ink); border-radius: 4px;
  font-family: var(--mono); font-weight: 500; text-decoration: none;
  color: var(--ink); background: var(--paper);
}
.chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- page plan ---------- */
.plan-head { padding: 28px 16px 8px; }
.plan-sub { color: var(--asphalt); margin: 0 0 8px; }
.plan-predicted { margin: 0 0 16px; }
.plan-predicted strong { font-size: 1.25rem; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.plan-permanent { font-size: .85rem; color: var(--asphalt); }
.plan-grid { display: grid; gap: 24px; padding-top: 8px; }
@media (min-width: 950px) {
  .plan-grid { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  .plan-band-col { position: sticky; top: 16px; }
}

.week { background: var(--paper); border: 2px solid var(--ink);
        border-radius: 6px; margin-bottom: 14px; overflow: hidden; }
.week-cutback { border-style: dashed; }
.week-head { display: flex; align-items: baseline; gap: 12px;
             padding: 8px 14px; border-bottom: 2px solid var(--ink);
             background: var(--bib-white); }
.week-num { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }
.week-taper .week-num { color: var(--blue); }
.week-phase { font-size: .8rem; font-weight: 600; text-transform: uppercase;
              letter-spacing: .06em; color: var(--asphalt); }
.week-km { margin-left: auto; font-family: var(--mono); font-size: .95rem; }
.sessions { list-style: none; margin: 0; padding: 4px 0; }
.sess { display: grid; grid-template-columns: 82px 12px minmax(0, 1fr);
        gap: 8px; align-items: baseline; padding: 8px 14px;
        border-bottom: 1px solid var(--line); }
.sess:last-child { border-bottom: none; }
.sess-day { font-size: .85rem; font-weight: 600; }
.sess-date { display: block; font-family: var(--mono); font-weight: 400;
             font-size: .75rem; color: var(--asphalt); }
.sess-chip { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.zone-easy .sess-chip { background: var(--zone-easy); }
.zone-long .sess-chip { background: var(--zone-long); }
.zone-tempo .sess-chip { background: var(--zone-tempo); }
.zone-interval .sess-chip { background: var(--zone-interval); }
.zone-race .sess-chip { background: var(--zone-race); }
.sess-txt { font-size: .95rem; }
.zone-race .sess-txt { font-weight: 600; }
.disclaimer { font-size: .85rem; color: var(--asphalt); border-top: 1px solid var(--line);
              margin-top: 24px; padding: 16px 0 24px; max-width: 75ch; }

/* ---------- pages objectif / hub ---------- */
.eyebrow { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
           margin: 0 0 4px; }
.goal-head, .hub-head { padding-top: 28px; }
.goal-intro { max-width: 65ch; color: var(--asphalt); }
.goal-requires { padding: 8px 16px 4px; }
.equiv-list { list-style: none; padding: 0; margin: 12px 0;
              display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.equiv-list li { background: var(--paper); border: 2px solid var(--ink);
                 border-radius: 4px; padding: 10px 12px;
                 display: flex; justify-content: space-between; gap: 8px; }
.goal-note { max-width: 70ch; }
.goal-others { padding-bottom: 40px; }
.hub-weeks { color: var(--asphalt); }
.hub-cta { background: var(--paper); border: 2px solid var(--ink);
           border-radius: 6px; padding: 20px 16px; margin: 24px 0; }
.hub-cta .gen-form { border: none; padding: 0; }
.hub-cta .gen-form::before, .hub-cta .gen-form::after { display: none; }
.goals-chips-lg .chip { font-size: 1.05rem; }

/* ---------- outils ---------- */
.tool-page { padding: 28px 16px 44px; }
.tool-intro { color: var(--asphalt); max-width: 65ch; }
.tool-form { background: var(--paper); border: 2px solid var(--ink);
             border-radius: 6px; padding: 16px; display: grid; gap: 14px;
             max-width: 560px; }
@media (min-width: 640px) { .tool-form { grid-template-columns: 1fr 1fr; } }
.tool-result { margin-top: 20px; max-width: 560px; }
.result-row { display: flex; justify-content: space-between; align-items: baseline;
              padding: 10px 0; border-bottom: 1px solid var(--line); }
.result-row strong { font-size: 1.3rem; }
.table-scroll { overflow-x: auto; margin-top: 16px; }
.pace-table, .splits-table { border-collapse: collapse; width: 100%;
                             background: var(--paper); }
.pace-table th, .pace-table td, .splits-table th, .splits-table td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pace-table thead th { background: var(--ink); color: var(--bib-white);
                       font-family: var(--body); }
.pace-table tbody th { background: var(--bib-white); }

/* ---------- prose (guides, méthode, légal) ---------- */
.prose { max-width: 75ch; padding-top: 8px; padding-bottom: 44px; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.2em; }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px;
                       text-align: left; }
.method-page { padding-top: 28px; }
.hub-guide { padding-bottom: 44px; }

/* ---------- contact / 404 / footer ---------- */
.contact-page { padding: 28px 16px 44px; max-width: 640px; }
.contact-form { display: grid; gap: 14px; margin-top: 16px; }
.notfound { padding: 48px 16px 64px; text-align: center; }
.nf-code { font-family: var(--display); font-size: 5rem; color: var(--line);
           margin: 0; }
.site-foot { background: var(--ink); color: var(--bib-white); padding: 24px 0 32px; }
.foot-langs, .foot-links { display: flex; flex-wrap: wrap; gap: 4px 8px;
                           margin-bottom: 10px; }
.foot-langs a, .foot-links a { color: var(--bib-white); text-decoration: none;
                               padding: 10px 12px; display: inline-flex;
                               min-height: 44px; align-items: center; }
.foot-langs a[aria-current="true"] { text-decoration: underline;
                                     text-underline-offset: 4px; }
.foot-links a:hover, .foot-langs a:hover { color: #AEB9EE; }
.foot-note { color: #9AA0AC; font-size: .85rem; margin: 8px 0 0;
             padding: 0 12px; }

/* ---------- divers ---------- */
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: table-cell; } }
@media (prefers-reduced-motion: no-preference) {
  .chip, .btn-primary, .btn-secondary, .nav a { transition: background .15s, color .15s; }
}

/* ---------- impression ---------- */
@media print {
  .site-head, .site-foot, .noprint, .plan-actions, .band-hint, .skip { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .plan-grid { display: block; }
  .band { max-width: 100%; margin-bottom: 12px; page-break-inside: avoid; }
  .week { page-break-inside: avoid; border-width: 1px; margin-bottom: 8px; }
  .week-head { border-width: 1px; }
  a { color: inherit; text-decoration: none; }
}