/* ==========================================================
   JmdtEditor
   ========================================================== */


/* ==========================================================
   CONTENU COMMUN — WYSIWYG
   Utilisé :
   - dans Tiptap : class="jmdt-editor__content jmdt-content"
   - à l'affichage : class="jmdt-content"
   ========================================================== */

.jmdt-content {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 16px;
    color: inherit;
}

.jmdt-content p,
.jmdt-content h1,
.jmdt-content h2,
.jmdt-content h3,
.jmdt-content h4,
.jmdt-content h5,
.jmdt-content h6,
.jmdt-content li,
.jmdt-content blockquote,
.jmdt-content td,
.jmdt-content th {
    overflow-wrap: anywhere;
}

/* Paragraphes */

.jmdt-content p {
    margin: 0 0 1em;
}


/* Titres */

.jmdt-content h2,
.jmdt-content h3 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}


/* Citations */

.jmdt-content blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid #aaa;
}


/* Listes */

.jmdt-content ul,
.jmdt-content ol {
    padding-left: 2em;
}


/* Nettoyage des flottants */

.jmdt-content::after {
    content: "";
    display: block;
    clear: both;
}


/* ==========================================================
   IMAGES — RENDU COMMUN
   ========================================================== */

.jmdt-content img {
    max-width: 100%;
    height: auto;
}


/* Gauche + texte autour */

.jmdt-content img[data-align="left"] {
    float: left;
    margin: 0.25rem 1rem 0.75rem 0;
}


/* Centre */

.jmdt-content img[data-align="center"] {
    display: block;
    float: none;
    clear: both;
    margin: 1rem auto;
}


/* Droite + texte autour */

.jmdt-content img[data-align="right"] {
    float: right;
    margin: 0.25rem 0 0.75rem 1rem;
}


/* Inline */

.jmdt-content img[data-align="inline"] {
    display: inline-block;
    float: none;
    margin: 0 0.25rem;
    vertical-align: middle;
}


/* ==========================================================
   TABLEAUX — RENDU COMMUN
   ========================================================== */

.jmdt-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}


.jmdt-content th,
.jmdt-content td {
    min-width: 60px;
    padding: 8px;
    border: 1px solid #aaa;
    vertical-align: top;
}


.jmdt-content th {
    font-weight: 600;
    background: rgba(128, 128, 128, 0.12);
}


/* ==========================================================
   YOUTUBE — RENDU COMMUN
   ========================================================== */

.jmdt-content [data-youtube-video] {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 1rem auto;
    aspect-ratio: 16 / 9;
}


.jmdt-content [data-youtube-video] iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================
   CONTENEUR ÉDITEUR
   ========================================================== */

