/* Leg Up · feuille de style des maquettes HTML
   Direction « sport pop » : Anton (titres) + Archivo (texte), vert fluo et noir. */

:root {
  --lime: #C8F000;
  --ink: #111111;
  --paper: #FFFFFF;
  --mist: #F2F2EE;
  --orange: #FF6A2B;

  --font-display: 'Anton', 'Impact', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;

  --border: 2px solid var(--ink);
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--ink); }
a:hover { color: #444444; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- Typographie ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
.display-xl { font-size: clamp(52px, 8vw, 104px); line-height: 0.95; }
/* Le slogan français est plus long que l'anglais : un cran plus petit. */
:lang(fr) .hero-title { font-size: clamp(40px, 6vw, 76px); }
.display-l  { font-size: clamp(40px, 5vw, 56px); }
.display-m  { font-size: 32px; }
.display-s  { font-size: 26px; }
.eyebrow {
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.muted { font-size: 14px; }
.figure { font-family: var(--font-display); font-size: 44px; line-height: 1.1; }

.highlight { display: inline-block; background: var(--lime); color: var(--ink); padding: 0 10px; }
.on-dark .highlight-text, .highlight-text { color: var(--lime); }

/* ---------- En-tête ---------- */

.site-header { border-bottom: var(--border); }
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
}
.logo-badge { display: block; width: auto; height: 64px; }
.logo-tld { align-self: flex-end; margin-left: -6px; font-family: var(--font-body); font-size: 16px; font-weight: 800; text-transform: none; }
.nav { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 700; font-size: 15px; }
.nav a {
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
}
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
/* Espace Leg Up : le menu de l'équipe a sa propre ligne, sous le logo et les réglages. */
.site-header .nav-staff { order: 3; flex-basis: 100%; }
/* Le menu et les réglages gardent leur place dans la ligne de l'en-tête ; sur petit écran,
   ils se replient derrière le bouton « Menu » (site.js pose has-menu). */
.header-menu { display: contents; }
.menu-toggle {
  min-height: 44px;
  padding: 0 18px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
@media (min-width: 900px) { .menu-toggle { display: none; } }
@media (max-width: 899px) {
  .site-header.has-menu .header-menu { display: none; }
  .site-header.has-menu.is-open .header-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-basis: 100%;
  }
  .site-header.has-menu .nav { flex-direction: column; align-items: flex-start; }
}
.nav .count {
  background: var(--lime);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0 7px;
  margin-left: 4px;
}

/* ---------- Boutons et pastilles ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--ink); filter: brightness(0.96); }
.btn-primary { background: var(--lime); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { color: var(--paper); }
.btn-l { min-height: 60px; font-size: 18px; padding: 0 28px; }
.btn-s { min-height: 40px; padding: 0 14px; font-size: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--lime); }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }

.badge {
  display: inline-block;
  padding: 5px 12px;
  border: var(--border);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.badge-lime { background: var(--lime); }
.badge-mist { background: var(--mist); }
.badge-dark { background: var(--ink); color: var(--paper); }
.badge-orange { background: var(--orange); }

/* ---------- Cartes et mises en page ---------- */

.card {
  border: var(--border);
  border-radius: var(--radius-l);
  padding: 24px;
  background: var(--paper);
}
.card-lime { background: var(--lime); }
.card-mist { background: var(--mist); }
.card-dark { background: var(--ink); color: var(--paper); }
.card-dashed { border-style: dashed; }

.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap, 16px); align-items: center; }
.row-between { justify-content: space-between; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
  gap: var(--gap, 16px);
}
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split > .side { flex: 1 1 300px; min-width: 0; }
.split > .main { flex: 999 1 600px; min-width: 0; }

.section { padding-block: 48px; }
.band-dark { background: var(--ink); color: var(--paper); }
.band-dark a { color: var(--paper); }
.band-mist { background: var(--mist); border-block: var(--border); }
.band-lime { background: var(--lime); border-bottom: var(--border); }

.avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: var(--border);
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.list-item {
  border: var(--border);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.list-item .grow { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }

.progress {
  height: 22px;
  border: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--mist);
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--lime);
  border-right: var(--border);
}

