/* ═══════════════════════════════════════════════════════════════════════════
   rteStyles.css — Styles du composant éditeur de texte enrichi (RTE)
   À lier dans index.html : <link rel="stylesheet" href="rteStyles.css">
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Conteneur ──────────────────────────────────────────────────────────── */

.rte-container {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rte-container:focus-within {
    border-color: #2da288;
    box-shadow: 0 0 0 2px rgba(45, 162, 136, 0.18);
}


/* ── Barre d'outils ─────────────────────────────────────────────────────── */

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    background: #f4f4f4;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}

.rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: #444;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
    white-space: nowrap;
}

.rte-btn:hover {
    background: #e2e2e2;
    border-color: #bbb;
}

.rte-btn.rte-active {
    background: #d0ede8;
    border-color: #2da288;
    color: #1a7a64;
}

/* Bouton "effacer le format" — style discret */
.rte-remove-fmt {
    font-size: 10px;
    color: #888;
    padding: 0 6px;
}

.rte-remove-fmt:hover {
    color: #c0392b;
    border-color: #c0392b;
    background: #fce8e6;
}

/* Séparateur vertical dans la barre */
.rte-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #d0d0d0;
    margin: 0 3px;
    flex-shrink: 0;
}


/* ── Zone d'édition ─────────────────────────────────────────────────────── */

.rte-editor {
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    padding: 7px 10px;
    outline: none;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Version compacte (champs de réponse) */
.rte-editor.rte-compact {
    min-height: 28px;
    max-height: 120px;
    padding: 5px 8px;
    font-size: 13px;
}

/* Placeholder via CSS ::before */
.rte-editor.rte-is-empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
    display: block;
    /* Éviter que le cursor clignote à droite du placeholder */
    position: absolute;
}

/* Nécessaire pour que le position: absolute du ::before fonctionne */
.rte-editor {
    position: relative;
}

/* Contenu mis en forme dans l'éditeur */
.rte-editor b,
.rte-editor strong { font-weight: bold; }

.rte-editor i,
.rte-editor em     { font-style: italic; }

.rte-editor u      { text-decoration: underline; }

.rte-editor sup    { vertical-align: super; font-size: 0.75em; }
.rte-editor sub    { vertical-align: sub;   font-size: 0.75em; }


/* ── Adaptation aux conteneurs existants ────────────────────────────────── */

/* Quand un RTE remplace un <input> dans un .form-group,
   le label conserve son alignement naturel */
.form-group .rte-container {
    width: 100%;
    box-sizing: border-box;
}

/* Dans les listes d'options (MC / SC), le RTE compact s'étire */
.option-container .rte-container,
.option-container-sc .rte-container {
    flex: 1;
    min-width: 0;
}