/* ─────────────────────────────────────────────────────────────
   Life Ecosystem — UI baseline
   Règles tirées de la cheat-sheet interfaces.dev /cheat-sheet,
   appliquées à toutes les apps web Life (charger APRÈS tokens.css).
   Ne dépend d'aucune variable custom : utilise des replis sûrs.
   ───────────────────────────────────────────────────────────── */

/* Typographie — netteté + césure + mesures ---------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  /* Équilibre les lignes des titres (pas de mot orphelin). */
  text-wrap: balance;
}

/* Descriptions et chapôs : évite les tout derniers mots orphelins. */
.lead, .subtitle, .description, .intro, .drawer-sub, .hint {
  text-wrap: pretty;
}

/* Les paragraphes longs restent lisibles : 60–75 caractères par ligne. */
.prose, .long-text, .article, .legal-content, .markdown-body {
  max-width: 70ch;
}

/* Mots longs, identifiants, liens : ne débordent jamais de leur bloc. */
body {
  overflow-wrap: break-word;
}

/* Les soulignés n'entaillent pas les jambages (g, y, p…) — trait réservé. */
a {
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
}

/* Chiffres de largeur constante : compteurs, minuteurs, prix, tableaux. */
.tabnum, .timer, .counter, .price, .amount, time, [data-tabular] {
  font-variant-numeric: tabular-nums;
}

/* Surfaces — profondeur et images ------------------------------------------- */
/* Les images (photos, avatars) gardent un liseré 1px qui ne décale rien. */
img, video, canvas {
  outline: 1px solid rgb(0 0 0 / 0.08);
  outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
  img, video, canvas {
    outline-color: rgb(255 255 255 / 0.08);
  }
}

/* Focus — anneau visible uniquement au clavier, jamais supprimé sans relais. */
:focus-visible {
  outline: 2px solid var(--c-accent, var(--accent-primary, #6B3FA0));
  outline-offset: 2px;
}
/* Sur fond sombre, garder un anneau lisible si l'accent est sombre. */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: var(--c-accent, var(--accent-primary, #9D7BC9));
  }
}

/* Liens d'évitement (skip-link) : premier arrêt du Tab. */
.skip-link:not(:focus):not(:focus-visible) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Liens d'ancre : la cible respire sous un éventuel en-tête collant. */
:target, :where(h1, h2, h3)[id] {
  scroll-margin-top: 5rem;
}

/* Mouvement — respect des préférences système ------------------------------- */
/* Règle générale : si l'utilisateur réduit les animations, tout reste quasi
   instantané (les apps peuvent surcharger localement si nécessaire). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Bascule clair/sombre : aucune transition pendant le changement de thème.
   Les apps ajoutent .theme-switching sur <html> le temps du switch. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

/* Divers -------------------------------------------------------------------- */
/* Éléments purement décoratifs (halos, dégradés) : n'interceptent pas le clic. */
[data-decorative], .glow, .halo, .sparkle {
  pointer-events: none;
}

/* Boutons avec icône : padding légèrement plus serré côté icône. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.icon-btn > svg:first-child, .icon-btn > .icon:first-child {
  margin-left: -2px;
}
.icon-btn > svg:last-child:not(:first-child), .icon-btn > .icon:last-child:not(:first-child) {
  margin-right: -2px;
}

/* Presse des boutons : léger enfoncement (scale 0.97, 200ms). */
.btn:not(:disabled):active,
button.btn:not(:disabled):active,
.pebble-btn:not(:disabled):active,
.primary:not(:disabled):active {
  transform: scale(0.97);
}
.btn, button.btn, .pebble-btn, .primary {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}