/* =========================================================
   🌾 BBCode – Styles globaux + admin éditeur (version clean)
========================================================= */

/* ===== CONTENEUR GLOBAL ===== */

.bbcode-container {
    line-height: 1.6;
    font-size: 15px;
}

/* ===== TEXTE ===== */

.bb-b { font-weight: bold; }
.bb-i { font-style: italic; }
.bb-u { text-decoration: underline; }
.bb-s { text-decoration: line-through; }

/* ===== ALIGNEMENTS ===== */

.bb-left    { text-align: left; }
.bb-center  { text-align: center; font-weight:700; }
.bb-right   { text-align: right; }
.bb-justify { text-align: justify; }

/* ===== COULEUR / POLICE ===== */

.bb-color { font-weight: bold; }
.bb-font  { font-family: inherit; }

/* ===== BLOCS SPÉCIAUX ===== */

.bb-code {
    background:#0f0f0f;
    color:#7CFF7C;
    padding:12px;
    border-radius:8px;
    overflow:auto;
    font-family:Consolas, monospace;
    font-size:14px;
    margin:8px 0;
}

.bb-quote{
    background:#f6ebcf;
    border-left:4px solid #d9b44a;
    padding:12px;
    margin:10px 0;
    border-radius:8px;
    font-style:italic;
}

/* ===== IMAGE ===== */

.bb-img img{
    max-width:100%;
    border-radius:8px;
    margin:4px 0;
    box-shadow:0 0 8px rgba(0,0,0,.4);
}

/* ===== LIEN ===== */

.bb-url{
    color:#7cff4e;
    text-decoration:underline;
}
.bb-url:hover{
    color:#cfff9a;
}

/* ===== SPOILER SIMPLE (non hide) ===== */

.bb-spoiler{
    background:#111;
    color:transparent;
    border-radius:4px;
    padding:6px 8px;
    cursor:pointer;
}
.bb-spoiler:hover{
    color:#fff;
}

/* ===== EFFETS ===== */

.bb-glow{ text-shadow:0 0 6px gold }
.bb-shadow{ text-shadow:2px 2px 3px black }

/* ===== LISTES ===== */

.bb-list{
    padding-left:22px;
    margin:4px 0 8px;
}

/* On limite l’impact au contenu BBCode */
.bbcode-container ul,
.bbcode-container ol{
    margin-left:20px;
}
.bbcode-container li{
    margin:4px 0;
}

/* ===== TABLE ===== */

.bb-table{
    width:100%;
    border-collapse:collapse;
}
.bb-table th,
.bb-table td{
    border:1px solid #555;
    padding:6px;
}

/* ===== VIDEO ===== */

.bb-video iframe,
.bb-video video{
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
}

/* ===== SMILEYS INLINE ===== */

.bb-smiley{
    height:22px;
    width:auto;
    vertical-align:middle;
    margin:0 2px;
}

/* =========================================================
   👁 [HIDE] SPOILER PREMIUM CLAAS – OPTION A
========================================================= */

.bb-hide{
    margin:12px 0;
    border-left:4px solid #9efd38;
    background:linear-gradient(90deg, rgba(158,253,56,.12), rgba(217,180,74,.05));
    padding:10px 12px;
    border-radius:10px;
}

/* summary = barre du spoiler */
.bb-hide summary{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-weight:600;
    color:#3b5312;
    user-select:none;
    list-style:none;          /* enlève le petit triangle du navigateur */
    outline:none;
}

/* enlève la puce par défaut */
.bb-hide summary::-webkit-details-marker{
    display:none;
}

/* icône à gauche : 👁 / 🙈 */
.bb-hide summary::before{
    content:"👁";
    font-size:16px;
}

.bb-hide[open] summary::before{
    content:"🙈";
}

/* contenu interne */
.bb-hide-inner{
    padding-top:8px;
    animation: fadeIn .25s ease;
}

/* Animation ouverture */
@keyframes fadeIn{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:translateY(0)}
}

/* Variante non connecté */

.bb-hide-locked{
    border-left:4px solid #c00;
    background:#330;
    padding:10px;
    border-radius:8px;
    color:#fff;
    font-weight:600;
    text-align:center;
}

/* =========================================================
   🛠️ ADMIN / CONFIG ÉDITEUR
========================================================= */

.bb-admin-list .bb-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    margin:4px 0;
}
.bb-admin-list input[type="checkbox"]{
    margin-right:4px;
}

.bb-code-tag{
    font-family:monospace;
    background:#f7f0d8;
    border-radius:6px;
    padding:2px 6px;
}
.bb-code-label{opacity:.85}

/* Grille */

.bbcode-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:10px;
    margin-top:10px;
}

.bbcode-item{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card-bg);
    font-size:14px;
}

/* Toolbar admin */

.bb-grid-3{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.bb-textarea-config{
    width:100%;
    min-height:170px;
    border-radius:10px;
    border:1px solid #e2d9c1;
    padding:8px;
    font-family:monospace;
    font-size:13px;
}

/* Preview admin */

.bb-preview-bar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.bb-preview-bar select{
    padding:6px 8px;
    border-radius:999px;
    border:1px solid #ddd0a9;
}

.bb-textarea-preview{
    width:100%;
    border-radius:10px;
    border:1px solid #e2d9c1;
    padding:10px;
}

.bb-preview-box{
    min-height:60px;
    padding:10px;
    border-radius:10px;
    border:1px dashed #e2d9c1;
}

/* Boutons */

.btn-small{
    display:inline-block;
    padding:3px 7px;
    border-radius:6px;
    font-size:12px;
    text-decoration:none;
    border:1px solid var(--border);
    margin-right:4px;
}
.btn-small.btn-danger{
    border-color:#c0392b;
    color:#c0392b;
}

.tag{
    display:inline-block;
    padding:3px 7px;
    border-radius:999px;
    font-size:11px;
}
.tag-success{background:#2ecc71;color:#fff}
.tag-muted{background:#ccc;color:#000}

/* Toolbar preview */

.bb-toolbar{
    margin-bottom:8px;
}
.bb-toolbar button{
    padding:6px 10px;
    margin:2px;
    cursor:pointer;
    border-radius:6px;
    border:1px solid #bbb;
}

/* Smileys admin */

.bb-smiley-table .bb-smiley-preview{
    width:22px;
    height:22px;
}
.bb-smiley-actions .btn-admin.small{
    font-size:12px;
    padding:6px 10px;
}
.bb-smiley-form .bb-field{
    margin-bottom:10px;
}
.bb-smiley-form input[type="text"],
.bb-smiley-form input[type="file"]{
    width:100%;
    max-width:320px;
}

/* Notices */

.admin-alert{
    padding:10px 12px;
    border-radius:10px;
}
.admin-alert-info{
    background:#e8f4ff;
    border:1px solid #b9ddff;
}

.bb-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:8px;
    background:#0f120c;
    border-radius:10px;
    margin-bottom:6px;
    border:1px solid #2a2a2a;
}

.bb-toolbar button,
.bb-toolbar select{
    padding:6px 10px;
    background:#1b1f14;
    border:1px solid #9efd38;
    color:#9efd38;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}

.bb-toolbar button:hover,
.bb-toolbar select:hover{
    background:#9efd38;
    color:#000;
}

.bb-toolbar select{
    appearance:none;
}

.bb-toolbar .sep{
    width:6px;
}