/* Ma Primaire — V4 habillage pages évaluation
   Version plus ambitieuse :
   - bandeau haut très épuré
   - anciennes bordures/arrondis noirs masqués
   - colonne gauche plus discrète
   - bloc questions/réponses plus moderne
*/

:root {
  --mp-blue: #1f5fbf;
  --mp-blue-dark: #173c8f;
  --mp-bg: #eef4ff;
  --mp-bg-soft: #f8fbff;
  --mp-text: #172033;
  --mp-muted: #64748b;
  --mp-border: #dbe5f4;
  --mp-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

html {
  font-size: 18px;
}

body {
  margin: 0 !important;
  padding: 22px 12px 42px !important;
  background: linear-gradient(180deg, #eef4ff 0%, #f8fafc 100%) !important;
  color: var(--mp-text) !important;
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Base des grandes tables anciennes */
body > table {
  width: min(1120px, calc(100vw - 28px)) !important;
  max-width: 1120px !important;
  margin: 18px auto !important;
  background: #ffffff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--mp-border) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: var(--mp-shadow) !important;
}

/* Neutralisation globale des fonds anciens */
td[bgcolor],
th[bgcolor] {
  background-image: none !important;
}

td[bgcolor="#000000"],
td[bgcolor="#000"],
th[bgcolor="#000000"],
th[bgcolor="#000"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

td[bgcolor="#B7B7FF"],
td[bgcolor="#b7b7ff"],
td[bgcolor="#9999FF"],
td[bgcolor="#9999ff"],
td[bgcolor="#FFE2B9"],
td[bgcolor="#ffe2b9"],
td[bgcolor="#FFDEAD"],
td[bgcolor="#ffdead"],
td[bgcolor="#FFB340"],
td[bgcolor="#ffb340"],
td[bgcolor="#FF9E0F"],
td[bgcolor="#ff9e0f"],
td[bgcolor="#FFFFFF"],
td[bgcolor="#ffffff"] {
  background: transparent !important;
  background-color: transparent !important;
}

body > table td,
body > table th {
  color: var(--mp-text) !important;
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* ========== BANDEAU HAUT V4 ========== */

/* Le premier tableau devient un hero simple */
body > table:first-of-type {
  position: relative !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  min-height: 190px !important;
}

/* Masque les coins noirs / éléments graphiques anciens */
body > table:first-of-type::before,
body > table:first-of-type::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Bande blanche qui recouvre les anciens arcs noirs en haut */
body > table:first-of-type::before {
  background:
    linear-gradient(#ffffff, #ffffff) top left / 100% 34px no-repeat,
    linear-gradient(#ffffff, #ffffff) top right / 100% 34px no-repeat !important;
}

/* Dégradé discret de charte */
body > table:first-of-type::after {
  background: radial-gradient(circle at 50% 0%, rgba(31,95,191,0.08), transparent 50%) !important;
}

/* Toutes les cellules du bandeau sont remises au propre */
body > table:first-of-type tr,
body > table:first-of-type td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Ancien logo texte image masqué */
body > table:first-of-type img[src*="maprimaire.gif"],
body > table:first-of-type img[src*="logo"],
body > table:first-of-type img[src*="titre"] {
  display: none !important;
}

/* Mascottes diminuées pour ne pas dominer */
body > table:first-of-type img[src*="ecoliere.gif"],
body > table:first-of-type img[src*="niveau_"] {
  max-height: 76px !important;
  width: auto !important;
  opacity: 0.88 !important;
}

/* Titre central */
body > table:first-of-type span,
body > table:first-of-type strong {
  color: var(--mp-blue-dark) !important;
  font-size: clamp(1.75rem, 2.5vw, 2.65rem) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  text-shadow: none !important;
}

/* Supprime les gros vides si possible */
body > table:first-of-type td {
  padding: 0.65rem 0.9rem !important;
}

/* Fil d'Ariane plus moderne */
.bandea_barre,
.bandeau_haut,
.bandeau_barre {
  background: #eef4ff !important;
  background-image: none !important;
  color: #334155 !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.45 !important;
  padding: 0.85rem 1.1rem !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  text-align: left !important;
  border-radius: 16px !important;
}

.bandea_barre a,
.bandeau_haut a,
.bandeau_barre a {
  color: var(--mp-blue) !important;
}

/* ========== BLOC PRINCIPAL ========== */

body > table:nth-of-type(2) {
  background: #ffffff !important;
}

/* Colonne gauche plus discrète */
body > table:nth-of-type(2) > tbody > tr > td:first-child {
  background: #f8fbff !important;
  border-right: 1px solid var(--mp-border) !important;
  padding: 1rem !important;
  width: 250px !important;
}

body > table:nth-of-type(2) > tbody > tr > td:nth-child(2) {
  padding: 1.3rem !important;
}

/* Bouton Accueil plus petit et plus élégant */
.btn {
  width: auto !important;
  height: auto !important;
  line-height: 1.25 !important;
  margin: 0.2rem auto 1rem !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0.9rem !important;
}

.btn a,
.btn a:link,
.btn a:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0.5rem 0.95rem !important;
  border-radius: 999px !important;
  background: var(--mp-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(31, 95, 191, 0.16) !important;
  max-width: 180px !important;
}

.btn a:hover {
  background: #164a99 !important;
}

/* Menu autres exercices */
body > table:nth-of-type(2) > tbody > tr > td:first-child table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 0.55rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body > table:nth-of-type(2) > tbody > tr > td:first-child table td {
  background: #ffffff !important;
  border: 1px solid var(--mp-border) !important;
  border-radius: 14px !important;
  padding: 0.7rem 0.8rem !important;
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.04) !important;
}

body > table:nth-of-type(2) > tbody > tr > td:first-child table tr:first-child td {
  background: #eef4ff !important;
  color: var(--mp-blue-dark) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  text-align: center !important;
}

/* Textes */
.txt12,
.txt14red,
.txt18,
.txt18bleu,
.txt16,
.txt14,
.txt141,
.txt14bte,
p,
span,
div,
td,
li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--mp-text) !important;
}

.txt18,
.txt18 strong,
.txt18bleu,
strong.txt18bleu {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: var(--mp-blue-dark) !important;
}

/* Liens */
a {
  color: var(--mp-blue) !important;
  font-weight: 800 !important;
  text-decoration-thickness: 0.08em !important;
  text-underline-offset: 0.16em !important;
}

a:hover {
  color: #164a99 !important;
}

/* ========== FORMULAIRE EVALUATION ========== */

form > table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 0.85rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Titre de l'évaluation */
form > table > tbody > tr:first-child > td {
  background: #eef4ff !important;
  border-radius: 20px !important;
  padding: 0.95rem 1.15rem !important;
  color: var(--mp-blue-dark) !important;
}

/* Ligne questions/réponses */
form > table > tbody > tr:nth-child(2) > td {
  background: #f8fbff !important;
  padding: 0.9rem 1rem !important;
  font-size: 1.05rem !important;
  color: var(--mp-blue-dark) !important;
  border: 1px solid var(--mp-border) !important;
}

form > table > tbody > tr:nth-child(2) > td:first-child {
  border-radius: 18px 0 0 18px !important;
}

form > table > tbody > tr:nth-child(2) > td:last-child {
  border-radius: 0 18px 18px 0 !important;
}

/* Séparateurs */
form > table > tbody > tr > td[colspan="2"][height="2"],
form > table > tbody > tr > td[colspan="2"][bgcolor] {
  height: 1px !important;
  padding: 0 !important;
  background: #e5edf8 !important;
}

/* Cartes questions */
form > table > tbody > tr > td {
  background: #ffffff !important;
  border-top: 1px solid #e4ebf5 !important;
  border-bottom: 1px solid #e4ebf5 !important;
  padding: 1rem 1.15rem !important;
  vertical-align: top !important;
}

form > table > tbody > tr > td:first-child {
  border-left: 1px solid #e4ebf5 !important;
  border-radius: 18px 0 0 18px !important;
}

form > table > tbody > tr > td:last-child {
  border-right: 1px solid #e4ebf5 !important;
  border-radius: 0 18px 18px 0 !important;
  background: #f8fbff !important;
}

/* Mini tableaux internes */
form table table {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: auto !important;
  margin: 0.5rem 0 !important;
  border: 0 !important;
}

form table table td {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  padding: 0.15rem 0.35rem !important;
  background: #ffffff !important;
  text-align: center !important;
  font-size: 1rem !important;
}

/* Champs */
input[type="text"],
input[type="number"],
textarea,
select {
  min-height: 48px !important;
  padding: 0.62rem 0.8rem !important;
  border: 1px solid #c9d6ea !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: var(--mp-text) !important;
  font-size: 1.03rem !important;
  box-sizing: border-box !important;
}

.txt14bte {
  width: 58px !important;
  min-width: 58px !important;
  text-align: center !important;
  font-weight: 800 !important;
}

/* Boutons */
input[type="submit"],
input[type="button"],
button {
  min-height: 48px !important;
  padding: 0.75rem 1.25rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mp-blue) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(31, 95, 191, 0.18) !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: #164a99 !important;
}

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

/* Mobile */
@media (max-width: 820px) {
  html { font-size: 18px; }

  body {
    padding: 8px 6px 28px !important;
  }

  body > table {
    width: calc(100vw - 12px) !important;
    margin: 8px auto 16px !important;
    border-radius: 18px !important;
  }

  body > table:first-of-type {
    min-height: auto !important;
  }

  body > table:first-of-type td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body > table:first-of-type img[src*="ecoliere.gif"],
  body > table:first-of-type img[src*="niveau_"] {
    max-height: 58px !important;
  }

  body > table:nth-of-type(2) > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body > table:nth-of-type(2) > tbody > tr > td:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--mp-border) !important;
  }

  .btn a,
  .btn a:link,
  .btn a:visited {
    max-width: none !important;
    width: 100% !important;
  }

  form > table,
  form > table > tbody,
  form > table > tbody > tr,
  form > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  form > table > tbody > tr:nth-child(2) > td,
  form > table > tbody > tr > td {
    border: 1px solid #e4ebf5 !important;
    border-radius: 16px !important;
    margin-bottom: 0.25rem !important;
  }

  form > table > tbody > tr > td:last-child {
    background: #f8fbff !important;
    margin-bottom: 0.8rem !important;
  }

  form table table,
  form table table tbody,
  form table table tr {
    display: table !important;
    width: 100% !important;
  }

  form table table td {
    display: table-cell !important;
    width: auto !important;
  }

  input[type="submit"],
  input[type="button"],
  button {
    width: 100% !important;
    margin-top: 0.6rem !important;
  }
}