/* =======================
   IMPORT ORBITRON
======================= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* =======================
   GLOBAL
======================= */
body {
  font-family: 'Orbitron', sans-serif;
  color: #00f2ff;
  background-color: #0a0a0a;
  margin: 0;
  padding: 0;
}

/* =======================
   CONTENEUR PRINCIPAL
======================= */
.news-container {
    width: 85%;
    max-width: 850px;
    min-width: 300px;
    margin: 20px auto;
    padding: 25px;
    background: linear-gradient(to bottom right, #111820, #1a1f2a);
    border: 2px solid #00cfff;
    border-radius: 12px;
    box-sizing: border-box;
}

/* =======================
   TITRES
======================= */
h1, h2 {
    background: linear-gradient(270deg, #00f2ff, #003366, #001a33);
    background-size: 600% 600%;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 12px;
    border: 2px solid #00cfff;
    display: inline-block;
    margin-bottom: 20px;
    animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

h3 {
    background: #0d1117;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    color: #00f2ff;
}

/* =======================
   META (date + auteur + vues)
======================= */
.news-container > div {
  font-size: 0.9em;
  margin-bottom: 20px;
  color: #cccccc;
}

/* =======================
   CONTENU
======================= */
.news-content {
  width: 100%;
  box-sizing: border-box;
  line-height: 1.7;
  font-size: 1em;
  overflow-wrap: break-word;
}

.news-content img {
  max-width: 100%;
  border-radius: 10px;
  margin: 15px 0;
  border: 1px solid #00cfff;
}

.news-content a {
  color: #00cfff;
  text-decoration: none;
  border-bottom: 1px solid #00cfff;
  transition: 0.3s;
}
.news-content a:hover {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}

.content {
    background-color: #000000; /* fond vert foncé simple */
    border: 2px solid #00cfff; /* bordure néon bleue */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.news-frame:hover {
    transform: scale(1.02); /* léger effet au survol */
}
.seo-bg {
    display: none; /* invisible mais indexé */
}
/* =======================
   CADRE AUTOUR DU CONTENU (SEO-friendly)
======================= */

/* =======================
   CADRE AUTOUR DU CONTENU
======================= */

.news-frame {
    background-color: #000000;
    border: 2px solid #00cfff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.news-frame:hover {
    transform: scale(1.02);
}

.seo-bg {
    display: none; /* invisible mais indexé */
}

/* =======================
   COMMENTAIRES
======================= */
.comment, .reponse {
    background-color: #000000;  /* vert très foncé */
    border: 2px solid #00cfff;
    border-radius: 12px;
    padding: 12px 15px;
    margin-top: 15px;
    color: #d0eaff;
    box-shadow: 0 0 15px #00f2ff, inset 0 0 5px #00cfff;
}

.reponse {
    margin-left: 20px;
    border-left: 3px solid #00cfff;
    border-radius: 8px;
    box-shadow: 0 0 10px #00f2ff inset;
}
/* =======================
   TEXTE DES COMMENTAIRES (appliqué au conteneur)
======================= */
.comment-text {
    background-color: #000000;  /* vert très foncé */
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.6;
    margin-top: 8px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4), inset 0 0 5px rgba(0, 255, 136, 0.2);
}

/* Si tu veux que tous les éléments à l'intérieur héritent la couleur */
.comment-text,
.comment-text p,
.comment-text span,
.comment-text a {

}


/* =======================
   FORMULAIRES
======================= */
form {
    margin-top: 12px;
}

input[type="text"],
input[type="email"] {
    width: 100%;
    background: #0f1a28;
    border: 1px solid #00cfff;
    border-radius: 8px;
    padding: 6px;
    margin-top: 6px;
    color: #00f2ff;
    font-family: 'Orbitron', sans-serif;
    box-sizing: border-box;
}

button {
    margin-top: 6px;
    padding: 6px 12px;
    background: #00cfff;
    border: 1px solid #0099cc;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
button:hover {
    background: #0099cc;
    color: #fff;
}

/* =======================
   WYSIWYG EDITOR
======================= */
.wysiwyg-editor {
    min-height: 80px;
    border: 1px solid #00cfff;
    border-radius: 8px;
    padding: 6px;
    background: #0f1a28;
    color: #00f2ff;
    font-family: 'Orbitron', sans-serif;
    overflow-y: auto;
}

/* =======================
   TOOLBAR
======================= */
.toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.toolbar button {
    background: #00cfff;
    border: 1px solid #0099cc;
    color: #0a0a0a;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.toolbar button:hover {
    background: #0099cc;
    color: #fff;
}
.toolbar select {
    background: #0f1a28;
    border: 1px solid #00cfff;
    color: #00f2ff;
    border-radius: 6px;
    padding: 4px;
}

/* =======================
   EMOJIS
======================= */
.emoji-toggle {
    cursor: pointer;
    font-size: 1.6em;
    user-select: none;
    color: #00f2ff;
}


.emoji-container {
    display: none;
    position: absolute;
    background: #0f1a28;
    border: 1px solid #ccc;
    padding: 5px;
    max-width: 200px;
    flex-wrap: wrap;
    gap: 5px;
    z-index: 1000;
}

.emoji-container.active {
    display: flex;
}

.emoji-container .emoji {
    cursor: pointer;
    font-size: 1.4em;
    transition: transform 0.15s, color 0.15s;
}
.emoji-container .emoji:hover {
    transform: scale(1.3);
    color: #00ffff;
}

/* =======================
   SUCCESS MESSAGE
======================= */
.success-message {
  text-align: center;
  margin-top: 15px;
  color: #00ff88;
  font-weight: bold;
}

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 768px) {
  .news-container { width: 95%; padding: 15px; border-radius: 12px; }
  h2 { font-size: 1.3em; }
  input, button, .wysiwyg-editor { font-size: 0.9em; }
  .reponse { margin-left: 10px; padding: 8px; }
}

/* =======================
   LISTES DANS LES NEWS
======================= */
.news-content ul,
.news-content ol {
    padding-left: 40px;       /* indentation des listes */
    margin-bottom: 1em;       /* espace entre les listes */
    color: #00f2ff;           /* couleur du texte / puces */
}

.news-content ul {
    list-style-type: disc;    /* puces rondes */
}

.news-content ol {
    list-style-type: decimal; /* numéros pour listes ordonnées */
}

.news-content li {
    margin-bottom: 0.5em;     /* espace entre items */
}

/* Listes imbriquées */
.news-content ul ul,
.news-content ol ol,
.news-content ul ol,
.news-content ol ul {
    padding-left: 20px;       /* indentation supplémentaire pour sous-listes */
}