/* Copyright 2026 Soumaia Bouhouia
 *
 * Réglages qui valent pour toutes les vues. Rien de propre à
 * l'authentification, à la liste ou au détail : ceux-là ont leur fichier.
 */

/* Les composants wa-* ne se rendent qu'une fois enregistrés par le chargeur.
 * Sans ce voile, la page apparaît une fraction de seconde en HTML nu - boutons
 * sans style, champs empilés - avant de se remettre en place. ready.js retire la
 * classe ; le gabarit la pose, donc un JS en panne laisse la page visible. */
body.wa-cloak {
  opacity: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-body);
  opacity: 1;
  transition: opacity 0.15s ease-in;
}

::selection {
  background-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

/* Les liens de l'interface portent leur propre style ; on neutralise seulement
 * le soulignement hérité du navigateur. */
a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
[tabindex]:focus-visible {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}

/* Les valeurs où l'alignement des chiffres compte : numéros de dossier,
 * d'hypothèque, de téléphone, codes postaux. */
.pl-mono {
  font-family: var(--wa-font-family-code);
  font-variant-numeric: tabular-nums;
  /* Un sujet de courriel ou un chemin de dossier Outlook n'offre pas toujours un
   * espace où couper : sans ceci, il dépasse l'écran sur un téléphone. */
  overflow-wrap: anywhere;
}

/* L'icône d'un encadré se cale en haut, pas au milieu. Web Awesome la centre
 * sur toute la hauteur : sur un encadré à deux lignes - un titre et son
 * explication - elle flottait entre les deux, rattachée à aucune. En haut,
 * elle se lit avec le titre, qui est ce qu'elle qualifie. */
wa-callout {
  align-items: start;
}

wa-callout::part(icon) {
  align-self: start;
}

/* Le petit libellé en capitales posé au-dessus d'une valeur. */
.pl-label {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-2xs);
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}