/* ══════════════════════════════════════════════════════════════════════
   Option Math-Philo — feuille partagée par math.philo.php (hub) et ses
   pages de séquence (math.philo.nombres.php, …).

   Même parti pris que css2026/jeux.css : le hub présente, les enfants
   portent le contenu rédigé. Les encarts sont des cartes claires posées
   sur le fond du site, avec un liseré qui distingue d'un coup d'œil la
   part mathématique (bleu) de la part philosophique (prune).

   ── Pas de publicité dans les encarts ──────────────────────────────
   Chaque conteneur porte DEUX classes : `no-ads` (masque les
   <ins class="adsbygoogle"> d'Auto ads) et `google-anno-skip` (exclut
   des « recherches associées » injectées au fil du texte). L'une ne
   remplace pas l'autre ; voir css2026/base.css.
   Créée le 20/08/2026.
══════════════════════════════════════════════════════════════════════ */

/* ── Chapô : le texte de présentation en tête de page ────────────── */
.mp-chapo {
  max-width: 820px;
  margin: 1.4rem auto 2rem;
  padding: 1.4rem 1.2rem;
  background: #fffefc;
  border-left: 4px solid #5b3a8e;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.7;
  color: #2f2f2f;
  text-align: left;
}
.mp-chapo p { margin: 0 0 0.8rem; }
.mp-chapo p:last-child { margin-bottom: 0; }
.mp-chapo a { color: #5b3a8e; }
.mp-chapo .mp-objectif {
  font-weight: 700;
  color: #40286a;
}
@media screen and (min-width: 768px) {
  .mp-chapo { padding: 1.8rem 2rem; font-size: 1.03rem; }
}

/* ── Les deux disciplines, côte à côte ───────────────────────────── */
.mp-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 820px;
  margin: 0 auto 2rem;
}
@media (min-width: 700px) {
  .mp-duo { grid-template-columns: repeat(2, 1fr); }
}
.mp-duo-carte {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.6);
}
.mp-duo-carte h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  border: none;
  padding: 0;
}
.mp-duo-carte p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3a3a3a;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-duo-math  { border-top: 4px solid #1a3a6a; }
.mp-duo-math  h2 { color: #1a3a6a; }
.mp-duo-philo { border-top: 4px solid #5b3a8e; }
.mp-duo-philo h2 { color: #5b3a8e; }

/* ── Les encarts de séquence ─────────────────────────────────────── */
.mp-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 1.8rem 0 2.4rem;
}
@media (min-width: 700px) {
  .mp-grille { grid-template-columns: repeat(2, 1fr); }
}
/* Tant qu'il n'y a qu'une séquence, la carte prendrait une demi-colonne et
   flotterait toute seule à gauche : on la ramène à la largeur du chapô. */
.mp-grille-solo { max-width: 820px; margin-left: auto; margin-right: auto; }
@media (min-width: 700px) {
  .mp-grille-solo { grid-template-columns: 1fr; }
}
.mp-carte {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 14px;
  border: 1.5px solid rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease;
}
.mp-carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
}
.mp-carte h2 {
  margin: 0 0 0.15rem;
  font-size: 1.2rem;
  color: #40286a;
  border: none;
  padding: 0;
}
.mp-carte h2 a { color: #40286a; text-decoration: none; }
.mp-carte h2 a:hover { color: #c0392b; text-decoration: underline; }
.mp-carte-meta {
  font-size: 0.8rem;
  color: #6b6b6b;
  font-weight: 600;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mp-carte-texte {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3a3a3a;
  margin: 0 0 0.8rem;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-carte-points {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
}
.mp-carte-points li { margin: 0.22rem 0; }
.mp-carte-points li::before { content: "▸ "; color: #5b3a8e; }
.mp-carte-lire {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.93rem;
  color: #c0392b;
  text-decoration: none;
}
.mp-carte-lire:hover { text-decoration: underline; }

/* Carte d'une séquence non encore écrite : ni lien, ni relief au survol. */
.mp-carte-attente {
  background: rgba(255,255,255,0.28);
  border-style: dashed;
}
.mp-carte-attente:hover { transform: none; box-shadow: none; }
.mp-carte-attente h2 { color: #6b6b6b; }

/* ── Badges (niveau, discipline dominante) ───────────────────────── */
.mp-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mp-badge-niveau  { background:#eef4fb; color:#0059a3; border-color:#c3dbf2; }
.mp-badge-math    { background:#e8f0fb; color:#1a3a6a; border-color:#c3d5ee; }
.mp-badge-philo   { background:#f2ecfa; color:#5b3a8e; border-color:#d8c9ee; }
.mp-badge-attente { background:#f0f0f0; color:#555;    border-color:#d8d8d8; }

/* ── Informations pratiques (horaire, intervenants) ──────────────── */
.mp-infos {
  max-width: 820px;
  margin: 0 auto 2.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.09);
  background: #f4f0fa;
}
.mp-infos h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: #40286a;
  border: none;
  padding: 0;
}
.mp-infos ul { list-style: none; padding: 0; margin: 0; }
.mp-infos li {
  margin: 0.3rem 0;
  font-size: 0.97rem;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-infos .mp-infos-quoi { font-weight: 700; color: #40286a; }

/* ── Page de séquence : le déroulé, séance par séance ────────────── */
.mp-seance {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-left: 4px solid #5b3a8e;
  background: rgba(255,255,255,0.55);
}
.mp-seance h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: #40286a;
  border: none;
  padding: 0;
}
.mp-seance p, .mp-seance li {
  font-size: 0.97rem;
  line-height: 1.6;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-seance p { margin: 0 0 0.6rem; }
.mp-seance ul { margin: 0 0 0.6rem 1.1rem; padding: 0; }
.mp-seance > :last-child { margin-bottom: 0; }

/* ── La démonstration, mise en évidence ──────────────────────────── */
.mp-demo {
  margin: 1.6rem 0;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid #c3d5ee;
  background: #f6f9fe;
}
.mp-demo h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: #1a3a6a;
  border: none;
  padding: 0;
}
.mp-demo p, .mp-demo li {
  font-size: 0.97rem;
  line-height: 1.7;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-demo p { margin: 0 0 0.6rem; }
.mp-demo ol { margin: 0 0 0.6rem 1.3rem; padding: 0; }
.mp-demo ol li { margin: 0.35rem 0; }
.mp-demo > :last-child { margin-bottom: 0; }
.mp-demo .mp-cqfd { font-weight: 700; color: #1a3a6a; }

/* Les formules : une police à chasse fixe, pour que 2p² se lise. */
.mp-f {
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 1.02em;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: nowrap;
}
.mp-formule {
  display: block;
  text-align: center;
  margin: 0.7rem 0;
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 1.08rem;
  color: #1a3a6a;
  letter-spacing: normal;
  word-spacing: normal;
}

/* ── L'encadré philosophique : la question qu'ouvre le résultat ──── */
.mp-question {
  margin: 1.6rem 0;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid #d8c9ee;
  background: #f9f6fe;
}
.mp-question h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: #5b3a8e;
  border: none;
  padding: 0;
}
.mp-question p, .mp-question li {
  font-size: 0.97rem;
  line-height: 1.65;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-question p { margin: 0 0 0.6rem; }
.mp-question ul { margin: 0 0 0.6rem 1.1rem; padding: 0; }
.mp-question > :last-child { margin-bottom: 0; }

/* ── Étymologie, aparté ──────────────────────────────────────────── */
.mp-aparte {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: #f4f0e6;
  border-left: 4px solid #7a5a12;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #3a3a3a;
  letter-spacing: normal;
  word-spacing: normal;
}
.mp-aparte p { margin: 0 0 0.5rem; }
.mp-aparte p:last-child { margin-bottom: 0; }

/* ── Encadré « Voir aussi » ──────────────────────────────────────── */
.mp-aussi {
  margin: 2.2rem 0 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.4);
}
.mp-aussi h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: #1a3a6a;
  border: none;
  padding: 0;
}
.mp-aussi ul { margin: 0 0 0 1.1rem; padding: 0; }
.mp-aussi li {
  margin: 0.3rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
}

/* ── Retour au hub, en pied de page de séquence ──────────────────── */
.mp-retour {
  margin: 1.6rem 0 0;
  font-weight: 700;
  font-size: 0.95rem;
}
.mp-retour a { color: #5b3a8e; text-decoration: none; }
.mp-retour a:hover { text-decoration: underline; }