.jmdt-editor {
    border: 1px solid #aaa;
    border-radius: 6px;
    overflow: visible;
    background: var(--bg, #fff);
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.jmdt-editor__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px;
    border-bottom: 1px solid #aaa;
    background: rgba(128, 128, 128, 0.08);
}


.jmdt-editor__group {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    gap: 2px;
    padding-right: 6px;
    border-right: 1px solid rgba(128, 128, 128, 0.3);
}


.jmdt-editor__group:has(+ .jmdt-editor__break),
.jmdt-editor__group:last-child {
    padding-right: 0;
    border-right: 0;
}


.jmdt-editor__toolbar button {
    flex: 0 0 auto;
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: inherit;
    background: transparent;
    cursor: pointer;
}


.jmdt-editor__toolbar button:hover {
    background: rgba(128, 128, 128, 0.15);
}


.jmdt-editor__toolbar button.is-active {
    border-color: currentColor;
    background: rgba(128, 128, 128, 0.22);
}


.jmdt-editor__toolbar button:disabled {
    opacity: 0.35;
    cursor: default;
}


/* ==========================================================
   ZONE D'ÉDITION — UNIQUEMENT TIPTAP
   ========================================================== */

.jmdt-editor__editor {
    min-height: 300px;
}


.jmdt-editor__content {
    min-height: 300px;
    outline: none;
}


/* ==========================================================
   IMAGE REDIMENSIONNABLE TIPTAP
   ========================================================== */

.jmdt-editor__content [data-resize-container] {
    display: flex;
    max-width: 100%;
}


.jmdt-editor__content [data-resize-wrapper] {
    position: relative;
}


/*
 * Dans l'éditeur, l'alignement est porté par le container
 * Tiptap. On neutralise donc l'image elle-même pour éviter
 * un double float / double margin avec les règles communes.
 */

.jmdt-editor__content [data-resize-wrapper]>img[data-align] {
    display: block;
    float: none;
    margin: 0;
}


/* Gauche */

.jmdt-editor__content [data-resize-container]:has(> [data-resize-wrapper] > img[data-align="left"]) {
    float: left;
    width: fit-content;
    max-width: 100%;
    margin: 0.25rem 1rem 0.75rem 0;
    justify-content: flex-start;
}


/* Centre */

.jmdt-editor__content [data-resize-container]:has(> [data-resize-wrapper] > img[data-align="center"]) {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
    justify-content: center;
}


/* Droite */

.jmdt-editor__content [data-resize-container]:has(> [data-resize-wrapper] > img[data-align="right"]) {
    float: right;
    width: fit-content;
    max-width: 100%;
    margin: 0.25rem 0 0.75rem 1rem;
    justify-content: flex-end;
}


/* Inline */

.jmdt-editor__content [data-resize-container]:has(> [data-resize-wrapper] > img[data-align="inline"]) {
    display: inline-flex;
    float: none;
    width: fit-content;
    max-width: 100%;
    margin: 0 0.25rem;
    vertical-align: middle;
    justify-content: flex-start;
}


/* ==========================================================
   ÉTAT RESIZE TIPTAP
   ========================================================== */

.jmdt-editor__content [data-resize-state]:has(img[data-align="left"]) {
    float: left;
    width: fit-content;
    max-width: 100%;
    margin: 0.25rem 1rem 0.75rem 0;
    justify-content: flex-start;
}


.jmdt-editor__content [data-resize-state]:has(img[data-align="center"]) {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
    justify-content: center;
}


.jmdt-editor__content [data-resize-state]:has(img[data-align="right"]) {
    float: right;
    width: fit-content;
    max-width: 100%;
    margin: 0.25rem 0 0.75rem 1rem;
    justify-content: flex-end;
}


.jmdt-editor__content [data-resize-state]:has(img[data-align="inline"]) {
    display: inline-flex;
    float: none;
    width: fit-content;
    max-width: 100%;
    margin: 0 0.25rem;
    vertical-align: middle;
    justify-content: flex-start;
}


/* ==========================================================
   POIGNÉES DE RESIZE
   ========================================================== */

.jmdt-editor__content [data-resize-handle] {
    position: absolute;
    z-index: 10;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #333;
    opacity: 0;
    pointer-events: none;
}


.jmdt-editor__content [data-resize-container].ProseMirror-selectednode [data-resize-handle],

.jmdt-editor__content [data-resize-container]:has(.ProseMirror-selectednode) [data-resize-handle] {
    opacity: 1;
    pointer-events: auto;
}


.jmdt-editor__content [data-resize-handle="top-left"] {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}


.jmdt-editor__content [data-resize-handle="top-right"] {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}


.jmdt-editor__content [data-resize-handle="bottom-left"] {
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}


.jmdt-editor__content [data-resize-handle="bottom-right"] {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}


.jmdt-editor__content [data-resize-state="resizing"] {
    outline: 1px dashed currentColor;
}


/* ==========================================================
   ÉTATS TABLE TIPTAP
   ========================================================== */

.jmdt-editor__content .selectedCell {
    background: rgba(128, 128, 128, 0.2);
}


/* ==========================================================
   MENUS COULEUR
   ========================================================== */

.jmdt-editor__color-menu {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 32px;
}


.jmdt-editor__color-main {
    position: relative;
    min-width: 30px !important;
    border-radius: 4px 0 0 4px !important;
}


.jmdt-editor__color-label {
    display: block;
    line-height: 18px;
}


.jmdt-editor__color-indicator {
    position: absolute;
    right: 5px;
    bottom: 2px;
    left: 5px;
    height: 3px;
    border-radius: 2px;
    background: var(--color);
}


.jmdt-editor__color-toggle {
    width: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    border-left: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    font-size: 10px;
}


.jmdt-editor__color-popover {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    min-width: 190px;
    padding: 8px;
    border: 1px solid #aaa;
    border-radius: 6px;
    background: var(--bg, #fff);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.18);
}


.jmdt-editor__color-popover[hidden] {
    display: none;
}


.jmdt-editor__color-palette {
    display: grid;
    grid-template-columns:
        repeat(8, 20px);
    gap: 4px;
    margin-bottom: 8px;
}


.jmdt-editor__color-swatch {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 1px solid #999 !important;
    border-radius: 3px !important;
    background: var(--color) !important;
}


.jmdt-editor__color-swatch:hover {
    transform: scale(1.15);
}


.jmdt-editor__color-option {
    display: block;
    width: 100% !important;
    height: auto !important;
    padding: 6px 8px !important;
    text-align: left;
    white-space: nowrap;
}


.jmdt-editor__color-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* ==========================================================
   STATUS
   ========================================================== */

.jmdt-editor__status {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 5px 8px;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    font-size: 0.85rem;
    opacity: 0.7;
}


/* ==========================================================
   SAUT DE LIGNE TOOLBAR
   ========================================================== */

.jmdt-editor__break {
    flex-basis: 100%;
    width: 0;
    height: 0;
}


/* ==========================================================
   BUBBLE MENU
   ========================================================== */

.jmdt-editor__bubble {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 7px;
    background: var(--bg, #fff);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.18);
}


.jmdt-editor__bubble button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}


.jmdt-editor__bubble--table {
    white-space: nowrap;
}


.jmdt-editor__bubble button:hover {
    background: rgba(128, 128, 128, 0.15);
}


.jmdt-editor__bubble button.is-active {
    background: rgba(128, 128, 128, 0.25);
}


.jmdt-editor__bubble-separator {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: rgba(128, 128, 128, 0.35);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

/*
 * On ne modifie plus ici l'alignement des images.
 *
 * width/height enregistrés + data-align gardent donc
 * exactement le même sens dans l'éditeur et à l'affichage.
 *
 * max-width: 100% protège déjà les petits écrans.
 */

@media (max-width: 600px) {

    .jmdt-editor__bubble--table button {
        width: 30px;
        height: 30px;
    }

}

/* ==========================================================
   BLOC DE CODE / LOWLIGHT
   ========================================================== */

.jmdt-content pre.jmdt-code-block,
.jmdt-content pre {
    position: relative;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    overflow: auto;
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 6px;
    color: inherit;
    background: rgba(128, 128, 128, 0.10);
    background: color-mix(in srgb, var(--bg, #fff) 92%, var(--text, currentColor) 8%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    line-height: 1.5;
    tab-size: 2;
}

.jmdt-content pre code {
    display: block;
    min-width: max-content;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    white-space: pre;
}

/* Code inline : reste distinct d'un bloc pre/code. */
.jmdt-content :not(pre)>code {
    padding: 0.12em 0.32em;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.13);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
}

/* Commentaires */
.jmdt-content .hljs-comment,
.jmdt-content .hljs-quote {
    color: #6b7280;
    color: color-mix(in srgb, #6b7280 75%, var(--text, currentColor) 25%);
    font-style: italic;
}

/* Mots-clés / types / littéraux */
.jmdt-content .hljs-keyword,
.jmdt-content .hljs-selector-tag,
.jmdt-content .hljs-literal,
.jmdt-content .hljs-type {
    color: #c026d3;
    color: color-mix(in srgb, #d946ef 80%, var(--text, currentColor) 20%);
}

/* Chaînes / regexp / attributs */
.jmdt-content .hljs-string,
.jmdt-content .hljs-regexp,
.jmdt-content .hljs-attribute,
.jmdt-content .hljs-addition {
    color: #15803d;
    color: color-mix(in srgb, #22c55e 72%, var(--text, currentColor) 28%);
}

/* Nombres / symboles */
.jmdt-content .hljs-number,
.jmdt-content .hljs-symbol,
.jmdt-content .hljs-bullet {
    color: #2563eb;
    color: color-mix(in srgb, #3b82f6 78%, var(--text, currentColor) 22%);
}

/* Fonctions / classes / sélecteurs */
.jmdt-content .hljs-title,
.jmdt-content .hljs-section,
.jmdt-content .hljs-name,
.jmdt-content .hljs-selector-id,
.jmdt-content .hljs-selector-class {
    color: #7c3aed;
    color: color-mix(in srgb, #8b5cf6 78%, var(--text, currentColor) 22%);
}

/* Variables / paramètres */
.jmdt-content .hljs-variable,
.jmdt-content .hljs-template-variable,
.jmdt-content .hljs-params {
    color: #b45309;
    color: color-mix(in srgb, #f59e0b 72%, var(--text, currentColor) 28%);
}

/* Built-ins / meta */
.jmdt-content .hljs-built_in,
.jmdt-content .hljs-builtin-name,
.jmdt-content .hljs-meta {
    color: #0891b2;
    color: color-mix(in srgb, #06b6d4 74%, var(--text, currentColor) 26%);
}

.jmdt-content .hljs-deletion {
    color: #dc2626;
    color: color-mix(in srgb, #ef4444 78%, var(--text, currentColor) 22%);
}

.jmdt-content .hljs-emphasis {
    font-style: italic;
}

.jmdt-content .hljs-strong {
    font-weight: 700;
}


/* ==========================================================
   SÉLECTEUR DE LANGAGE DANS LA TOOLBAR
   ========================================================== */

.jmdt-editor__code-language {
    position: absolute;
    z-index: 40;
    top: calc(100% + 5px);
    left: 34px;
    flex: 0 0 auto;
    width: 118px;
    max-width: 118px;
    height: 32px;
    padding: 4px 26px 4px 7px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 4px;
    color: inherit;
    background: var(--bg, #fff);
    cursor: pointer;
}

.jmdt-editor__code-language:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.jmdt-editor__code-language[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .jmdt-editor__code-language {
        left: 0;
        width: 105px;
        max-width: 105px;
    }
}