/*
  Feuille dediee aux pages d'exercice statiques (dist/exercises/<locale>/*.html).
  Volontairement independante du bundle CSS de l'app (hash different a chaque
  build, et 90% de ses classes ne servent a rien sur une page article simple) :
  seuls les tokens de couleur et la typographie sont repris pour garder la
  meme identite visuelle. Ecrite une fois par scripts/build-exercise-pages.ts,
  referencee par chaque page via un chemin relatif.
*/

/*
  Les @font-face sont redeclares ici, en miroir de src/styles/tokens.css : cette
  feuille est hors du bundle, donc elle ne peut rien lui emprunter. Les fichiers
  sont les memes (public/fonts/), le navigateur ne les telecharge donc qu'une
  fois quelle que soit la page d'entree. Les deux listes doivent rester
  identiques — changer une police d'un cote sans l'autre laisserait les fiches
  sur le sans-serif du systeme.
*/
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0e1210;
  --surface: #161d19;
  --surface-2: #1d2620;
  --line: #2b352e;
  --line-soft: #232c26;
  --paper: #f2f0e8;
  --paper-dim: #a9b0a7;
  --lime: #d7ff3f;
  --disp: 'Archivo', sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

a {
  color: var(--lime);
}

/*
  Fil d'Ariane. `.back` est le conteneur (un <nav>), pas le lien : le
  soulignement et la couleur de lien vont sur le <a> seul, sinon le separateur
  et le nom de la page courante seraient soulignes comme s'ils cliquaient.
  La cible tactile de 44px est portee par le <a>, la ou on appuie.
*/
.back {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper-dim);
}

.back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper-dim);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.back a:hover {
  color: var(--lime);
  text-decoration-color: var(--lime);
}

/* La page courante n'est pas un lien : elle reste discrete et non cliquable. */
.back [aria-current='page'] {
  color: var(--paper);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 11px 4px 8px;
  margin: 14px 0 0;
}

.chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

h1 {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  line-height: 1.06;
}

h2 {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 14px;
  color: var(--paper-dim);
  letter-spacing: 0.03em;
  margin: 34px 0 12px;
}

.fig {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 0;
  margin: 20px 0 0;
}

.fig svg {
  display: block;
  width: 100%;
  height: 150px;
}

.fig svg .s,
.fig svg .obj,
.fig svg .gr {
  stroke: var(--paper);
}

.fig svg .hd {
  fill: var(--paper);
}

.fig svg .obj {
  fill: none;
}

.fig svg .ar {
  stroke: var(--lime);
  fill: none;
}

.fig svg .arh {
  fill: var(--lime);
  stroke: none;
}

.muscles {
  font-size: 14px;
  color: var(--paper-dim);
  margin: 16px 0 0;
}

.muscles b {
  color: var(--paper);
  font-weight: 600;
}

ol,
ul {
  margin: 0;
  padding-left: 22px;
}

ol li,
ul li {
  margin-bottom: 10px;
  line-height: 1.5;
}

ul.mistakes li {
  color: var(--paper-dim);
}

p {
  max-width: 62ch;
}

ul.progression li b {
  color: var(--paper);
  font-weight: 600;
}

.precautions {
  border-left: 2px solid var(--line);
  padding-left: 14px;
  color: var(--paper-dim);
}

.disclaimer {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--paper-dim);
  margin: 0 0 14px;
  max-width: 62ch;
}

/* carrousel d'exercices similaires : defilement natif, sans JS */
.carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.carousel::-webkit-scrollbar {
  height: 6px;
}

.carousel::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.carousel-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  display: block;
}

.carousel-card:hover {
  border-color: var(--lime);
}

.carousel-card .cfig {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.carousel-card .cfig svg {
  display: block;
  width: 100%;
  height: 70px;
}

.carousel-card .cfig svg .s,
.carousel-card .cfig svg .obj,
.carousel-card .cfig svg .gr {
  stroke: var(--paper-dim);
}

.carousel-card .cfig svg .hd {
  fill: var(--paper-dim);
}

.carousel-card .cfig svg .obj {
  fill: none;
}

.carousel-card .cfig svg .ar {
  stroke: var(--lime);
  fill: none;
}

.carousel-card .cfig svg .arh {
  fill: var(--lime);
  stroke: none;
}

.carousel-card .cb {
  padding: 10px 12px 12px;
}

.carousel-card .cn {
  font-weight: 700;
  font-size: 13.5px;
  display: block;
}

.carousel-card .cd {
  font-size: 11.5px;
  color: var(--paper-dim);
  margin-top: 4px;
}

/*
  Blocs techniques : ne servent qu'a la page « Creer une seance par lien »
  (dist/creer-une-seance-par-lien.html), pas aux fiches d'exercice. Ils vivent
  ici parce que c'est la feuille unique des pages generees -- en creer une
  seconde ferait diverger les deux identites visuelles.

  Les deux debordent dans leur propre boite (overflow-x) : sur un telephone,
  une chaine base64 ou un tableau a cinq colonnes ne doit jamais faire defiler
  la page entiere lateralement.
*/
pre {
  margin: 14px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--paper-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

p code,
li code,
td code {
  padding: 1px 5px;
  background: var(--surface-2);
  border-radius: 4px;
  color: var(--lime);
  font-size: 0.88em;
}

.tablewrap {
  margin: 14px 0 0;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--paper-dim);
  border-bottom-color: var(--line);
}

footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--paper-dim);
}

footer a {
  color: var(--paper-dim);
  text-decoration: underline;
  text-decoration-color: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/*
  Encarts publicitaires, dans les marges que la colonne unique laisse vides.

  `position: absolute` et non une grille sur <body> : une grille deplacerait
  `.wrap` d'un demi-encart, soit un decalage horizontal a chaque chargement —
  du CLS offert, dans un depot qui l'a ramene de 0,43 a 0,013. Ici la colonne
  ne bouge pas d'un pixel, que les encarts existent ou non.

  `absolute` et non `sticky` : ils defilent avec la page et ne reviennent pas
  se coller au viewport.

  344px = la moitie de `.wrap` (320) plus la gouttiere (24). La largeur
  suit la place reellement disponible — 300px des qu'il y en a, moins sinon —
  ce qui fait tenir l'emplacement aussi bien sur un portable 1366 que sur un
  1920, sans deuxieme point de rupture. En pourcentage et non en `vw` : `50vw`
  compte la barre de defilement, pas `50%`, et melanger les deux ferait
  deborder l'encart d'une quinzaine de pixels.

  Le portillon qui cree ces elements est en JavaScript (src/content/ad-rails.ts) :
  sous 1200px ils n'existent pas, cette regle n'a donc rien a masquer — c'est
  la difference entre « pas de publicite » et « publicite cachee ».
*/
@media (min-width: 1200px) {
  body {
    position: relative;
  }

  .ad-rail {
    position: absolute;
    top: 28px;
    width: min(300px, calc(50% - 344px));
  }

  .ad-rail-l {
    right: calc(50% + 344px);
  }

  .ad-rail-r {
    left: calc(50% + 344px);
  }

  .ad-rail-tag {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-dim);
  }
}

/*
  Date de mise a jour de la page de confidentialite, et mention publicitaire du
  pied de page. Deux lignes de service : lisibles, jamais mises en avant.
*/
.page-meta {
  margin-top: -8px;
  font-size: 12.5px;
  color: var(--paper-dim);
}

.ads-note {
  margin: 10px 0 14px;
}