/* Mise à l'échelle globale : root font-size à 125% pour agrandir tout ce qui
   utilise des unités rem (majorité de Tailwind). Les tailles arbitraires en
   px (text-[10px], etc.) ont été converties en rem pour scaler aussi. */
html { font-size: 125%; }

/* Indicateur de chargement htmx.

   htmx injecte lui-même `.htmx-indicator{opacity:0}` dans une balise <style>
   au chargement. On ne s'en remet pas à cette injection : elle dépend du
   runtime, et la CSP de production ne la tolère que par `style-src
   'unsafe-inline'`. Sans elle, `#loading` n'avait aucune règle statique et
   restait affiché en permanence - il ne porte pas la classe `hidden`.

   `display` plutôt qu'`opacity` : à opacité nulle le bloc garde sa place dans
   le flux et pousse les résultats vers le bas. htmx pose `htmx-request` sur
   l'élément désigné par `hx-indicator` pendant la requête.

   Règle portée par la classe et non par `#loading` : htmx ajoute
   `htmx-request` à toute cible de `hx-indicator`, donc un indicateur ajouté
   plus tard (sur la sous-requête DKIM, par exemple) est couvert d'office au
   lieu de reproduire le même bug. */
.htmx-indicator { display: none; }
.htmx-indicator.htmx-request { display: block; }

/* Accusé de copie du bouton « Lien » : vert en contour.

   Écrit ici et non en utilitaires Tailwind parce qu'aucun utilitaire ne peut
   gagner : le bouton porte déjà `bg-slate-100`, et Tailwind ordonne ses
   classes par palette, donc `.bg-slate-100` est écrit après `.bg-emerald-600`
   et l'emporte quoi qu'on ajoute. Seul `text-white` passait - devant
   `.text-slate-700`, mais sur un fond resté gris très clair : le libellé
   « Copié ! » devenait illisible. En thème sombre, `dark:bg-slate-800` et
   `dark:text-slate-300` gagnaient les deux, et le clic ne montrait rien.
   `app.css` est servi après la feuille Tailwind : cette règle-ci gagne.

   Contour par `box-shadow: inset` plutôt que par `border` : la boîte ne change
   pas de taille, les trois boutons de la barre restent alignés au pixel. */
.copie-ok,
.copie-ok:hover {
  background-color: transparent;
  color: #059669; /* emerald-600 */
  box-shadow: inset 0 0 0 1px currentColor;
}

html.dark .copie-ok,
html.dark .copie-ok:hover {
  color: #34d399; /* emerald-400, lisible sur le fond sombre de la carte */
}

/* Styles impression / export PDF. Force un rendu clair, plein largeur,
   cache les éléments interactifs et évite les coupures dans les cartes. */
@media print {
  html { font-size: 100%; }
  html.dark { color-scheme: light; }
  html.dark, html.dark body { background: white !important; color: black !important; }
  header, form, #loading { display: none !important; }
  main { max-width: none !important; padding: 0 !important; }
  .rounded-xl, .rounded-2xl { break-inside: avoid; page-break-inside: avoid; }
  /* Les fonds gris ressortent mal sur papier : on force le blanc */
  .bg-slate-50, .bg-slate-100, .bg-slate-900, .bg-slate-950 { background: white !important; }
  /* Les texts en dark: doivent apparaître en noir/sombre à l'impression */
  [class*="dark:text-"] { color: inherit !important; }
}