/* ---- Card Layout ---- */
.card {
  background: linear-gradient(135deg, #2c2315 0%, #47371e 100%);
  border: 2.5px solid #d4ba7f;
  border-radius: 20px;
  box-shadow: 0 8px 32px #1a140d88;
  padding: 44px 36px;
  max-width: 960px;
  margin: 44px auto 38px auto;
  color: #f7ecd4;
  font-family: 'Merriweather', 'MedievalSharp', serif;
  font-size: 1.16em;
  position: relative;
  overflow: hidden;
}

.card:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: 0 0 60px 8px #bfa76a22 inset;
}

.card > * {
  position: relative;
  z-index: 1;
}

/* ---- Headings ---- */
.card h1, .card h2 {
  color: #ffe189;
  font-family: 'MedievalSharp', 'Merriweather', serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px #bfa76a44;
}

.card h1 {
  font-size: 2.2em;
  margin-bottom: 20px;
}

.card h2 {
  font-size: 1.28em;
  margin-top: 32px;
  margin-bottom: 15px;
}

hr {
  border: none;
  border-top: 1.5px solid #bfa76a55;
  margin: 30px 0 30px 0;
}

/* ---- Lists ---- */
.card ol, .card ul {
  margin-left: 27px;
  margin-bottom: 20px;
}

.card ol li, .card ul li {
  margin-bottom: 9px;
  line-height: 1.6;
}

/* ---- Code ---- */
.card code {
  background: #2f2517cc;
  color: #ffe189;
  padding: 2.5px 10px;
  border-radius: 7px;
  font-family: "Fira Mono", "Menlo", "Consolas", "monospace";
  font-size: 1.03em;
  font-weight: 600;
  box-shadow: 0 1px 8px #bfa76a33 inset;
  border: 1px solid #bfa76a33;
}

/* ---- Table ---- */
.grade-comparatif {
  border-collapse: collapse;
  width: 100%;
  min-width: 330px;
  margin: 18px 0 20px 0;
  font-size: 1em;
  font-family: 'Merriweather', serif;
  box-shadow: 0 2px 18px #1a140d22;
  border-radius: 12px;
  overflow: hidden;
}

.grade-comparatif th,
.grade-comparatif td {
  border: 1.5px solid #bfa76a;
  padding: 11px 16px;
  text-align: left;
}

.grade-comparatif th {
  background: linear-gradient(90deg, #2f2517 80%, #bfa76a22 100%);
  color: #ffe189;
  font-size: 1.08em;
  font-family: 'MedievalSharp', 'Merriweather', serif;
  letter-spacing: 0.5px;
}

.grade-comparatif tr:nth-child(even) {
  background: #392f22cc;
}
.grade-comparatif tr:nth-child(odd) {
  background: #433825cc;
}

.grade-comparatif tr:hover {
  background: #bfa76a18;
}

/* ---- Button ---- */
.btn, .btn-primary {
  display: inline-block;
  background: linear-gradient(90deg, #ffe189 60%, #bfa76a 100%);
  color: #433825;
  border-radius: 9px;
  padding: 10px 28px;
  font-family: 'MedievalSharp', 'Merriweather', serif;
  font-size: 1.12em;
  text-decoration: none;
  font-weight: bold;
  margin-top: 22px;
  border: none;
  box-shadow: 0 2px 12px #bfa76a33;
  transition: background .18s, color .18s, transform .13s;
  cursor: pointer;
}
.btn:hover, .btn-primary:hover {
  background: linear-gradient(90deg, #ffe8b0 60%, #ffe189 100%);
  color: #2c2315;
  transform: translateY(-3px) scale(1.03);
}

/* ---- Responsive ---- */
@media (max-width: 950px) {
  .card {
    padding: 16px 4vw;
    max-width: 99vw;
    font-size: 1.01em;
  }
  .grade-comparatif th,
  .grade-comparatif td {
    padding: 7px 4px;
    font-size: 0.97em;
  }
}