@layer tokens {
    /* ========================================================
       PHILOSOPHIE GENERALE — STYLES
       Thème light par défaut, dark optionnel via [data-essay-dark]
       ======================================================== */
    /* ===== 1. VARIABLES ===== */
    :root {
        --fields-row-height: 40px;
        --fields-column-width: 30px;
        --essay-masthead-side-width: 30px;
        /* Thème light (défaut) — utilise les variables globales gbl_styles */
        --essay-ink: var(--raw-color-black-90);
        --essay-muted: var(--raw-color-black-60);
        --essay-faint: var(--raw-color-black-50);
        /* CLD — lightness/chroma constants (light) */
        --fields-lightness: 0.72;
        --fields-chroma: .11;
        --fields-lightness-hover: 0.58;
        --fields-chroma-hover: 0.098;
    }

    @property --chat-gradient-angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    /* ===== 13. RESPONSIVE ===== */
    @media (max-width: 800px) {
        :root {
            --fields-column-width: 25px;

        }
    }

    @media (max-width: 600px) {
        :root {
            --fields-column-width: 20px;

        }
    }
}

@layer components {
    /* Thème dark */
    [data-essay-dark] {
        --essay-ink: var(--raw-color-white-90);
        --essay-muted: var(--raw-color-white-60);
        --essay-faint: var(--raw-color-white-50);
        /* CLD — lightness/chroma constants (dark) */
        --fields-lightness: 0.75;
        --fields-chroma: 0.08;
        --fields-lightness-hover: 0.70;
        --fields-chroma-hover: 0.11;
    }

    /* ===== 2. CLD COULEURS (champs lexicaux — dynamiques via ancrage_ordre) ===== */
    /* La teinte H (--cld-hue) est définie en JS par mélange pondéré des 4 ordres racinaires.
       La couleur finale est composée en CSS via oklch(L C H). */
    .fields-column {
        --fields-hue: 0;
    }

    /* ===== 3. SECTIONS & CONTAINERS ===== */
    .essay-head-extra {
        position: absolute;
        top: 0;
        width: 100%;
        height: 200px;
        z-index: -1;
    }

    .essay-head, .essay {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .essay-head {
        z-index: 10;
        padding: 30px 0 0 0;
    }

    .essay {
        z-index: 1;
        min-height: 60vh;
        padding: 30px 0 60px 0;
    }

    .essay-head-content {
        z-index: 20;
        max-width: 1200px;
        width: 80vw;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .essay-content {
        max-width: 900px;
        width: 80vw;
        padding: 40px 50px;
    }

    /* ===== 4. SELECT & THEME TOGGLE ===== */
    .essay-head-tools {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
    }

    /* Flèche du select */

    /* Flèche orientée vers le haut quand ouvert */

    /* Items du select et élément sélectionné — padding / texte */

    /* Container des options (dropdown) */

    /* Scrollbar personnalisée */

    .essay-theme {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* ===== 5. FORMAT SWITCH ===== */
    .essay-head-fold {
        width: var(--essay-masthead-side-width);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 10px;
    }

    .essay-fold {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== 6. HEADER CONTAINER (main column) ===== */
    .essay-head-rows {
        width: calc(100% - var(--essay-masthead-side-width));
        display: flex;
        flex-direction: column;
    }

    /* ===== 7. LINE 2 : Titre / cycle / indices ===== */
    .essay-masthead {
        width: 100%;
        display: flex;
        align-items: stretch;
    }

    .essay-masthead-side {
        width: var(--fields-column-width);
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 8px 3px;
    }

    .essay-masthead-column {
        width: 2px;
        height: 100%;
    }

    .essay-masthead-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 14px 0;
        gap: 6px;
    }

    .essay-masthead-cycles,
    .essay-masthead-titles,
    .essay-masthead-formal,
    .essay-masthead-scores {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Row 1 : Cycle */
    .essay-masthead-cycles {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    /* Row 2 : Titre principal + date */
    .essay-masthead-titles {
        display: flex;
        align-items: baseline;
        gap: 16px;
    }

    /* Row 4 : Indices */
    .essay-masthead-scores {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
    }

    .essay-score {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .essay-score-badge {
        min-width: 30px;
    }

    /* Label fixe (hors scroll) */
    .essay-mechanism-label, .essay-tensions-label {
        flex-shrink: 0;
    }

    /* Zone scrollable avec clic-glissé + inertie */
    .essay-mechanism-viewport, .essay-tensions-viewport {
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 14px;
    }

    .essay-mechanism-viewport::-webkit-scrollbar, .essay-tensions-viewport::-webkit-scrollbar {
        display: none;
    }

    .essay-mechanism-content, .essay-tensions-content {
        display: inline-flex;
        align-items: center;
        gap: 0;
    }

    .essay-mechanism-arrow {
        margin: 0 6px;
        flex-shrink: 0;
    }

    .essay-mechanism-arrow--large {
        margin: 0 10px;
        flex-shrink: 0;
    }

    /* Tensions internes */
    .essay-tensions-group {
        display: inline-flex;
        align-items: center;
    }

    .essay-tensions-divider {
        margin: 0 6px;
    }

    .essay-tensions-group-divider {
        margin: 0 14px;
    }

    /* Chevron du repli de l'en-tête, au dessin du dépliant canonique : ouvert vers le bas, replié vers la droite */
    .essay-arrow {
        display: block;
        flex-shrink: 0;
        width: 6.4px;
        height: 6.4px;
        transform: translateY(-25%) rotate(45deg);
    }

    .essay-fold[data-essay-collapsed] .essay-arrow {
        transform: rotate(-45deg);
    }

    /* --- Lexique : contrôles (tri + slider) --- */
    .fields-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 8px 14px;
        gap: 8px 12px;
    }

    .fields-sort {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .fields-range {
        display: flex;
        align-items: center;
        flex: 1 1 140px;
        min-width: 100px;
    }

    /* --- Lexique : colonnes --- */
    .fields-viewport {
        overflow: hidden;
        position: relative;
    }

    .fields-columns {
        display: flex;
        gap: 0;
    }

    .fields-column {
        flex: 0 0 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    /* Animation type 3 : instantané — .fields-column-words et son contenu n'ont aucune animation */
    .fields-column-head {
        padding: 8px 12px;
    }

    .fields-column-caption {
        padding: 4px 12px 6px;
    }

    .fields-column-words {
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* --- Lexique : en-tête niveau (groupement par nom_niveau) --- */
    .fields-level-head {
        padding: 0px 2px 0px;
    }

    .fields-level-head:first-child {
        margin-top: 0;
    }

    /* --- Lexique : mots (boutons) --- */
    .fields-word {
        position: relative;
    }

    .fields-word-button {
        display: block;
        width: 100%;
        padding: 4px 10px;
    }

    .fields-word-button:hover {
        transform: translateX(2px);
    }

    /* La position est calculée en JS via getBoundingClientRect() au hover */

    /* ===== 10. COLLAPSIBLE ANIMATION (format switch) ===== */
    .essay-mechanism, .essay-tensions, .essay-fields {
        overflow: hidden;
    }

    /* ===== 8. LINES 3 & 4 : Mécanisme / Tensions (label fixe + zone scrollable) ===== */
    .essay-mechanism, .essay-tensions {
        width: 100%;
        height: var(--fields-row-height);
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-left: 14px;
    }

    /* ===== 9. LINE 5 : Accordion (Phase 2) ===== */
    .essay-fields {
        width: 100%;
    }

    /* --- État replié --- */
    [data-essay-collapsed] .essay-mechanism,
    [data-essay-collapsed] .essay-tensions,
    [data-essay-collapsed] .essay-fields {
        height: 0;
    }

    [data-essay-collapsed] .essay-masthead-scores {
        max-height: 0 !important;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    /* Changement 2 : colonnes latérales réduites à 0 */
    [data-essay-collapsed] .essay-masthead-side {
        width: 0;
        padding: 0;
        overflow: hidden;
    }

    .essay-content p {
        margin: 0 0 14px 0;
    }

    .essay-content h2 {
        margin: 32px 0 12px 0;
    }

    .essay-content h3 {
        margin: 24px 0 8px 0;
    }

    /* ===== 12. CHATBOT ===== */
    /* --- A. Icône sparkle IA --- */
    .chat-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-icon .chat-sparkle {
        transform-origin: 12px 10px;
    }

    .chat-icon .chat-sparkle-orbit--first {
        transform-origin: 18.5px 6px;
    }

    .chat-icon .chat-sparkle-orbit--second {
        transform-origin: 5.5px 18.4px;
    }

    .chat-send {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-send:not(:disabled):hover {
        transform: scale(1.08);
    }

    .chat-send:disabled {
        transform: scale(0.92);
    }

    /* --- B. Styles texte --- */
    /* Mode 1 : question petite, réponse grande, sans bulles */
    .chat-message {
        transform: translateY(10px);
    }

    .chat-message[data-bubble-role="user"] {
        margin-top: 8px;
    }

    .chat-message[data-bubble-role="assistant"] {
        margin-bottom: 4px;
    }

    /* Éléments Markdown dans les réponses IA */
    .chat-message[data-bubble-role="assistant"] p {
        margin: 0 0 0.55em 0;
    }

    .chat-message[data-bubble-role="assistant"] p:last-child {
        margin-bottom: 0;
    }

    .chat-heading {
        margin: 0.8em 0 0.3em 0;
    }

    .chat-bullets {
        margin: 0.3em 0 0.55em 0;
        padding-left: 1.3em;
    }

    .chat-bullets li {
        margin-bottom: 0.2em;
    }

    /* Mode 2 (discussion) : question dans bulle à droite, réponse inchangée */
    .chat-conversation[data-chat-discussion] .chat-messages .chat-message[data-bubble-role="user"] {
        margin-top: 12px;
    }

    /* Actions : Poursuivre = pill rempli accent, Clôturer = discret */
    .chat-actions {
        display: none;
        justify-content: flex-end;
        gap: 8px;
        padding: 10px 0 4px 0;
        margin-top: auto;
        transform: translateY(6px);
    }

    .chat-action {
        margin-right: 10px;
        margin-bottom: 4px;
        margin-top: 2px;
    }

    .chat-actions[data-chat-visible] {
        display: flex;
        transform: translateY(0);
    }

    /* Toggle continue vs close */
    .chat-actions .chat-continue {
        display: flex;
    }

    .chat-actions .chat-close {
        display: none;
    }

    .chat-actions[data-chat-discussion] .chat-continue {
        display: none;
    }

    .chat-actions[data-chat-discussion] .chat-close {
        display: flex;
    }

    /* Message "Connexion requise" */
    .chat-login {
        margin-right: auto;
        align-self: center;
        padding-left: 10px;
        transform: translateX(-6px);
    }

    .chat-login[data-chat-visible] {
        transform: translateX(0);
    }

    .chat-typing-dot {
        width: 5px;
        height: 5px;
    }

    .chat-suggestion {
        position: relative;
        padding: 5px 14px;
        z-index: 1;
    }

    /* Pseudo-élément bordure dégradée animée (hover) — identique input */
    .chat-suggestion::before {
        position: absolute;
        inset: -2px;
        padding: 2px;
        z-index: -1;
    }

    /* --- D. Styles structurels --- */
    /* Overlay blur */
    .chat-scrim {
        position: fixed;
        inset: 0;
        z-index: 2000;
    }

    /* Container principal */
    .chat {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        width: min(600px, 88vw);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .chat[data-chat-hidden] {
        transform: translateX(-50%) translateY(24px);
    }

    /* Zone de conversation — liquid glass, contient le wrapper scroll et les actions */
    .chat-conversation {
        display: none;
        flex-direction: column;
        gap: 0;
        margin-bottom: 6px;
        transform: translateY(12px);
    }

    .chat-conversation[data-chat-visible] {
        display: flex;
        transform: translateY(0);
    }

    /* Wrapper scrollable interne */
    .chat-messages {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 80vh;
        overflow-y: auto;
        padding: 16px 18px 8px 18px;
    }

    /* Scrollbar webkit sans flèches */
    .chat-messages::-webkit-scrollbar {
        width: 4px;
    }

    .chat-messages::-webkit-scrollbar-button {
        display: none;
    }

    /* Typing indicator */
    .chat-typing {
        display: inline-flex;
        gap: 5px;
        padding: 12px 18px;
        align-self: flex-start;
    }

    /* Suggestions */
    .chat-suggestions {
        display: none;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 8px 8px 8px;
        justify-content: flex-start;
        transform: translateY(8px);
    }

    .chat-suggestions[data-chat-open] {
        display: flex;
        transform: translateY(0);
    }

    /* Input row */
    .chat-compose {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 6px 6px 14px;
        z-index: 1;
    }

    /* Pseudo-élément pour la bordure dégradée animée (hover) */
    .chat-compose::before {
        position: absolute;
        inset: -2px;
        padding: 2px;
        z-index: -1;
    }

    .chat-input {
        flex: 1;
        padding: 6px 4px;
        min-width: 0;
    }

    /* Avertissement */
    .chat-warning {
        display: none;
        padding: 5px 12px 0 12px;
    }

    .chat-warning[data-chat-open] {
        display: block;
    }

    /* Responsive chatbot */
    @media (max-width: 600px) {
        .chat {
            width: calc(100vw - 20px);
            bottom: 12px;

        }
        .chat-conversation {
            max-height: 38vh;

        }
    }

    @media (max-width: 800px) {
        .essay-masthead-cycles {
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;

        }
        .essay-masthead-column--wide {
            display: none;

        }
        .essay-head-content, .essay-content {
            width: 95vw;

        }
        .essay-content {
            padding: 28px 24px;

        }
    }

    @media (max-width: 600px) {
        .essay-masthead-column--medium {
            display: none;

        }
        .essay-masthead-titles {
            flex-direction: column;
            gap: 4px;

        }
        .essay-masthead-scores {
            gap: 10px;

        }
        .essay-score {
            flex-direction: column;

        }
    }

    .essay-head-extra {
        opacity: .8;
        background-color: var(--essay-canvas);
    }

    .essay-head, .essay {
        background: var(--essay-canvas);
    }

    .essay-content {
        background-color: var(--essay-surface);
        border: 1px solid var(--essay-line);
        border-radius: var(--local-radius-essay-content);
    }

    .essay-head-tools {
        background-color: var(--essay-surface);
        border: 1px solid var(--essay-line);
        border-bottom-color: var(--essay-muted);
        border-radius: var(--local-radius-essay-head-tools);
    }

    /* Élément sélectionné visible */

    /* Survol des options */

    /* Option sélectionnée */

    /* Options désactivées */

    .essay-theme {
        background: transparent;
        border: 1px solid var(--essay-line);
        border-radius: 50%;
    }

    .essay-theme:hover {
        border-color: var(--essay-color);
        background-color: var(--essay-line);
    }

    .essay-fold {
        background: transparent;
        border: 1px solid var(--essay-line);
        border-radius: var(--local-radius-essay-fold);
    }

    .essay-fold:hover {
        border-color: var(--essay-color);
    }

    .essay-masthead-side {
        background-color: var(--essay-raised);
        border-top: 2px solid var(--essay-muted);
        border-bottom: 2px solid var(--essay-muted);
    }

    .essay-masthead-column {
        border-radius: var(--local-radius-essay-masthead-column);
        background-color: var(--essay-muted);
    }

    .essay-masthead-main {
        background-color: var(--essay-raised);
    }

    /* Couleurs d'indices (niveaux fondamentalité 0-5) */

    /* Couleurs d'indices (niveaux abstraction 6-10, complémentaires) */

    .essay-mechanism, .essay-tensions {
        border-top: 1px solid var(--essay-line);
    }

    .essay-mechanism {
        border-color: var(--essay-muted);
    }

    .essay-mechanism-viewport, .essay-tensions-viewport {
        scrollbar-width: none;
    }

    .essay-fields {
        border-top: 1px solid var(--essay-line);
    }

    .essay-arrow {
        border-bottom: 2px solid var(--essay-muted);
        border-right: 2px solid var(--essay-muted);
    }

    .fields-controls {
        border-bottom: 1px solid var(--essay-line);
    }

    .fields-column {
        border-right: 1px solid var(--essay-line);
    }

    .fields-column:last-child {
        border-right: none;
    }

    .fields-column-head {
        border-bottom: 2px solid var(--fields-color);
    }

    .fields-word-button {
        border: 1px solid var(--fields-color);
        border-radius: var(--local-radius-essay-fields-word-button);
        background: var(--fields-color-soft);
    }

    .fields-word-button:hover {
        background-color: var(--fields-color-hover);
        border-color: var(--fields-color-hover);
    }

    [data-essay-collapsed] .essay-mechanism,
    [data-essay-collapsed] .essay-tensions,
    [data-essay-collapsed] .essay-fields {
        opacity: 0;
        filter: blur(4px);
        border-top: none;
    }

    [data-essay-collapsed] .essay-masthead-scores {
        opacity: 0;
        filter: blur(4px);
    }

    /* Changement 1 : fond line2-main → philo-bg */
    [data-essay-collapsed] .essay-masthead-main {
        background-color: var(--essay-canvas);
    }

    [data-essay-collapsed] .essay-masthead-side {
        border-color: transparent;
    }

    /* Changement 3 : format-switch-btn fond + icône */
    [data-essay-collapsed] .essay-fold {
        background-color: var(--essay-muted);
    }

    [data-essay-collapsed] .essay-fold .essay-arrow {
        border-color: var(--essay-raised);
    }

    /* Changement 4 : header-container-select arrondi complet + border-bottom neutre */
    [data-essay-collapsed] .essay-head-tools {
        border-radius: var(--local-radius-essay-fold);
        border-bottom-color: var(--essay-line);
    }

    .chat-icon {
        opacity: 0.55;
    }

    .chat-send {
        border-radius: 50%;
        border: none;
        background: var(--essay-faint);
    }

    .chat-send:not(:disabled):hover {
        background: var(--essay-color-hover);
    }

    .chat-send:disabled {
        opacity: 0.25;
    }

    .chat-message {
        opacity: 0;
    }

    .chat-actions {
        opacity: 0;
    }

    .chat-actions[data-chat-visible] {
        opacity: 1;
    }

    .chat-login {
        opacity: 0;
    }

    .chat-login[data-chat-visible] {
        opacity: 1;
    }

    .chat-typing-dot {
        border-radius: 50%;
        background: var(--essay-faint);
    }

    .chat-suggestion {
        border-radius: var(--local-radius-essay-chat-suggestion);
        border: 1px solid transparent;
        background: var(--raw-color-white-90);
    }

    .chat-suggestion::before {
        border-radius: var(--local-radius-essay-chat-suggestion);
        background: conic-gradient( from var(--chat-gradient-angle, 0deg), var(--local-color-decor-essay-chat-suggestion-surface), var(--local-color-decor-essay-chat-suggestion-surface-2), var(--local-color-decor-essay-chat-suggestion-surface-3), var(--local-color-decor-essay-chat-suggestion-surface-2), var(--local-color-decor-essay-chat-suggestion-surface), var(--local-color-decor-essay-chat-suggestion-surface-4), var(--local-color-decor-essay-chat-suggestion-surface-5), var(--local-color-decor-essay-chat-suggestion-surface) );
        -webkit-mask: linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0) content-box, linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0) content-box, linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0);
        mask-composite: exclude;
        opacity: 0;
    }

    .chat-suggestion:hover::before {
        opacity: 1;
    }

    .chat-suggestion:hover {
        background: var(--raw-color-white-90);
    }

    .chat-input::placeholder {
        opacity: 0.6;
    }

    /* --- C. Styles secondaires --- */
    /* Dark mode chatbot — liquid glass sombre */
    .chat-scrim[data-essay-dark] {
        background: var(--local-color-decor-essay-chat-scrim-surface);
    }

    .chat[data-essay-dark] .chat-conversation, .chat[data-essay-dark] .chat-compose {
        background: var(--local-color-decor-essay-chat-conversation-surface);
        border-color: var(--local-color-decor-essay-chat-conversation-line);
        border-bottom-color: var(--local-color-decor-essay-chat-conversation-line-2);
        box-shadow: var(--local-shadow-essay-chat-conversation);
        backdrop-filter: blur(22px) saturate(1.4) contrast(1.08) brightness(0.92);
        -webkit-backdrop-filter: blur(22px) saturate(1.4) contrast(1.08) brightness(0.92);
    }

    .chat[data-essay-dark] .chat-suggestion {
        background: var(--local-color-decor-essay-chat-suggestion-surface-6);
    }

    .chat[data-essay-dark] .chat-suggestion:hover {
        background: var(--local-color-decor-essay-chat-suggestion-hover-surface);
    }

    .chat-scrim {
        background: var(--local-color-decor-essay-chat-scrim-surface-2);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        opacity: 0;
    }

    .chat-scrim[data-chat-open] {
        opacity: 1;
    }

    .chat[data-chat-hidden] {
        opacity: 0;
    }

    .chat-conversation {
        /* Liquid glass */
        background: var(--local-color-decor-essay-chat-conversation-surface-2);
        border: 1px solid var(--local-color-decor-essay-chat-conversation-line-3);
        border-bottom-color: var(--local-color-decor-essay-button-style-frost-hover-line);
        border-radius: var(--local-radius-essay-chat-conversation);
        box-shadow: var(--local-shadow-essay-chat-conversation-2);
        backdrop-filter: blur(18px) saturate(1.5) contrast(1.04) brightness(1.04);
        -webkit-backdrop-filter: blur(18px) saturate(1.5) contrast(1.04) brightness(1.04);
        opacity: 0;
    }

    .chat-conversation[data-chat-visible] {
        opacity: 1;
    }

    .chat-messages::-webkit-scrollbar {
        border-radius: var(--local-radius-essay-fields-word-button);
    }

    .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-messages::-webkit-scrollbar-thumb {
        background: var(--essay-muted);
        border-radius: var(--local-radius-essay-chat-messages);
    }

    .chat-suggestions {
        opacity: 0;
    }

    .chat-suggestions[data-chat-open] {
        opacity: 1;
    }

    .chat-compose {
        /* Liquid glass */
        background: var(--local-color-decor-essay-chat-conversation-surface-2);
        border: 1px solid var(--local-color-decor-essay-chat-conversation-line-3);
        border-bottom-color: var(--local-color-decor-essay-button-style-frost-hover-line);
        border-radius: var(--local-radius-essay-chat-suggestion);
        box-shadow: var(--local-shadow-essay-chat-conversation-2);
        backdrop-filter: blur(18px) saturate(1.5) contrast(1.04) brightness(1.04);
        -webkit-backdrop-filter: blur(18px) saturate(1.5) contrast(1.04) brightness(1.04);
    }

    .chat-compose::before {
        border-radius: var(--local-radius-essay-chat-suggestion);
        background: conic-gradient( from var(--chat-gradient-angle, 0deg), var(--local-color-decor-essay-chat-suggestion-surface), var(--local-color-decor-essay-chat-suggestion-surface-2), var(--local-color-decor-essay-chat-suggestion-surface-3), var(--local-color-decor-essay-chat-suggestion-surface-2), var(--local-color-decor-essay-chat-suggestion-surface), var(--local-color-decor-essay-chat-suggestion-surface-4), var(--local-color-decor-essay-chat-suggestion-surface-5), var(--local-color-decor-essay-chat-suggestion-surface) );
        -webkit-mask: linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0) content-box, linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0) content-box, linear-gradient(var(--local-color-decor-essay-chat-suggestion-mask) 0 0);
        mask-composite: exclude;
        opacity: 0;
    }

    .chat-compose:hover::before {
        opacity: 1;
    }

    .chat-input {
        border: none;
        background: transparent;
    }

    .chat-warning {
        opacity: 0.6;
    }

    /* État repos (chat fermé) */
    .chat:not([data-chat-open]) .chat-compose {
        opacity: 0.95;
    }

    .chat:not([data-chat-open]) .chat-compose:hover {
        opacity: 1;
    }

    .essay-content {
        line-height: var(--canon-leading-reading);
    }

    .essay-score-label {
        white-space: nowrap;
    }

    .essay-mechanism-viewport, .essay-tensions-viewport {
        white-space: nowrap;
    }

    .essay-tensions-viewport {
        text-align: center;
    }

    .essay-mechanism-content, .essay-tensions-content {
        white-space: nowrap;
    }

    .essay-tensions-group {
        white-space: nowrap;
    }

    /* ===== 11. TYPOGRAPHIE (section centralisée) ===== */
    /* --- Niveaux de texte primaire --- */
    .essay-title,
    .essay-content h2 {
        font-family: var(--canon-font-figura);
        font-weight: 700;
        color: var(--essay-ink);
    }

    /* --- Niveaux de texte secondaire --- */
    .essay-masthead-cycles,
    .essay-date,
    .essay-score,
    .essay-fields-trigger,
    .essay-mechanism-label,
    .essay-tensions-label,
    .essay-fold,
    .essay-theme-icon,
    .fields-sort-label,
    .fields-column-caption,
    .fields-level-head {
        color: var(--essay-muted);
    }

    .essay-masthead-cycles {
        text-transform: uppercase;
    }

    .essay-mechanism-label, .essay-tensions-label {
        text-transform: uppercase;
        white-space: nowrap;
    }

    .fields-column-caption {
        line-height: var(--canon-leading-body);
    }

    .fields-level-head {
        text-transform: uppercase;
    }

    /* --- Niveaux de texte contenu --- */
    .essay-mechanism-item,
    .essay-tensions-item,
    .fields-word-button,
    .fields-column-head,
    .essay-masthead-formal {
        color: var(--essay-ink);
    }

    /* Row 3 : Titre formel */
    .essay-masthead-formal {
        font-style: italic;
    }

    .fields-column-head {
        text-transform: capitalize;
    }

    .fields-word-button {
        text-align: left;
    }

    .essay-mechanism-arrow, .essay-tensions-divider {
        font-weight: 800;
        color: var(--essay-color);
    }

    /* --- Corps de texte chargé --- */
    .essay-content {
        color: var(--essay-ink);
        font-size: var(--canon-size-body);
    }

    .essay-content p {
        color: var(--essay-ink);
        text-align: left;
    }

    .essay-content h3 {
        font-family: var(--canon-font-figura);
        font-weight: 600;
        color: var(--essay-ink);
    }

    /* --- Tailles de texte --- */
    .essay-title {
        font-size: var(--canon-size-headline);
        line-height: var(--canon-leading-title);
    }

    .essay-masthead-cycles {
        font-size: var(--canon-size-fine);
        letter-spacing: var(--canon-tracking-capitals);
    }

    .essay-masthead-formal {
        font-size: var(--canon-size-note);
        line-height: var(--canon-leading-body);
    }

    .essay-score,
    .essay-mechanism-item,
    .essay-tensions-item,
    .essay-tensions-divider,
    .essay-fields-trigger,
    .essay-date {
        font-size: var(--canon-size-note);
    }

    .essay-date {
        white-space: nowrap;
    }

    /* Mécanisme : éléments et flèches */
    .essay-mechanism-item {
        white-space: nowrap;
    }

    /* Nœud composé : l'opération qui compose les éléments */
    .essay-mechanism-item--operation {
        font-style: italic;
    }

    .essay-tensions-item {
        white-space: nowrap;
    }

    .essay-mechanism-label, .essay-tensions-label {
        font-size: var(--canon-size-fine);
        font-weight: 700;
        letter-spacing: var(--canon-tracking-capitals);
    }

    .essay-mechanism-arrow {
        font-size: var(--canon-size-fine);
    }

    /* --- Accents --- */
    .essay-mechanism-arrow--large, .essay-tensions-group-divider {
        color: var(--essay-color);
    }

    .essay-mechanism-arrow--large {
        font-weight: 700;
    }

    .essay-mechanism-arrow--large {
        font-size: var(--canon-size-body);
    }

    .essay-tensions-group-divider {
        font-size: var(--canon-size-fine);
    }

    .essay-fields-trigger {
        font-weight: 600;
    }

    .essay-fields-trigger:hover {
        color: var(--essay-ink);
    }

    .fields-sort-label {
        font-size: var(--canon-size-fine);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--canon-tracking-capitals);
    }

    .fields-column-head {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-note);
        font-weight: 700;
    }

    .fields-column-caption {
        font-size: var(--canon-size-fine);
        font-style: italic;
    }

    .fields-level-head {
        font-size: var(--canon-size-fine);
        font-weight: 600;
        letter-spacing: var(--canon-tracking-capitals);
    }

    .fields-word-button {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-note);
    }

    .fields-word-button:hover {
        color: var(--local-color-decor-essay-fields-sort-button-ink);
    }

    .essay-theme-icon {
        font-size: var(--canon-size-body);
    }

    .essay-content h2 {
        font-size: var(--canon-size-title);
    }

    .essay-content h3 {
        font-size: var(--canon-size-subtitle);
    }

    .chat-send {
        color: var(--local-color-decor-essay-fields-sort-button-ink);
    }

    .chat-message {
        line-height: var(--canon-leading-reading);
        font-family: var(--canon-font-oratio);
    }

    .chat-message[data-bubble-role="user"] {
        font-size: var(--canon-size-fine);
        color: var(--essay-faint);
    }

    .chat-message[data-bubble-role="assistant"] {
        font-size: var(--canon-size-body);
        color: var(--essay-ink);
    }

    .chat-message[data-bubble-role="assistant"] strong {
        font-weight: 600;
    }

    .chat-heading {
        font-weight: 600;
    }

    .chat-message[data-bubble-role="assistant"] h2.chat-heading {
        font-size: var(--canon-size-body);
    }

    .chat-message[data-bubble-role="assistant"] h3.chat-heading {
        font-size: var(--canon-size-body);
    }

    .chat-message[data-bubble-role="assistant"] h4.chat-heading {
        font-size: var(--canon-size-note);
    }

    .chat-bullets {
        list-style: disc;
    }

    .chat-conversation[data-chat-discussion] .chat-messages .chat-message[data-bubble-role="user"] {
        font-size: var(--canon-size-note);
        color: var(--essay-color);
    }

    .chat-login {
        color: var(--local-color-identity-red-hover);
        font-size: var(--canon-size-fine);
    }

    .chat-suggestion {
        color: var(--essay-faint);
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-fine);
        white-space: nowrap;
    }

    .chat-suggestion::before {
        content: '';
    }

    .chat-suggestion:hover {
        color: var(--essay-ink);
    }

    .chat-warning {
        font-size: var(--canon-size-fine);
        color: var(--essay-faint);
        line-height: var(--canon-leading-body);
    }

    .chat-input {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-field);
    }

    .chat-input::placeholder {
        color: var(--essay-muted);
    }

    /* Ajustements locaux dark pour les boutons .button--style-halo / whiteglow2 dans le chatbot */

    .chat-compose::before {
        content: '';
    }

    .chat-input {
        color: var(--essay-ink);
    }

    .chat-warning {
        text-align: center;
    }

    @media (max-width: 600px) {
        .essay-content p {
            text-align: left;

        }
    }

    .essay-head, .essay {
        transition: background 0.3s ease;
    }

    .essay-content {
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .essay-head-tools {
        transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.35s ease;
    }

    .essay-theme {
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
    }

    .essay-fold {
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, background-color 0.3s;
    }

    .essay-mechanism-viewport, .essay-tensions-viewport {
        cursor: grab;
        user-select: none;
    }

    .essay-mechanism-viewport:active, .essay-tensions-viewport:active {
        cursor: grabbing;
    }

    .essay-fields-trigger {
        user-select: none;
        transition: color 0.2s;
    }

    .essay-arrow {
        transition: transform var(--canon-duration-reveal), border-color 0.35s ease;
    }

    .fields-columns {
        cursor: grab;
        user-select: none;
    }

    .fields-columns:active {
        cursor: grabbing;
    }

    [data-fields-entering] .fields-column-title,
    [data-fields-entering] .fields-column-caption-text {
        animation: lexiqueBlurEnter 0.35s ease forwards;
    }

    [data-fields-entering] .fields-column-head, [data-fields-entering] .fields-word-button {
        animation: lexiqueBorderColorEnter 0.4s ease forwards;
    }

    .fields-column-head {
        cursor: default;
    }

    .fields-word-button {
        cursor: pointer;
        transition: background-color 0.15s, transform 0.1s;
    }

    .essay-mechanism, .essay-tensions, .essay-fields {
        transition: height 0.35s ease, max-height 0.35s ease, opacity 0.25s ease, filter 0.25s ease;
    }

    .essay-masthead-scores {
        transition: max-height 0.35s ease, opacity 0.25s ease, filter 0.25s ease, padding 0.35s ease;
    }

    .essay-masthead-main {
        transition: background-color 0.35s ease;
    }

    .essay-masthead-side {
        transition: width 0.35s ease, background-color 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
    }

    .chat-icon {
        transition: opacity 0.25s ease;
    }

    .chat-icon .chat-sparkle-orbit--first {
        transition: opacity 0.3s ease;
    }

    .chat-icon .chat-sparkle-orbit--second {
        transition: opacity 0.3s ease;
    }

    /* Animation au clic — pulse principal + orbite fluide des secondaires */
    .chat-icon[data-chat-animating] .chat-sparkle {
        animation: sparkle-pulse 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .chat-icon[data-chat-animating] .chat-sparkle-orbit--first {
        animation: sparkle-orbit-1 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .chat-icon[data-chat-animating] .chat-sparkle-orbit--second {
        animation: sparkle-orbit-2 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
    }

    .chat-send {
        cursor: pointer;
        transition: background 0.2s ease, opacity 0.25s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-send:disabled {
        cursor: default;
    }

    .chat-message {
        animation: chatbot-msg-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Transition mode 1 → mode 2 pour les messages existants */
    .chat-message[data-bubble-role="user"][data-chat-bubbling] {
        animation: msg-slide-to-bubble 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .chat-actions {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .chat-login {
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .chat-typing-dot {
        animation: chatbot-dot-pulse 1.4s ease-in-out infinite;
    }

    .chat-typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .chat-typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

    .chat-suggestion {
        cursor: pointer;
        transition: color 0.25s ease, background 0.25s ease;
    }

    .chat-suggestion::before {
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .chat-suggestion:hover::before {
        animation: gradient-rotate 2s linear infinite;
    }

    .chat-scrim {
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-scrim[data-chat-open] {
        pointer-events: auto;
    }

    .chat {
        pointer-events: auto;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat[data-chat-hidden] {
        pointer-events: none;
    }

    .chat-conversation {
        transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-suggestions {
        transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-compose {
        transition: border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, opacity 0.4s ease;
    }

    .chat-compose::before {
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .chat-compose:hover::before {
        animation: gradient-rotate 2s linear infinite;
    }

    .chat:not([data-chat-open]) .chat-compose {
        transition: opacity 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Animation type 1 : blur sur le CONTENU TEXTE uniquement (spans internes, pas le div entier) */
    @keyframes lexiqueBlurEnter {
        from {
            opacity: 0;
            filter: blur(6px);
        }
        to {
            opacity: 1;
            filter: blur(0);
        }
    }

    /* Animation type 2 : border-color de transparent → --champ-lexical-dynamic-color */
    /* S'applique à .fields-column-head (border-bottom) et .fields-word-button (border) */
    @keyframes lexiqueBorderColorEnter {
        from {
            border-color: transparent;
        }
        to {
            border-color: var(--fields-color);
        }
    }

    @keyframes sparkle-pulse {
        0% {
            transform: scale(1) rotate(0deg);
        }
        25% {
            transform: scale(1.18) rotate(-8deg);
        }
        50% {
            transform: scale(0.95) rotate(4deg);
        }
        75% {
            transform: scale(1.08) rotate(-2deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
        }
    }

    @keyframes sparkle-orbit-1 {
        0% {
            transform: scale(1) rotate(0deg) translate(0, 0);
            opacity: 0.75;
        }
        30% {
            transform: scale(1.3) rotate(20deg) translate(1.5px, -1px);
            opacity: 1;
        }
        60% {
            transform: scale(0.85) rotate(-15deg) translate(-0.5px, 0.5px);
            opacity: 0.6;
        }
        100% {
            transform: scale(1) rotate(0deg) translate(0, 0);
            opacity: 0.75;
        }
    }

    @keyframes sparkle-orbit-2 {
        0% {
            transform: scale(1) rotate(0deg) translate(0, 0);
            opacity: 0.6;
        }
        30% {
            transform: scale(1.25) rotate(-25deg) translate(-1.5px, 1px);
            opacity: 1;
        }
        60% {
            transform: scale(0.9) rotate(12deg) translate(0.5px, -0.5px);
            opacity: 0.5;
        }
        100% {
            transform: scale(1) rotate(0deg) translate(0, 0);
            opacity: 0.6;
        }
    }

    @keyframes chatbot-msg-in {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes msg-slide-to-bubble {
        0% {
            background: transparent;
            border-color: transparent;
            padding: 0;
            border-radius: 0;
            color: var(--essay-faint);
            font-size: var(--raw-size-07);
        }
        100% {
            background: var(--essay-surface);
            border-color: var(--essay-line);
            padding: var(--canon-space-3) var(--canon-space-4);
            border-radius: var(--canon-radius-card);
            color: var(--essay-color);
            font-size: var(--raw-size-08);
        }
    }

    @keyframes chatbot-dot-pulse {
        0%, 80%, 100% {
            opacity: 0.3;
            transform: scale(0.85);
        }
        40% {
            opacity: 1;
            transform: scale(1.15);
        }
    }

    @keyframes gradient-rotate {
        to {
            --chat-gradient-angle: 360deg;
        }
    }
}