/* Feuille commune aux pages de ChronoCoach.
 *
 * Les couleurs sont celles de l'app (CCBrandColors) : fond, surfaces, bordures
 * et textes, dans leurs deux variantes claire et sombre, et l'indigo de la
 * marque pour l'accent. En sombre, l'accent passe à l'« indigo argent » de la
 * même palette : l'indigo plein est trop foncé pour un lien sur fond noir.
 */

:root {
  --bg: #fafafc; --fg: #0f0f18; --muted: #5a5a6a;
  --rule: #e5e5ec; --accent: #5700f9; --card: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f18; --fg: #fafafc; --muted: #9a9ab0;
    --rule: #2a2a38; --accent: #b5a8e8; --card: #1a1a28;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 44rem; margin: 0 auto; }

/* --- Barre de langue ------------------------------------------------------
 * Les deux langues sont dans la même page, et lang.js en choisit une. Sans
 * JavaScript, c'est l'anglais, complet. Aucune règle ne masque tout : une
 * langue inconnue de la feuille n'en masque aucune.
 */
.langbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 0 .5rem;
}
/* Un sélecteur sans script ne sélectionnerait rien. */
html:not([data-active-lang]) .langbar { display: none; }

.langpick { position: relative; display: inline-flex; align-items: center; color: var(--muted); }
.langpick svg {
  position: absolute;
  inset-inline-start: .6rem;
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  pointer-events: none;
}
/* Le chevron : deux bords d'un carré tourné. */
.langpick::after {
  content: "";
  position: absolute;
  inset-inline-end: .75rem;
  top: 50%;
  width: .38rem; height: .38rem;
  margin-top: -.3rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.langpick select {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .85rem;
  line-height: 1.2;
  padding-block: .45rem;
  padding-inline: 2rem 1.85rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.langpick select:hover { border-color: var(--muted); }
.langpick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* La liste déroulante est dessinée par le système ; sur fond sombre, Chrome
 * y reprendrait la couleur claire du texte sur son fond blanc. */
.langpick option { color: #0f0f18; background-color: #fff; }

html:not([data-active-lang]) [data-lang]:not([data-lang="en"]),
html[data-active-lang="en"] [data-lang]:not([data-lang="en"]),
html[data-active-lang="fr"] [data-lang]:not([data-lang="fr"]) { display: none; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 1rem 0 .3rem; letter-spacing: -.02em; }
h2 {
  font-size: 1.25rem; margin: 3rem 0 .75rem; letter-spacing: -.01em;
  padding-top: 1.75rem; border-top: 1px solid var(--rule);
}
h2:first-of-type { border-top: none; padding-top: 0; margin-top: 2.5rem; }
h3 { font-size: 1.02rem; margin: 2rem 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent); }

footer {
  margin-top: 4rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .85rem;
}