/* ==========================================================================
   TOEIC Training — base : reset, éléments, typographie, accessibilité
   ========================================================================== */

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

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--sp-4));
}

body{
  margin:0;
  /* Fond explicite : sans lui, la page emprunterait celui de l'hôte. */
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-block-size:100dvh;
  /* Jamais de défilement horizontal du body : les contenus larges
     défilent dans leur propre conteneur. */
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-4);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--text);
  text-wrap:balance;              /* évite les veuves dans les titres */
}
h1{ font-size:var(--fs-3xl); font-weight:var(--fw-black); }
h2{ font-size:var(--fs-2xl); }
h3{ font-size:var(--fs-xl); }
h4{ font-size:var(--fs-lg); }
h5,h6{ font-size:var(--fs-base); font-weight:var(--fw-semibold); }

p{ margin:0 0 var(--sp-4); text-wrap:pretty; }
p:last-child{ margin-block-end:0; }

a{
  color:var(--brand-text);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.18em;
  transition:var(--t-colors);
}
a:hover{ color:var(--brand-hover); text-decoration-thickness:2px; }

strong,b{ font-weight:var(--fw-semibold); color:var(--text); }
small{ font-size:var(--fs-sm); }

ul,ol{ margin:0 0 var(--sp-4); padding-inline-start:var(--sp-6); }
li{ margin-block-end:var(--sp-2); }
li:last-child{ margin-block-end:0; }

img,picture,video,canvas,svg{ display:block; max-inline-size:100%; height:auto; }

code,kbd,samp,pre{ font-family:var(--font-mono); font-size:0.9em; }
code{
  background:var(--surface-2); color:var(--text);
  padding:0.15em 0.4em; border-radius:var(--r-xs);
}
kbd{
  background:var(--surface-3); color:var(--text);
  border:var(--bw-hair) solid var(--border-strong);
  border-block-end-width:2px;
  border-radius:var(--r-xs);
  padding:0.1em 0.45em; font-size:0.85em; font-weight:var(--fw-medium);
}
pre{
  background:var(--surface-2); padding:var(--sp-4);
  border-radius:var(--r-md); overflow-x:auto;
}

hr{ border:0; border-block-start:var(--bw-hair) solid var(--border); margin:var(--sp-8) 0; }

blockquote{
  margin:0 0 var(--sp-4);
  padding-inline-start:var(--sp-4);
  border-inline-start:3px solid var(--brand-border);
  color:var(--text-muted);
}

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

::selection{ background:var(--brand); color:var(--text-on-brand); }

/* Barres de défilement discrètes, cohérentes avec le thème */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ — contrat non négociable
   -------------------------------------------------------------------------- */

/* Focus toujours visible. :where() garde une spécificité nulle, donc
   un composant peut surcharger sans lutte de spécificité. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--r-xs);
}

.sr-only{
  position:absolute; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; inset-inline-start:var(--sp-4); inset-block-start:var(--sp-4);
  z-index:var(--z-skiplink);
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface); color:var(--brand-text);
  border:var(--bw-thin) solid var(--brand);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  text-decoration:none; font-weight:var(--fw-semibold);
  transform:translateY(calc(-100% - var(--sp-8)));
  transition:transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ transform:translateY(0); }

/* Mouvement réduit : on neutralise animations et transformations, mais on
   CONSERVE les transitions de couleur — aucun risque vestibulaire, et
   elles aident à comprendre les changements d'état. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
}

/* Contraste forcé (Windows High Contrast) */
@media (forced-colors: active){
  .btn{ border:1px solid ButtonText; }
  .opt:has(.opt__input:checked){ border:2px solid Highlight; forced-color-adjust:none; }
}