/*
===============================================================================
 SI ARBEZ — SI-BASE.CSS
 Socle commun NON DESTRUCTIF pour QCM, exerciseurs et didacticiels.
 À charger après le <style> interne pendant la phase de transition.
===============================================================================
*/

:root {
  /*
   * Alias communs.
   * On NE redéfinit PAS --primary, --primary-color, --accent2, etc.
   * Le thème local reste donc prioritaire et le CSS commun s'y adapte.
   */
  --si-bg: var(--bg-color, var(--bg, #eef4ff));
  --si-panel: var(--panel-bg, var(--panel, #ffffff));
  --si-border: var(--panel-border, var(--border, var(--line, rgba(33,150,243,.20))));
  --si-primary: var(--primary-color, var(--primary, var(--accent2, #1e88e5)));
  --si-accent: var(--accent-color, var(--accent, #26a69a));
  --si-text: var(--text-color, var(--text, var(--ink, #233044)));
  --si-muted: var(--muted, #4f5d73);
  --si-success: var(--ok, #2e7d32);
  --si-danger: var(--bad, var(--ko, #c62828));
  --si-warning: var(--warn, var(--warm, #ef6c00));
  --si-shadow: var(--shadow-soft, var(--shadow, 0 12px 32px rgba(30,136,229,.12)));
  --si-font: var(--font-family, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);

  --si-radius-sm: 8px;
  --si-radius-md: 12px;
  --si-radius-lg: 18px;
  --si-touch: 44px;
  --si-content-max: 1500px;
}

/* ---------- Normalisation ---------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
}

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

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Tous les enfants de grilles/flex peuvent réellement rétrécir. */
main,
section,
article,
aside,
.card,
.qcard,
.chapter-card,
.panel,
.content,
.main,
.stage {
  min-width: 0;
}

/* ---------- Médias ---------- */

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

img {
  object-fit: contain;
}

video {
  display: block;
}

canvas {
  max-width: 100%;
}

/* Iframes pédagogiques et intégrations */
iframe {
  max-width: 100%;
  border: 0;
}

/* ---------- Formulaires ---------- */

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

button,
[role="button"],
summary,
label,
input[type="radio"],
input[type="checkbox"],
input[type="range"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
select,
textarea {
  min-width: 0;
}

/* Contrôles range : ne jamais provoquer un débordement de grille. */
input[type="range"] {
  max-width: 100%;
  min-width: 0;
}

/* ---------- Texte long / code ---------- */

p,
li,
td,
th,
.feedback,
.help,
.help-box,
.note,
.callout,
.question-text,
.qprompt,
.qtext,
.lesson-box {
  overflow-wrap: anywhere;
}

pre,
.code,
.codeblock,
.code-block,
.formula {
  max-width: 100%;
}

pre,
.code,
.codeblock,
.code-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Les blocs de code restent lisibles sans forcer la page à s'élargir. */
pre {
  white-space: pre-wrap;
  word-break: normal;
}

/* ---------- Tables ---------- */

table {
  max-width: 100%;
}

/* Wrapper conseillé pour les nouvelles pages. */
.si-table-scroll,
.table-scroll,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Classes utilitaires pour nouvelles pages ---------- */

.si-container {
  width: min(calc(100% - 30px), var(--si-content-max));
  margin-inline: auto;
}

.si-hidden {
  display: none !important;
}

.si-center {
  text-align: center;
}

.si-media {
  width: 100%;
  min-width: 0;
}

.si-media-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.si-media-16-9 > iframe,
.si-media-16-9 > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Accessibilité ---------- */

:focus-visible {
  outline: 3px solid rgba(30, 136, 229, .35);
  outline-offset: 2px;
}

/* Pas d'animation imposée si l'utilisateur les réduit. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}