/* Reset, typographie de base et layout global. */

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

html {
  font-size: calc(16px * var(--fs));
  -webkit-tap-highlight-color: transparent;
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}

body.has-shell {
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-4));
}

img, svg { max-width: 100%; }

a { color: var(--red); }

h1, h2, h3, h4 { line-height: 1.25; }
h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); font-weight: 700; }
h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

p { font-size: var(--text-base); }

button, input, select, textarea { font-family: inherit; color: inherit; }

button { cursor: pointer; }

::selection { background: var(--red); color: #fff; }

/* Le focus doit se distinguer de l'erreur : rouge des deux côtés, le champ actif d'un formulaire
   passait pour un champ refusé. Le bleu ne porte aucune sémantique d'échec dans l'app. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 1.7em; height: 1.7em; }
.icon-xl { width: 3rem; height: 3rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .nav, #sessionfoot, #toasts, #modal-root, .appbar, .sync-badge, .update-banner, .no-print {
    display: none !important;
  }
  body { background: #fff; color: #000; padding: 0; }
}

/* Le routeur donne le focus au titre de la vue pour que les lecteurs d'écran l'annoncent. Chrome
   affiche alors son anneau de focus dès le premier affichage, ce qui encadre le titre en rouge sans
   raison. Un élément en tabindex="-1" n'étant pas atteignable au clavier, masquer l'anneau ne retire
   rien à la navigation clavier. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}