/* ================= PAGE GLOBALE ================= */
.sujet-page {
  max-width: 900px;
  margin: 40px auto;
}

/* Justify paragraf sou ekran laptop / desktop */
@media (min-width: 992px) {
  .sujet-page p {
    text-align: justify;
  }
}

/* ================= HERO ================= */
.sujet-hero h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

.sujet-intro {
  font-size: 18px;
  color: #555;
}

/* ================= INTRO PREMIUM ================= */
.intro-premium {
  background: #f9fbff;
  padding: 30px;
  border-left: 4px solid #0a7cff;
  border-radius: 8px;
  margin-bottom: 40px;
}

.intro-cta {
  margin-top: 20px;
  padding: 15px;
  background: #eef4ff;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* ================= SOMMAIRE ================= */
.sujet-sommaire {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
}

.sujet-sommaire ul {
  padding-left: 20px;
}

.sujet-sommaire li {
  margin-bottom: 8px;
}

.premium-hint {
  color: #999;
  font-style: italic;
}

/* ================= SECTIONS ================= */
.sujet-section {
  margin-bottom: 40px;
}

.sujet-section h2 {
  border-left: 4px solid #0a7cff;
  padding-left: 12px;
  margin-bottom: 15px;
}

/* ================= BOÎTES ================= */
.box-retient,
.box-astuce {
  background: #eef5ff;
  padding: 15px;
  border-radius: 6px;
  margin-top: 15px;
}

.box-astuce {
  background: #e6f7ff;
}

/* ================= PREMIUM ================= */
.sujet-locked {
  background: #f4f4f4;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  margin-top: 30px;
}

.premium-card {
  background: #ffffff;
  border: 2px dashed #0a7cff;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ================= NAVIGATION SUJETS ================= */
.sujet-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-nav {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
}

/* Bouton retour */
.btn-retour {
  background: #f1f3f5;
  color: #333;
}

.btn-retour:hover {
  background: #e2e6ea;
}

/* Bouton sujet suivant */
.btn-suivant {
  background: #0a7cff;
  color: #ffffff;
}

.btn-suivant:hover {
  background: #0866cc;
}

/* ================= MOBILE ================= */
@media (max-width: 600px) {

  .sujet-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-nav {
    width: 100%;
    text-align: center;
  }

  /* Sou mobile, nou retire justify pou pi bon lisibilité */
  .sujet-page p {
    text-align: left;
  }

}

/* ================= TYPOGRAPHIE ================= */
p {
  margin-bottom: 16px;
  line-height: 1.7;
}

ul {
  margin-top: 8px;
  margin-bottom: 16px;
}

li {
  margin-bottom: 6px;
}