/*
 * Surcouche visuelle commune inspirée de PneuLab.
 * Chargée après les styles propres à chaque logiciel : elle harmonise la
 * palette et les composants d'interface sans modifier leur mise en page.
 */

:root {
  --navy: #10243e;
  --paper: #f3f6f8;
  --card: #ffffff;
  --ink: #172536;
  --muted: #667789;
  --line: #dae4ea;
  --cyan: #10a7b8;
  --blue: #2874d0;
  --orange: #ff8a34;
  --red: #e54f55;
  --green: #24976a;
  --shadow: 0 14px 40px rgb(17 42 67 / 11%);

  /* Alias employés par les différentes générations de logiciels. */
  --bg: var(--paper);
  --bg-color: var(--paper);
  --background: var(--paper);
  --panel: var(--card);
  --panel-bg: var(--card);
  --surface: var(--card);
  --surface-1: var(--card);
  --text: var(--ink);
  --text-color: var(--ink);
  --primary: var(--blue);
  --primary-color: var(--blue);
  --accent: var(--blue);
  --accent-color: var(--cyan);
  --accent2: var(--navy);
  --border: var(--line);
  --panel-border: var(--line);
  --ok: var(--green);
  --success: var(--green);
  --danger: var(--red);
  --error: var(--red);
  --warning: var(--orange);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-soft: var(--shadow);
  --font-family: Inter, "Segoe UI", Arial, sans-serif;
}

html {
  color-scheme: light;
  background: var(--paper);
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

/* En-têtes : même présence claire et discrète que la barre de PneuLab. */
body > header,
.topbar,
.top-bar,
.app-header,
.main-header,
.toolbar,
.tool-bar {
  border-color: var(--line);
}

body > header,
.topbar,
.top-bar,
.app-header,
.main-header {
  background-color: rgb(255 255 255 / 97%);
  color: var(--navy);
  box-shadow: 0 2px 10px rgb(17 42 67 / 4%);
}

/* MES conserve son bandeau bleu : son titre doit rester blanc et contrasté. */
.app-header .header-copy,
.app-header .header-copy h1,
.app-header .header-copy .eyebrow,
.app-header .header-copy > p {
  color: #fff;
}

h1,
h2,
h3,
h4,
.title,
.brand,
.logo {
  color: var(--navy);
}

/* Panneaux, cartes et boîtes pédagogiques. */
.panel,
.card,
.qcard,
.question-card,
.chapter-card,
.lesson-box,
.help-box,
.info-box,
.settings,
.controls,
.control-panel,
.sidebar,
.modal-content,
.dialog,
fieldset {
  border-color: var(--line);
  border-radius: var(--radius-md);
}

.panel,
.card,
.qcard,
.question-card,
.chapter-card,
.lesson-box,
.help-box,
.info-box,
.settings,
.controls,
.control-panel,
.sidebar,
.modal-content,
.dialog {
  background-color: var(--card);
  box-shadow: 0 8px 28px rgb(17 42 67 / 8%);
}

/* Contrôles : volontairement ciblés hors canevas et éléments graphiques. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn {
  border-color: var(--line);
  border-radius: 10px;
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease,
    color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover,
.button:hover,
.btn:hover {
  border-color: #91b2c4;
  box-shadow: 0 5px 14px rgb(17 42 67 / 8%);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgb(16 167 184 / 22%);
  outline-offset: 2px;
}

.primary,
.btn-primary,
button.primary,
button.validate,
button.verify,
button.correct {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.primary:not(:disabled):hover,
.btn-primary:not(:disabled):hover,
button.primary:not(:disabled):hover,
button.validate:not(:disabled):hover,
button.verify:not(:disabled):hover,
button.correct:not(:disabled):hover {
  background-color: #173b60;
  border-color: #173b60;
}

.danger,
.btn-danger,
button.danger,
button.delete {
  background-color: #fff;
  border-color: #efc6c8;
  color: #a23b43;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
select,
textarea {
  background-color: #fff;
  border-color: var(--line);
  border-radius: 10px;
  color: var(--ink);
}

input[type="range"],
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--blue);
}

table {
  border-color: var(--line);
}

th {
  background-color: #eef5f9;
  color: var(--navy);
}

td,
th {
  border-color: var(--line);
}

.badge,
.tag,
.chip,
.pill {
  border-radius: 999px;
}

.muted,
.small,
.subtitle,
.description,
.hint {
  color: var(--muted);
}

.success,
.correct,
.feedback.ok,
.feedback.success {
  border-color: #b9decf;
}

.error,
.incorrect,
.feedback.bad,
.feedback.error {
  border-color: #edc0c3;
}

::selection {
  background: rgb(16 167 184 / 24%);
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  button,
  input,
  select,
  textarea,
  .button,
  .btn {
    scroll-behavior: auto;
    transition: none !important;
  }
}

@media print {
  body {
    background: #fff;
  }

  .panel,
  .card,
  .qcard,
  .question-card,
  .chapter-card {
    box-shadow: none;
  }
}