/* Relooking global léger maprimaire.fr
   Compatible pages anciennes / Bootstrap 2-3 / exercices Hot Potatoes.
   Objectif : moderniser sans casser les exercices. */

:root {
  --mp-blue: #178bd3;
  --mp-blue-dark: #0f6fa9;
  --mp-green: #73b829;
  --mp-orange: #ef8b22;
  --mp-dark: #243044;
  --mp-text: #334155;
  --mp-muted: #64748b;
  --mp-bg: #f5f8fc;
  --mp-card: #ffffff;
  --mp-border: #e5edf6;
  --mp-shadow: 0 10px 28px rgba(35, 48, 68, .10);
}

html {
  scroll-behavior: smooth;
}

body {
  margin-top: 0;
  background: linear-gradient(180deg, #eef7ff 0, var(--mp-bg) 320px, #fff 100%);
  color: var(--mp-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

body > center,
body > table,
body > form,
body > div,
body > p,
body > h1,
body > h2,
body > h3 {
  max-width: 1120px;
}

body > center,
body > table,
body > form,
body > div:not(.Feedback):not(#InstructionsDiv):not(#MainDiv):not(.modal):not(.navbar):not(.container):not(.container-fluid),
body > p,
body > h1,
body > h2,
body > h3 {
  margin-left: auto;
  margin-right: auto;
}

.container,
.container-fluid,
.barre {
  max-width: 1120px;
}

a {
  color: var(--mp-blue-dark);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--mp-orange);
  text-decoration: underline;
}

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

h1,
h2,
h3,
h4,
h5 {
  color: var(--mp-dark);
  font-weight: 700;
  line-height: 1.25;
}

h1 {
  font-size: 34px;
  margin-top: 24px;
  margin-bottom: 18px;
}

h2 {
  font-size: 27px;
  margin-top: 22px;
  margin-bottom: 14px;
}

h3 {
  font-size: 22px;
  margin-top: 18px;
  margin-bottom: 12px;
}

hr {
  border: 0;
  border-top: 1px solid var(--mp-border);
}

/* Menus Bootstrap et barres hautes */
.navbar,
.navbar-inner,
.well,
.hero-unit,
.panel,
.thumbnail,
.media,
.StdDiv,
.barre,
table[bgcolor="#FFFFFF"],
table[bgcolor="#ffffff"] {
  border-color: var(--mp-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--mp-shadow);
}

.navbar,
.navbar-inner {
  background: #fff !important;
  border: 0 !important;
}

.navbar a,
.navbar-inner a {
  font-weight: 700;
}

/* Blocs de contenus anciens */
.well,
.hero-unit,
.panel,
.thumbnail,
.media,
.StdDiv,
.barre {
  background: var(--mp-card) !important;
}

.media,
.thumbnail,
.well,
.panel,
.StdDiv {
  padding: 14px;
}

/* Tables anciennes */
table {
  border-collapse: separate;
  border-spacing: 0;
}

td,
th {
  vertical-align: top;
}

table[border="1"],
table[border="2"] {
  background: #fff;
  border: 1px solid var(--mp-border) !important;
  border-radius: 14px;
  overflow: hidden;
}

table[border="1"] td,
table[border="1"] th,
table[border="2"] td,
table[border="2"] th {
  border-color: var(--mp-border) !important;
}

/* Boutons, formulaires, exercices */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.Bouton,
.Button {
  border-radius: 12px !important;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border: 1px solid var(--mp-blue-dark);
  background: var(--mp-blue);
  color: #fff;
  padding: 8px 13px;
  font-weight: 700;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background: var(--mp-blue-dark);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  max-width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 7px 9px;
  background: #fff;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(23, 139, 211, .18);
  border-color: var(--mp-blue);
}

/* Exercices Hot Potatoes : modernisation douce sans casser la logique JS */
.Titles,
.ExerciseTitle,
.ExerciseSubtitle {
  color: var(--mp-dark) !important;
}

.ExerciseTitle {
  font-size: 26px !important;
  font-weight: 800;
}

div.StdDiv,
div.Feedback,
#InstructionsDiv,
#MainDiv {
  border-color: var(--mp-border) !important;
}

div.Feedback {
  border-radius: 16px !important;
  box-shadow: var(--mp-shadow);
}

/* Images de boutons historiques : on évite de les déformer */
img[src*="coul_btn"],
img[src*="puce"],
img[src*="gif"] {
  max-width: none;
}

/* Petites corrections mobiles */
@media (max-width: 768px) {
  body {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  body > center,
  body > table,
  body > form,
  body > div,
  body > p,
  body > h1,
  body > h2,
  body > h3,
  .container,
  .container-fluid,
  .barre {
    max-width: 100% !important;
  }

  table {
    max-width: 100%;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 23px;
  }

  h3 {
    font-size: 20px;
  }
}