.placeholder-photo {
  aspect-ratio: 1;
  border: var(--border);
  border-radius: var(--radius-m);
  background: var(--mist);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
}

/* ---------- Formulaires ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 700; font-size: 14px; }
.input, .select, .textarea {
  min-height: 46px;
  padding: 0 12px;
  border: var(--border);
  border-radius: var(--radius-s);
  background: var(--paper);
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  min-width: 0;
}
.textarea { padding: 10px 12px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 800; font-size: 16px; padding: 0; margin-bottom: 10px; }

.option-card {
  text-align: left;
  border: var(--border);
  border-radius: var(--radius-m);
  padding: 16px;
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.option-card[aria-pressed="true"] { background: var(--lime); }

/* ---------- Divers ---------- */

.table-wrap { position: relative; overflow-x: auto; border: var(--border); border-radius: var(--radius-m); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; background: var(--mist); padding: 12px 16px; }
td { padding: 12px 16px; border-top: var(--border); }

.marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  padding-block: 18px;
}

.site-footer { border-top: var(--border); }
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-block: 24px;
  font-size: 14px;
}
.footer-badge { display: block; margin-left: auto; width: 172px; height: auto; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- Composants ajoutés avec les pages ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.link-strong { font-weight: 800; }
.lead { font-size: 20px; max-width: 560px; }

.pill {
  align-self: flex-start;
  padding: 6px 12px;
  border: var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Silhouette de l'accueil avec les étiquettes de prix */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border: var(--border);
  border-radius: 28px;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-visual svg { width: 70%; height: auto; }
.hero-tag {
  position: absolute;
  padding: 8px 12px;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-s);
  font-size: 14px;
  font-weight: 800;
}
.hero-tag-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Chiffre clé et son libellé */
.stat { display: flex; flex-direction: column; }
.stat .figure { font-size: 40px; }
.stat-outline { border: 2px solid var(--paper); border-radius: var(--radius-m); padding: 14px 18px; }

/* Contrôle segmenté (Avant / Après la course) */
.segmented {
  display: flex;
  border: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.segmented button {
  min-height: 44px;
  padding: 0 16px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.segmented button + button { border-left: var(--border); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Onglets des pages « Mes infos » du coureur */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 16px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}
.tabs a:hover { background: var(--mist); }
.tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* Canal de discussion */
.channel { border: var(--border); border-radius: var(--radius-l); overflow: hidden; }
.channel-head { padding: 16px 20px; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; }
.channel-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--mist); }
.channel-form { padding: 14px 18px; border-top: var(--border); display: flex; gap: 10px; }
.channel-form .input { flex: 1; min-width: 0; border-radius: var(--radius-pill); padding: 0 14px; }
.bubble {
  border: var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bubble-lime { background: var(--lime); }
.bubble .who { font-size: 12px; font-weight: 800; }
.bubble-right { align-self: flex-end; max-width: 85%; }
.bubble-left { align-self: flex-start; max-width: 85%; }

/* Étapes numérotées */
.step { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.step-num {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

/* Carte d'option avec case à cocher (services payants) */
.option-check {
  border: var(--border);
  border-radius: var(--radius-m);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.option-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.option-check:has(input:checked) { background: var(--lime); }
.option-check .grow { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.option-check .price { white-space: nowrap; font-weight: 800; }

.input-display { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; min-height: 52px; }

/* ---------- Langue, animations et touches fun ---------- */

/* Sélecteur de langue FR / EN, présent dans l'en-tête de chaque écran */
.lang-switch {
  display: flex;
  border: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex: none;
}
.lang-switch button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 10px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.lang-switch button + button { border-left: var(--border); }
.lang-switch button[aria-pressed="true"] { background: var(--lime); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  padding: 12px 18px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--lime);
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } }

/* Autocollant penché */
.sticker {
  display: inline-block;
  padding: 6px 14px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
}
.sticker-r { transform: rotate(5deg); }
.sticker-orange { background: var(--orange); }
.sticker-paper { background: var(--paper); }
.band-dark .sticker, .card-dark .sticker { box-shadow: 3px 3px 0 var(--lime); }

/* Carte cliquable qui se soulève au survol */
.lift { transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; }
.lift:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }

/* Bandeau défilant */
.marquee-scroll { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  gap: 32px;
  padding-block: 18px;
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee-track > span { display: flex; gap: 32px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Tampon « payé », « validé »… */
.stamp {
  display: inline-block;
  padding: 6px 18px;
  border: 4px solid currentColor;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-8deg);
  animation: stamp-in 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes stamp-in { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }

/* Gerbe de cuisses de poulet au clic (data-burst) */
.burst-bit {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  font-size: 22px;
  animation: burst 0.9s ease-out forwards;
}
@keyframes burst {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Apparition d'une ligne dans un flux en direct */
.slide-in { animation: slide-in 0.4s ease-out; }
@keyframes slide-in { from { transform: translateY(-12px); opacity: 0; } }

/* Barre de progression animée au chargement */
.progress > span { transition: width 0.8s ease-out; }

/* Interrupteur oui / non porté par aria-pressed */
.when-on { display: none; }
[aria-pressed="true"] .when-on { display: inline; }
[aria-pressed="true"] .when-off { display: none; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.switch::before {
  content: "";
  width: 44px;
  height: 28px;
  flex: none;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 12px 50%, var(--ink) 8px, transparent 9px) var(--mist);
  transition: background-position 0.2s;
}
.switch[aria-pressed="true"]::before {
  background: radial-gradient(circle at 30px 50%, var(--ink) 8px, transparent 9px) var(--lime);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.is-on .when-on { display: inline; }
.is-on .when-off { display: none; }

/* Galerie : carte sélectionnée, photo masquée */
.is-selected { box-shadow: 0 0 0 4px var(--lime), 0 0 0 6px var(--ink); }
.is-hidden .photo { opacity: 0.45; }

.photo {
  position: relative;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 700;
}
.photo-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 11px;
  font-weight: 800;
}

/* Histogramme des entraînements : une seule série, le dernier mois mis en avant
   en noir, les autres en gris ; barres de 24 px max, bout arrondi, 2 px d'écart. */
.chart-plot {
  position: relative;
  height: 170px;
  margin-left: 28px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-bottom: 1px solid #C9C9C2;
}
.chart-tick {
  position: absolute;
  left: -28px;
  right: 0;
  height: 0;
  font-size: 11px;
}
.chart-tick::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 0;
  border-top: 1px solid #E6E6E0;
}
.chart-tick span {
  position: absolute;
  left: 0;
  width: 22px;
  text-align: right;
  line-height: 1;
  transform: translateY(-50%);
}
.chart-col {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.chart-bar {
  width: 100%;
  max-width: 24px;
  background: #8A8A84;
  border-radius: 4px 4px 0 0;
}
.chart-col.is-current .chart-bar { background: var(--ink); }
.chart-cap { font-weight: 800; font-size: 13px; line-height: 1; }
.chart-col:hover .chart-bar { filter: brightness(1.25); }
.chart-col:hover::after, .chart-col:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -100%);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.chart-col:nth-of-type(-n+3)::after { left: 0; transform: translateY(-100%); }
.chart-col:nth-last-of-type(-n+3)::after { left: auto; right: 0; transform: translateY(-100%); }
.chart-x { display: flex; gap: 2px; margin-left: 28px; }
.chart-x span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; }
details summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }

.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn[data-cover][aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.photo-check {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  padding: 4px;
  border: var(--border);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
}
.photo-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.photo-corner { position: absolute; right: 8px; top: 8px; }
label:has(> input.visually-hidden:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn-connect { background: var(--ink); color: var(--paper); }
.btn-connect:hover { color: var(--paper); }
.btn-connect[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
fieldset:disabled { opacity: 0.5; }

/* Minimum de déclenchement : jauge de réglage (zone annulée hachurée, zone validée en vert) */
.threshold-bar {
  display: flex;
  height: 48px;
  border: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--lime);
  font-size: 13px;
  font-weight: 800;
}
.threshold-bar .zone-off {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 0;
  padding-left: 16px;
  overflow: hidden;
  white-space: nowrap;
  background: repeating-linear-gradient(135deg, var(--mist) 0 8px, #E0E0D8 8px 16px);
  border-right: 3px solid var(--ink);
  transition: width 0.35s ease-out;
}
.threshold-bar .zone-on {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 16px;
  overflow: hidden;
  white-space: nowrap;
}
.is-on .threshold-bar .zone-off { border-right: 0; }

/* Barre de progression avec repère du minimum */
.progress-wrap { position: relative; padding-top: 28px; }
.progress-mark {
  position: absolute;
  top: 0;
  bottom: -6px;
  width: 0;
  border-left: 3px solid var(--ink);
}
.progress-mark > span {
  position: absolute;
  top: 0;
  right: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

/* Bloc d'état du minimum : passe au vert quand il est atteint */
.threshold-status { transition: background-color 0.4s ease-out; }
.threshold-status.is-on { background: var(--lime); }
.threshold-status.is-on .stamp-mini { animation: stamp-in 0.35s ease-out; }
.stamp-mini {
  display: inline-block;
  padding: 2px 10px;
  border: 3px solid currentColor;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* Compte à rebours (J-12) */
.countdown {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  text-transform: uppercase;
}

/* Recherche : éléments écartés */
.is-filtered-out { display: none !important; }

/* FAQ : questions dépliables */
.faq-item {
  border: var(--border);
  border-radius: var(--radius-m);
  background: var(--paper);
}
.faq-item + .faq-item { margin-top: 10px; }
.faq-item > summary {
  list-style: none;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  font-size: 17px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--border);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s ease-out, background-color 0.2s;
}
.faq-item[open] > summary::after { transform: rotate(45deg); background: var(--lime); }
.faq-item > div { padding: 0 18px 18px; }
.faq-item[open] { box-shadow: 4px 4px 0 var(--ink); }

/* Pages de contenu : sommaire et texte long */
.toc { position: sticky; top: 16px; }
.toc a { display: block; padding: 10px 14px; border-radius: var(--radius-s); font-weight: 700; text-decoration: none; color: var(--ink); }
.toc a:hover { background: var(--mist); }
.toc a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.prose { max-width: 760px; font-size: 17px; line-height: 1.6; }
.prose h2 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; line-height: 1.1; margin: 40px 0 12px; scroll-margin-top: 16px; }
.prose h3 { font-size: 19px; margin: 24px 0 8px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose li + li { margin-top: 6px; }
.tldr { border: var(--border); border-radius: var(--radius-m); background: var(--lime); padding: 14px 18px; margin: 0 0 16px; font-size: 16px; }
.tldr strong:first-child { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; margin-right: 6px; }

/* Fenêtre de confirmation */
dialog.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-l);
  box-shadow: 8px 8px 0 var(--ink);
  color: var(--ink);
}
dialog.modal::backdrop { background: rgba(17, 17, 17, 0.55); }
dialog.modal[open] { animation: slide-in 0.25s ease-out; }
.modal-head { padding: 18px 22px; background: var(--ink); color: var(--paper); }
.modal-body { padding: 20px 22px; }

/* Conversations (Leg Up) */
.convo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: var(--border); border-radius: var(--radius-m); text-decoration: none; color: inherit; background: var(--paper); text-align: left; font: inherit; width: 100%; cursor: pointer; }
.convo .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.convo .grow > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo[aria-pressed="true"] { background: var(--lime); }
.convo.is-unread .grow strong::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); vertical-align: middle; }
.header-tag { background: var(--ink); color: var(--lime); }
a.chip { color: var(--ink); text-decoration: none; }
a.chip:hover { background: var(--ink); color: var(--paper); }
.upload-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-thumbs:empty { display: none; }
.upload-thumb { width: 72px; height: 72px; object-fit: cover; border: var(--border); border-radius: var(--radius-s); }
.convo[aria-current="true"] { background: var(--lime); }
.header-tag { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }