/* ======================================================
   OBSYNIAVERSE — CHARTE.CSS
   STYLE TEXTE / LECTURE / OFFICIEL
   ====================================================== */

body{
  margin:0;
  background:#0b0714;
  color:#e5e7eb;
  font-family:Arial, Helvetica, sans-serif;
}

/* ===== LAYOUT ===== */
.layout{
  max-width:1400px;
  margin:0 auto;
  padding:20px;
}

/* ===== CONTENU CHARTE ===== */
.charte{
  max-width:900px;
  margin:0 auto;
  padding:30px 20px 60px;
  line-height:1.7;
}

/* ===== TITRES ===== */
.charte h1{
  font-size:28px;
  margin-bottom:20px;
}

.charte h2{
  margin-top:40px;
  font-size:22px;
  padding-bottom:6px;
  border-bottom:2px solid #1e293b;
}

/* ===== TEXTE ===== */
.charte p{
  margin:10px 0;
  font-size:15px;
  color:#d1d5db;
}

/* ===== BULLES ===== */
.bulle{
  margin:16px 0;
  padding:14px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
}

.bulle.white{
  background:#ffffff;
  color:#000;
}

.bulle.gray{
  background:rgba(255,255,255,.15);
}

.bulle.red{
  background:#7f1d1d;
}

.bulle.blue{
  background:#1e3a8a;
}

.bulle.purple{
  background:#581c87;
}

.bulle.yellow{
  background:#92400e;
}

.bulle.black{
  background:#000;
  color:#fff;
}

/* ===== INLINE CODE ===== */
.code{
  display:inline-block;
  padding:3px 7px;
  border-radius:5px;
  font-family:monospace;
  font-size:13px;
  background:#0f172a;
  color:#e5e7eb;
  margin-left:6px;
}

/* ===== COULEURS PERSONNAGES ===== */
.color-box{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0;
}

.color{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
}

/* ===== LIENS ===== */
a{
  color:#7a4dff;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* ===== MOBILE ===== */
@media (max-width:600px){
  .charte{
    padding:20px 10px 40px;
  }

  .charte h1{
    font-size:22px;
  }

  .charte h2{
    font-size:18px;
  }
}