/* @font-face déclarés directement dans les layouts via ASSETS_URL absolu */

/* ===== THEME PALETTE VARIABLES ===== */
/* Positional palette: c1=bg,  c2=surface, c3=border/muted, c4=subtitle, c5=text, c6=accent */
:root,
body.theme-light-mono {
    --c1:#ffffff;  --c2:#dddddd; --c3:#bbbbbb; --c4:#666666; --c5:#111111; --c6:#ff8c06;
    /* icon filters — rendered as c5=#111111 / c4=#666666 */
    --icon-c5:    brightness(0);
    --icon-c4:    brightness(0) invert(40%);
    --icon-on-c5: brightness(0) invert(1);
    /* ink overlays (on light bg → black ink; used in editor/toolbar) */
    --ink-a07: rgba(0,0,0,0.07);  --ink-a08: rgba(0,0,0,0.08);
    --ink-a12: rgba(0,0,0,0.12);  --ink-a15: rgba(0,0,0,0.15);
    --ink-a20: rgba(0,0,0,0.20);  --ink-a35: rgba(0,0,0,0.35);  --ink-a60: rgba(0,0,0,0.60);
    --hero-overlay: rgba(221,221,221,0.78);
    /* table & matrix */
    --tbl-border: #dddddd;
    --tbl-head-bg: #bbbbbb;
    --matrix-bracket: #bbbbbb;
}
body.theme-dark-mono {
    --c1:#111111;  --c2:#222222; --c3:#333333; --c4:#999999; --c5:#ffffff; --c6:#ff8c06;
    /* icon filters — rendered as c5=#ffffff / c4=#999999 */
    --icon-c5:    brightness(0) invert(1);
    --icon-c4:    brightness(0) invert(60%);
    --icon-on-c5: brightness(0);
    /* ink overlays (on dark bg → white ink; used in editor/toolbar) */
    --ink-a07: rgba(255,255,255,0.07);  --ink-a08: rgba(255,255,255,0.08);
    --ink-a12: rgba(255,255,255,0.12);  --ink-a15: rgba(255,255,255,0.15);
    --ink-a20: rgba(255,255,255,0.20);  --ink-a35: rgba(255,255,255,0.35);  --ink-a60: rgba(255,255,255,0.60);
    --hero-overlay: rgba(17,17,17,0.82);
    /* table & matrix */
    --tbl-border: #222222;
    --tbl-head-bg: #333333;
    --matrix-bracket: #333333;
}
body.theme-light-color {
    --c1:#f4f4ff;  --c2:#d9d9ff; --c3:#b0a0ff; --c4:#2e2e55; --c5:#111111; --c6:#ff8c06;
    /* icon filters — rendered as c5=#111111 / c4=#2e2e55 (dark indigo) */
    --icon-c5:    brightness(0);
    --icon-c4:    brightness(0) invert(18%) sepia(100%) saturate(500%) hue-rotate(220deg);
    --icon-on-c5: brightness(0) invert(1);
    /* ink overlays (on light bg → black ink; used in editor/toolbar) */
    --ink-a07: rgba(0,0,0,0.07);  --ink-a08: rgba(0,0,0,0.08);
    --ink-a12: rgba(0,0,0,0.12);  --ink-a15: rgba(0,0,0,0.15);
    --ink-a20: rgba(0,0,0,0.20);  --ink-a35: rgba(0,0,0,0.35);  --ink-a60: rgba(0,0,0,0.60);
    --hero-overlay: rgba(217,217,255,0.78);
    /* table & matrix */
    --tbl-border: #dddddd;
    --tbl-head-bg: #bbbbbb;
    --matrix-bracket: #bbbbbb;
}
body.theme-dark-color {
    --c1:#1b1b2f;  --c2:#2e2e55; --c3:#5c5ca8; --c4:#b0a0ff; --c5:#ffffff; --c6:#ff8c06;
    /* icon filters — rendered as c5=#ffffff / c4=#b0a0ff (light lavender) */
    --icon-c5:    brightness(0) invert(1);
    --icon-c4:    brightness(0) invert(70%) sepia(60%) saturate(400%) hue-rotate(215deg);
    --icon-on-c5: brightness(0);
    /* ink overlays (on dark bg → white ink; used in editor/toolbar) */
    --ink-a07: rgba(255,255,255,0.07);  --ink-a08: rgba(255,255,255,0.08);
    --ink-a12: rgba(255,255,255,0.12);  --ink-a15: rgba(255,255,255,0.15);
    --ink-a20: rgba(255,255,255,0.20);  --ink-a35: rgba(255,255,255,0.35);  --ink-a60: rgba(255,255,255,0.60);
    --hero-overlay: rgba(27,27,47,0.82);
    /* table & matrix */
    --tbl-border: #222222;
    --tbl-head-bg: #333333;
    --matrix-bracket: #333333;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}
/* Sur les pages app (layout.php) : html + body fixes — seuls les conteneurs internes scrollent */
html.page-app-html { overflow: hidden; height: 100%; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--c1);
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100vw;
    overscroll-behavior: none; /* bloquer le rubber-band iOS sur toutes les pages */
}
body.page-app {
    overflow: hidden;
    height: 100%;
    /* Pas de touch-action:none ici : la spec CSS calcule l'intersection avec les enfants,
       ce qui bloquerait pan-y sur .main-content et .editor-area.
       Le JS global (passive:false + preventDefault) gère le blocage sélectivement. */
}

.layout {
    display: flex;
    height: calc(100vh - 44px); /* 12px margin-top + 32px banner */
    overflow: hidden;
    overscroll-behavior: none;
}

/* No banner: layout fills full viewport */
body:not(.has-beta-banner) .layout {
    height: 100vh;
}

/* ── Beta Banner ─────────────────────────────────────────── */
.beta-banner {
    width: calc(100% - 24px);
    height: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #ffe8d0 55%, #ff7606 100%);
    overflow: hidden;
    position: relative;
    z-index: 50;
    margin: 12px 12px 0 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
}

body.theme-dark-mono .beta-banner,
body.theme-dark-color .beta-banner {
    background: linear-gradient(135deg, #111111 0%, #1a0800 55%, #ff7606 100%);
}

.beta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

.beta-banner__scroll {
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.beta-banner__content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.beta-banner__icon {
    width: 16px;
    height: 16px;
    filter: brightness(0);
    flex-shrink: 0;
}

body.theme-dark-mono .beta-banner__icon,
body.theme-dark-color .beta-banner__icon {
    filter: brightness(0) invert(1);
}

.beta-banner__text {
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #111111;
}

body.theme-dark-mono .beta-banner__text,
body.theme-dark-color .beta-banner__text {
    color: #ffffff;
}

.beta-banner__close {
    background: none;
    border: none;
    padding: 4px;
    margin-right: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.beta-banner__close:hover {
    background: var(--c3);
}

.beta-banner__close img {
    width: 14px;
    height: 14px;
    filter: var(--icon-c5);
}

.beta-banner.hidden {
    display: none;
}

/* Scroll animation on tablet and mobile */
@media (max-width: 1024px) {
    .beta-banner__scroll {
        justify-content: flex-start;
        overflow: hidden;
    }
    
    .beta-banner__content {
        animation: scroll-left 20s linear infinite;
    }
    
    @keyframes scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 240px;
    height: calc(100vh - 68px); /* layout(100vh-44px) - margins(12px+12px) */
    background-color: var(--c2);
    border-radius: 16px;
    padding: 16px;
    margin: 12px 0 12px 12px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, padding 0.2s ease;
}

/* No banner: sidebar fills full viewport minus its own margins */
body:not(.has-beta-banner) .sidebar {
    height: calc(100vh - 24px); /* just 12px top + 12px bottom margins */
}

/* Bouton toggle sidebar — supprimé */

@media (max-width: 1024px) {
    /* (placeholder pour compatibilité) */
}

/* ===== SIDEBAR MINI (préférence utilisateur) ===== */
body.sidebar-mini .sidebar {
    width: 64px;
    padding: 16px 8px;
    align-items: center;
}

body.sidebar-mini .sidebar-logo {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

body.sidebar-mini .sidebar-logo span {
    display: none;
}

body.sidebar-mini .nav-btn {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

body.sidebar-mini .nav-btn span {
    display: none;
}

body.sidebar-mini .nav-btn:not(.active):hover {
    background-color: transparent;
}

body.sidebar-mini .nav-btn--premium:hover {
    background-color: var(--c6) !important;
}

body.sidebar-mini .sidebar-bottom {
    width: 100%;
}

/* ===== TRAINING RUNNER ===== */
.training-runner {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--c1);
}

.training-runner.open { display: flex; }

/* Prevent CSS display values from overriding the HTML hidden attribute */
.training-runner [hidden] { display: none !important; }

.training-runner__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px 8px;
    background: var(--c2);
    border-radius: 0 0 16px 16px;
    border-bottom: 1px solid var(--ink-a08);
    flex-shrink: 0;
    margin: 0 12px;
}

.training-runner__mode {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--c5);
    background: var(--ink-a12);
    padding: 3px 10px;
    border-radius: 6px;
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.training-runner__prog {
    flex: 1;
    height: 5px;
    background: var(--ink-a12);
    border-radius: 3px;
    overflow: hidden;
}

.training-runner__prog-bar {
    height: 100%;
    background: var(--c6);
    border-radius: 3px;
    transition: width 0.35s ease;
    width: 0%;
}

.training-runner__counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c4);
    font-family: 'Montserrat', sans-serif;
    flex-shrink: 0;
}

/* Scrollable content area */
.tr-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Hide editor content when training runner is active */

/* ===== GAP FILL MODE ===== */

/* Conteneur document (rendu directement dans preview-overlay) */
.gap-fill-doc {
    cursor: default;
    width: 100%;
    max-width: 100%;
}

/* Wrapper inline autour de l'input + bouton ampoule */
.gap-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
    margin: 0 2px;
}

/* Input — même style que share-ctx-input */
.gap-input {
    display: inline-block;
    min-width: 80px;
    height: 28px;
    padding: 0 10px;
    background: #bbbbbb;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: var(--c5);
    outline: none;
    box-sizing: border-box;
    vertical-align: middle;
    transition: box-shadow 0.15s;
}
body.theme-dark-mono .gap-input,
body.theme-dark-color .gap-input { background: #333333; }
.gap-input::placeholder { color: var(--c4); opacity: 0.7; }
.gap-input:focus {
    box-shadow: none;
}
.gap-input--correct {
    background: rgba(16,185,129,0.18) !important;
    color: #10b981;
    box-shadow: none !important;
}
.gap-input--wrong {
    background: rgba(239,68,68,0.14) !important;
    color: #ef4444;
    box-shadow: none !important;
}

/* Bouton ampoule — même style exact que zoom-btn */
.gap-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink-a60);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.gap-hint-btn:hover { background: var(--c3); color: var(--c5); }
.gap-hint-btn img { filter: var(--icon-filter, none); opacity: 0.6; }
.gap-hint-btn:hover img { opacity: 1; }
.gap-hint-btn:disabled { pointer-events: none; opacity: 0.35; }

/* Indice affiché après validation */
.gap-hint {
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
    margin-left: 4px;
    font-family: 'Montserrat', sans-serif;
}

/* preview-overlay en mode gap fill */
#preview-overlay .gap-fill-doc p {
    margin-bottom: 1.4em;
    line-height: 1.75;
}

/* ===== TRAINING OVERLAY — modes quiz / flash / évaluation ===== */

/* Barre de progression en haut du doc */
.tr-ov-prog {
    width: 100%;
    height: 6px;
    background: var(--c3);
    border-radius: 3px;
    margin-bottom: 0.6em;
    overflow: hidden;
}
.tr-ov-prog__bar {
    height: 100%;
    background: var(--c-accent, #6c63ff);
    border-radius: 3px;
    transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
}
.tr-ov-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c4);
    margin-bottom: 1.6em;
}

/* Question */
.tr-ov-question {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c5);
    margin-bottom: 1.2em;
    line-height: 1.5;
}

/* Options quiz */
.tr-ov-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.2em;
}
.tr-ov-option {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: var(--c2);
    border: 2px solid var(--c3);
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c5);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tr-ov-option:hover:not(:disabled) { border-color: var(--c-accent, #6c63ff); background: var(--c3); }
.tr-ov-option:disabled { cursor: default; }
.tr-ov-option--correct { border-color: #10b981 !important; background: rgba(16,185,129,0.12) !important; color: #10b981 !important; }
.tr-ov-option--wrong   { border-color: #ef4444 !important; background: rgba(239,68,68,0.10) !important; color: #ef4444 !important; }

/* Feedback inline */
.tr-ov-feedback { font-size: 0.88rem; font-weight: 600; margin-bottom: 1em; }
.tr-ov-feedback--correct { color: #10b981; }
.tr-ov-feedback--wrong   { color: #ef4444; }

/* Bouton Suivant / Terminer */
.tr-ov-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--c-accent, #6c63ff);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tr-ov-next-btn:hover { opacity: 0.88; }

/* Flashcard */
.tr-ov-flash-hint {
    font-size: 0.82rem;
    color: var(--c4);
    text-align: center;
    margin-bottom: 1em;
}
.tr-ov-flash-card {
    perspective: 900px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.4em;
    cursor: pointer;
    min-height: 160px;
}
.tr-ov-flash-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 160px;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
    transform-style: preserve-3d;
}
.tr-ov-flash-card.flipped .tr-ov-flash-card__inner { transform: rotateY(180deg); }
.tr-ov-flash-card__front,
.tr-ov-flash-card__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--c2);
    border: 2px solid var(--c3);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--c5);
    text-align: center;
    line-height: 1.5;
}
.tr-ov-flash-card__back { transform: rotateY(180deg); background: var(--c3); }
.tr-ov-flash-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 1em;
}
.tr-ov-flash-knew,
.tr-ov-flash-didnt {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tr-ov-flash-knew  { background: rgba(16,185,129,0.15); color: #10b981; }
.tr-ov-flash-didnt { background: rgba(239,68,68,0.12);  color: #ef4444; }
.tr-ov-flash-knew:hover,
.tr-ov-flash-didnt:hover { opacity: 0.8; }

/* Évaluation */
.tr-ov-eval-item { margin-bottom: 2em; }
.tr-ov-eval-num {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c4);
    margin-bottom: 0.4em;
}
.tr-ov-eval-q {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c5);
    margin-bottom: 0.7em;
    line-height: 1.5;
}
.tr-ov-eval-ta {
    width: 100%;
    background: var(--c2);
    border: 2px solid var(--c3);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--c5);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.tr-ov-eval-ta:focus { border-color: var(--c-accent, #6c63ff); }
.tr-ov-submit-btn {
    display: block;
    margin: 1.6em auto 0;
    padding: 12px 32px;
    background: var(--c-accent, #6c63ff);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tr-ov-submit-btn:hover { opacity: 0.88; }

/* Correction évaluation */
.tr-ov-review-item {
    margin-bottom: 1.8em;
    padding: 14px 16px;
    background: var(--c2);
    border-radius: 12px;
    border: 1.5px solid var(--c3);
}
.tr-ov-review-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.5em;
}
.tr-ov-review-item__q {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c5);
    flex: 1;
    margin: 0;
}
.tr-ov-review-item__grade {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-accent, #6c63ff);
    white-space: nowrap;
    flex-shrink: 0;
}
.tr-ov-review-item__answer {
    font-size: 0.85rem;
    color: var(--c4);
    margin-bottom: 0.3em;
    font-style: italic;
}
.tr-ov-review-item__comment {
    font-size: 0.85rem;
    color: var(--c5);
    margin: 0;
}

/* Loading inline inside gap-fill-bar */
.tr-loading--bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--c4);
    flex: 1;
}
.tr-loading--bar[hidden] { display: none; }
.tr-loading--bar .tr-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Score circle inside popup (reuse from runner) */
#gap-score-circle {
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: var(--c5);
    background: var(--ink-a08);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.editor-wrapper.training-active .editor-toolbar,
.editor-wrapper.training-active .editor-area,
.editor-wrapper.training-active .img-resize-overlay,
.editor-wrapper.training-active .hr-resize-overlay,
.editor-wrapper.training-active .pb-overlay,
.editor-wrapper.training-active .img-upload-panel { display: none !important; }

/* Loading */
.tr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 56px 24px;
}

.tr-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ink-a12);
    border-top-color: var(--c5);
    border-radius: 50%;
    animation: tr-spin 0.75s linear infinite;
}

@keyframes tr-spin { to { transform: rotate(360deg); } }

.tr-loading__text {
    font-size: 0.88rem;
    color: var(--c4);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* Error */
.tr-error {
    padding: 32px 24px;
    text-align: center;
    font-size: 0.9rem;
    color: #e05050;
    font-family: 'Montserrat', sans-serif;
}

/* Question body */
.tr-body {
    padding: 32px 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

.tr-question {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c5);
    line-height: 1.6;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* Quiz options */
.tr-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tr-option {
    width: 100%;
    padding: 11px 16px;
    text-align: left;
    background: var(--ink-a07);
    border: 1.5px solid var(--ink-a08);
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c5);
    transition: background 0.15s, border-color 0.15s;
}

.tr-option:not(:disabled):hover {
    background: var(--ink-a12);
    border-color: var(--c3);
}

.tr-option:disabled { cursor: default; }

.tr-option--correct {
    background: rgba(40, 193, 100, 0.15) !important;
    border-color: rgba(40, 193, 100, 0.5) !important;
    color: #28c164 !important;
    font-weight: 700;
}

.tr-option--wrong {
    background: rgba(220, 60, 60, 0.12) !important;
    border-color: rgba(220, 60, 60, 0.4) !important;
    color: #dc3c3c !important;
}

/* Eval area */
.tr-eval {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-eval__input {
    width: 100%;
    background: var(--ink-a07);
    border: 1.5px solid var(--ink-a08);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: var(--c5);
    resize: vertical;
    box-sizing: border-box;
}

.tr-eval__input:focus {
    outline: none;
    border-color: var(--c5);
}

/* Eval form: toutes les questions en même temps */
.tr-eval-form {
    padding: 32px 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

.tr-eval-form__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tr-eval-form__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tr-eval-form__num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c4);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.tr-eval-form__q {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c5);
    line-height: 1.6;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.tr-submit-btn {
    align-self: flex-end;
    padding: 12px 28px;
    background: var(--c6);
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c1);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.tr-submit-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* Review (per-question feedback after eval grading) */
.tr-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 60px 40px;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

.tr-review-item {
    background: var(--ink-a07);
    border: 1.5px solid var(--ink-a08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tr-review-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tr-review-item__q {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c5);
    flex: 1;
    font-family: 'Montserrat', sans-serif;
}

.tr-review-item__grade {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--c6);
    font-family: 'Montserrat', sans-serif;
    flex-shrink: 0;
}

.tr-review-item__answer {
    font-size: 0.78rem;
    color: var(--c4);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
}

.tr-review-item__comment {
    font-size: 0.8rem;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    line-height: 1.55;
    border-left: 2.5px solid var(--c6);
    padding-left: 10px;
}

/* Feedback */
.tr-feedback {
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    padding: 10px 14px;
    border-radius: 10px;
}

.tr-feedback--correct {
    background: rgba(40, 193, 100, 0.12);
    color: #28c164;
}

.tr-feedback--wrong {
    background: rgba(220, 60, 60, 0.10);
    color: #dc3c3c;
}

/* Next button */
.tr-next-btn {
    align-self: flex-end;
    padding: 10px 22px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tr-next-btn:hover { opacity: 0.85; }

/* Score screen */
.tr-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 44px 60px 24px;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

.tr-score__circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--c6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
}

.tr-score__circle svg { stroke: var(--c6); }

.tr-score__text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

.tr-score__actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.tr-replay-btn, .tr-done-btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}

.tr-replay-btn {
    background: var(--ink-a12);
    color: var(--c5);
}

.tr-replay-btn:hover { background: var(--c3); }

.tr-done-btn {
    background: var(--c5);
    color: var(--c1);
}

.tr-done-btn:hover { opacity: 0.85; }

/* ── Flashcards ─────────────────────────────────────────────── */
.tr-flash {
    padding: 28px 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.tr-flash-hint {
    font-size: 0.78rem;
    color: var(--c4);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

.tr-flash-card {
    width: 100%;
    max-width: 560px;
    height: 200px;
    cursor: pointer;
    perspective: 1200px;
}

.tr-flash-card__inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.45s ease;
}

.tr-flash-card.flipped .tr-flash-card__inner {
    transform: rotateY(180deg);
}

.tr-flash-card__front,
.tr-flash-card__back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--c5);
    text-align: center;
    line-height: 1.6;
    -webkit-user-select: none;
    user-select: none;
}

.tr-flash-card__front {
    background: var(--c2);
    border: 1.5px solid var(--ink-a08);
}

.tr-flash-card__back {
    background: var(--c2);
    border: 1.5px solid var(--c6);
    transform: rotateY(180deg);
}

.tr-flash-actions {
    display: flex;
    gap: 12px;
}

.tr-flash-btn {
    flex: 1;
    max-width: 210px;
    padding: 11px 20px;
    border-radius: 12px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.tr-flash-btn--knew {
    background: rgba(40, 193, 100, 0.15);
    color: #28c164;
}
.tr-flash-btn--knew:hover { background: rgba(40, 193, 100, 0.28); }

.tr-flash-btn--didnt {
    background: rgba(220, 60, 60, 0.10);
    color: #dc3c3c;
}
.tr-flash-btn--didnt:hover { background: rgba(220, 60, 60, 0.22); }

/* ── Fill in the blanks ─────────────────────────────────────── */
.tr-gap {
    padding: 32px 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

.tr-gap-sentence {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--c5);
    line-height: 2.2;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.tr-gap-input {
    display: inline-block;
    min-width: 110px;
    padding: 4px 10px;
    border: 2px solid var(--c5);
    border-radius: 8px;
    background: var(--ink-a07);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--c5);
    outline: none;
    vertical-align: middle;
    transition: border-color 0.15s, background 0.15s;
}
.tr-gap-input:focus { border-color: var(--c6); }
.tr-gap-input--correct {
    border-color: #28c164 !important;
    background: rgba(40, 193, 100, 0.12) !important;
    color: #28c164 !important;
}
.tr-gap-input--wrong {
    border-color: #dc3c3c !important;
    background: rgba(220, 60, 60, 0.10) !important;
    color: #dc3c3c !important;
}

.tr-gap-btns {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tr-gap-check-btn,
.tr-gap-next-btn {
    padding: 10px 22px;
    border-radius: 12px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tr-gap-check-btn {
    background: var(--c5);
    color: var(--c1);
}
.tr-gap-check-btn:hover { opacity: 0.85; }

.tr-gap-next-btn {
    background: var(--c6);
    color: var(--c1);
}
.tr-gap-next-btn:hover { opacity: 0.85; }



.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y; /* scroll vertical natif autorisé ici */
    padding: 0;
    min-height: 0;
}

.main-content-public {
    width: 100%;
    min-height: 100vh;
    background-color: var(--c1);
    padding: 12px;
}

/* ===== HERO ===== */
.hero {
    width: 100%;
}

.hero-card {
    background-color: var(--c2);
    border-radius: 16px;
    padding: 48px 40px;
    width: 100%;
}

.hero-logo {
    height: 36px;
    width: auto;
    display: block;
    margin-bottom: 32px;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--c5);
    line-height: 1.3;
    margin-bottom: 16px;
}

.hero-desc {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-a60);
    line-height: 1.75;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.hero-btn--primary {
    background-color: var(--c5);
    color: var(--c1);
}

.hero-btn--secondary {
    background-color: var(--c3);
    color: var(--c5);
}

@media (max-width: 600px) {
    .hero-card {
        padding: 32px 24px;
    }
    .hero-title {
        font-size: 1.5rem;
    }
    .hero-actions {
        flex-direction: column;
    }
    .hero-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== LANDING PAGE ===== */

/* Layout */
.main-content-public {
    padding: 0;
}

/* ── Header ── */
/* ===== LP ENTRANCE ANIMATIONS ===== */
@keyframes lp-fade-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lp-anim-header {
    opacity: 1;
}
.lp-anim-badge {
    opacity: 0;
    animation: lp-fade-up 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 0.25s;
}
.lp-anim-title {
    opacity: 0;
    animation: lp-fade-up 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 0.42s;
}
.lp-anim-desc {
    opacity: 0;
    animation: lp-fade-up 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 0.58s;
}
.lp-anim-actions {
    opacity: 0;
    animation: lp-fade-up 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 0.72s;
}
.lp-anim-banner {
    opacity: 0;
    animation: lp-fade-up 1s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 0.88s;
}
@media (prefers-reduced-motion: reduce) {
    .lp-anim-header, .lp-anim-badge, .lp-anim-title,
    .lp-anim-desc, .lp-anim-actions, .lp-anim-banner {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ── Scroll fluide pages publiques ── */
html {
    scroll-behavior: smooth;
}

.lp-section,
#section-steps,
#section-collab,
#section-reviews,
#section-pricing,
#section-faq {
    scroll-margin-top: 80px;
}

.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 10px 16px;
    background: transparent;
    transition: background 0.25s, box-shadow 0.25s;
}
.lp-header--scrolled {
    background: transparent;
    box-shadow: none;
}
.lp-header__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border-radius: 16px;
    transition: background 0.25s, box-shadow 0.25s;
}
.lp-header--scrolled .lp-header__inner {
    background: var(--c2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.lp-header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}
.lp-header__logo img {
    width: 1.2rem;
    height: 1.2rem;
    filter: var(--icon-c5);
}
.lp-header__logo span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c5);
    line-height: 1;
}
.lp-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.lp-header__nav-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--c5);
    text-decoration: none;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}
.lp-header__nav-btn:hover {
    background: #bbbbbb;
    color: #111111;
}
body.theme-dark-mono .lp-header__nav-btn:hover,
body.theme-dark-color .lp-header__nav-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
}
.lp-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.lp-header__actions .dash-btn {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Theme toggle button */
.lp-header__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.lp-header__theme-toggle:hover {
    background: #bbbbbb;
}
body.theme-dark-mono .lp-header__theme-toggle:hover,
body.theme-dark-color .lp-header__theme-toggle:hover {
    background: rgba(255,255,255,0.15);
}
.lp-header__theme-icon {
    width: 18px;
    height: 18px;
    filter: var(--icon-c5);
    display: none;
}
.lp-header__theme-toggle:hover .lp-header__theme-icon {
    filter: brightness(0);
}
body.theme-dark-mono .lp-header__theme-toggle:hover .lp-header__theme-icon,
body.theme-dark-color .lp-header__theme-toggle:hover .lp-header__theme-icon {
    filter: brightness(0) invert(1);
}
/* light mode → show sun; dark mode → show moon */
.theme-light-mono .lp-header__theme-icon--light,
.theme-light-color .lp-header__theme-icon--light { display: block; }
.theme-dark-mono  .lp-header__theme-icon--dark,
.theme-dark-color .lp-header__theme-icon--dark  { display: block; }

/* Shared section wrapper */
.lp-section {
    padding: 72px 0;
}
.lp-section:nth-child(odd) {
    background-color: var(--c2);
}
#section-how,
#section-collab {
    background: none !important;
}
.lp-section__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}
.lp-section__title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c5);
    margin-bottom: 12px;
    text-align: center;
}
.lp-section__title--left  { text-align: left; }
.lp-section__title--center { text-align: center; }
.lp-section__sub {
    text-align: center;
    color: var(--c4);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

/* Shared CTA buttons */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    border-radius: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s, background 0.2s;
}
.lp-btn:hover { opacity: 0.88; }
.lp-btn--primary  { background: var(--c5); color: var(--c1); }
.lp-btn--ghost    { background: var(--c3); color: var(--c5); }
.lp-btn--outline  { border: 2px solid var(--c5); color: var(--c5); background: transparent; }
.lp-btn--premium  { background: var(--c6); color: var(--c5); }
.lp-btn--lg       { padding: 14px 40px; font-size: 1rem; }

/* ── Hero ── */
.lp-hero {
    height: 100vh;
    overflow: hidden;
    position: relative;
    /* light mode default */
    background: linear-gradient(135deg, #ffffff 0%, #ffe8d0 55%, #ff7606 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 72px;
}
body.theme-dark-mono .lp-hero,
body.theme-dark-color .lp-hero {
    background: linear-gradient(135deg, #111111 0%, #1a0800 55%, #ff7606 100%);
}
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}
.lp-hero::after { content: none; }
.lp-hero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent, var(--c1));
    z-index: 2;
    pointer-events: none;
}
.lp-hero__spotlight { display: none; }
.lp-hero > *:not(.lp-hero__spotlight):not(.lp-hero__fade) {
    position: relative;
    z-index: 1;
}
.lp-hero__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    width: 100%;
    max-width: 680px;
    gap: 20px;
}
.lp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    margin-top: 48px;
    border-radius: 100px;
    background: #111111;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-family: 'Montserrat', sans-serif;
    -webkit-user-select: none;
    user-select: none;
}
.lp-hero__badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
body.theme-dark-mono .lp-hero__badge,
body.theme-dark-color .lp-hero__badge {
    background: rgba(255,255,255,0.92);
    color: #111111;
}
body.theme-dark-mono .lp-hero__badge-icon,
body.theme-dark-color .lp-hero__badge-icon {
    filter: brightness(0);
}
.lp-hero__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #111111;
    line-height: 1.25;
    margin: 0;
}
body.theme-dark-mono .lp-hero__title,
body.theme-dark-color .lp-hero__title {
    color: #ffffff;
}
.lp-hero__accent {
    font-family: 'NewIconScript', cursive;
    font-weight: normal;
    color: #ff7606;
    font-size: 1em;
    line-height: 1;
}
.lp-hero__desc {
    font-size: 1rem;
    color: rgba(0,0,0,0.6);
    line-height: 1.75;
    margin: 0;
}
body.theme-dark-mono .lp-hero__desc,
body.theme-dark-color .lp-hero__desc {
    color: rgba(255,255,255,0.75);
}
.lp-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 48px;
}
.lp-hero__banner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    flex-shrink: 0;
    margin-top: clamp(20px, 3vh, 48px);
}
.lp-hero__banner img,
.lp-hero__screenshot {
    width: 100%;
    display: block;
    border-radius: 16px 16px 0 0;
    border: 2px solid #dddddd;
    border-bottom: none;
}
body.theme-dark-mono .lp-hero__screenshot,
body.theme-dark-color .lp-hero__screenshot { border-color: #222222; }
/* Show/hide screenshot based on theme */
body.theme-dark-mono .lp-hero__screenshot--light,
body.theme-dark-color .lp-hero__screenshot--light { display: none; }
body:not(.theme-dark-mono):not(.theme-dark-color) .lp-hero__screenshot--dark { display: none; }

.lp-hero__video {
    width: 100%;
    display: block;
    border-radius: 16px 16px 0 0;
    object-fit: cover;
}
body.theme-dark-mono .lp-hero__video,
body.theme-dark-color .lp-hero__video { opacity: 1; }

/* ── Hero video overlay ── */
.lp-hero__video-wrap {
    position: relative;
    width: 100%;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.lp-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    border-radius: 16px 16px 0 0;
    cursor: pointer;
}

.lp-hero__overlay--hidden {
    opacity: 0;
    pointer-events: none;
}

.lp-hero__play-icon {
    width: 72px;
    height: 72px;
    display: block;
    pointer-events: none;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── Hero mockup (représentation live de l'app) ── */
.lp-hero__mockup {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--c1);
    border: 1px solid var(--ink-a12);
    border-bottom: none;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.10);
    /* échelle interne : tous les éléments utilisent em */
    font-size: clamp(4px, 0.88vw, 9.2px);
}
/* Chrome navigateur */
.lp-mock-chrome {
    flex-shrink: 0;
    height: 3.2em;
    background: var(--c2);
    border-bottom: 1px solid var(--ink-a08);
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 1.6em;
}
.lp-mock-chrome__dots {
    display: flex;
    gap: 0.5em;
    flex-shrink: 0;
}
.lp-mock-chrome__dots span {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    display: block;
}
.lp-mock-chrome__dots span:nth-child(1) { background: #ff5f57; }
.lp-mock-chrome__dots span:nth-child(2) { background: #febc2e; }
.lp-mock-chrome__dots span:nth-child(3) { background: #28c840; }
.lp-mock-chrome__bar {
    flex: 1;
    max-width: 28em;
    height: 2em;
    background: var(--c1);
    border: 1px solid var(--ink-a12);
    border-radius: 0.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    color: var(--c4);
    letter-spacing: 0.02em;
}
/* App layout */
.lp-mock-app {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: var(--c1);
}
/* Sidebar */
.lp-mock-sidebar {
    width: 14em;
    flex-shrink: 0;
    background: var(--c2);
    border-radius: 1em;
    margin: 0.8em 0 0.8em 0.8em;
    padding: 1.2em 1em;
    display: flex;
    flex-direction: column;
    gap: 1.6em;
    overflow: hidden;
}
.lp-mock-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 0.7em;
}
.lp-mock-sidebar__logo-ico {
    width: 2em;
    height: 2em;
    background: var(--c5);
    border-radius: 0.45em;
    flex-shrink: 0;
    opacity: 0.85;
}
.lp-mock-sidebar__logo-text {
    height: 1.1em;
    flex: 1;
    background: var(--c5);
    border-radius: 0.35em;
    opacity: 0.6;
}
.lp-mock-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}
.lp-mock-sidebar__item {
    height: 2.1em;
    border-radius: 0.6em;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 0.8em;
    gap: 0.65em;
}
.lp-mock-sidebar__item::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background: var(--c4);
    border-radius: 0.3em;
    flex-shrink: 0;
    opacity: 0.55;
}
.lp-mock-sidebar__item::after {
    content: '';
    height: 0.75em;
    flex: 1;
    background: var(--c4);
    border-radius: 0.3em;
    opacity: 0.4;
}
.lp-mock-sidebar__item--active {
    background: var(--c3);
}
.lp-mock-sidebar__item--active::before { opacity: 1; background: var(--c5); }
.lp-mock-sidebar__item--active::after  { opacity: 0.85; background: var(--c5); }
.lp-mock-sidebar__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding-top: 0.55em;
    border-top: 1px solid var(--ink-a08);
}
.lp-mock-sidebar__item--gold::before { background: var(--c6); opacity: 1; }
.lp-mock-sidebar__item--gold::after  { background: var(--c6); opacity: 0.7; }
/* Zone principale */
.lp-mock-main {
    flex: 1;
    overflow: hidden;
    padding: 1.2em 1.4em 1.2em 1em;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    min-width: 0;
}
/* Dashboard Hero mockup */
.lp-mock-dash-hero {
    flex-shrink: 0;
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)),
                      url('../images/background_banner.webp');
    background-size: cover;
    background-position: center;
    border-radius: 1em;
    padding: 2em 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 7em;
}
.lp-mock-dash-hero__title {
    height: 1.5em;
    width: 15em;
    background: var(--c5);
    border-radius: 0.45em;
    opacity: 0.85;
    max-width: 90%;
}
.lp-mock-dash-hero__desc {
    height: 0.8em;
    width: 20em;
    background: var(--c4);
    border-radius: 0.3em;
    opacity: 0.5;
    max-width: 85%;
}
.lp-mock-dash-hero__btns {
    display: flex;
    gap: 0.6em;
    margin-top: 0.3em;
}
.lp-mock-dash-hero__btn {
    height: 2em;
    width: 5.5em;
    border-radius: 0.65em;
    background: var(--c5);
    opacity: 0.75;
}
.lp-mock-dash-hero__btn--open {
    background: var(--c3);
    opacity: 0.9;
    border: 1px solid var(--ink-a12);
}
/* Section (Récents / Modèles) */
.lp-mock-section {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}
.lp-mock-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lp-mock-section__title {
    height: 1em;
    width: 7em;
    background: var(--c5);
    border-radius: 0.3em;
    opacity: 0.6;
}
.lp-mock-section__more {
    height: 0.75em;
    width: 4em;
    background: var(--c4);
    border-radius: 0.25em;
    opacity: 0.4;
}
/* Stats rapides */
.lp-mock-stats {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7em;
}
.lp-mock-stat-card {
    background: var(--c2);
    border-radius: 0.85em;
    padding: 0.9em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}
.lp-mock-stat-card__header {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.lp-mock-stat-card__icon {
    width: 1.4em;
    height: 1.4em;
    background: var(--c5);
    border-radius: 0.3em;
    opacity: 0.55;
    flex-shrink: 0;
}
.lp-mock-stat-card__label {
    height: 0.75em;
    flex: 1;
    background: var(--c5);
    border-radius: 0.25em;
    opacity: 0.4;
}
.lp-mock-stat-card__value {
    height: 1.8em;
    width: 3em;
    background: var(--c5);
    border-radius: 0.4em;
    opacity: 0.7;
}
/* Premium banner mockup */
.lp-mock-premium {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1em;
    background: var(--c2);
    border-radius: 1em;
    overflow: hidden;
    padding: 0.8em 1em;
}
.lp-mock-premium__img {
    width: 6em;
    height: 4em;
    border-radius: 0.65em;
    flex-shrink: 0;
    background-image: url('../images/background_banner2.webp');
    background-size: cover;
    background-position: center;
}
.lp-mock-premium__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    min-width: 0;
}
.lp-mock-premium__title {
    height: 1em;
    width: 10em;
    background: var(--c5);
    border-radius: 0.3em;
    opacity: 0.65;
    max-width: 100%;
}
.lp-mock-premium__desc {
    height: 0.7em;
    width: 85%;
    background: var(--c4);
    border-radius: 0.25em;
    opacity: 0.4;
}
.lp-mock-premium__btn {
    height: 1.8em;
    width: 5em;
    background: var(--c6);
    border-radius: 0.55em;
    opacity: 0.8;
    margin-top: 0.2em;
}
/* Cards grid */
.lp-mock-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75em;
    overflow: hidden;
    align-content: start;
}
.lp-mock-card {
    background: transparent;
    border-radius: 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    overflow: hidden;
}
.lp-mock-card__thumb {
    aspect-ratio: 1 / 1;
    background: var(--c2);
    border-radius: 0.65em;
    padding: 0.6em;
    display: flex;
    flex-direction: column;
    gap: 0.38em;
    overflow: hidden;
}
.lp-mock-card__line {
    height: 0.6em;
    width: 100%;
    background: var(--c5);
    border-radius: 0.2em;
    opacity: 0.12;
    flex-shrink: 0;
}
.lp-mock-card__line--h  { opacity: 0.38; height: 0.85em; width: 70%; }
.lp-mock-card__line--sm { width: 52%; }
.lp-mock-card__line--md { width: 82%; }
.lp-mock-card__line--list { margin-left: 8%; width: calc(100% - 8%); opacity: 0.22; }
.lp-mock-card__info {
    padding: 0 0.4em 0.4em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.lp-mock-card__name {
    height: 0.8em;
    width: 80%;
    background: var(--c5);
    border-radius: 0.25em;
    opacity: 0.5;
}
.lp-mock-card__date {
    height: 0.65em;
    width: 50%;
    background: var(--c4);
    border-radius: 0.22em;
    opacity: 0.35;
}

/* ── Features ── */
.lp-features {
    background: var(--c1) !important;
}
/* ── Templates (pas de fond de section) ── */
.lp-tpl {
    background: var(--c1) !important;
}
.lp-feat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.lp-feat-card {
    background: var(--c2);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}
.lp-feat-card__visual {
    height: 190px;
    overflow: hidden;
    position: relative;
    background: var(--c1);
    border: 2px solid #dddddd;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
}
body.theme-dark-mono .lp-feat-card__visual,
body.theme-dark-color .lp-feat-card__visual { border-color: #222222; }
.lp-feat-card__content {
    padding: 22px 24px 28px;
}
.lp-feat-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c5);
    margin-bottom: 8px;
}
.lp-feat-card__desc {
    font-size: 0.88rem;
    color: var(--c4);
    line-height: 1.7;
}
/* ── Feature mini mockups ── */
.lp-feat-mock {
    font-size: clamp(7px, 1.1vw, 10px);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--c1);
}
.lp-feat-mock__doc {
    flex: 1;
    background: var(--c1);
    padding: 1.8em 2.5em;
    overflow: hidden;
}
.lp-feat-mock__page {
    display: flex;
    flex-direction: column;
    gap: 0.85em;
    position: relative;
}
.lp-feat-mock__swatch {
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-feat-mock__img-ph {
    height: 4em;
    background: var(--c3);
    border-radius: 0.5em;
    opacity: 0.5;
    flex-shrink: 0;
}
/* Export mock */
.lp-feat-mock__doc--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2em;
}
.lp-feat-mock__export-sheet {
    background: var(--c2);
    border: 1px solid var(--ink-a12);
    border-radius: 1em;
    padding: 1.4em;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.lp-feat-mock__export-title {
    height: 1.1em;
    width: 55%;
    background: var(--c5);
    opacity: 0.45;
    border-radius: 0.3em;
    margin: 0 auto;
}
.lp-feat-mock__export-opts {
    display: flex;
    gap: 0.7em;
}
.lp-feat-mock__export-opt {
    flex: 1;
    height: 4.5em;
    border-radius: 0.7em;
    background: var(--c3);
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.lp-feat-mock__export-opt--active {
    border-color: var(--c5);
}
.lp-feat-mock__export-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    font-weight: 800;
    color: var(--c4);
    opacity: 0.45;
}
.lp-feat-mock__export-opt--active .lp-feat-mock__export-badge {
    color: var(--c5);
    opacity: 1;
}
.lp-feat-mock__export-check {
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: var(--c5);
    opacity: 0.9;
    position: absolute;
    top: -0.5em;
    right: -0.5em;
}
.lp-feat-mock__export-btn {
    height: 2.2em;
    background: var(--c3);
    border-radius: 0.55em;
    position: relative;
    overflow: hidden;
}
.lp-feat-mock__topbtn--cta {
    background: var(--c5) !important;
    opacity: 0.7 !important;
}
/* Version history mock */
.lp-feat-mock__split {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.lp-feat-mock__doc--preview {
    flex: 1;
    border-right: 1px solid var(--ink-a08);
}
.lp-feat-mock__diff--add {
    height: 0.85em;
    background: #10b981;
    border-radius: 0.25em;
    flex-shrink: 0;
    animation: lp-feat-diff-add 2.5s ease-in-out infinite;
}
.lp-feat-mock__diff--del {
    height: 0.85em;
    background: #ef4444;
    border-radius: 0.25em;
    flex-shrink: 0;
    animation: lp-feat-diff-del 2.5s ease-in-out infinite 0.9s;
}
.lp-feat-mock__ver-list {
    width: 13em;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--c2);
    padding: 1.2em 1em;
    gap: 1em;
    overflow: hidden;
}
.lp-feat-mock__ver-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
}
.lp-feat-mock__ver-dot {
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    background: var(--c5);
    flex-shrink: 0;
    margin-top: 0.25em;
    opacity: 0.9;
}
.lp-feat-mock__ver-dot--old { opacity: 0.22; }
.lp-feat-mock__ver-entry--active .lp-feat-mock__ver-dot {
    background: #3b82f6;
    opacity: 1;
}
.lp-feat-mock__ver-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.lp-feat-mock__ver-name {
    height: 0.85em;
    width: 85%;
    background: var(--c5);
    opacity: 0.55;
    border-radius: 0.25em;
}
.lp-feat-mock__ver-entry--active .lp-feat-mock__ver-name { opacity: 0.85; }
.lp-feat-mock__ver-time {
    height: 0.65em;
    width: 75%;
    background: var(--c4);
    opacity: 0.3;
    border-radius: 0.2em;
}
/* ── Feature card animations – new ── */

/* ─── Card 1: Rich editor — toolbar buttons cycle one by one ─── */
.lp-feat-rich__toolbar {
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.8em 1em;
    background: var(--c2);
    border-bottom: 1px solid var(--ink-a08);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.lp-feat-rich__btn {
    min-width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35em;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--c5);
    padding: 0 0.3em;
    flex-shrink: 0;
    animation: lp-feat-btn-hl 10s ease-in-out infinite;
}
.lp-feat-rich__btn--ml { margin-left: 0.5em; }
.lp-feat-rich__btn--icon { padding: 0 0.25em; }
.lp-feat-rich__btn:nth-child(1)  { animation-delay:  0s; }
.lp-feat-rich__btn:nth-child(2)  { animation-delay:  1s; }
.lp-feat-rich__btn:nth-child(3)  { animation-delay:  2s; }
.lp-feat-rich__btn:nth-child(4)  { animation-delay:  3s; }
.lp-feat-rich__btn:nth-child(5)  { animation-delay:  4s; }
.lp-feat-rich__btn:nth-child(6)  { animation-delay:  5s; }
.lp-feat-rich__btn:nth-child(7)  { animation-delay:  6s; }
.lp-feat-rich__btn:nth-child(8)  { animation-delay:  7s; }
.lp-feat-rich__btn:nth-child(9)  { animation-delay:  8s; }
.lp-feat-rich__btn:nth-child(10) { animation-delay:  9s; }
@keyframes lp-feat-btn-hl {
    0%,   8% { background: var(--c5); color: var(--c1); }
    10%, 100% { background: transparent; color: var(--c5); }
}
.lp-feat-rich__doc {
    flex: 1;
    padding: 1.4em 1.8em;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    overflow: hidden;
}
.lp-feat-rich__line {
    font-size: 0.78em;
    color: var(--c5);
    opacity: 0.5;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-feat-rich__line--title {
    font-size: 1em;
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 0.15em;
}

/* ─── Card 2: Collab — 3 avatars appear/disappear one by one ─── */
.lp-feat-mock--collab {
    align-items: center;
    justify-content: center;
}
.lp-feat-collab__scene {
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 1em;
    position: relative;
}
.lp-feat-collab__av {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    opacity: 0;
    animation: lp-feat-av-in 9s ease-in-out infinite;
}
.lp-feat-collab__av--1 { animation-delay: 0s; }
.lp-feat-collab__av--2 { animation-delay: 3s; }
.lp-feat-collab__av--3 { animation-delay: 6s; }
@keyframes lp-feat-av-in {
    0%,   3%  { opacity: 0; transform: translateY(6px) scale(0.8); }
    15%,  27% { opacity: 1; transform: translateY(0)   scale(1); }
    33%, 100% { opacity: 0; transform: translateY(-6px) scale(0.8); }
}
.lp-feat-collab__circle {
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.lp-feat-collab__name {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--c5);
    white-space: nowrap;
}
.lp-feat-collab__badge {
    font-size: 0.72em;
    color: #10b981;
    font-weight: 600;
    white-space: nowrap;
}

/* ─── Card 3: Export — cursor clicks each format + progress bar ─── */
.lp-feat-mock--export {
    align-items: center;
    justify-content: center;
    position: relative;
}
.lp-feat-export__cursor {
    position: absolute;
    width: 1.2em;
    height: 1.5em;
    z-index: 10;
    pointer-events: none;
    animation: lp-feat-cursor-move 12s ease-in-out infinite,
               lp-feat-cursor-click 12s ease-in-out infinite;
}
.lp-feat-export__cursor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c5);
    opacity: 0.9;
    clip-path: polygon(0 0, 0 100%, 35% 72%, 48% 100%, 62% 94%, 48% 65%, 100% 65%);
}
@keyframes lp-feat-cursor-move {
    0%,   20% { left: 24%; top: 42%; }
    25%,  45% { left: 62%; top: 42%; }
    50%,  70% { left: 24%; top: 68%; }
    75%,  95% { left: 62%; top: 68%; }
    100%       { left: 24%; top: 42%; }
}
@keyframes lp-feat-cursor-click {
    2%,  27%, 52%, 77% { transform: scale(0.75); }
    0%, 4%, 25%, 29%, 50%, 54%, 75%, 79%, 100% { transform: scale(1); }
}
.lp-feat-export__sheet {
    background: var(--c2);
    border: 1px solid var(--ink-a12);
    border-radius: 1em;
    padding: 1.2em;
    width: 88%;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.lp-feat-export__title {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--c5);
    opacity: 0.65;
    text-align: center;
}
.lp-feat-export__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
}
.lp-feat-export__fmt {
    height: 3.8em;
    border-radius: 0.6em;
    background: var(--c3);
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.1s;
    animation: lp-export-fmt-active 12s linear infinite;
}
.lp-feat-export__fmt span {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 800;
    color: var(--c4);
    opacity: 0.4;
    animation: lp-export-badge-active 12s linear infinite;
}
.lp-feat-export__fmt--pdf  { animation-delay:  0s; }
.lp-feat-export__fmt--pdf span  { animation-delay:  0s; }
.lp-feat-export__fmt--docx { animation-delay:  3s; }
.lp-feat-export__fmt--docx span { animation-delay:  3s; }
.lp-feat-export__fmt--odt  { animation-delay:  6s; }
.lp-feat-export__fmt--odt span  { animation-delay:  6s; }
.lp-feat-export__fmt--html { animation-delay:  9s; }
.lp-feat-export__fmt--html span { animation-delay:  9s; }
@keyframes lp-export-fmt-active {
    0%,   22% { border-color: var(--c5); }
    25%, 100% { border-color: transparent; }
}
@keyframes lp-export-badge-active {
    0%,   22% { color: var(--c5); opacity: 1; }
    25%, 100% { color: var(--c4); opacity: 0.4; }
}
.lp-feat-export__bar {
    height: 1.8em;
    background: var(--c3);
    border-radius: 0.5em;
    overflow: hidden;
    position: relative;
}
.lp-feat-export__progress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--c5);
    border-radius: inherit;
    animation: lp-feat-export-fill 12s linear infinite;
}
@keyframes lp-feat-export-fill {
    0%, 5%   { width: 0;    opacity: 0.8; }
    22%      { width: 100%; opacity: 0.8; }
    24%      { width: 100%; opacity: 0; }
    25%, 30% { width: 0;    opacity: 0.8; }
    47%      { width: 100%; opacity: 0.8; }
    49%      { width: 100%; opacity: 0; }
    50%, 55% { width: 0;    opacity: 0.8; }
    72%      { width: 100%; opacity: 0.8; }
    74%      { width: 100%; opacity: 0; }
    75%, 80% { width: 0;    opacity: 0.8; }
    97%      { width: 100%; opacity: 0.8; }
    99%      { width: 100%; opacity: 0; }
    100%     { width: 0;    opacity: 0; }
}

/* ─── Card 4: Version history — continuous scroll ─── */
.lp-feat-mock--history {
    overflow: hidden;
}
.lp-feat-ver-scroll {
    flex: 1;
    overflow: hidden;
    padding: 0.5em 0;
}
.lp-feat-ver-track {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: lp-feat-ver-scroll 10s linear infinite;
}
@keyframes lp-feat-ver-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
.lp-feat-ver-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8em;
    padding: 0.7em 1.4em;
    border-bottom: 1px solid var(--ink-a08);
    flex-shrink: 0;
}
.lp-feat-ver-row--active .lp-feat-ver-dot {
    background: #3b82f6;
    opacity: 1;
}
.lp-feat-ver-dot {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: var(--c5);
    opacity: 0.25;
    flex-shrink: 0;
    margin-top: 0.3em;
}
.lp-feat-ver-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.lp-feat-ver-name {
    font-size: 0.82em;
    color: var(--c5);
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-feat-ver-row--active .lp-feat-ver-name { opacity: 1; font-weight: 600; }
.lp-feat-ver-time {
    font-size: 0.68em;
    color: var(--c4);
    opacity: 0.55;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   HOW IT WORKS
───────────────────────────────────────────── */

.lp-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 140px;
    margin-top: 72px;
    padding: 20px 0;
}

/* ligne */
.lp-steps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--c3);
    transform: translateX(-50%);
    border-radius: 999px;
}

/* progression */
.lp-steps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: var(--steps-progress, 0%);
    background: #ff8c06;
    transform: translateX(-50%);
    border-radius: 999px;
    transition: height 0.12s linear;
}

.lp-step {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 80px 1fr;

    align-items: center;
    gap: 40px;
}

/* alternance */
.lp-step:nth-child(odd) .lp-step__content {
    grid-column: 1;
}

.lp-step:nth-child(odd) .lp-step__visual {
    grid-column: 3;
}

.lp-step:nth-child(even) .lp-step__content {
    grid-column: 3;
}

.lp-step:nth-child(even) .lp-step__visual {
    grid-column: 1;
}

/* centre */
.lp-step__center {
    grid-column: 2;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 10;
}

/* point */
.lp-step__dot {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: var(--c3);
    border: none;
    transform: scale(0.6);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.lp-step.is-active .lp-step__dot {
    background: #ff8c06;
    transform: scale(1);
}

/* blocs */
/* animations alternées supprimées — les steps sont toujours visibles */

.lp-step.is-active .lp-step__content,
.lp-step.is-active .lp-step__visual {
    opacity: 1; /* conservé pour compatibilité */
}

/* contenu */
.lp-step__content {
    background: var(--c2);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    z-index: 2;
}

.lp-step__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c5);
    margin-bottom: 12px;
}

.lp-step__desc {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--c4);
}

/* visuel */
.lp-step__visual {
    height: 240px;

    overflow: hidden;
    position: relative;

    background: var(--c1);

    border: 2px solid #dddddd;
    border-radius: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(7px, 1vw, 10px);

    z-index: 2;
}

body.theme-dark-mono .lp-step__visual,
body.theme-dark-color .lp-step__visual {
    border-color: #222222;
}

/* ── MOCKUP STEP 1 ── */

.lp-step-mock {
    width: 100%;
    height: 100%;
}

.lp-step-doc__page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
}

.lp-step-doc__line {
    height: 10px;
    border-radius: 999px;
    background: var(--c3);
    animation: lpDocPulse 2s ease-in-out infinite;
}

.lp-step-doc__line--h {
    width: 60%;
    height: 14px;
    background: var(--c5);
}

.lp-step-doc__cursor {
    width: 2px;
    height: 18px;
    background: var(--c5);
    animation: lpBlink 1s infinite;
}

/* ── STEP 2 ── */

.lp-step-team__scene {
    position: relative;
    width: 100%;
    height: 100%;
}

.lp-step-team__av {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    animation: lpFloat 4s ease-in-out infinite;
}

.lp-step-team__av--1 {
    left: 25%;
    top: 25%;
}

.lp-step-team__av--2 {
    right: 25%;
    bottom: 25%;
}

.lp-step-team__circle {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    color: white;
    font-weight: 800;

    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-step-team__name {
    font-weight: 700;
    color: var(--c5);
}

.lp-step-team__badge {
    font-size: 0.75rem;
    color: #10b981;
}

/* ── STEP 3 ── */

.lp-step-exp__sheet {
    width: 80%;
}

.lp-step-exp__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}

.lp-step-exp__fmt {
    height: 60px;
    border-radius: 16px;

    background: var(--c2);

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
    color: var(--c5);

    animation: lpPop 3s infinite;
}

.lp-step-exp__bar {
    height: 10px;
    margin-top: 20px;

    background: var(--c3);
    border-radius: 999px;
    overflow: hidden;
}

.lp-step-exp__progress {
    height: 100%;
    width: 60%;
    background: var(--c5);

    animation: lpLoad 2s ease-in-out infinite;
}

/* animations */

@keyframes lpBlink {
    50% { opacity: 0; }
}

@keyframes lpDocPulse {
    50% { opacity: 0.5; }
}

@keyframes lpFloat {
    50% { transform: translateY(-8px); }
}

@keyframes lpPop {
    50% { transform: scale(1.05); }
}

@keyframes lpLoad {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* mobile */

@media (max-width: 900px) {

    .lp-steps {
        gap: 72px;
        padding-left: 28px;
    }

    .lp-steps::before,
    .lp-steps::after {
        left: 8px;
    }

    .lp-step {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lp-step__center {
        position: absolute;
        left: -20px;
        top: 28px;
        transform: translateX(-50%);
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .lp-step__content,
    .lp-step__visual {
        grid-column: 1 !important;
    }

    .lp-step__content { grid-row: 1 !important; }
    .lp-step__visual  { grid-row: 2 !important; }

    .lp-step__visual {
        height: 220px;
    }
}

.lp-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 72px;
    padding: 20px 0;
}

/* ligne centrale */
.lp-steps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--c3);
    transform: translateX(-50%);
    border-radius: 999px;
}

/* progression */
.lp-steps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: var(--steps-progress, 0%);
    background: #ff8c06;
    transform: translateX(-50%);
    border-radius: 999px;
    transition: height 0.12s linear;
}

.lp-step {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 80px 1fr;

    align-items: center;
    gap: 40px;
}

/* supprimé : .lp-step.visible (steps toujours visibles) */

/* alternance */
.lp-step:nth-child(odd) .lp-step__content {
    grid-column: 1;
    grid-row: 1;
}

.lp-step:nth-child(odd) .lp-step__visual {
    grid-column: 3;
    grid-row: 1;
}

.lp-step:nth-child(even) .lp-step__content {
    grid-column: 3;
    grid-row: 1;
}

.lp-step:nth-child(even) .lp-step__visual {
    grid-column: 1;
    grid-row: 1;
}

/* point */
.lp-step__dot {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: var(--c3);
    border: none;
    transform: scale(0.6);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.lp-step.is-active .lp-step__dot {
    transform: scale(1);
    background: #ff8c06;
}

/* contenu */
.lp-step__content {
    background: var(--c2);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    z-index: 2;
}

.lp-step__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c5);
    margin-bottom: 12px;
}

.lp-step__desc {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--c4);
    margin: 0;
}

/* visuel */
.lp-step__visual {
    height: 240px;

    overflow: hidden;
    position: relative;

    background: var(--c1);

    border: 2px solid #dddddd;
    border-radius: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(7px, 1vw, 10px);

    z-index: 2;
}

body.theme-dark-mono .lp-step__visual,
body.theme-dark-color .lp-step__visual {
    border-color: #222222;
}

/* supprimé : .lp-step.is-active opacity (steps toujours visibles) */

/* mobile */
@media (max-width: 900px) {

    .lp-steps {
        gap: 64px;
        padding-left: 28px;
    }

    .lp-steps::before,
    .lp-steps::after {
        left: 8px;
    }

    .lp-step {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lp-step__center {
        position: absolute;
        left: -20px;
        top: 28px;
        transform: translateX(-50%);
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .lp-step__content,
    .lp-step__visual {
        grid-column: 1 !important;
    }

    .lp-step__content { grid-row: 1 !important; }
    .lp-step__visual  { grid-row: 2 !important; }

    .lp-step__visual {
        height: 200px;
    }
}

.lp-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 72px;
    padding: 20px 0;
}

/* Ligne centrale */
.lp-steps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--c3);
    transform: translateX(-50%);
    border-radius: 999px;
}

/* Ligne active scroll */
.lp-steps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: var(--steps-progress, 0%);
    background: #ff8c06;
    transform: translateX(-50%);
    border-radius: 999px;
    transition: height 0.12s linear;
}

.lp-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
    gap: 32px;
}

/* point central — géré via .lp-step__dot dans .lp-step__center */

/* alternance */
.lp-step:nth-child(odd) .lp-step__content {
    grid-column: 1;
    grid-row: 1;
}

.lp-step:nth-child(odd) .lp-step__visual {
    grid-column: 3;
    grid-row: 1;
}

.lp-step:nth-child(even) .lp-step__content {
    grid-column: 3;
    grid-row: 1;
}

.lp-step:nth-child(even) .lp-step__visual {
    grid-column: 1;
    grid-row: 1;
}

/* contenu */
.lp-step__content {
    background: var(--c2);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    z-index: 2;
}

/* visuel */
.lp-step__visual {
    position: relative;
    z-index: 2;

    height: 240px;
    overflow: hidden;
    background: var(--c1);
    border: 2px solid #dddddd;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(7px, 1vw, 10px);
}

/* supprimé : animation d'apparition — steps toujours visibles */

/* mobile */
@media (max-width: 900px) {

    .lp-steps {
        gap: 56px;
        padding-left: 28px;
    }

    .lp-steps::before,
    .lp-steps::after {
        left: 8px;
    }

    .lp-step {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lp-step__center {
        position: absolute;
        left: -20px;
        top: 28px;
        transform: translateX(-50%);
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .lp-step__visual {
        height: 200px;
    }
}

/* ── STEP vidéo ── */
.lp-step-mock--video {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--c2);
}

.lp-step-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Hero social proof ── */
.lp-hero__social-proof {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ink-a35);
    letter-spacing: 0.01em;
    margin-top: 16px;
}
.lp-hero__social-star {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: var(--icon-c5);
    opacity: 0.35;
}
.lp-anim-social {
    opacity: 0;
    animation: lp-fade-up 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 0.86s;
}
@media (prefers-reduced-motion: reduce) {
    .lp-anim-social { opacity: 1 !important; animation: none !important; }
}

/* ===== PAGE MAINTENANCE ===== */
.maintenance-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Light mode */
    background: linear-gradient(135deg, #ffffff 0%, #ffe8d0 55%, #ff7606 100%);
}
body.theme-dark-mono .maintenance-hero,
body.theme-dark-color .maintenance-hero {
    background: linear-gradient(135deg, #111111 0%, #1a0800 55%, #ff7606 100%);
}
.maintenance-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}
.maintenance-hero .lp-hero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent, var(--c1));
    z-index: 2;
    pointer-events: none;
}
.maintenance-hero__body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 48px 24px;
    max-width: 600px;
    width: 100%;
}
.maintenance-hero__icon {
    width: 96px;
    height: 96px;
    filter: var(--icon-c5);
}
.maintenance-hero__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1.15;
    color: var(--c5);
    margin: 0;
}
body.theme-dark-mono .maintenance-hero__title,
body.theme-dark-color .maintenance-hero__title {
    color: #ffffff;
}
.maintenance-hero__desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--c5);
    opacity: 0.72;
    margin: 0;
    max-width: 460px;
}
body.theme-dark-mono .maintenance-hero__desc,
body.theme-dark-color .maintenance-hero__desc {
    color: rgba(255,255,255,0.75);
}
.maintenance-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 8px;
}
.maintenance-hero__actions .dash-btn {
    align-items: center;
}

@media (max-width: 480px) {
    .maintenance-hero__title { font-size: 1.7rem; }
    .maintenance-hero__actions { flex-direction: column; width: 100%; }
    .maintenance-hero__actions .dash-btn { width: 100%; justify-content: center; }
}

/* ── Schools marquee ── */
.lp-schools {
    padding: 48px 0;
}
/* Wrapper marquee dédié — pattern identique à .lp-tpl__marquee */
.lp-schools__marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.lp-schools__row {
    position: relative;
    overflow: visible;
    width: 100%;
}
.lp-schools__row:hover .lp-schools__track--light,
.lp-schools__row:hover .lp-schools__track--dark {
    animation-play-state: paused;
}
/* Piste light : en flux normal → donne sa hauteur au conteneur */
.lp-schools__track--light {
    display: flex;
    align-items: center;
    width: max-content;
    animation: lp-schools-scroll 22s linear infinite;
    animation-play-state: running; /* empêche le navigateur de throttler quand opacity:0 */
    will-change: transform;
    transition: opacity 0.3s;
}
/* Piste dark : superposée en position absolute */
.lp-schools__track--dark {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    width: max-content;
    animation: lp-schools-scroll 22s linear infinite;
    animation-play-state: running; /* empêche le navigateur de throttler quand opacity:0 */
    will-change: transform;
    transition: opacity 0.3s;
    opacity: 0;
}
body.theme-dark-mono .lp-schools__track--light,
body.theme-dark-color .lp-schools__track--light { opacity: 0; }
body.theme-dark-mono .lp-schools__track--dark,
body.theme-dark-color .lp-schools__track--dark  { opacity: 1; }
@keyframes lp-schools-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.lp-schools__logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 56px;
    opacity: 0.75;
    filter: grayscale(20%);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .lp-schools__track--light,
    .lp-schools__track--dark { animation-play-state: paused; }
}
@media (max-width: 768px) {
    .lp-schools { padding: 32px 0; }
    .lp-schools__logo { height: 40px; margin-right: 36px; }
}
@media (max-width: 480px) {
    .lp-schools__logo { height: 32px; margin-right: 28px; }
}

/* ── Templates marquee ── */
.lp-tpl__marquee {
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.lp-tpl__track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: lp-tpl-scroll 14s linear infinite;
}
.lp-tpl__marquee:hover .lp-tpl__track {
    animation-play-state: paused;
}
.lp-tpl__track .doc-card {
    flex-shrink: 0;
    width: 220px;
}
@keyframes lp-tpl-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.lp-tpl-cta {
    text-align: center;
    margin-top: 32px;
}

/* ── AI section ── */
.lp-ai__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.lp-ai__bento {
    border-radius: 24px;
    overflow: hidden;
    line-height: 0;
    align-self: stretch;
}
.lp-ai__tel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}
.lp-ai__tel-img--dark  { display: none; }
body.theme-dark-mono .lp-ai__tel-img--dark,
body.theme-dark-color .lp-ai__tel-img--dark  { display: block; }
body.theme-dark-mono .lp-ai__tel-img--light,
body.theme-dark-color .lp-ai__tel-img--light { display: none; }

/*
 * iPhone 16 Pro mockup
 * All colors driven by CSS custom properties on .lp-ai__phone
 * → clean single-point light/dark override
 */
.lp-ai__phone {
    /* ── Light: Titanium Natural ── */
    --ph-frame-g: linear-gradient(170deg,
        #c8c5bd 0%, #b9b6ae 18%,
        #a9a69e 38%, #b2afa7 58%,
        #c2bfb7 78%, #b6b3ab 100%);
    --ph-inset1:  rgba(255,255,255,0.56);
    --ph-inset2:  rgba(255,255,255,0.18);
    --ph-inset3:  rgba(0,0,0,0.24);
    --ph-inset4:  rgba(0,0,0,0.14);
    --ph-well:    rgba(0,0,0,0.32);
    --ph-btn-c:   #a8a59d;
    --ph-scr:     #f5f5f7;
    --ph-sb:      #0a0a0a;
    --ph-hdr-bg:  #f5f5f7;
    --ph-hdr-sep: rgba(0,0,0,0.08);
    --ph-name:    #0a0a0a;
    --ph-online:  #34C759;
    --ph-ic:      #007AFF;
    --ph-back:    #007AFF;
    --ph-chat:    #f5f5f7;
    --ph-bu-bg:   #007AFF;
    --ph-bu-tx:   #ffffff;
    --ph-ba-bg:   #e4e4e9;
    --ph-ba-tx:   #0a0a0a;
    --ph-av-bg:   #dcdce2;
    --ph-av-ic:   #636366;
    --ph-dot:     #909096;
    --ph-inp-bg:  #f5f5f7;
    --ph-inp-sep: rgba(0,0,0,0.08);
    --ph-fld-bg:  #ffffff;
    --ph-fld-bd:  rgba(0,0,0,0.1);
    --ph-ph:      #aeaeb2;
    --ph-send:    #007AFF;
    --ph-hbar-bg: #f5f5f7;
    --ph-hbar:    rgba(0,0,0,0.18);

    position: relative;
    width: 256px;
    background: var(--ph-frame-g);
    border-radius: 54px;
    padding: 11px;
    box-shadow:
        inset 0  1.5px 0   var(--ph-inset1),
        inset 0 -1px   0   var(--ph-inset3),
        inset  1px  0  0   var(--ph-inset2),
        inset -1px  0  0   var(--ph-inset4),
        inset  0    0  0 1.5px var(--ph-well);
}
/* ── Dark: Titanium Black ── */
body.theme-dark-mono .lp-ai__phone,
body.theme-dark-color .lp-ai__phone {
    --ph-frame-g: linear-gradient(170deg,
        #3e3d3b 0%, #302f2d 18%,
        #252422 38%, #2c2b29 58%,
        #363533 78%, #2c2b29 100%);
    --ph-inset1:  rgba(255,255,255,0.30);
    --ph-inset2:  rgba(255,255,255,0.10);
    --ph-inset3:  rgba(0,0,0,0.65);
    --ph-inset4:  rgba(0,0,0,0.45);
    --ph-well:    rgba(0,0,0,0.75);
    --ph-btn-c:   #38373580;
    --ph-scr:     #000000;
    --ph-sb:      #ffffff;
    --ph-hdr-bg:  #1c1c1e;
    --ph-hdr-sep: rgba(255,255,255,0.08);
    --ph-name:    #ffffff;
    --ph-online:  #30d158;
    --ph-ic:      #ffffff;
    --ph-back:    #0a84ff;
    --ph-chat:    #000000;
    --ph-bu-bg:   #0a84ff;
    --ph-bu-tx:   #ffffff;
    --ph-ba-bg:   #1c1c1e;
    --ph-ba-tx:   #ffffff;
    --ph-av-bg:   #2c2c2e;
    --ph-av-ic:   #8e8e93;
    --ph-dot:     #636366;
    --ph-inp-bg:  #1c1c1e;
    --ph-inp-sep: rgba(255,255,255,0.08);
    --ph-fld-bg:  #2c2c2e;
    --ph-fld-bd:  rgba(255,255,255,0.06);
    --ph-ph:      #48484a;
    --ph-send:    #0a84ff;
    --ph-hbar-bg: #000000;
    --ph-hbar:    rgba(255,255,255,0.28);
    background: var(--ph-frame-g);
}

/* Side hardware buttons */
.lp-ai__btn {
    position: absolute;
    background: var(--ph-btn-c);
    border-radius: 2px;
}
.lp-ai__btn--action { left: -3px; top: 74px;  width: 3px; height: 14px; border-radius: 2px 0 0 2px; }
.lp-ai__btn--volup  { left: -3px; top: 106px; width: 3px; height: 30px; border-radius: 2px 0 0 2px; }
.lp-ai__btn--voldn  { left: -3px; top: 144px; width: 3px; height: 30px; border-radius: 2px 0 0 2px; }
.lp-ai__btn--power  { right: -3px; top: 112px; width: 3px; height: 62px; border-radius: 0 2px 2px 0; }

/* Screen */
.lp-ai__display {
    background: var(--ph-scr);
    border-radius: 44px;
    overflow: hidden;
    height: 530px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Dynamic Island */
.lp-ai__di {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 28px;
    background: #000;
    border-radius: 20px;
    z-index: 30;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Status bar */
.lp-ai__sb {
    height: 54px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 22px 7px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    color: var(--ph-sb);
}
.lp-ai__sb-time {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
    color: var(--ph-sb);
}
.lp-ai__sb-right {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ph-sb);
}
.lp-ai__sb-signal { width: 16px; height: 12px; }
.lp-ai__sb-wifi   { width: 16px; height: 12px; }
.lp-ai__sb-batt   { width: 28px; height: 13px; }

/* Chat header / app bar */
.lp-ai__hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 10px;
    border-bottom: 0.5px solid var(--ph-hdr-sep);
    background: var(--ph-hdr-bg);
    flex-shrink: 0;
}
.lp-ai__hdr-back {
    background: none;
    border: none;
    padding: 4px 4px 4px 0;
    cursor: default;
    color: var(--ph-back);
    display: flex; align-items: center;
}
.lp-ai__hdr-back svg { width: 9px; height: 16px; }
.lp-ai__hdr-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ph-av-bg);
    color: var(--ph-av-ic);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.lp-ai__hdr-av svg { width: 20px; height: 20px; }
.lp-ai__hdr-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.lp-ai__hdr-name {
    font-size: 0.71rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--ph-name);
    line-height: 1.2;
}
.lp-ai__hdr-sub {
    font-size: 0.56rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--ph-online);
}
.lp-ai__hdr-actions {
    color: var(--ph-ic);
    display: flex; align-items: center;
}
.lp-ai__hdr-actions svg { width: 18px; height: 18px; }

/* Messages */
.lp-ai__msgs {
    flex: 1;
    overflow: hidden;
    background: var(--ph-chat);
    padding: 10px 12px 0;
}
.lp-ai__track {
    display: flex;
    flex-direction: column;
    animation: lp-phone-scroll 30s linear infinite;
    will-change: transform;
}
@keyframes lp-phone-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.lp-ai__m {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 7px;
}
.lp-ai__m--u { justify-content: flex-end; }
.lp-ai__m--a { justify-content: flex-start; }
.lp-ai__b {
    max-width: 73%;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    line-height: 1.48;
    font-family: 'Montserrat', sans-serif;
    word-break: break-word;
}
.lp-ai__b--u {
    background: var(--ph-bu-bg);
    color: var(--ph-bu-tx);
    border-bottom-right-radius: 5px;
}
.lp-ai__b--a {
    background: var(--ph-ba-bg);
    color: var(--ph-ba-tx);
    border-bottom-left-radius: 5px;
}
.lp-ai__li { display: block; margin-top: 2px; }
.lp-ai__aav {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ph-av-bg);
    color: var(--ph-av-ic);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.lp-ai__aav svg { width: 14px; height: 14px; }

/* Typing dots */
.lp-ai__dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 0;
}
.lp-ai__dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ph-dot);
    animation: lp-dots-b 1.2s ease-in-out infinite;
}
.lp-ai__dots span:nth-child(2) { animation-delay: 0.2s; }
.lp-ai__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lp-dots-b {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* Input bar */
.lp-ai__inp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 10px;
    background: var(--ph-inp-bg);
    border-top: 0.5px solid var(--ph-inp-sep);
    flex-shrink: 0;
}
.lp-ai__inp-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--ph-fld-bg);
    border: 1px solid var(--ph-fld-bd);
    border-radius: 22px;
    padding: 7px 14px;
}
.lp-ai__inp-ic {
    width: 13px; height: 13px;
    color: var(--ph-ph);
    flex-shrink: 0;
}
.lp-ai__inp-ph {
    font-size: 0.63rem;
    color: var(--ph-ph);
    font-family: 'Montserrat', sans-serif;
}
.lp-ai__inp-send {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--ph-send);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: default;
    padding: 0;
}
.lp-ai__inp-send svg {
    width: 13px; height: 13px;
    transform: rotate(-45deg);
    margin-left: 1px;
}

/* Home indicator */
.lp-ai__home {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ph-hbar-bg);
    flex-shrink: 0;
}
.lp-ai__home::after {
    content: '';
    width: 88px; height: 4px;
    background: var(--ph-hbar);
    border-radius: 2px;
}

/* Text side */
.lp-ai__desc {
    font-size: 0.92rem;
    color: var(--c4);
    line-height: 1.75;
    margin: 16px 0 24px;
}
.lp-ai__chips {
    list-style: none;
    padding: 0; margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-ai__chip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--c5);
}
.lp-ai__chip-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    filter: var(--icon-c5);
}

/* ── Collaboration ── */
.lp-collab__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.lp-collab__desc {
    font-size: 0.92rem;
    color: var(--c4);
    line-height: 1.75;
    margin: 16px 0 24px;
}
.lp-collab__list {
    list-style: none;
    padding: 0; margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-collab__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--c5);
}
.lp-collab__check {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    filter: var(--icon-c5);
}
.lp-collab__btn { display: inline-flex; }

/* Collab visual — vidéo */
.lp-collab__video-wrap {
    width: 100%;
    height: 240px;
    background: var(--c1);
    border: 2px solid #dddddd;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

body.theme-dark-mono .lp-collab__video-wrap,
body.theme-dark-color .lp-collab__video-wrap {
    border-color: #222222;
}

/* Collab visual mockup */
.lp-collab-mock {
    background: var(--c2);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-section:nth-child(odd) .lp-collab-mock { background: var(--c1); }
.lp-collab-mock__doc {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
}
.lp-collab-mock__line {
    height: 9px;
    background: var(--c4);
    border-radius: 4px;
    opacity: 0.3;
    width: 100%;
}
.lp-collab-mock__line--h  { opacity: 0.65; height: 13px; width: 50%; background: var(--c5); }
.lp-collab-mock__line--short { width: 45%; }
.lp-collab-mock__line--wide  { width: 75%; }
.lp-collab-mock__cursor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--c1);
    width: 18px; height: 18px;
    border-radius: 50%;
    align-self: flex-end;
}
.lp-collab-mock__cursor--a { background: #3b82f6; }
.lp-collab-mock__cursor--b { background: #10b981; }
.lp-collab-mock__avatars {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-collab-mock__av {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 800;
    color: var(--c1);
}
.lp-collab-mock__av--a { background: #3b82f6; }
.lp-collab-mock__av--b { background: #10b981; }
.lp-collab-mock__av--c { background: #f59e0b; }
.lp-collab-mock__online {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    margin-left: 4px;
}

/* ── Editor mockup (collab section) ── */
.lp-editor-mock {
    font-size: clamp(5px, 0.75vw, 8px);
    border-radius: 1.2em;
    overflow: hidden;
    border: 1px solid var(--ink-a12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    background: var(--c1);
}
.lp-editor-mock__chrome {
    flex-shrink: 0;
    height: 3.2em;
    background: var(--c2);
    border-bottom: 1px solid var(--ink-a08);
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 1.6em;
}
.lp-editor-mock__topbar {
    flex-shrink: 0;
    height: 4.2em;
    background: var(--c2);
    border-bottom: 1px solid var(--ink-a08);
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0 1.4em;
}
.lp-editor-mock__back {
    width: 2em; height: 2em;
    background: var(--c3);
    border-radius: 0.5em;
    flex-shrink: 0;
    opacity: 0.7;
}
.lp-editor-mock__docname {
    height: 1.2em;
    width: 10em;
    background: var(--c5);
    border-radius: 0.35em;
    opacity: 0.55;
}
.lp-editor-mock__status {
    height: 0.75em;
    width: 4em;
    background: var(--c4);
    border-radius: 0.25em;
    opacity: 0.35;
    flex-shrink: 0;
}
.lp-editor-mock__presence {
    display: flex;
    margin-left: auto;
    gap: -0.4em;
}
.lp-editor-mock__av {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 800;
    color: #fff;
    border: 2px solid var(--c2);
    margin-left: -0.5em;
    flex-shrink: 0;
}
.lp-editor-mock__presence .lp-editor-mock__av:first-child { margin-left: 0; }
.lp-editor-mock__topbtn {
    width: 5em;
    height: 2em;
    background: var(--c3);
    border-radius: 0.5em;
    opacity: 0.7;
    flex-shrink: 0;
}
.lp-editor-mock__toolbar {
    flex-shrink: 0;
    height: 3.6em;
    background: var(--c2);
    border-bottom: 1px solid var(--ink-a08);
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 1em;
}
.lp-editor-mock__tsel {
    height: 2em;
    width: 6em;
    background: var(--c3);
    border-radius: 0.4em;
    flex-shrink: 0;
    opacity: 0.75;
}
.lp-editor-mock__tsel--sm { width: 4em; }
.lp-editor-mock__tsep {
    width: 1px;
    height: 1.6em;
    background: var(--ink-a12);
    flex-shrink: 0;
    margin: 0 0.2em;
}
.lp-editor-mock__tbtn {
    width: 2.2em;
    height: 2.2em;
    border-radius: 0.4em;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color: var(--c5);
    opacity: 0.55;
    flex-shrink: 0;
}
.lp-editor-mock__tbtn--active {
    background: var(--c3);
    opacity: 1;
}
.lp-editor-mock__body {
    flex: 1;
    background: var(--c1);
    padding: 2em 3em;
    overflow: hidden;
    border-radius: 0 0 1.2em 1.2em;
}
.lp-editor-mock__page {
    background: var(--c1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
}
.lp-editor-mock__line {
    height: 0.85em;
    width: 100%;
    background: var(--c5);
    border-radius: 0.25em;
    opacity: 0.12;
    flex-shrink: 0;
}
.lp-editor-mock__line--title {
    height: 1.5em;
    width: 55%;
    opacity: 0.5;
}
.lp-editor-mock__caret {
    position: relative;
    width: 2px;
    height: 1.3em;
    border-radius: 1px;
    align-self: flex-start;
    flex-shrink: 0;
    margin: -0.3em 0 -0.3em;
    left: 0;
}
.lp-editor-mock__caret-label {
    position: absolute;
    top: -1.6em;
    left: 0;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    padding: 0.1em 0.5em;
    border-radius: 0.4em 0.4em 0.4em 0;
    line-height: 1.4;
}

/* ── Premium ── */
/* ── Reviews / Testimonials ── */
.lp-reviews {
    background: var(--c1) !important;
}
.lp-reviews .lp-section__inner {
    margin-bottom: 0;
}
.lp-reviews__marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.lp-reviews__row {
    overflow: visible;
    width: 100%;
}
.lp-reviews__row--rtl {
    margin-top: 20px;
}
.lp-reviews__track {
    display: flex;
    gap: 20px;
    width: max-content;
}
.lp-reviews__track--ltr {
    animation: lp-reviews-ltr 50s linear infinite;
}
.lp-reviews__track--rtl {
    animation: lp-reviews-rtl 50s linear infinite;
}
.lp-reviews__row:hover .lp-reviews__track {
    animation-play-state: paused;
}
.lp-reviews__track .lp-review-card {
    flex-shrink: 0;
    width: 460px;
}
@keyframes lp-reviews-ltr {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}
@keyframes lp-reviews-rtl {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.lp-review-card {
    background: #dddddd;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.theme-dark-mono .lp-review-card,
body.theme-dark-color .lp-review-card {
    background: #222222;
}
.lp-review-card__stars {
    display: flex;
    gap: 3px;
}
.lp-review-card__star {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(52%) sepia(91%) saturate(1582%) hue-rotate(359deg) brightness(99%) contrast(101%);
}
.lp-review-card__text {
    font-size: 0.92rem;
    color: #111111;
    line-height: 1.75;
    flex: 1;
    margin: 0;
}
body.theme-dark-mono .lp-review-card__text,
body.theme-dark-color .lp-review-card__text {
    color: #ffffff;
}
.lp-review-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-review-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #bbbbbb;
    color: #333333;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.theme-dark-mono .lp-review-card__avatar,
body.theme-dark-color .lp-review-card__avatar {
    background: #333333;
    color: #ffffff;
}
.lp-review-card__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c5);
}
body.theme-dark-mono .lp-review-card__name,
body.theme-dark-color .lp-review-card__name {
    color: #ffffff;
}
.lp-review-card__role {
    font-size: 0.8rem;
    color: #666666;
}
body.theme-dark-mono .lp-review-card__role,
body.theme-dark-color .lp-review-card__role {
    color: #999999;
}

/* ── Comparison ── */
.lp-compare { background: none !important; }

/* ── Table de comparaison ── */
.lp-table-wrap {
    margin-top: 40px;
    overflow-x: auto;
    border-radius: 20px;
}
.lp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 600px;
}
.lp-th {
    height: 60px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    padding: 0 12px;
    white-space: nowrap;
}
.lp-th--label {
    width: 140px;
    min-width: 140px;
    background: #dddddd;
    border-radius: 20px 0 0 0;
    text-align: left;
}
body.theme-dark-mono .lp-th--label,
body.theme-dark-color .lp-th--label {
    background: var(--c2);
}
.lp-td {
    height: 52px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 12px;
    vertical-align: middle;
}
.lp-td--label {
    text-align: left;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--c5);
    background: #dddddd;
    padding: 8px 16px;
}
body.theme-dark-mono .lp-td--label,
body.theme-dark-color .lp-td--label {
    background: var(--c2);
}
tbody tr:last-child .lp-td--label {
    border-radius: 0 0 0 20px;
}
/* Couleurs colonnes non-actives */
.lp-col--other {
    background: #dddddd;
    color: #666666;
}
body.theme-dark-mono .lp-col--other,
body.theme-dark-color .lp-col--other {
    background: var(--c2);
    color: var(--c4);
}
/* Colonne active */
.lp-col--studock {
    background: #111111;
    color: #ffffff;
}
body.theme-dark-mono .lp-col--studock,
body.theme-dark-color .lp-col--studock {
    background: #ffffff;
    color: #111111;
}
/* Arrondi header dernière colonne */
.lp-th:last-child {
    border-radius: 0 20px 0 0;
}
/* Arrondi dernière cellule dernière colonne */
tbody tr:last-child .lp-td:last-child {
    border-radius: 0 0 20px 0;
}
/* Icônes */
.lp-col--other .lp-comp-icon--yes { filter: brightness(0); opacity: 0.8; }
.lp-col--other .lp-comp-icon--no  { filter: brightness(0); opacity: 0.25; }
.lp-col--studock .lp-comp-icon--yes { filter: brightness(0) invert(1); }
.lp-col--studock .lp-comp-icon--no  { filter: brightness(0) invert(1); opacity: 0.3; }
body.theme-dark-mono .lp-col--other .lp-comp-icon--yes,
body.theme-dark-color .lp-col--other .lp-comp-icon--yes { filter: brightness(0) invert(1); opacity: 0.7; }
body.theme-dark-mono .lp-col--other .lp-comp-icon--no,
body.theme-dark-color .lp-col--other .lp-comp-icon--no  { filter: brightness(0) invert(1); opacity: 0.25; }
body.theme-dark-mono .lp-col--studock .lp-comp-icon--yes,
body.theme-dark-color .lp-col--studock .lp-comp-icon--yes { filter: brightness(0); }
body.theme-dark-mono .lp-col--studock .lp-comp-icon--no,
body.theme-dark-color .lp-col--studock .lp-comp-icon--no  { filter: brightness(0); opacity: 0.3; }
.lp-comp-col--studock {
    background: #111111;
    color: #ffffff;
}
.lp-comp-col--other {
    background: #dddddd;
    color: #666666;
}
/* Colonne actuelle - Ultra avec fond noir */
.lp-comp-col--current.lp-comp-col--studock {
    background: #111111;
    color: #ffffff;
}
/* Colonne actuelle - autres plans avec fond blanc */
.lp-comp-col--current.lp-comp-col--other {
    background: #ffffff;
    color: #111111;
}
/* Dark mode : inverser les couleurs pour le bloc actif */
body.theme-dark-mono .lp-comp-col--current.lp-comp-col--studock,
body.theme-dark-color .lp-comp-col--current.lp-comp-col--studock {
    background: #ffffff;
    color: #111111;
}
body.theme-dark-mono .lp-comp-col--current.lp-comp-col--other,
body.theme-dark-color .lp-comp-col--current.lp-comp-col--other {
    background: #111111;
    color: #ffffff;
}
/* Texte et icônes dans colonne actuelle Ultra */
.lp-comp-col--current.lp-comp-col--studock .lp-comp-cell__label {
    color: inherit;
}
.lp-comp-col--current.lp-comp-col--studock .pt-val {
    color: inherit;
}
.lp-comp-col--current.lp-comp-col--studock .lp-comp-icon--yes {
    filter: brightness(0) invert(1);
}
.lp-comp-col--current.lp-comp-col--studock .lp-comp-icon--no {
    filter: brightness(0) invert(1);
}
/* Dark mode : icônes inversées pour Ultra actif */
body.theme-dark-mono .lp-comp-col--current.lp-comp-col--studock .lp-comp-icon--yes,
body.theme-dark-color .lp-comp-col--current.lp-comp-col--studock .lp-comp-icon--yes {
    filter: brightness(0);
}
body.theme-dark-mono .lp-comp-col--current.lp-comp-col--studock .lp-comp-icon--no,
body.theme-dark-color .lp-comp-col--current.lp-comp-col--studock .lp-comp-icon--no {
    filter: brightness(0);
}
/* Texte et icônes dans colonne actuelle autres plans */
.lp-comp-col--current.lp-comp-col--other .lp-comp-cell__label {
    color: inherit;
}
.lp-comp-col--current.lp-comp-col--other .pt-val {
    color: inherit;
}
.lp-comp-col--current.lp-comp-col--other .lp-comp-icon--yes {
    filter: brightness(0);
}
.lp-comp-col--current.lp-comp-col--other .lp-comp-icon--no {
    filter: brightness(0);
}
/* Dark mode : icônes inversées pour autres plans actifs */
body.theme-dark-mono .lp-comp-col--current.lp-comp-col--other .lp-comp-icon--yes,
body.theme-dark-color .lp-comp-col--current.lp-comp-col--other .lp-comp-icon--yes {
    filter: brightness(0) invert(1);
}
body.theme-dark-mono .lp-comp-col--current.lp-comp-col--other .lp-comp-icon--no,
body.theme-dark-color .lp-comp-col--current.lp-comp-col--other .lp-comp-icon--no {
    filter: brightness(0) invert(1);
}
.lp-comp-col__head {
    height: 76px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    text-align: center;
}
.lp-comp-col__logo {
    display: flex;
    align-items: center;
    gap: 5px;
}
.lp-comp-col__logo img {
    width: 1rem;
    height: 1rem;
    filter: brightness(0) invert(1);
}
.lp-comp-col__name {
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.lp-comp-col__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}
.lp-comp-cell {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Label caché sur desktop, visible sur mobile */
.lp-comp-cell__label {
    display: none;
    font-size: 0.8rem;
    flex: 1;
    padding-left: 14px;
    line-height: 1.3;
}
.lp-comp-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lp-comp-icon--yes { opacity: 1; }
.lp-comp-icon--no  { opacity: 0.3; }
/* Couleur des icônes par colonne */
.lp-comp-col--studock .lp-comp-icon--yes { filter: brightness(0) invert(1); }
.lp-comp-col--studock .lp-comp-icon--no  { filter: brightness(0) invert(1); }
.lp-comp-col--other .lp-comp-icon--yes   { filter: brightness(0); }
.lp-comp-col--other .lp-comp-icon--no    { filter: brightness(0); }
/* Dark mode */
body.theme-dark-mono .lp-comp-col--studock,
body.theme-dark-color .lp-comp-col--studock {
    background: #ffffff;
    color: #111111;
}
body.theme-dark-mono .lp-comp-col--studock .lp-comp-col__logo img,
body.theme-dark-color .lp-comp-col--studock .lp-comp-col__logo img {
    filter: brightness(0);
}
body.theme-dark-mono .lp-comp-col__badge,
body.theme-dark-color .lp-comp-col__badge {
    background: rgba(0,0,0,0.1);
    color: #111111;
}
body.theme-dark-mono .lp-comp-col--studock .lp-comp-icon--yes,
body.theme-dark-color .lp-comp-col--studock .lp-comp-icon--yes { filter: brightness(0); }
body.theme-dark-mono .lp-comp-col--studock .lp-comp-icon--no,
body.theme-dark-color .lp-comp-col--studock .lp-comp-icon--no  { filter: brightness(0); }
body.theme-dark-mono .lp-comp-col--other,
body.theme-dark-color .lp-comp-col--other {
    background: var(--c2);
    color: var(--c4);
}
body.theme-dark-mono .lp-comp-col--other .lp-comp-icon--yes,
body.theme-dark-color .lp-comp-col--other .lp-comp-icon--yes { filter: brightness(0) invert(1); opacity: 0.7; }
body.theme-dark-mono .lp-comp-col--other .lp-comp-icon--no,
body.theme-dark-color .lp-comp-col--other .lp-comp-icon--no  { filter: brightness(0) invert(1); }
/* Mobile: scroll horizontal */
@media (max-width: 640px) {
    .lp-comp-wrap {
        display: flex;
        flex-direction: row;
        gap: 0;
        overflow-x: auto;
        padding-bottom: 10px;
        align-items: stretch;
    }
    .lp-comp-labels {
        display: flex;
        flex-direction: column;
        min-width: 130px;
        max-width: 130px;
        flex-shrink: 0;
    }
    .lp-comp-head-gap {
        height: 60px;
    }
    .lp-comp-label {
        height: auto;
        min-height: 52px;
        padding: 10px 12px;
        font-size: 0.8rem;
        line-height: 1.3;
        display: flex;
        align-items: center;
    }
    .lp-comp-col {
        min-width: 90px;
        flex-shrink: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .lp-comp-col:last-child {
        border-radius: 0 20px 20px 0;
    }
    .lp-comp-col__head { height: 60px; padding: 0 8px; }
    .lp-comp-col__name { font-size: 0.75rem; }
    .lp-comp-cell {
        flex: 1;
        height: auto;
        min-height: 52px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px;
    }
    .lp-comp-cell__label { display: none; }
    .lp-comp-icon { flex-shrink: 0; }
}

/* ── Final CTA ── */
.lp-cta__box {
    background: linear-gradient(135deg, #ffffff 0%, #ffe8d0 55%, #ff7606 100%);
    border-radius: 16px;
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.lp-cta__box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}
.lp-cta__box > * {
    position: relative;
    z-index: 1;
}
body.theme-dark-mono .lp-cta__box,
body.theme-dark-color .lp-cta__box {
    background: linear-gradient(135deg, #111111 0%, #1a0800 55%, #ff7606 100%);
}
.lp-cta__title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #111111;
}
.lp-cta__desc {
    font-size: 0.95rem;
    color: rgba(0,0,0,0.6);
}
body.theme-dark-mono .lp-cta__title,
body.theme-dark-color .lp-cta__title {
    color: #ffffff;
}
body.theme-dark-mono .lp-cta__desc,
body.theme-dark-color .lp-cta__desc {
    color: rgba(255,255,255,0.65);
}

/* ── Footer ── */
.lp-footer {
    background: #dddddd;
    padding: 56px 0 32px;
}
body.theme-dark-mono .lp-footer,
body.theme-dark-color .lp-footer {
    background: #1a1a1a;
}
.lp-footer__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.lp-footer__col--brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lp-footer__logo-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-footer__logo-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0);
}
body.theme-dark-mono .lp-footer__logo-icon,
body.theme-dark-color .lp-footer__logo-icon {
    filter: brightness(0) invert(1);
}
.lp-footer__logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111111;
    font-family: 'Montserrat', sans-serif;
}
body.theme-dark-mono .lp-footer__logo-text,
body.theme-dark-color .lp-footer__logo-text {
    color: #ffffff;
}
.lp-footer__socials {
    display: flex;
    gap: 8px;
}
.lp-footer__social {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.lp-footer__social svg {
    width: 18px;
    height: 18px;
}
.lp-footer__social:hover {
    background: #bbbbbb;
}
body.theme-dark-mono .lp-footer__social,
body.theme-dark-color .lp-footer__social {
    color: #999999;
}
body.theme-dark-mono .lp-footer__social:hover,
body.theme-dark-color .lp-footer__social:hover {
    background: #333333;
    color: #ffffff;
}
.lp-footer__tagline {
    font-size: 0.88rem;
    color: #555555;
    line-height: 1.55;
    margin: 0;
    max-width: 260px;
}
body.theme-dark-mono .lp-footer__tagline,
body.theme-dark-color .lp-footer__tagline {
    color: #888888;
}
.lp-footer__bottom {
    margin-top: 40px;
    padding: 20px 24px 0;
    text-align: center;
}
.lp-footer__copy {
    font-size: 0.78rem;
    color: #666666;
    margin: 0;
}
body.theme-dark-mono .lp-footer__copy,
body.theme-dark-color .lp-footer__copy {
    color: #555555;
}
.lp-footer__col-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
}
body.theme-dark-mono .lp-footer__col-title,
body.theme-dark-color .lp-footer__col-title {
    color: #ffffff;
}
.lp-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-footer__links a {
    font-size: 0.88rem;
    color: #333333;
    text-decoration: none;
    transition: color 0.15s;
}
.lp-footer__links a:hover {
    color: #111111;
}
body.theme-dark-mono .lp-footer__links a,
body.theme-dark-color .lp-footer__links a {
    color: #999999;
}
body.theme-dark-mono .lp-footer__links a:hover,
body.theme-dark-color .lp-footer__links a:hover {
    color: #ffffff;
}

/* ── Landing responsive ── */
@media (max-width: 780px) {
    .lp-header__nav { display: none; }
    .lp-header__actions .dash-btn--open { display: none; }
    .lp-header__actions .dash-btn {
        padding: 0 14px;
        height: 36px;
        border-radius: 12px;
    }
    .lp-hero {
        height: auto;
        overflow: hidden;
        overflow-x: hidden;
        padding-top: 80px;
        padding-bottom: 0;
        justify-content: flex-start;
    }
    .lp-hero__body {
        flex: none;
        padding: 32px 24px 32px;
    }
    .lp-hero__title { font-size: 1.6rem; }
    .lp-hero__banner { padding: 0 24px; margin-top: 24px; }
    .lp-hero__mockup {
        border-radius: 12px 12px 0 0;
        font-size: clamp(4px, 1.8vw, 9.2px);
    }
    .lp-hero__actions { flex-direction: column; width: 100%; }
    .lp-hero__actions .dash-btn { width: 100%; justify-content: center; }
    .lp-feat-grid {
        grid-template-columns: 1fr;
    }
    .lp-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .lp-step { flex: none; }
    .lp-step__arrow {
        width: auto;
        transform: rotate(90deg);
        align-self: center;
    }
    .lp-ai__inner {
        grid-template-columns: 1fr;
    }
    .lp-collab__inner {
        grid-template-columns: 1fr;
    }
    .lp-collab__visual { display: block; order: -1; }
    .lp-section__title { font-size: 1.3rem; }
    .lp-cta__title { font-size: 1.3rem; }
    .lp-section { padding: 48px 0; }
    .lp-footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}



/* ===== SIDEBAR LOGO ===== */
.sidebar-logo {
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-logo:hover {
    background: var(--c3);
}

.sidebar-logo img {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    filter: var(--icon-c5);
}

.sidebar-logo span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--c5);
}

/* ===== SIDEBAR NAV ===== */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.sidebar-bottom {
    width: 100%;
    flex-shrink: 0;
}

/* ===== NAV BUTTONS ===== */
.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 16px;
    background-color: transparent;
    color: var(--c5);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.nav-btn i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nav-btn img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: var(--icon-c5);
}

.nav-btn:hover {
    background-color: var(--c3);
}

.nav-btn.active {
    background-color: var(--c5);
    color: var(--c1);
    pointer-events: none;
}

.nav-btn.active img {
    filter: var(--icon-on-c5);
}

/* Profil : fond transparent sauf hover */
.nav-btn--profil,
.nav-btn--profil.active {
    background-color: transparent !important;
    color: var(--c5);
}

.nav-btn--profil.active img {
    filter: var(--icon-c5);
}

.nav-btn--profil:hover {
    background-color: var(--c3) !important;
}

/* Premium : toujours var(--c6), même actif */
.nav-btn--premium,
.nav-btn--premium.active {
    background-color: var(--c6) !important;
    color: #000000 !important;
    margin-bottom: 6px;
}

.nav-btn--premium:hover {
    background-color: var(--c6) !important;
}

.nav-btn--premium img,
.nav-btn--premium.active img {
    filter: brightness(0) !important;
}

/* ===== DASHBOARD HERO ===== */
.dashboard-hero {
    position: relative;
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)),
                      url('../images/background_banner.webp');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 80px 40px;
    margin: 12px 0 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    overflow: hidden;
}
body.theme-dark-mono .dashboard-hero,
body.theme-dark-color .dashboard-hero {
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)),
                      url('../images/background_banner.webp');
}
.dashboard-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.10;
    pointer-events: none;
    z-index: 1;
    border-radius: 16px;
}

.premium-page-hero {
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)),
                      url('../images/background_banner3.webp');
    margin: 12px 12px 12px 12px;
}
body.theme-dark-mono .premium-page-hero,
body.theme-dark-color .premium-page-hero,
body.theme-light-color .premium-page-hero {
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)),
                      url('../images/background_banner3.webp');
}

.dashboard-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.dashboard-hero__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--c5);
    margin-bottom: 10px;
}

.dashboard-hero__desc {
    font-size: 0.95rem;
    color: var(--ink-a60);
    margin-bottom: 28px;
    line-height: 1.6;
}

.dashboard-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.dash-btn img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dash-btn--create {
    background-color: var(--c5);
    color: var(--c1);
}

.dash-btn--create img {
    filter: var(--icon-on-c5);
}

.dash-btn--open {
    background-color: var(--c3);
    color: var(--c5);
}

.dash-btn--open img {
    filter: var(--icon-c5);
}

.dash-btn--gold {
    background-color: var(--c6);
    color: #000000;
}

.dash-btn--gold img {
    filter: brightness(0);
}


/* ===== PREMIUM BANNER ===== */
.premium-banner {
    display: grid;
    grid-template-columns: 25% 1fr;
    align-items: center;
    gap: 24px;
    margin: 24px 0 12px 12px;
}

.premium-banner__left {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.premium-banner__left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.premium-banner__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 8px 0;
}

.premium-banner__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c5);
    margin: 0;
}

.premium-banner__desc {
    font-size: 0.88rem;
    color: var(--c4);
    line-height: 1.6;
    margin: 0;
}

.premium-banner__btn {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 10px 22px;
    border-radius: 16px;
    background-color: var(--c6);
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

/* ===== QUOTA IA ===== */
.ai-quota-section {
    background: var(--c2);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 24px 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-quota-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-quota-head__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ai-quota-head__icon {
    width: 22px;
    height: 22px;
    opacity: 0.85;
    filter: var(--icon-c5);
}

.ai-quota-head__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c5);
}

.ai-quota-help {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--c4);
    background: none;
    color: var(--c4);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}
.ai-quota-help:hover {
    border-color: var(--c5);
    color: var(--c5);
}

.ai-quota-info-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-quota-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--c5);
}
.ai-quota-info-row__label { color: var(--c4); }
.ai-quota-info-row__cost {
    font-weight: 700;
    white-space: nowrap;
}
.ai-quota-info-plans {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--c3);
    padding-top: 12px;
}
.ai-quota-info-plan {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--c4);
}
.ai-quota-info-note {
    font-size: 0.78rem;
    color: var(--c4);
    margin: 0;
    line-height: 1.5;
    border-top: 1px solid var(--c3);
    padding-top: 10px;
}

.ai-quota-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--c3);
    color: var(--c5);
}
.ai-quota-badge--premium {
    background: var(--c6);
    color: #000;
}

.ai-quota-head__count {
    font-size: 0.88rem;
    color: var(--c4);
    white-space: nowrap;
}
.ai-quota-head__count strong {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
}
.ai-quota-head__count--maxed strong {
    color: var(--c6) !important;
}
.ai-quota-na {
    font-style: italic;
    color: var(--c4);
    font-size: 0.82rem;
}

.ai-quota-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.ai-quota-bar {
    flex: 1;
    height: 9px;
    background: var(--c3);
    border-radius: 8px;
    overflow: hidden;
}

.ai-quota-bar__fill {
    height: 100%;
    border-radius: 8px;
    background: var(--c5);
    transition: width 0.5s ease;
    min-width: 4px;
}
.ai-quota-bar__fill--warn   { background: #f0a500; }
.ai-quota-bar__fill--danger { background: #e05c00; }
.ai-quota-bar__fill--maxed  { background: var(--c6); }

.ai-quota-bar__label {
    font-size: 0.75rem;
    color: var(--c4);
    min-width: 34px;
    text-align: right;
}

.ai-quota-reset {
    font-size: 0.75rem;
    color: var(--c4);
    margin: 0;
}

.ai-quota-reset-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.ai-quota-cancel-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.dash-btn--small {
    height: 28px;
    padding: 0 12px;
    font-size: 0.75rem;
    border-radius: 10px;
}

.ai-quota-upgrade {
    font-size: 0.85rem;
    color: var(--c4);
    margin: 0;
}
.ai-quota-upgrade__link {
    color: var(--c6);
    font-weight: 600;
    text-decoration: none;
}
.ai-quota-upgrade__link:hover {
    text-decoration: underline;
}

/* ===== STATS RAPIDES ===== */
.stats-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 24px 0 0 12px;
}

.stats-wrap__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0;
}

.stats-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stats-card {
    background-color: var(--c2);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-card__icon {
    width: 20px;
    height: 20px;
    filter: var(--icon-c5);
    flex-shrink: 0;
}

.stats-card__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
}

.stats-card__value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c5);
    line-height: 1;
}

.stats-card__value--sm {
    font-size: 1.15rem;
    font-weight: 700;
}

/* ===== DOC SECTION ===== */
.doc-section {
    padding: 24px 0 12px;
    margin: 0 0 0 12px;
}

.doc-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.doc-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
}

.doc-section__more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c4);
    text-decoration: none;
}

.doc-section__empty {
    font-size: 0.9rem;
    color: var(--c4);
    padding: 8px 0;
}

.outils-block {
    width: 100%;
    min-height: 400px;
    background: var(--c2);
    border-radius: 16px;
    margin: 12px 12px 12px 12px;
    padding: 24px;
}

/* ===== MODAL NOUVEAU DOCUMENT ===== */
.ndoc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Sur mobile, les boutons des modales ne doivent pas voler le focus de l'éditeur */
@media (max-width: 768px) {
    .ndoc-modal button:not(input):not(textarea):not(select) {
        -webkit-tap-highlight-color: transparent;
    }
}

.ndoc-modal {
    background: var(--c1);
    border-radius: 16px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ndoc-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
}

.ndoc-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ndoc-modal__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c5);
    margin-bottom: 4px;
}

.ndoc-modal__label--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.ndoc-modal__input {
    width: 100%;
    padding: 10px 16px;
    background: var(--c2);
    border: none;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--c5);
    outline: none;
}

.ndoc-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ndoc-modal__btn {
    padding: 9px 22px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
}

.ndoc-modal__btn--cancel {
    background: var(--c3);
    color: var(--c5);
}

.ndoc-modal__btn--cancel:hover {
    opacity: 0.8;
}

.ndoc-modal__btn--create {
    background: var(--c5);
    color: var(--c1);
}

.ndoc-modal__btn--create:hover {
    opacity: 0.85;
}

.ndoc-modal__btn--premium {
    background: var(--c6);
    color: #000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ndoc-modal__btn--premium:hover {
    opacity: 0.85;
}

.ndoc-modal__btn--danger {
    background: #cc2222;
    color: #fff;
}
.ndoc-modal__btn--danger:hover {
    background: #aa1111;
}
.ndoc-modal__title--danger {
    color: #cc2222;
}

.ndoc-modal--danger {
    color: #cc2222;
}

/* ── Signature Modal ───────────────────────────────────────────────────────── */
.ndoc-modal--signature {
    max-width: 500px;
}

.signature-canvas-container {
    position: relative;
    width: 100%;
    height: 200px;
    background: #dddddd;
    border: 2px solid var(--c3);
    border-radius: 12px;
    overflow: hidden;
}

.signature-canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.signature-canvas-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Adaptation du modal signature aux thèmes sombres */
body.theme-dark-mono .signature-canvas-container,
body.theme-dark-color .signature-canvas-container,
body.theme-dark-warm .signature-canvas-container,
body.theme-dark-cool .signature-canvas-container {
    background: #222222;
    border-color: #555;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

body.theme-dark-mono .signature-canvas-placeholder,
body.theme-dark-color .signature-canvas-placeholder,
body.theme-dark-warm .signature-canvas-placeholder,
body.theme-dark-cool .signature-canvas-placeholder {
    color: #888;
}

/* Signature dans le document : fond et trait adaptés au thème */
img.editor-img[alt="signature"] {
    background: #dddddd;
    border-radius: 4px;
    display: block;
}


/* ── Responsive ndoc-modal ─────────────────────────────────────────────────── */
@media (max-width: 520px) {
    /* L'overlay passe en colonne : le modal se colle en bas */
    .ndoc-overlay {
        align-items: flex-end;
    }
    .ndoc-modal {
        border-radius: 20px 20px 0 0;
        padding: 24px 20px 28px;
        /* max-width inline (ex: 440px sur premium) écrasé */
        max-width: 100% !important;
        width: 100%;
        /* léger glissement vers le haut à l'ouverture */
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
}

@keyframes ndoc-slide-up {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ===== MODAL TOUS LES MODÈLES ===== */
.tpl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.tpl-modal {
    background: var(--c1);
    border-radius: 16px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 1200px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tpl-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.tpl-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
}

.tpl-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c5);
    padding: 4px 8px;
    border-radius: 16px;
    transition: background 0.15s;
}

.tpl-modal__close:hover {
    background: var(--c2);
}

/* ===== AI GENERATE BUTTON ===== */
.ai-gen-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
#ai-gen-open-btn { transition: none; }

/* ===== AI GENERATE MODAL ===== */
.ai-gen-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.ai-gen-modal.open {
    display: flex;
}
.ai-gen-box {
    background: var(--c1);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-gen-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    flex-shrink: 0;
}
.ai-gen-box__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0;
}
.ai-gen-box__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c5);
    padding: 4px 8px;
    border-radius: 16px;
    transition: background 0.15s;
}
.ai-gen-box__close:hover { background: var(--c2); }
.ai-gen-box__body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-gen-box__input,
.ai-gen-box__textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--c2);
    border: none;
    border-radius: 16px;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--c5);
    font-family: inherit;
    outline: none;
}
.ai-gen-box__textarea {
    min-height: 110px;
    resize: vertical;
}
.ai-gen-box__error {
    color: #e05252;
    font-size: 0.82rem;
    display: none;
    margin: 0;
}
.ai-gen-box__footer {
    padding: 0 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ai-gen-credit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c6);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
}
.ai-gen-credit img {
    width: 13px;
    height: 13px;
    filter: brightness(0) saturate(100%) invert(75%) sepia(95%) saturate(500%) hue-rotate(5deg) brightness(1.05);
    flex-shrink: 0;
}
.ai-gen-box__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 16px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ai-gen-box__submit:disabled { opacity: 0.65; cursor: not-allowed; }
.ai-gen-box__submit:not(:disabled):hover { opacity: 0.88; }
.ai-gen-spinner {
    display: none;
    width: 15px;
    height: 15px;
    animation: ai-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* ===== AI UPSELL MODAL ===== */
.ai-upsell-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.ai-upsell-modal.open {
    display: flex;
}
.ai-upsell-box {
    position: relative;
    background: var(--c1);
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 32px 32px;
    overflow: hidden;
}
.ai-upsell-box__close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--c4);
    padding: 4px 8px;
    border-radius: 16px;
    transition: background 0.15s;
}
.ai-upsell-box__close:hover { background: var(--c2); }
.ai-upsell-box__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.ai-upsell-box__icon img {
    width: 32px;
    height: 32px;
    filter: var(--icon-c5);
}
.ai-upsell-box__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0 0 10px;
    line-height: 1.3;
}
.ai-upsell-box__desc {
    font-size: 0.875rem;
    color: var(--c4);
    margin: 0 0 24px;
    line-height: 1.5;
}
.ai-upsell-box__btn {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
    font-size: 0.9rem;
    text-decoration: none;
}

@media (max-width: 520px) {
    .ai-upsell-modal {
        align-items: flex-end;
        padding: 0;
    }
    .ai-upsell-box {
        border-radius: 20px 20px 0 0;
        max-width: 100%;
        padding: 28px 20px 32px;
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
    /* ndoc-modal utilisé dans ai-upsell-modal (ex: ai-no-credits-modal) */
    .ai-upsell-modal .ndoc-modal {
        border-radius: 20px 20px 0 0;
        max-width: 100% !important;
        padding: 24px 20px 32px;
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
}

/* ===== CHAT DRAG-DROP OVERLAY ===== */
.chat-drop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9900;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    padding: 20px;
    box-sizing: border-box;
}
.chat-drop-overlay.active {
    display: flex;
}
.chat-drop-box {
    border: 2.5px dashed var(--c4);
    pointer-events: none;
    transition: border-color 0.15s;
}
.chat-drop-overlay.over .chat-drop-box {
    border-color: var(--c5);
}

/* ===== CHAT SIDEBAR DROP OVERLAY ===== */
.chat-sidebar-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background: var(--ink-a12);
    padding: 16px;
    box-sizing: border-box;
    border-radius: 16px;
}
.chat-sidebar-drop-overlay.active {
    display: flex;
}
.chat-sidebar-drop-box {
    border: 2px dashed var(--c4);
    border-radius: 14px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    pointer-events: none;
    background: var(--c2);
    width: 100%;
    max-width: 200px;
    transition: border-color 0.15s;
}
.chat-sidebar-drop-overlay.over .chat-sidebar-drop-box {
    border-color: var(--c5);
}
.chat-sidebar-drop-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0;
}
.chat-sidebar-drop-desc {
    font-size: 0.78rem;
    color: var(--c4);
    margin: 0;
}

/* ===== STRIPE TOAST ===== */
.stripe-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--c1);
    color: var(--c5);
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
.stripe-toast--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.stripe-toast--success { border-left: 4px solid #4caf7d; }
.stripe-toast--error   { border-left: 4px solid #e05252; }

/* ===== DOC CONTEXT MENU ===== */
.doc-ctx-menu {
    position: fixed;
    z-index: 9999;
    background: var(--c2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 6px;
    display: none;
    flex-direction: column;
    min-width: 200px;
    gap: 2px;
}

.doc-ctx-menu__item {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}

.doc-ctx-menu__item:hover {
    background: var(--c3);
}

button.doc-ctx-menu__item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}

.doc-ctx-menu__item--delete {
    color: #e03e3e;
}

.doc-ctx-menu__item--delete:hover {
    background: rgba(224, 62, 62, 0.1);
}

.ctx-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 1px 6px 1px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--c6);
    color: #000;
    border-radius: 20px;
}
.ctx-credit-badge img {
    filter: brightness(0);
    opacity: .75;
}
/* Badge "expérimental" dans la page premium */
.pf-xp-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--c6);
    color: #000;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 5px;
    line-height: 1.5;
}
.pf-xp-badge img {
    width: 11px;
    height: 11px;
    filter: brightness(0);
    flex-shrink: 0;
}

.pf-upcoming-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    background: #bbbbbb;
    color: #222222;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 5px;
    line-height: 1.5;
}
.pf-upcoming-badge img {
    width: 11px;
    height: 11px;
    filter: brightness(0) opacity(0.55);
    flex-shrink: 0;
}

body.theme-dark-mono .pf-upcoming-badge,
body.theme-dark-color .pf-upcoming-badge {
    background: #333333;
    color: #cccccc;
}

body.theme-dark-mono .pf-upcoming-badge img,
body.theme-dark-color .pf-upcoming-badge img {
    filter: brightness(0) invert(1) opacity(0.6);
}
.doc-ctx-menu__item--rephrase {
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.doc-ctx-menu__item--rephrase > img {
    flex-shrink: 0;
    filter: var(--icon-c5);
    opacity: .75;
}
@keyframes ctx-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ctx-icon-spin {
    animation: ctx-spin 0.8s linear infinite;
}
.doc-ctx-menu__item--rephrase--ok > img {
    filter: var(--icon-c5);
    opacity: .75;
}
.doc-ctx-menu__item--rephrase--err {
    color: #e03e3e !important;
}
.doc-ctx-menu__item--rephrase--err > img {
    filter: none !important;
    opacity: 1 !important;
}

.doc-ctx-menu__item--delete-folder {
    color: #e03e3e;
}

/* ===== POPUP FILTRES IMAGE (presets) ===== */
/* select filtre image – hérite du style .ndoc-modal__input */
select.ndoc-modal__input { cursor: pointer; }


.doc-ctx-menu__item--delete-folder:hover {
    background: rgba(224, 62, 62, 0.1);
}

.doc-ctx-menu__item--restore {
    color: #2e7d32;
}

.doc-ctx-menu__item--restore:hover {
    background: rgba(46, 125, 50, 0.1);
}

/* ===== MOVE FOLDER LIST ===== */
.move-folder-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.move-folder-item {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c5);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.move-folder-item:hover {
    background: var(--c2);
}

/* grid 4 colonnes */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* une seule ligne visible */
.doc-grid--one-row {
    grid-template-rows: auto;
    grid-auto-rows: 0;
    overflow: hidden;
}

.doc-card {
    background: transparent;
    border-radius: 14px;
    padding: 0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s, padding 0.2s;
}

.doc-card:hover {
    background: var(--c3);
    padding: 6px;
}

.doc-card__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--c2);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-radius 0.2s ease;
}

.doc-card:hover .doc-card__thumb {
    transform: scale(0.93);
    border-radius: 8px;
}

/* Carte dossier — icône centrée, sans preview */
.doc-card--folder .doc-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.doc-card__folder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    aspect-ratio: 1 / 1;
}

.doc-card__folder-icon img {
    width: 100%;
    height: 100%;
    filter: var(--icon-c4);
    object-fit: contain;
}

.doc-card__preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    transform-origin: top left;
    pointer-events: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c5);
    word-break: break-word;
    padding: 16px;
    box-sizing: border-box;
}

.doc-card__preview h1,
.doc-card__preview h2,
.doc-card__preview h3 {
    font-weight: 700;
    margin-bottom: 4px;
}

.doc-card__preview h1 { font-size: 22px; }
.doc-card__preview h2 { font-size: 18px; }
.doc-card__preview h3 { font-size: 15px; }

.doc-card__preview p,
.doc-card__preview li { margin-bottom: 4px; }

.doc-card__preview ul,
.doc-card__preview ol {
    padding-left: 20px;
    margin-bottom: 6px;
}

.doc-card__preview ul { list-style: disc; }
.doc-card__preview ol { list-style: decimal; }

.doc-card__preview img {
    height: auto;
    display: block;
    margin: 6px 0;
    max-width: 100%;
}

/* ── Tableaux dans la prévisualisation ───────────────────────────────────── */
.doc-card__preview table {
    border-collapse: collapse;
    width: 100%;
    margin: 6px 0;
    font-size: inherit;
}
.doc-card__preview td,
.doc-card__preview th {
    border: 2px solid var(--tbl-border, #cccccc);
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
    min-width: 20px;
}
.doc-card__preview th {
    background: var(--c3, #f3f4f6);
    font-weight: 600;
}

/* ── Matrices dans la prévisualisation ───────────────────────────────────── */
.doc-card__preview .matrix-wrapper {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    margin: 0.2em 0.1em;
    gap: 3px;
}
.doc-card__preview .matrix-inner {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
}
.doc-card__preview .matrix-row {
    display: flex;
}
.doc-card__preview .matrix-cell {
    padding: 0.2em 0.5em;
    min-width: 2em;
    min-height: 1.2em;
    text-align: center;
    white-space: nowrap;
    border: 2px solid var(--tbl-border, #cccccc);
    box-sizing: border-box;
    margin-right: -2px;
    margin-bottom: -2px;
}
.doc-card__preview .matrix-row:last-child .matrix-cell { margin-bottom: 0; }
.doc-card__preview .matrix-cell:last-child { margin-right: 0; }
.doc-card__preview .matrix-wrapper::before,
.doc-card__preview .matrix-wrapper::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 0.45em;
    box-sizing: border-box;
}
.doc-card__preview .matrix--paren::before {
    border: 0.2em solid var(--c5, #374151);
    border-right: none;
    border-radius: 50% 0 0 50% / 8% 0 0 8%;
}
.doc-card__preview .matrix--paren::after {
    border: 0.2em solid var(--c5, #374151);
    border-left: none;
    border-radius: 0 50% 50% 0 / 0 8% 8% 0;
}
.doc-card__preview .matrix--bracket::before {
    border: 0.2em solid var(--c5, #374151);
    border-right: none;
}
.doc-card__preview .matrix--bracket::after {
    border: 0.2em solid var(--c5, #374151);
    border-left: none;
}
.doc-card__preview .matrix--vert::before {
    width: 0.2em;
    border-left: 0.2em solid var(--c5, #374151);
}
.doc-card__preview .matrix--vert::after {
    width: 0.2em;
    border-right: 0.2em solid var(--c5, #374151);
}
.doc-card__preview .matrix--none::before,
.doc-card__preview .matrix--none::after { display: none; }

.doc-card__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2px;
}

.doc-card__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doc-card__date {
    font-size: 0.78rem;
    color: var(--c4);
}

/* Ligne titre + bouton ⋯ */
.doc-card__title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.doc-card__title-row .doc-card__title {
    flex: 1;
    min-width: 0;
}

/* Bouton ⋯ mobile/tablette */
.doc-card__more-btn {
    display: none;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    line-height: 0;
}
.doc-card__more-btn img { filter: var(--icon-c4); display: block; }

@media (max-width: 1024px) {
    /* Suppression des hover */
    .doc-card:hover { background: transparent; padding: 0; }
    .doc-card:hover .doc-card__thumb { transform: none; border-radius: 10px; }

    /* Bouton ⋯ visible sur mobile/tablette */
    .doc-card__more-btn { display: flex; align-items: center; }

    /* Une seule ligne : scroll horizontal */
    .doc-grid--one-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        grid-template-columns: unset;
        grid-auto-rows: unset;
    }
    .doc-grid--one-row::-webkit-scrollbar { display: none; }
    .doc-grid--one-row .doc-card,
    .doc-grid--one-row .tpl-card {
        flex: 0 0 42vw;
        max-width: 42vw;
    }
}

/* Grand écran : 6 colonnes */
@media (min-width: 1400px) {
    .doc-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Très grand écran : 8 colonnes */
@media (min-width: 2000px) {
    .doc-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* tablette : 3 colonnes */
@media (max-width: 1024px) {
    .doc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* mobile : 2 colonnes */
@media (max-width: 768px) {
    .doc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0 24px 20px;
    pointer-events: none;
}
.cookie-banner__inner {
    max-width: 1040px;
    margin: 0 auto;
    background: var(--c2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    pointer-events: all;
    flex-wrap: wrap;
}
.cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.cookie-banner__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c5, #111);
}
.cookie-banner__text {
    font-size: 0.85rem;
    color: var(--c4, #666);
    line-height: 1.5;
    margin: 0;
}
.cookie-banner__link {
    color: inherit;
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
/* Boutons = style lp-btn */
.cookie-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    border-radius: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.15s;
}
.cookie-banner__btn--decline {
    background: var(--c3, #eee);
    color: var(--c5, #111);
}
.cookie-banner__btn--accept {
    background: var(--c5, #111);
    color: var(--c1, #fff);
}
.cookie-banner__btn:hover { opacity: 0.85; }

@media (max-width: 600px) {
    .cookie-banner { padding: 0 12px 12px; }
    .cookie-banner__inner { flex-direction: column; align-items: flex-start; padding: 16px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__btn { flex: 1; }
}

/* ===== PAGE DOCUMENTS / PARTAGÉS ===== */
.docpage {
    padding: 28px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Barre de recherche documents ── */
.docsearch-wrap {
    margin: 12px 0 12px 12px;
}

/* ===== PROFIL HERO ===== */
.profil-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background: var(--c2);
    padding: 24px;
    margin: 12px 0 0 12px;
    border-radius: 16px;
}

.profil-hero__avatar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.profil-hero__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    image-orientation: from-image;
    display: block;
}

.profil-hero__avatar--placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--c2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profil-hero__avatar--placeholder img {
    width: 38px;
    height: 38px;
    filter: var(--icon-c4);
}

.profil-hero__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profil-hero__email {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c4);
}

.profil-hero__name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c5);
}

.profil-hero__dashboard-btn {
    margin-left: auto;
    padding: 10px 20px;
    background: var(--c5);
    color: var(--c2);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.profil-hero__dashboard-btn:hover {
    background: var(--c6);
}

/* ===== PREFERENCES SECTION ===== */
.pref-section {
    margin: 12px 0 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pref-section__desc {
    font-size: 0.82rem;
    color: var(--c4);
    margin: -4px 0 4px;
    line-height: 1.5;
}

/* ── Clé IA personnelle ── */
.ai-key-form {
    background: var(--c2);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-key-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-key-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-key-providers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-key-provider-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--c3);
    background: var(--c1);
    color: var(--c5);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ai-key-provider-btn:hover {
    border-color: var(--c5);
}
.ai-key-provider-btn--active {
    background: var(--c5);
    color: var(--c1);
    border-color: var(--c5);
}

.ai-key-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ai-key-input {
    width: 100%;
    background: var(--c1);
    border: 1.5px solid var(--c3);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.9rem;
    color: var(--c5);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.ai-key-input:focus { border-color: var(--c5); }
select.ai-key-input { cursor: pointer; }
.ai-key-input-wrap .ai-key-input { padding-right: 42px; }

.ai-key-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.ai-key-eye:hover { opacity: 1; }
.ai-key-eye img { width: 18px; height: 18px; filter: var(--icon-c5); }

.ai-key-status {
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.ai-key-status--ok { color: #16a34a; }
.ai-key-status img { width: 14px; height: 14px; }

.ai-key-error {
    font-size: 0.82rem;
    color: #ef4444;
    min-height: 1em;
    margin: 0;
}

.ai-key-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-key-btn {
    padding: 9px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}
.ai-key-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-key-btn--save {
    background: var(--c5);
    color: var(--c1);
}
.ai-key-btn--delete {
    background: var(--c2);
    color: #ef4444;
    border: 1.5px solid #ef4444;
}


.pref-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
    margin-bottom: 4px;
}

.pref-card {
    background: var(--c2);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pref-card__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pref-card__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: var(--icon-c4);
}

.pref-card__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c5);
}

.pref-card__sublabel {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--c4);
    margin-top: 2px;
}

.pref-card__current {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--c4);
}

/* Toggle (theme / palette) */
.pref-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
}

.pref-toggle__btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.15s;
}

.pref-toggle__btn img {
    width: 20px;
    height: 20px;
    filter: var(--icon-c4); /* var(--c4) */
    transition: filter 0.15s;
}

.pref-toggle__btn--active {
    background: var(--c5);
}

.pref-toggle__btn--active img {
    filter: var(--icon-on-c5); /* var(--c1) */
}

.pref-toggle__btn:not(.pref-toggle__btn--active):hover {
    background: var(--c3);
}

.pref-toggle__btn:not(.pref-toggle__btn--active):hover img {
    filter: var(--icon-c4);
}

/* Toggle inside a popup : wider to fit text labels */
.pref-toggle--popup {
    display: flex;
    gap: 8px;
    margin: 8px 0 4px;
}
.pref-toggle--popup .pref-toggle__btn {
    width: auto;
    height: 38px;
    padding: 0 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c4);
}
.pref-toggle--popup .pref-toggle__btn--active {
    color: #fff;
}

/* Language edit button */
.pref-lang-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.15s;
}

.pref-lang-btn img {
    width: 20px;
    height: 20px;
    filter: var(--icon-c5); /* var(--c5) */
}

.pref-lang-btn:hover {
    background: var(--c3);
}

.pref-lang-btn--premium-lock {
    background: var(--c6);
}
.pref-lang-btn--premium-lock img {
    filter: brightness(0);
}
.pref-lang-btn--premium-lock:hover {
    background: var(--c6);
    opacity: 0.85;
}

/* Language popup overlay */
.pref-lang-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.pref-lang-overlay--visible {
    display: flex;
}

.pref-lang-popup {
    background: var(--c1);
    border-radius: 16px;
    padding: 28px 28px 24px;
    width: 320px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.pref-lang-popup--ai { width: 400px; }

.ai-key-popup-actions { justify-content: flex-end; flex-wrap: wrap; }
.ai-key-actions-spacer { flex: 1; }
.ai-key-input-wrap .ndoc-modal__input { padding-right: 42px; }

.pref-lang-popup__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c5);
}

.pref-lang-popup__select {
    width: 100%;
    padding: 10px 16px;
    border-radius: 16px;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--c5);
    background: var(--c2);
    outline: none;
    cursor: pointer;
}

.pref-lang-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.pref-lang-popup__cancel,
.pref-lang-popup__save {
    padding: 9px 22px;
    border-radius: 16px;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.pref-lang-popup__cancel {
    background: var(--c3);
    color: var(--c5);
}

.pref-lang-popup__cancel:hover {
    opacity: 0.8;
}

.pref-lang-popup__save {
    background: var(--c5);
    color: var(--c1);
}

.pref-lang-popup__save:hover {
    opacity: 0.85;
}

.pref-lang-popup__save--danger {
    background: #cc2222;
}

.pref-lang-popup__save--danger:hover {
    background: #aa1111;
}

.pref-lang-popup__title--danger {
    color: #cc2222;
}

/* Input inside popups */
.pref-lang-popup__input {
    width: 100%;
    padding: 10px 16px;
    border-radius: 16px;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--c5);
    background: var(--c2);
    outline: none;
}

/* Avatar upload label */
.avatar-upload-label {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--c2);
    border: 1.5px dashed var(--c3);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.avatar-upload-label:hover {
    border-color: var(--c5);
    background: var(--c2);
}

.avatar-upload-label__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: var(--icon-c4);
}

.avatar-upload-label span {
    font-size: 0.88rem;
    color: var(--c4);
    line-height: 1.4;
}

/* Crop zone */
.pref-lang-popup--avatar {
    width: 320px;
    max-width: 92vw;
}

.avatar-crop-zone {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    background: var(--c2);
    cursor: grab;
    position: relative;
    touch-action: none;
    box-shadow: 0 0 0 3px var(--c5);
    flex-shrink: 0;
}

.avatar-crop-zone:active { cursor: grabbing; }

#avatar-crop-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.avatar-crop-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--c4);
    margin-top: 8px;
}

.avatar-crop-reselect {
    display: block;
    margin: 8px auto 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--c5);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* Error & warning text */
.pref-popup__error {
    font-size: 0.82rem;
    color: #cc2222;
    min-height: 16px;
}

.pref-popup__warn {
    font-size: 0.88rem;
    color: var(--c4);
    line-height: 1.5;
}

/* Danger section — same style as other sections */
.pref-danger-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.pref-danger-btn:hover {
    background: var(--c3);
}


.folder-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 12px 4px;
    flex-wrap: wrap;
}

.folder-page-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.folder-page-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.folder-page-header__back:hover {
    background: var(--c2);
}

.folder-page-header__back img {
    width: 18px;
    height: 18px;
    filter: var(--icon-c5);
}

.folder-page-header__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c5);
}

.folder-page-header__right .docsearch {
    min-width: 240px;
}

.docsearch {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--c2);
    border-radius: 16px;
    padding: 10px 16px;
    transition: background 0.2s;
}

.docsearch__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.docsearch__icon img {
    width: 18px;
    height: 18px;
    filter: var(--icon-c4);
}

.docsearch__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c5);
    min-width: 0;
}

.docsearch__input::placeholder {
    color: var(--c4);
}

.docpage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.docpage__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c1);
}

.docpage__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.docpage__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2e2e55;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 8px 14px;
    color: rgba(255,255,255,0.4);
    transition: border-color 0.2s;
}

.docpage__search:focus-within {
    border-color: var(--c3);
    color: rgba(255,255,255,0.7);
}

.docpage__search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--c1);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    width: 200px;
}

.docpage__search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.docpage__create-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--c3);
    color: #000000;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.docpage__create-btn:hover {
    background: var(--c3);
}

.docpage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.docpage__card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #2e2e55;
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.docpage__card:hover {
    background: #3a3a6e;
    transform: translateY(-1px);
}

.docpage__card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ink-a12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.docpage__card-icon img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(70%) sepia(40%) saturate(500%) hue-rotate(210deg);
}

.docpage__card-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.docpage__card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docpage__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.docpage__card-meta span {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
}

.docpage__card-date {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
}

.docpage__card-arrow {
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    transition: color 0.15s;
}

.docpage__card:hover .docpage__card-arrow {
    color: rgba(255,255,255,0.6);
}

.docpage__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: rgba(255,255,255,0.3);
    text-align: center;
}

.docpage__empty p {
    font-size: 0.93rem;
}

.docpage__count {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.25);
}

/* ===== BOUTON NOUVEAU DOSSIER ===== */
.docpage__newfolder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1.5px solid var(--ink-a35);
    color: var(--c3);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.docpage__newfolder-btn:hover { background: var(--ink-a12); border-color: var(--c3); }

/* ===== LIGNE CRÉATION DOSSIER ===== */
.folder-create-row {
    margin-bottom: 8px;
}
.folder-create-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2e2e55;
    border: 1.5px solid var(--ink-a35);
    border-radius: 10px;
    padding: 10px 14px;
}
.folder-create-input-wrap svg { color: var(--c3); flex-shrink: 0; }
.folder-name-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
}
.folder-name-input::placeholder { color: rgba(255,255,255,0.3); }
.folder-create-ok {
    padding: 4px 14px;
    background: var(--c3);
    color: #1b1b2f;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.folder-create-ok:hover { background: #c4b8ff; }
.folder-create-cancel {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s;
}
.folder-create-cancel:hover { color: rgba(255,255,255,0.75); }

/* ===== SECTION DOSSIER ===== */
.folder-section {
    margin-bottom: 6px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.06);
    background: rgba(46,46,85,0.4);
}
.folder-section--none {
    background: transparent;
    border-color: transparent;
}
.folder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 10px;
    transition: background 0.15s;
}
.folder-header:hover { background: rgba(255,255,255,0.04); }
.folder-header--none { padding-left: 4px; }
.folder-icon { color: var(--c3); flex-shrink: 0; }
.folder-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}
.folder-name.editing {
    background: var(--ink-a12);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: normal;
    overflow: visible;
}
.folder-count {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    background: rgba(255,255,255,0.07);
    padding: 2px 8px;
    border-radius: 20px;
}
.folder-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}
.folder-header:hover .folder-actions { opacity: 1; }
.folder-action-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.folder-action-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.folder-delete-btn:hover { background: rgba(255,80,80,0.15); color: #ff8080; }
.folder-chevron {
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.folder-section.open .folder-chevron { transform: rotate(180deg); }
.folder-grid {
    display: none;
    padding: 0 12px 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.folder-section.open .folder-grid { display: grid; }
.folder-section--none.open .folder-grid { padding-left: 0; padding-right: 0; }
.folder-empty {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.2);
    padding: 8px 0 4px;
    font-style: italic;
}

/* ===== CARTE DOC AVEC BOUTON DÉPLACER ===== */
.docpage__card-wrap {
    position: relative;
}
.doc-move-wrap {
    position: absolute;
    top: 50%;
    right: 44px;
    transform: translateY(-50%);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s;
}
.docpage__card-wrap:hover .doc-move-wrap { opacity: 1; }
.doc-move-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(27,27,47,0.85);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.doc-move-btn:hover { background: #2e2e55; color: var(--c3); }
.doc-move-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #252545;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 6px;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
}
.doc-move-dropdown.open { display: block; }
.move-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}
.move-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.move-opt--active { color: var(--c3); }
.move-opt svg { flex-shrink: 0; color: rgba(255,255,255,0.35); }
.move-opt--active svg { color: var(--c3); }

@media (max-width: 600px) {
    .folder-grid { grid-template-columns: 1fr; }
    .folder-actions { opacity: 1; }
    .doc-move-wrap { opacity: 1; }
}

.role-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

@media (max-width: 600px) {
    .docpage__search-input { width: 140px; }
    .docpage__grid { grid-template-columns: 1fr; }
}

/* ===== AUTH PAGES (inscription / connexion) ===== */
.auth-card {
    background: var(--c2);
    border-radius: 20px;
    padding: 48px 40px;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

body.auth-page .main-content-public {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 0;
}

.auth-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c5);
    margin-bottom: 28px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-group input {
    background: var(--c3);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.18s, background 0.18s;
    width: 100%;
    caret-color: var(--c5);
    box-sizing: border-box;
}

.form-group input::placeholder {
    color: #666666;
}

.form-group input[type="file"] {
    padding: 8px 12px;
    cursor: pointer;
}

/* Captcha */
.captcha-container {
    position: relative;
}

.captcha-btn {
    width: 100%;
    background: var(--c3);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--c5);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s;
    font-family: inherit;
}

.captcha-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.captcha-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--c5);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.captcha-icon::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 2px solid var(--c3);
    border-radius: 50%;
    border-top-color: transparent;
    opacity: 0;
    transition: all 0.3s ease;
}

.captcha-btn.loading .captcha-icon {
    background: transparent;
}

.captcha-btn.loading .captcha-icon::before {
    width: 16px;
    height: 16px;
    opacity: 1;
    animation: spin 0.8s linear infinite;
    border-color: var(--c5);
    border-top-color: transparent;
}

.captcha-btn.verified .captcha-icon {
    background: transparent;
}

.captcha-btn.verified .captcha-icon::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('/assets/images/check.svg');
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    filter: var(--icon-c5);
    border: none;
    animation: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.captcha-text {
    flex: 1;
    text-align: left;
}

/* Password visibility wrapper */
.auth-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-pw-wrap input {
    padding-right: 44px;
}

.auth-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-pw-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%);
    display: block;
}

.form-hint {
    font-weight: 400;
    color: #666666;
    font-size: 0.78rem;
}

.form-error {
    font-size: 0.8rem;
    color: #cc2222;
}

.form-alert {
    background: rgba(180, 30, 30, 0.1);
    border: 1px solid rgba(180, 30, 30, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    color: #aa1111;
    font-size: 0.88rem;
    margin-bottom: 8px;
}

.auth-btn {
    margin-top: 8px;
    padding: 12px 24px;
    border-radius: 16px;
    background: var(--c5);
    color: var(--c1);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    width: 100%;
}

.auth-switch {
    margin-top: 20px;
    font-size: 0.88rem;
    color: var(--c4);
    text-align: center;
}

.auth-switch a {
    color: var(--c5);
    text-decoration: none;
    font-weight: 700;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* ── Dark mode ── */
body.theme-dark-mono .auth-pw-icon,
body.theme-dark-color .auth-pw-icon {
    filter: brightness(0) saturate(100%) invert(60%);
}

body.theme-dark-mono .form-error,
body.theme-dark-color .form-error {
    color: #ff7b7b;
}

body.theme-dark-mono .form-alert,
body.theme-dark-color .form-alert {
    background: rgba(255, 100, 100, 0.12);
    border-color: rgba(255, 100, 100, 0.3);
    color: #ff9090;
}

/* ── Multi-step inscription ── */
.auth-card--steps {
    max-width: 480px;
}

@media (max-width: 520px) {
    .auth-card,
    .auth-card--steps {
        padding: 32px 24px;
        max-width: calc(100% - 48px);
    }
}

.auth-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-step-sub {
    font-size: 0.85rem;
    color: var(--c4);
    margin-top: -16px;
    margin-bottom: 20px;
}

.auth-progress {
    height: 6px;
    background: var(--c3);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}

.auth-progress__fill {
    height: 100%;
    background: var(--c5);
    border-radius: 3px;
    transition: width 0.35s ease;
}

.auth-step-counter {
    font-size: 0.75rem;
    color: var(--c4);
    text-align: right;
    margin-bottom: 22px;
}

.auth-pref-section {
    margin-bottom: 20px;
}

.auth-pref-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.auth-pref-cards {
    display: flex;
    gap: 12px;
}

.auth-pref-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    background: var(--c3);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    transition: border-color 0.18s, background 0.18s;
}

.auth-pref-card img {
    width: 28px;
    height: 28px;
    filter: brightness(0) saturate(100%) invert(20%);
    display: block;
}

.auth-pref-card--active {
    border-color: var(--c5);
    background: var(--c2);
}

.auth-pref-card--lang {
    padding: 22px 12px;
}

.auth-lang-flag {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
}

.auth-nav {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.auth-nav .auth-btn {
    margin-top: 0;
    flex: 1;
}

.auth-btn-back {
    flex: 0 0 auto;
    padding: 12px 20px;
    border-radius: 16px;
    background: transparent;
    border: 1.5px solid var(--c3);
    color: var(--c4);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-skip-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: transparent;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c4);
    cursor: pointer;
    text-align: center;
}

.auth-skip-btn:hover {
    color: var(--c5);
}

/* ── Dark mode: multi-step ── */
body.theme-dark-mono .auth-pref-card img,
body.theme-dark-color .auth-pref-card img {
    filter: brightness(0) saturate(100%) invert(80%);
}

/* ── Theme visual preview cards ── */
.auth-theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.auth-theme-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    font-family: 'Montserrat', sans-serif;
}

.auth-theme-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.auth-theme-card__preview {
    width: 100%;
    height: 68px;
    display: flex;
    overflow: hidden;
}

.auth-theme-card__sidebar {
    width: 28%;
    height: 100%;
    flex-shrink: 0;
}

.auth-theme-card__content {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-theme-card__line {
    height: 5px;
    border-radius: 3px;
}

.auth-theme-card__label {
    display: block;
    text-align: center;
    padding: 6px 4px 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.auth-theme-card--active {
    border-color: #111111;
    box-shadow: 0 0 0 1px #111111;
}

body.theme-dark-mono .auth-theme-card--active,
body.theme-dark-color .auth-theme-card--active {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px #ffffff;
}

/* ── Language selection cards ── */
.auth-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.auth-lang-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    background: var(--c2);
    transition: border-color 0.18s, background 0.18s;
    font-family: 'Montserrat', sans-serif;
}

.auth-lang-card:hover {
    background: var(--c3);
}

.auth-lang-card--active {
    border-color: var(--c5);
}

.auth-lang-card__flag {
    font-size: 1.6rem;
    line-height: 1;
}

.auth-lang-card__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c5);
}

/* ── Google OAuth button ── */
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    background-color: var(--c5);
    border: none;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c1);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.2s;
}

.auth-google-btn svg {
    flex-shrink: 0;
}

.auth-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    color: var(--c4);
    font-size: 0.8rem;
}

.auth-or::before,
.auth-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c3);
}

.auth-google-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--c2);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--c4);
    margin-bottom: 4px;
}

.auth-google-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-subtitle {
    font-size: 0.88rem;
    color: var(--c4);
    margin: -4px 0 16px;
    line-height: 1.5;
}

.auth-forgot {
    text-align: center;
    margin-top: 6px;
}

.auth-forgot a {
    font-size: 0.83rem;
    color: var(--c4);
    text-decoration: none;
}

.auth-forgot a:hover {
    color: var(--c5);
    text-decoration: underline;
}

.form-alert--success {
    background: rgba(30, 130, 60, 0.1);
    border-color: rgba(30, 130, 60, 0.25);
    color: #1a7a3a;
}

body.theme-dark-mono .form-alert--success,
body.theme-dark-color .form-alert--success {
    background: rgba(40, 180, 80, 0.12);
    border-color: rgba(40, 180, 80, 0.2);
    color: #4caf70;
}

/* ===== EDITEUR : sidebar réduite aux icônes ===== */
body.editor-page .sidebar {
    position: fixed;
    left: 12px; top: 12px; bottom: 12px;
    height: auto;
    margin: 0; /* annule le margin: 12px 0 12px 12px de la classe de base */
    z-index: 200;
    width: 64px;
    padding: 16px 8px;
    align-items: center;
}

/* Ajuster la sidebar quand la bannière BETA est présente (PC uniquement) */
@media (min-width: 769px) {
    body.has-beta-banner.editor-page .sidebar {
        top: 56px; /* 12px margin + 32px banner + 12px margin */
    }
}

body.editor-page .sidebar-logo {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

body.editor-page .sidebar-logo span {
    display: none;
}

body.editor-page .nav-btn {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

body.editor-page .nav-btn span {
    display: none;
}

body.editor-page .nav-btn:not(.active):hover {
    background-color: transparent;
}

body.editor-page .nav-btn--premium:hover {
    background-color: var(--c6) !important;
}

body.editor-page .sidebar-bottom {
    width: 100%;
}

body.editor-page .main-content {
    overflow: visible;
}

/* Barres fixes (topbar + toolbar) — même pilule flottante que la sidebar */
body.editor-page .editor-bars {
    position: fixed;
    top: 12px;
    left: 12px; /* pas de sidebar en éditeur */
    right: 12px;
    z-index: 200;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ajuster la position du editor-bars quand la bannière BETA est présente */
body.has-beta-banner.editor-page .editor-bars {
    top: 56px; /* 12px margin + 32px banner + 12px margin */
}
body.editor-page .editor-topbar { margin: 0; }
body.editor-page .editor-toolbar {
    margin: 0;
    transition: box-shadow 0.25s ease;
}
body.editor-page .sidebar {
    transition: width 0.2s ease, padding 0.2s ease, box-shadow 0.25s ease;
}

/* Décale editor-bars quand un panneau droit est ouvert */
body.editor-page:has(.versions-panel.open) .editor-bars { right: 324px; }
body.editor-page:has(.ai-chat-panel.open)  .editor-bars { right: 344px; }
body.editor-page:has(.training-panel.open) .editor-bars { right: 344px; }

/* Halo bas — activé quand le doc défile sous les barres (scrollTop > 4) */
body.editor-page.doc-under-bars .editor-toolbar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.12);
}
/* Halo droit — activé quand le doc défile sous la sidebar gauche (scrollLeft > 4) */
body.editor-page.doc-under-sidebar .sidebar {
    box-shadow: 5px 0 12px rgba(0,0,0,0.20), 1px 0 3px rgba(0,0,0,0.12);
}
/* Halo gauche — panneaux droits quand le doc défile vers la droite (scrollRight > 4) */
/* On cible le conteneur outer (.versions-panel/.ai-chat-panel/.training-panel) car overflow:hidden sur __inner clipperait le box-shadow */
body.editor-page.doc-under-right .versions-panel.open,
body.editor-page.doc-under-right .ai-chat-panel.open,
body.editor-page.doc-under-right .training-panel.open {
    box-shadow: -5px 0 12px rgba(0,0,0,0.20), -1px 0 3px rgba(0,0,0,0.12);
}

/* Éditeur plein écran : la zone de scroll couvre tout le viewport */
body.editor-page .editor-shell {
    overflow: visible; /* pas de stacking context — les modales fixed gardent leur z-index racine */
}
body.editor-page .editor-area {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden !important; /* scroll délégué à #editor-scroll — aucun gutter OS */
    padding: 0 !important;
}
/* Conteneur de scroll interne.
   Non position:fixed → scrollbar-width:none élimine vraiment le gutter (pas le bug Chrome fixed).
   Parent overflow:hidden clippe aussi tout résidu visuel. */
body.editor-page #editor-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
    /* padding par défaut avant que JS ne l'écrase */
    padding-top: 48px;
    padding-bottom: 60px;
    padding-left: 12px;
    padding-right: 12px;
    transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.editor-page #editor-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Scrollbar custom éditeur — DOM element → cursor CSS s'applique normalement */
#editor-cscroll {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 12px;
    z-index: 50;
    transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
}
body.editor-page:has(.versions-panel.open) #editor-cscroll { right: 324px; }
body.editor-page:has(.ai-chat-panel.open)  #editor-cscroll { right: 344px; }
body.editor-page:has(.training-panel.open) #editor-cscroll { right: 344px; }
#editor-cscroll-thumb {
    position: absolute;
    right: 3px;
    width: 5px;
    min-height: 30px;
    border-radius: 3px;
    background: var(--ink-a20);
    opacity: 0;
    transition: opacity 0.15s, width 0.1s, right 0.1s;
}
#editor-cscroll:hover #editor-cscroll-thumb,
#editor-cscroll-thumb.is-dragging { opacity: 1; width: 7px; right: 2px; }
/* Panneaux latéraux — positionnés en fixed comme la sidebar gauche */
body.editor-page .versions-panel,
body.editor-page .ai-chat-panel,
body.editor-page .training-panel {
    position: fixed;
    top: 12px;
    bottom: 12px;
    right: 12px;
    height: auto;
    z-index: 20;
    border-radius: 16px;
}
/* Le inner remplit le outer — plus besoin du margin-right ni de la largeur fixe */
body.editor-page .versions-panel .versions-panel__inner,
body.editor-page .ai-chat-panel  .versions-panel__inner,
body.editor-page .training-panel .versions-panel__inner {
    width: 100%;
    margin: 0;
}

/* ===== EDITEUR ===== */
.editor-shell {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 24px);
    margin: 12px 0;
    overflow: hidden;
    flex: 1;
}

.editor-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: var(--c1);
    border-radius: 0;
}

.editor-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px 8px;
    background: var(--c2);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    flex-shrink: 0;
    margin: 0 12px 0;
}

.editor-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--c5);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.editor-back img {
    width: 18px;
    height: 18px;
    filter: var(--icon-c5);
}

.editor-back:hover {
    background: var(--c3);
}

.editor-docname {
    flex: 1;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
    outline: none;
    border: none;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
    border-radius: 8px;
    padding: 4px 8px;
    transition: background 0.15s;
}

.editor-docname:focus {
    background: var(--c3);
    white-space: nowrap;
    overflow: visible;
}

.editor-status {
    font-size: 0.78rem;
    font-weight: 500;
    flex-shrink: 0;
    color: transparent;
    transition: color 0.2s;
}

.editor-status--saving { color: var(--ink-a35); }
.editor-status--saved  { color: #27ae60; }
.editor-status--error  { color: #e74c3c; }

.editor-toolbar {
    position: relative; /* contexte pour l'overlay prévisualisation */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    background: var(--c2);
    border-radius: 0 0 16px 16px;
    margin: 0 12px;
    border: none;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Mobile share popup : même mécanisme que ndoc-overlay ────────── */
@media (max-width: 768px) {
    .ndoc-overlay .share-ctx-popup {
        position: static !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--c1) !important;
        box-shadow: none !important;
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
}

/* ── Mobile : toolbar en bas fixe, scroll horizontal ─────────────── */
@media (max-width: 768px) {
    body.editor-page .editor-toolbar {
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        margin: 0;
        padding: 10px 14px;
        border-radius: 16px;
        border: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        z-index: 300;
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.25s ease;
    }
    
    /* Masquer la scrollbar de la toolbar */
    body.editor-page .editor-toolbar::-webkit-scrollbar {
        display: none;
    }
    
    /* Ajouter du padding-bottom au scroll pour ne pas cacher le contenu sous la toolbar */
    body.editor-page #editor-scroll {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* Masquer compteurs de mots et barre de zoom */
    .bottom-bars {
        display: none !important;
    }

    /* Empêcher les boutons de rétrécir → forcer le scroll horizontal */
    body.editor-page .editor-toolbar > *,
    body.editor-page .editor-toolbar .toolbar-btn,
    body.editor-page .editor-toolbar .toolbar-sep,
    body.editor-page .editor-toolbar .toolbar-color,
    body.editor-page .editor-toolbar .tb-size-wrap,
    body.editor-page .editor-toolbar .tb-font-wrap {
        flex-shrink: 0;
    }
}

/* ── Overlay prévisualisation dans la toolbar ──────────────────────────── */
.toolbar-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--c2);
    border-radius: inherit;
    overflow: hidden;
}
.toolbar-preview-overlay[hidden] { display: none; }

.toolbar-preview-overlay__text {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-a70);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-preview-overlay__btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.toolbar-preview-btn--exit {
    background: var(--ink-a07) !important;
    color: var(--ink-a70) !important;
}
.toolbar-preview-btn--exit:hover {
    background: var(--ink-a12) !important;
    color: var(--c5) !important;
}

.toolbar-preview-btn--apply {
    background: rgba(16,185,129,0.12) !important;
    color: #10b981 !important;
    font-weight: 700 !important;
}
.toolbar-preview-btn--apply:hover {
    background: rgba(16,185,129,0.22) !important;
}

.toolbar-preview-btn--reject {
    background: rgba(239,68,68,0.10) !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
}
.toolbar-preview-btn--reject:hover {
    background: rgba(239,68,68,0.20) !important;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink-a60);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.toolbar-btn img {
    filter: var(--icon-c4);
}
.toolbar-btn:hover {
    background: var(--ink-a07);
    color: var(--c5);
}
.toolbar-btn:hover img {
    filter: var(--icon-c5);
}
.toolbar-btn.active {
    background: var(--ink-a12);
    color: var(--c5);
}
.toolbar-btn.active img {
    filter: var(--icon-c5);
}

.toolbar-color {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0 6px;
    height: 30px;
    border-radius: 8px;
    transition: background 0.15s;
}
.toolbar-color:hover {
    background: var(--ink-a07);
}
.toolbar-color-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink-a60);
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
}
.toolbar-color-input {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink-a20);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.toolbar-color-input::-webkit-color-swatch-wrapper {
    padding: 1px;
}
.toolbar-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
.toolbar-color-input::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

.toolbar-sep {
    width: 1px;
    height: 16px;
    background: var(--ink-a15);
    margin: 0 4px;
}

/* Selects police & taille */
.toolbar-select {
    -webkit-appearance: none;
    appearance: none;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: 1.5px solid var(--ink-a15);
    border-radius: 8px;
    color: var(--ink-a60);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    max-width: 110px;
    transition: border-color 0.15s;
}
.toolbar-select:hover, .toolbar-select:focus {
    border-color: var(--ink-a35);
    outline: none;
    color: var(--c5);
}
.toolbar-select--size  { max-width: 70px; }
.toolbar-select--lh    { max-width: 90px; }
.toolbar-select--style { max-width: 105px; }

/* Champ de police avec icône */
.toolbar-font-wrap {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 6px;
    background: transparent;
    border-radius: 8px;
    max-width: 120px;
    transition: background 0.15s, color 0.15s;
}
.toolbar-font-wrap:hover {
    background: var(--ink-a07);
}
.toolbar-font-wrap:hover svg, .toolbar-font-wrap:hover .toolbar-font-value {
    color: var(--c5);
}
.toolbar-font-wrap svg {
    margin-right: 4px;
    color: var(--ink-a60);
    flex-shrink: 0;
    transition: color 0.15s;
}
.toolbar-font-value {
    width: auto;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink-a60);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Champ de taille avec icône */
.toolbar-size-wrap {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 6px;
    background: transparent;
    border-radius: 8px;
    max-width: 80px;
    transition: background 0.15s, color 0.15s;
}
.toolbar-size-wrap:hover {
    background: var(--ink-a07);
}
.toolbar-size-wrap:hover svg, .toolbar-size-wrap:hover .toolbar-size-value {
    color: var(--c5);
}
.toolbar-size-wrap svg {
    margin-right: 4px;
    color: var(--ink-a60);
    flex-shrink: 0;
    transition: color 0.15s;
}
.toolbar-size-wrap img {
    margin-right: 4px;
    filter: var(--icon-c4);
    flex-shrink: 0;
    transition: filter 0.15s;
}
.toolbar-size-wrap:hover img {
    filter: var(--icon-c5);
}
.toolbar-size-value {
    width: 40px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink-a60);
    cursor: pointer;
    text-align: center;
}
.toolbar-size-value:hover {
    color: var(--ink-a60);
}

/* ── Table toolbar dropdown ─────────────────────────────────────────────── */
.toolbar-dropdown {
    position: relative;
    display: inline-flex;
}
.toolbar-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: var(--c2);
    border: 1px solid var(--ink-a08);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    padding: 10px;
    min-width: 220px;
}
.toolbar-dropdown__menu.open { display: block; }

/* Surlignage label */
.toolbar-color--hl .toolbar-color-label--hl {
    background: #ffff00;
    color: #333;
    border-radius: 2px;
    padding: 0 3px;
}

.editor-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto; /* les deux axes scrollent nativement — évite le reset scrollLeft sur iOS Safari */
    outline: none;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    /* Centrage du doc : padding gauche/droite gérés par JS (updateHScroll)
       pour éviter la dépendance circulaire max()/calc()/var() selon les moteurs mobiles.
       Valeurs CSS = état initial avant que JS prenne la main. */
    padding-top: 40px;
    padding-bottom: 60px;
    padding-left: 12px;  /* valeur initiale avant JS — JS (updateHScroll) la remplace immédiatement */
    padding-right: 12px;
    /* pan-x pan-y : iOS scroll natif H+V autorisé ; pinch-zoom bloqué (géré par JS) */
    touch-action: pan-x pan-y;
    caret-color: var(--c5);
    width: 100%;
    min-width: 0;
    background: var(--c1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}


.editor-area { scrollbar-width: thin; scrollbar-color: var(--ink-a12) transparent; }
.editor-area::-webkit-scrollbar { width: 5px; height: 5px; }
.editor-area::-webkit-scrollbar-track { background: transparent; }
.editor-area::-webkit-scrollbar-thumb { background: var(--ink-a12); border-radius: 99px; }

/* ── TipTap / ProseMirror ─────────────────────────────────────────────── */
#tiptap-editor { display: contents; }

/* ── Séparateurs de pages A4 (injectés par updatePageLayout) ─────────────── */
#page-seps {
    position: absolute;
    top: 0; left: 0; width: 100%;
    pointer-events: none;
    z-index: 2; /* au-dessus du texte (ProseMirror z-index:1) */
}
/* Le séparateur est la zone inter-pages : 24px marge basse + 24px marge haute.
   Il peint aussi les coins arrondis du bas de la page précédente et du haut de la suivante. */
.page-sep {
    position: absolute;
    left: 0; right: 0;
    height: 56px; /* ::before 24px + ::after 32px = 56px, no gap */
    background: transparent; /* pas de fond visible entre les pseudo-elts */
    pointer-events: all;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
/* Coins arrondis bas de la page précédente — couvre SEP_OFFSET = 24px */
.page-sep::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 24px;
    background: var(--c2);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.09);
    pointer-events: none;
}
/* Coins arrondis haut de la page suivante — couvre SEP_END_OFF = 32px
   Rejoint exactement le bas de ::before : 24 + 32 = 56px, aucun gap visible. */
.page-sep::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32px;
    background: var(--c2);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 10px rgba(0,0,0,.09);
    pointer-events: none;
}

/* Conteneur du zoom par transform: scale() — plus fiable que CSS zoom sur Safari */
/* overflow:hidden clip la boîte layout de pm-scale-inner (toujours 800px en flow)
   à la taille visuelle (docW). Sans ça, editor-area voit 800px quelle que soit la zoom
   et crée une scrollbar horizontale permanente + décalage droit sur mobile. */
#pm-scale-wrap  { overflow: hidden; min-height: 0; flex-shrink: 0; }
#pm-scale-inner {
    width: 800px;
    transform-origin: 0 0;
    background: var(--c2);
    box-shadow: 0 0 0 1px var(--ink-a08), 0 4px 24px var(--ink-a08);
    position: relative;
    overflow: visible;
}

/* ── Mode continu : pas de fond de page, pas d'ombre, scroll libre ───── */
.editor-view--continuous #pm-scale-inner {
    background: transparent;
    box-shadow: none;
}
.editor-view--continuous #page-seps { display: none; }

/* ── Barre d'outils simple : masque les éléments avancés ─────────────── */
.editor-tb--simple .tb-adv { display: none !important; }

.ProseMirror {
    outline: none;
    min-height: 400px;
    width: 800px;
    min-width: 800px;
    max-width: 800px;
    box-sizing: border-box;
    /* Marges document confortables — la pagination est gérée par les nœuds PageBreak */
    padding: 49px 57px 64px;
    margin: 0;
    position: relative;
    z-index: 1;
    color: var(--c5);
    font-size: 14px;
    font-family: inherit;
    line-height: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    caret-color: var(--c5);
}
/* Clearfix : contient les images flottantes sans déborder hors du conteneur */
.ProseMirror::after {
    content: '';
    display: table;
    clear: both;
}

/* Curseur collaborateur TipTap */
.collaboration-cursor__caret {
    border-left: 2px solid;
    border-right: 2px solid;
    margin-left: -1px;
    margin-right: -1px;
    pointer-events: none;
    position: relative;
    word-break: normal;
}
.collaboration-cursor__label {
    border-radius: 3px 3px 3px 0;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    left: -1px;
    line-height: normal;
    padding: 2px 6px;
    position: absolute;
    top: -1.4em;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    pointer-events: none;
}

/* Placeholder (éditeur vide) */
.ProseMirror p.is-editor-empty:first-child::before {
    color: var(--ink-a30, #aaa);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

.editor-area h1 { font-size: 1.9rem; font-weight: 700; margin: 24px 0 10px; color: var(--c5); clear: both; }
.editor-area h2 { font-size: 1.4rem; font-weight: 700; margin: 20px 0 8px;  color: var(--c5); clear: both; }
.editor-area h3 { font-size: 1.1rem; font-weight: 700; margin: 16px 0 6px;  color: var(--c4); clear: both; }
.editor-area p  { margin: 0 0 10px; color: var(--c5); }
.editor-area ul, .editor-area ol {
    /* display:flow-root crée un BFC : empêche le texte de passer sous les images flottantes */
    display: flow-root;
    padding-left: 1.2em;
    margin: 8px 0 14px;
    color: var(--c4);
}
/* Liste numérotée avec parenthèse : 1) 2) ... */
.editor-area ol[data-list-type="paren"] {
    list-style: none;
    counter-reset: paren-ctr calc(var(--ol-start, 1) - 1);
    padding-left: 32px;
}
.editor-area ol[data-list-type="paren"] > li {
    counter-increment: paren-ctr;
    position: relative;
}
.editor-area ol[data-list-type="paren"] > li::before {
    content: counter(paren-ctr) ") ";
    position: absolute;
    left: -28px;
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.editor-area li { margin-bottom: 5px; }
.editor-area strong { font-weight: 700; }
.editor-area em  { font-style: italic; color: var(--c5); }
.editor-area u   { text-decoration: underline; }
.editor-area s   { text-decoration: line-through; opacity: 0.6; }
.editor-area blockquote,
.ProseMirror blockquote {
    position: relative;
    margin: 12px 0;
    padding: 8px 16px;
    background: transparent;
    border-radius: 0 8px 8px 0;
}
.editor-area blockquote::before,
.ProseMirror blockquote::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 4px;
    background: var(--c2);
    border-radius: 4px;
}
.editor-area pre, .editor-area code {
    font-family: 'Courier New', monospace;
    background: var(--c2);
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--c4);
}
.editor-area pre {
    display: block;
    padding: 0;
    white-space: pre-wrap;
    margin: 14px 0;
    line-height: 1.6;
    background: var(--c2);
    border-radius: 8px;
    overflow: visible;
    position: relative;
}
.editor-area pre code {
    display: block;
    background: none;
    padding: 14px 18px;
    color: var(--c4);
    border-radius: 0;
}

/* Images insérées dans l'éditeur */
.editor-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 12px 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation; /* Safari iOS : supprime le délai 300ms de double-tap */
    transition: outline 0.1s;
    will-change: width, height;
    -webkit-user-select: none;
    user-select: none;
}
/* Image flottée : margin-top = demi-interligne (half-leading) pour aligner visuellement
   le haut de l'image avec le haut du texte de la 1re ligne.
   Calcul : (line-height - 1) / 2 × font-size = (1.8 - 1) / 2 × 0.95rem ≈ 0.38rem.
   margin-bottom conservé pour l'espace sous le flottant. */
.editor-img[style*="float:left"],
.editor-img[style*="float: left"],
.editor-img[style*="float:right"],
.editor-img[style*="float: right"] {
    margin-top: 0.38rem !important;
    margin-bottom: 12px !important;
}

/* Empêcher la sélection souris sur les blocs non-texte de l'éditeur */
.editor-area hr,
.editor-area div[data-page-break],
.editor-area div[data-youtube-video] {
    -webkit-user-select: none;
    user-select: none;
    /* Safari iOS : cursor:pointer rend l'élément "tappable" (reçoit les touch events).
       touch-action:manipulation supprime le délai 300ms de double-tap. */
    cursor: pointer;
    touch-action: manipulation;
}

/* Image flottée : pas de max-width forcée — l'utilisateur choisit librement la largeur.
   Sur mobile (@media 680px) le plafond 100% reste actif. */

/* ── Responsive images : max-width only — floats/positions préservés (zoom CSS s'en charge) ─── */
@media (max-width: 680px) {
    .editor-area .editor-img {
        max-width: 100% !important;
    }
}

/* Welcome document — themed screenshots */
.editor-img.welcome-img--dark { display: none; }
body.theme-dark-mono .editor-img.welcome-img--light,
body.theme-dark-color .editor-img.welcome-img--light { display: none; }
body.theme-dark-mono .editor-img.welcome-img--dark,
body.theme-dark-color .editor-img.welcome-img--dark  { display: block; }

.editor-img.img-selected {
    outline: none;
    cursor: grab;
}
.editor-img.img-selected:active {
    cursor: grabbing;
}

/* Image centrée : force block pleine ligne, aucun texte sur les côtés */
.editor-area .editor-img[style*="margin-left: auto"],
.editor-area .editor-img[style*="margin-left:auto"] {
    display: block !important;
    float: none !important;
    clear: both !important;
    max-width: 100%;
}

/* Paragraphe ne contenant qu'une image : supprimer le margin-bottom du <p>
   pour éviter la barre colorée visible sous l'image.
   La règle img:only-child (sans class) couvre les anciens documents
   dont les images n'ont pas la class editor-img. */
.ProseMirror p:has(> .editor-img:only-child),
.ProseMirror p:has(> img:only-child) {
    margin-bottom: 0;
}

/* Paragraphe contenant une image centrée : les enfants s'empilent verticalement
   (display flex-column) — aucun texte ne peut flanquer l'image sur les côtés */
.ProseMirror p:has(> .editor-img[style*="margin-left: auto"]),
.ProseMirror p:has(> .editor-img[style*="margin-left:auto"]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    clear: both;
}
/* L'image centrée : centrage via align-self (annule les marges auto sur l'axe transversal) */
.ProseMirror p:has(> .editor-img[style*="margin-left: auto"]) > .editor-img,
.ProseMirror p:has(> .editor-img[style*="margin-left:auto"]) > .editor-img {
    align-self: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Annuler l'outline bleu par défaut de ProseMirror sur les nœuds sélectionnés.
   On gère la sélection nous-mêmes via .img-selected uniquement. */
.editor-area img.ProseMirror-selectednode {
    outline: none !important;
}

/* ── Image layout popup ───────────────────────────────────────────── */
/* Overlay de redimensionnement */
.img-resize-overlay {
    display: none;
    position: fixed;
    z-index: 300;
    pointer-events: none;
    /* Sélection locale : trait continu — visuellement distinct du contour plein des collaborateurs */
    outline: 2px solid var(--c3);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    border-radius: 8px;          /* identique au border-radius de .editor-img */
    transform: translateZ(0);
    will-change: left, top, width, height;
}

.img-resize-overlay.visible {
    display: block;
}

/* Boutons de disposition image dans la barre d'outils (visibles si image sélectionnée) */
#tb-img-group {
    align-items: center;
    gap: 4px;
}
#tb-img-group .toolbar-sep { display: flex; }

#tb-hr-group {
    align-items: center;
    gap: 4px;
}
#tb-hr-group .toolbar-sep { display: flex; }

.img-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--ink-a60);
    border: 2px solid var(--c2);
    border-radius: 50%;
    pointer-events: all;
    box-sizing: border-box;
    touch-action: none;
    transition: background 0.15s, transform 0.1s;
}
.img-resize-handle:hover {
    background: var(--c5);
    transform: scale(1.25);
}

/* Positionnement des 8 poignées */
.img-resize-handle[data-pos="nw"] { top: -7px;    left: -7px;  cursor: nw-resize; }
.img-resize-handle[data-pos="n"]  { top: -7px;    left: 50%;   transform: translateX(-50%); cursor: n-resize; }
.img-resize-handle[data-pos="ne"] { top: -7px;    right: -7px; cursor: ne-resize; }
.img-resize-handle[data-pos="e"]  { top: 50%;     right: -7px; transform: translateY(-50%); cursor: e-resize; }
.img-resize-handle[data-pos="se"] { bottom: -7px; right: -7px; cursor: se-resize; }
.img-resize-handle[data-pos="s"]  { bottom: -7px; left: 50%;   transform: translateX(-50%); cursor: s-resize; }
.img-resize-handle[data-pos="sw"] { bottom: -7px; left: -7px;  cursor: sw-resize; }
.img-resize-handle[data-pos="w"]  { top: 50%;     left: -7px;  transform: translateY(-50%); cursor: w-resize; }

/* Agrandissement des poignées sur écrans tactiles */
@media (pointer: coarse) {
    .img-resize-handle {
        width: 22px;
        height: 22px;
        border-radius: 50%;
    }
    .img-resize-handle[data-pos="nw"] { top: -12px;    left: -12px; }
    .img-resize-handle[data-pos="n"]  { top: -12px; }
    .img-resize-handle[data-pos="ne"] { top: -12px;    right: -12px; }
    .img-resize-handle[data-pos="e"]  { right: -12px; }
    .img-resize-handle[data-pos="se"] { bottom: -12px; right: -12px; }
    .img-resize-handle[data-pos="s"]  { bottom: -12px; }
    .img-resize-handle[data-pos="sw"] { bottom: -12px; left: -12px; }
    .img-resize-handle[data-pos="w"]  { left: -12px; }
}

/* Label dimensions */
.img-resize-label {
    display: none;
}

/* ── Popup de sélection de couleur (texte & surlignage) ─────────── */
.tb-cpick-btn {
    flex-direction: column;
    gap: 2px;
    padding: 0 6px;
    min-width: 28px;
}
.tb-cpick-lbl {
    font-weight: 700;
    font-size: 0.87rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink-a70);
    line-height: 1;
    pointer-events: none;
}
.tb-cpick-lbl--hl {
    background: #fff176;
    color: #333;
    border-radius: 2px;
    padding: 0 2px;
}
.tb-cpick-bar {
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    pointer-events: none;
}
.tb-cpick-popup {
    display: none;
    position: fixed;
    z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    min-width: 120px;
    flex-direction: column;
    gap: 8px;
}
.tb-cpick-popup.open { display: flex; }

/* Popup taille de texte */
.tb-size-popup {
    display: none;
    position: fixed;
    z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    min-width: 80px;
}
.tb-size-popup.open { display: block; }
.tb-size-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-size-item {
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink-a60);
    text-align: center;
    transition: background 0.15s;
}
.tb-size-item:hover {
    background: var(--c3);
    color: var(--c5);
}

/* Popup police */
.tb-font-popup {
    display: none;
    position: fixed;
    z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    min-width: 120px;
}
.tb-font-popup.open { display: block; }
.tb-font-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-font-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink-a60);
    transition: background 0.15s;
}
.tb-font-item:hover {
    background: var(--c3);
    color: var(--c5);
}
.tb-font-item {
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-a60);
    text-align: left;
    transition: background 0.15s;
}
.tb-font-item:hover {
    background: var(--c3);
    color: var(--c5);
}
.tb-cpick-grid {
    display: grid;
    grid-template-columns: repeat(4, 26px);
    gap: 5px;
}
.tb-cpick-swatch {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.1s, border-color 0.1s;
}
.tb-cpick-swatch.active { border-color: var(--c3); }
/* Case "Défaut" : fond en damier pour indiquer "pas de couleur" */
.tb-cpick-swatch--default {
    background:
        linear-gradient(45deg, #ccc 25%, transparent 25%) 0 0,
        linear-gradient(-45deg, #ccc 25%, transparent 25%) 0 0,
        linear-gradient(45deg, transparent 75%, #ccc 75%) 0 0,
        linear-gradient(-45deg, transparent 75%, #ccc 75%) 0 0;
    background-size: 8px 8px;
    background-color: #fff;
    position: relative;
}
.tb-cpick-swatch--default::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    line-height: 1;
}
/* Case "Personnalisée" : gradient arc-en-ciel */
.tb-cpick-swatch--custom {
    background: conic-gradient(
        #ff0000 0deg, #ff8c00 45deg, #ffff00 90deg,
        #00ff00 135deg, #00ffff 180deg, #0080ff 225deg,
        #8000ff 270deg, #ff00ff 315deg, #ff0000 360deg
    );
}
.tb-cpick-custom-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    color: var(--ink-a50);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background 0.15s;
    position: relative;
    overflow: hidden;
}
.tb-cpick-custom-lbl:hover { background: var(--ink-a07); }
.tb-cpick-custom-lbl input[type="color"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0;
    border: none;
}

/* Curseur de dépôt d'image (indicateur de position pendant le long-press drag) */
.img-drop-caret {
    position: fixed;
    display: none;
    width: 2px;
    height: 1.25em;
    background: var(--c3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 400;
    transform: translateX(-1px);
}
.img-drop-caret::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: var(--c3);
}
.img-drop-caret::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--c3);
}

/* Curseur vertical de drop : indique le début de la ligne cible lors du drag image/vidéo */
.img-line-cursor {
    position: fixed;
    display: none;
    width: 2px;
    height: 22px;
    background: var(--c3);
    border-radius: 1px;
    pointer-events: none;
    z-index: 500;
    transform: translateY(-50%);
}
.img-line-cursor::before,
.img-line-cursor::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    background: var(--c3);
    border-radius: 1px;
}
.img-line-cursor::before { top: 0; }
.img-line-cursor::after  { bottom: 0; }

/* Ligne de drop : indicateur horizontal pleine largeur pendant un déplacement de bloc */
.drop-line {
    position: fixed;
    left: 0;
    width: 0; /* positionnée dynamiquement par JS */
    height: 2px;
    background: var(--c6, #ffc107);
    opacity: 0.65;
    border-radius: 1px;
    pointer-events: none;
    z-index: 500;
}
.drop-line::before,
.drop-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c6, #ffc107);
}
.drop-line::before { left:  -3px; }
.drop-line::after  { right: -3px; }

/* GapCursor ProseMirror — désactivé : l'indicateur de position entre blocs est masqué */
.ProseMirror-gapcursor { display: none !important; }
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }

/* ── Hint de positionnement libre (tooltip près du curseur) ────────── */
.img-libre-hint {
    display: none;
    position: fixed;
    z-index: 600;
    pointer-events: none;
    align-items: center;
    gap: 6px;
    background: rgba(27,27,47,0.92);
    border: 1px solid var(--c3);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--c3);
    font-size: 0.74rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    transition: background 0.1s;
}

/* Highlight des caractères insérés par un autre collaborateur */
@keyframes collab-flash {
    0%   { background: rgba(176, 160, 255, 0.5); border-radius: 2px; }
    100% { background: transparent; }
}
.collab-highlight {
    animation: collab-flash 0.8s ease-out forwards;
}

/* ── Curseurs de présence collaborateurs (style Canva) ────────────── */
.remote-cursors-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
}
.remote-cursor-caret {
    position: fixed;
    width: 2px;
    pointer-events: none;
}
.ai-cursor-caret {
    background: #ff8c06 !important; /* barre orange pour le curseur IA */
    min-height: 20px;
}
.remote-cursor-label {
    position: absolute;
    bottom: calc(100% + 3px);
    left: -1px;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 2px 7px;
    border-radius: 5px 5px 5px 0;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    opacity: 1;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
@keyframes collab-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Contour coloré sur un bloc (hr, saut de page, embed) sélectionné par un collaborateur */
.collab-block-selected {
    outline-style: solid !important;
    outline-width: 2px !important;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Contour coloré sur une image sélectionnée par un collaborateur */
.collab-img-selected {
    outline-style: solid !important;
    outline-width: 2px !important;
    outline-offset: 2px;
    outline-color: var(--collab-img-color, #e03d7a) !important;
    position: relative;
}
/* Spécificité renforcée : dépasse .editor-area img.ProseMirror-selectednode (0,2,1) */
.editor-area img.collab-img-selected {
    outline-style: solid !important;
    outline-width: 2px !important;
    outline-offset: 2px !important;
    outline-color: var(--collab-img-color, #e03d7a) !important;
}
.collab-img-badge {
    position: fixed;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 4px 4px 4px 0;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 501;
}

/* ── Mode lecture ── */
/* Masquer toolbar de formatage, versions/AI/training, présence */
body.editor-reader #editor-toolbar,
body.editor-reader .versions-btn:not(#reader-theme-toggle),
body.editor-reader #presence-bar {
    display: none !important;
}
/* Rendre visible le toggle thème */
body.editor-reader #reader-theme-toggle {
    display: inline-flex !important;
}
/* Icônes du toggle thème en mode lecteur — même logique que landing */
.reader-theme-icon {
    width: 18px;
    height: 18px;
    filter: var(--icon-c5);
    display: none;
}
/* light → afficher dark_mode.svg (lune) ; dark → afficher light_mode.svg (soleil) */
.theme-light-mono  #reader-theme-toggle .reader-theme-icon--moon,
.theme-light-color #reader-theme-toggle .reader-theme-icon--moon { display: block; }
.theme-dark-mono   #reader-theme-toggle .reader-theme-icon--sun,
.theme-dark-color  #reader-theme-toggle .reader-theme-icon--sun  { display: block; }
/* Topbar arrondie sur les 4 coins (plus de toolbar en dessous) */
body.editor-reader .editor-topbar {
    border-radius: 16px !important;
    border-bottom: none !important;
}
/* Popup partage : masquer sections collaborateurs & accès public (garder seulement Télécharger + Lien) */
body.editor-reader #share-ctx-main .share-ctx-top,
body.editor-reader #share-ctx-main .share-ctx-public,
body.editor-reader #share-ctx-main .doc-ctx-menu__sep {
    display: none !important;
}
/* Ajuster le scroll pour le topbar seul (plus de toolbar au-dessus) */
body.editor-reader #editor-scroll {
    padding-top: 56px !important;
}
/* Désactiver l'édition de texte, garder les iframes actives */
body.editor-reader .ProseMirror {
    caret-color: transparent !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}
body.editor-reader .ProseMirror > *:not(div[data-youtube-video]) {
    pointer-events: none !important;
}
body.editor-reader .ProseMirror div[data-youtube-video] iframe {
    pointer-events: auto !important;
}

/* Curseur souris distant (PC uniquement) */
.remote-mouse-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 502;
    /* Interpolation visuelle entre les positions reçues */
    transition: left 40ms linear, top 40ms linear;
}
.remote-mouse-cursor svg {
    display: block;
    overflow: visible;
    /* décalage pour aligner la pointe du SVG sur les coords exactes de la souris */
    transform: translate(-3px, -3px);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.remote-mouse-cursor__label {
    position: absolute;
    /* pointe du curseur = (0,0) → étiquette juste à droite/en-dessous */
    left: 20px;
    top: 18px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
/* Sur mobile : masquer tous les curseurs et étiquettes distants */
@media (pointer: coarse), (max-width: 768px), (hover: none) {
    .remote-cursor-caret,
    .remote-cursor-label,
    .remote-mouse-cursor,
    .remote-mouse-cursor__label,
    .remote-selection-highlight,
    .collab-img-badge,
    .collab-block-selected {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
}

/* Couleur de sélection texte = couleur de l'utilisateur */
/* Règles séparées : un sélecteur invalide dans une règle groupée ferait ignorer tout le bloc */
#editor-area ::selection {
    background: rgba(var(--sel-color, 224,61,122), 0.35);
}
/* Safari iOS :
   - -webkit-touch-callout:none  → bloque le menu natif "Copier/Coller/Définir" au long-press
   - -webkit-user-select:text    → garantit que le texte est sélectionnable
   - touch-action:manipulation   → supprime le délai 300ms ET le zoom au double-tap sur iOS */
.ProseMirror {
    -webkit-touch-callout: none;
    -webkit-user-select: text;  /* base ; JS override avec none pendant les touchers */
    user-select: text;
    cursor: text;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; /* supprime le flash blanc au tap */
}

/* Surlignage de sélection d'un collaborateur distant */
.remote-selection-highlight {
    position: fixed;
    pointer-events: none;
    opacity: 0.2;
    z-index: 499;
}

/* Bulles de présence dans la topbar */
.presence-bar {
    display: flex;
    align-items: center;
    gap: -6px;   /* chevauchement */
    flex-direction: row;
    margin-left: auto;
    margin-right: 4px;
}
/* Masquer la barre de présence sur mobile */
@media (pointer: coarse), (max-width: 768px), (hover: none) {
    .presence-bar {
        display: none !important;
        visibility: hidden !important;
    }
}
.presence-bubble {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: -8px;
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--c2);
    transition: transform 0.15s;
}
.presence-bubble:first-child { margin-left: 0; }
.presence-bubble:hover { transform: scale(1.15) translateY(-2px); z-index: 1; }
.presence-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Menu contextuel image (clic droit) ─────────────────────────────────── */
.img-ctx-menu {
    display: none;
    position: fixed;
    z-index: 9000;
    background: var(--c2);
    border: 1px solid var(--ink-a15);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    flex-direction: column;
    gap: 2px;
    min-width: 188px;
}
.img-ctx-menu.open { display: flex; }
.img-ctx-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-a80);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.img-ctx-item:hover { background: var(--ink-a07); color: var(--c5); }
.img-ctx-item--danger { color: #e03e3e; }
.img-ctx-item--danger:hover { background: rgba(224,62,62,0.1); color: #e03e3e; }
.img-ctx-sep { height: 1px; background: var(--ink-a10); margin: 4px 0; }

/* ─── Modal de rognage d'image ────────────────────────────────────────────── */
/* ── Rognage inline (overlay positionné directement sur l'image) ─────────── */
/* ── Crop inline overlay (pan+zoom sur l'image) ─────────────────────── */
.img-crop-overlay {
    display: none;
    position: fixed;
    z-index: 8200;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    outline: 2px solid var(--c3);
    outline-offset: -2px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.55);
}
.img-crop-overlay.active { display: block; }
.img-crop-overlay:active  { cursor: grabbing; }

#ic-img {
    position: absolute;
    top: 0; left: 0;
    max-width: none;
    transform-origin: top left;
    pointer-events: none;
    will-change: transform;
}

/* ── Barre crop (style menu contextuel) ─────────────────────────────── */
.ic-bar {
    position: fixed;
    z-index: 8201;
    background: var(--c2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    padding: 6px;
    flex-direction: column;
    min-width: 160px;
    gap: 2px;
}
.ic-feedback {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--ink-a50);
    padding: 4px 14px 2px;
    display: block;
    min-height: 0;
}
.ic-feedback:empty { display: none; }
.ic-bar__item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    transition: background 0.12s;
}
.ic-bar__item:hover { background: var(--ink-a08); }
.ic-bar__item--apply { color: var(--c3); }
.ic-bar__item--apply:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== BARRE DE ZOOM ===== */
.zoom-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: var(--c2);
    border-radius: 16px;
    flex-shrink: 0;
    margin-left: auto;
}
@media (max-width: 600px) {
    .zoom-bar { gap: 2px; padding: 6px 8px; }
    .zoom-slider { display: none; }
    .zoom-sep { display: none; }
    .zoom-label { min-width: 30px; font-size: 0.72rem; }
}

/* Décale les barres quand un panneau droit est ouvert */
body.editor-page:has(.versions-panel.open) .bottom-bars { right: 324px; }
body.editor-page:has(.ai-chat-panel.open)  .bottom-bars { right: 344px; }
body.editor-page:has(.training-panel.open) .bottom-bars { right: 344px; }

.zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink-a60);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.zoom-btn:hover { background: var(--c3); color: var(--c5); }

.zoom-sep {
    width: 1px;
    height: 20px;
    background: var(--ink-a08);
    margin: 0 4px;
    flex-shrink: 0;
}

.zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    border-radius: 99px;
    background: var(--ink-a12);
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink-a60);
    border: 2px solid var(--c2);
    cursor: pointer;
    box-shadow: 0 1px 4px var(--ink-a12);
    transition: background 0.15s, transform 0.1s;
}
.zoom-slider:hover::-webkit-slider-thumb,
.zoom-slider:active::-webkit-slider-thumb {
    background: var(--c5);
    transform: scale(1.2);
}
.zoom-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-a60);
    border: 2px solid var(--c2);
    cursor: pointer;
    box-shadow: 0 1px 4px var(--ink-a12);
    transition: background 0.15s, transform 0.1s;
}
.zoom-slider:hover::-moz-range-thumb {
    background: var(--c5);
    transform: scale(1.2);
}

.zoom-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-a60);
    min-width: 36px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    margin-left: 2px;
    -webkit-user-select: none;
    user-select: none;
    /* bouton de preset zoom */
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0 5px;
    height: 26px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.zoom-label:hover { background: var(--ink-a07); color: var(--c5); }

/* ── Popup de zoom préréglé ─────────────────────────────────────────────── */
.zoom-preset-popup {
    display: none;
    position: fixed;
    z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    min-width: 80px;
}
.zoom-preset-popup.open { display: block; }
.zoom-preset-btn {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-a60);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}
.zoom-preset-btn:hover { background: var(--c3); color: var(--c5); }

/* ===== ACTION BUTTON (share + export) ===== */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.action-btn svg {
    stroke: var(--c1);
}

.action-btn img {
    display: block;
    /* share.svg has white fill — correct for light themes (dark c5 bg) */
}
body.theme-dark-mono .action-btn img,
body.theme-dark-color .action-btn img {
    filter: brightness(0); /* dark themes: c5 bg is light, need dark icon */
}

.action-btn:hover {
    opacity: 0.85;
}

/* ===== SHARE CTX POPUP ===== */
.share-ctx-popup {
    position: fixed;
    z-index: 9999;
    background: var(--c2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    padding: 6px;
    flex-direction: column;
    min-width: 260px;
    max-width: 300px;
    gap: 2px;
}

.share-ctx-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 6px 6px;
}

.share-ctx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.share-ctx-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c5);
}

.share-ctx-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c4);
    white-space: nowrap;
}

.share-ctx-invite-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.share-ctx-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    background: #bbbbbb;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: var(--c5);
    outline: none;
}
body.theme-dark-mono .share-ctx-input,
body.theme-dark-color .share-ctx-input { background: #333333; }
.share-ctx-input::placeholder { color: var(--c4); opacity: 0.7; }

.share-ctx-invite-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink-a60);
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.share-ctx-invite-btn:hover {
    background: var(--ink-a12);
    color: var(--c5);
}
.share-ctx-invite-btn img {
    display: block;
    filter: var(--icon-c5);
}
.share-ctx-invite-btn--premium {
    background: var(--c6) !important;
    border-radius: 10px;
}
.share-ctx-invite-btn--premium:hover {
    background: var(--c6) !important;
    opacity: 0.85;
}
.share-ctx-invite-btn--premium img {
    filter: brightness(0) !important;
}

.share-ctx-feedback {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: transparent;
    margin: 0;
    min-height: 0;
    transition: color 0.15s;
}
.share-ctx-feedback--ok    { color: #10b981; }
.share-ctx-feedback--error { color: #e03e3e; }
.share-ctx-feedback:not(:empty) { min-height: 1em; }

/* bulles collaborateurs — même style que presence-bubble, sans chevauchement */
.share-ctx-collabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 2px 6px;
    min-height: 0;
}
.share-ctx-collabs .presence-bubble {
    margin-left: 0;
}
.share-ctx-bubble-more {
    background: var(--c3) !important;
    color: var(--c5) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    cursor: default !important;
}

.share-ctx-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px;
}
.share-ctx-role-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--c4);
}
.share-ctx-role-btns {
    display: flex;
    gap: 3px;
    background: var(--c1);
    border-radius: 8px;
    padding: 3px;
}
.share-ctx-role-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c4);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.share-ctx-role-btn:hover { color: var(--c5); }
.share-ctx-role-btn.active {
    background: var(--c5);
    color: var(--c1);
}

.doc-ctx-menu__sep {
    height: 1px;
    background: var(--c3);
    margin: 3px 0;
    opacity: 0.5;
}

.share-ctx-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-ctx-action-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.share-ctx-action-item img {
    flex-shrink: 0;
    filter: var(--icon-c5);
}

/* ===== SHARE CTX PUBLIC SECTION ===== */
.share-ctx-public {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 6px 4px;
}

.share-ctx-pub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.share-ctx-pub-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c5);
}

.share-ctx-pub-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-ctx-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.share-ctx-link-input {
    font-size: 0.72rem !important;
    color: var(--c4) !important;
}

/* ===== SHARE CTX EXPORT PANEL ===== */
#share-ctx-export {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px 4px;
}

.share-ctx-export-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 2px;
}

.share-ctx-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
}
.share-ctx-back-btn:hover { background: var(--ink-a12); }
.share-ctx-back-btn img { display: block; filter: var(--icon-c5); }

.share-ctx-export-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c5);
}

.share-ctx-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px;
}

.share-ctx-select-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c4);
    white-space: nowrap;
}

.share-ctx-select {
    flex: 1;
    height: 30px;
    padding: 0 26px 0 10px;
    background: #bbbbbb;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: var(--c5);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    box-sizing: border-box;
}
.share-ctx-select:focus { outline: none; }
body.theme-dark-mono .share-ctx-select,
body.theme-dark-color .share-ctx-select { background-color: #333333; }

.share-ctx-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 6px 6px;
    height: 34px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.share-ctx-export-btn:hover { opacity: 0.85; }
.share-ctx-export-btn img { filter: invert(1) brightness(0) invert(1); }
body.theme-light-mono .share-ctx-export-btn img,
body.theme-light-color .share-ctx-export-btn img { filter: brightness(0) invert(1); }


/* ===== VERSIONS BUTTON ===== */
.versions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    color: var(--ink-a60);
}

.versions-btn svg {
    fill: currentColor;
    flex-shrink: 0;
    transition: fill 0.15s;
}

.versions-btn:hover {
    background: var(--ink-a12);
    color: var(--c5);
}

.versions-btn--active {
    background: var(--c5);
    color: var(--c1);
}

.versions-btn--active:hover {
    background: var(--c5);
    color: var(--c1);
}

/* ===== VERSIONS RIGHT PANEL ===== */
.versions-panel {
    position: fixed;
    right: 12px; top: 12px; bottom: 12px;
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    height: auto;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Ajuster le panneau versions quand la bannière BETA est présente (PC uniquement) */
@media (min-width: 769px) {
    body.has-beta-banner.editor-page .versions-panel {
        top: 56px; /* 12px margin + 32px banner + 12px margin */
    }
}

.versions-panel.open {
    width: 300px;
}

.versions-panel__inner {
    position: relative;
    width: 288px;
    height: 100%;
    margin: 0 12px 0 0;
    background: var(--c2);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.versions-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 12px;
    border-bottom: none;
    flex-shrink: 0;
}

.versions-panel__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c5);
}

.versions-panel__close {
    background: transparent;
    border: none;
    color: var(--c4);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.versions-panel__close:hover {
    background: var(--ink-a12);
    color: var(--c5);
}

.versions-panel__list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.versions-panel__list::-webkit-scrollbar { display: none; }
.versions-panel__list { scrollbar-width: none; }

.versions-loading {
    font-size: 0.85rem;
    color: var(--c4);
    padding: 24px 8px;
    text-align: center;
}

.versions-loading--error {
    color: #e05555;
}

/* Version entry */
.ver-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: default;
    transition: background 0.15s;
    position: relative;
}

.ver-entry:not(:last-child)::after {
    content: none;
}

.ver-entry:hover {
    background: var(--ink-a07);
}

.ver-entry__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c3);
    border: 2px solid var(--c2);
    flex-shrink: 0;
    margin-top: 5px;
    transition: background 0.15s;
}

.ver-entry--current .ver-entry__dot {
    background: var(--c5);
    border-color: var(--c2);
}

.ver-entry__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ver-entry__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ver-entry__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ver-entry:hover .ver-entry__actions {
    opacity: 1;
}

.ver-entry__num {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c5);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ver-entry__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--c5);
    color: var(--c1);
}

.ver-entry__restore {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c5);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ver-entry__restore:hover {
    background: var(--ink-a12);
}

.ver-entry__restore:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ver-entry__preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ver-entry__preview:hover {
    background: var(--ink-a12);
}

.ver-entry__preview img {
    filter: var(--icon-c5);
    display: block;
}

.ver-entry__preview:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ver-entry__meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ver-entry__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c3);
    color: var(--c5);
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ver-entry__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ver-entry__author {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ver-entry__date {
    font-size: 0.72rem;
    color: var(--c4);
    opacity: 0.65;
}

.ver-entry__diff {
    display: flex;
    gap: 5px;
    align-items: center;
}

.ver-diff {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Nunito', monospace;
    padding: 1px 6px;
    border-radius: 6px;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

.ver-diff--add {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.ver-diff--del {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.ver-upgrade-banner {
    margin-top: 16px;
    padding: 0;
}

.ver-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    background: var(--c6);
    color: #000000;
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.ver-upgrade-btn img {
    width: 15px;
    height: 15px;
    display: block;
}

body.theme-light-mono .ver-diff--add,
body.theme-light-color .ver-diff--add {
    background: rgba(16, 185, 129, 0.10);
    color: #087a54;
}

body.theme-light-mono .ver-diff--del,
body.theme-light-color .ver-diff--del {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}

body.theme-dark-mono .ver-diff--add,
body.theme-dark-color .ver-diff--add {
    background: rgba(52, 211, 153, 0.16);
    color: #34d399;
}

body.theme-dark-mono .ver-diff--del,
body.theme-dark-color .ver-diff--del {
    background: rgba(248, 113, 113, 0.16);
    color: #f87171;
}

/* ===== VERSION PREVIEW BANNER — remplacée par toolbar-preview-overlay ===== */
.ver-preview-banner { display: none !important; }
/* ===== ACTION MODAL (PARTAGER + EXPORTER) ===== */
.action-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.action-modal.open {
    display: flex;
}

.action-modal__box {
    background: var(--c1);
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    overflow: hidden;
}

.action-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0;
    gap: 8px;
}

.action-modal__tabs {
    display: flex;
    gap: 4px;
    flex: 1;
}

.action-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.action-tab:hover {
    background: var(--ink-a08);
    color: var(--c5);
}

.action-tab--active {
    background: var(--ink-a12);
    color: var(--c5);
}

.action-modal__close {
    background: transparent;
    border: none;
    color: var(--c4);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 16px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.action-modal__close:hover {
    background: var(--ink-a12);
    color: var(--c5);
}

.action-panel {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.action-panel--hidden {
    display: none;
}

/* Export grid */
.export-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.export-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    background: var(--c2);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: var(--c5);
    font-weight: 700;
    font-size: 0.88rem;
}

.export-tile img {
    filter: var(--icon-c5);
}

.export-tile__ext {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c4);
}

/* ===== ENTRAÎNEMENT MODAL ===== */
.training-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 0 0;
}

.training-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px;
    background: var(--c2);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: var(--c5);
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.training-tile:hover {
    background: var(--ink-a07);
    color: var(--c5);
}

.training-tile--soon {
    opacity: 0.5;
    cursor: default;
}

.training-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    color: var(--c5);
}

.training-tile__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c5);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.training-tile__name .ctx-credit-badge { margin-left: 0; }

.training-tile__desc {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c4);
    line-height: 1.45;
}

.training-tile__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--ink-a12);
    color: var(--c4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Montserrat', sans-serif;
}

/* Export loading overlay */
.export-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.export-loading.active {
    display: flex;
}

.export-loading__box {
    background: var(--c2);
    border-radius: 18px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 220px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.export-loading__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--c5);
}

.export-loading__bar-track {
    width: 100%;
    height: 6px;
    background: var(--ink-a12);
    border-radius: 99px;
    overflow: hidden;
}

.export-loading__bar-fill {
    height: 100%;
    width: 0%;
    background: var(--c5);
    border-radius: 99px;
    transition: width 0.3s ease;
    animation: export-indeterminate 1.4s ease-in-out infinite;
}

@keyframes export-indeterminate {
    0%   { transform: translateX(-100%); width: 60%; }
    50%  { transform: translateX(80%);  width: 60%; }
    100% { transform: translateX(200%); width: 60%; }
}

/* Share section */
.share-invite {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-input {
    flex: 1;
    background: var(--ink-a07);
    border: none;
    border-radius: 16px;
    padding: 9px 12px;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    outline: none;
}

.share-select {
    background: var(--ink-a07);
    border: none;
    border-radius: 16px;
    padding: 9px 10px;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.share-invite-btn {
    padding: 9px 16px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.share-invite-btn:hover   { opacity: 0.85; }
.share-invite-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.share-feedback {
    font-size: 0.82rem;
    min-height: 18px;
    color: transparent;
}

.share-feedback--ok    { color: #4caf70; }
.share-feedback--error { color: #e05555; }

.share-limit-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c4);
    white-space: nowrap;
    flex-shrink: 0;
}
.share-limit-counter--full { color: #e05555; }

.share-loading {
    font-size: 0.85rem;
    color: var(--c4);
    text-align: center;
    padding: 8px 0;
}

.share-modal__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.share-modal__list::-webkit-scrollbar { width: 4px; }
.share-modal__list::-webkit-scrollbar-thumb { background: var(--ink-a12); border-radius: 99px; }

.share-col-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 16px;
    background: var(--ink-a07);
}

.share-col-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c1);
    flex-shrink: 0;
    overflow: hidden;
}
.share-col-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.share-col-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.share-col-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-col-email {
    font-size: 0.75rem;
    color: var(--c4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-col-role {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

.role--editor { background: var(--ink-a12); color: var(--c5); }
.role--viewer { background: var(--ink-a08); color: var(--c4); }

.share-col-remove {
    background: transparent;
    border: none;
    color: var(--c4);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 6px;
    padding: 0 4px;
    transition: color 0.15s;
}

.share-col-remove:hover { color: #e05555; }

.editor-status--sync { color: var(--c3); }

@media (max-width: 520px) {
    .share-invite { flex-wrap: wrap; }
    .share-input  { min-width: 0; }
}

/* ── Onglet Lien public ────────────────────────────────────────────────── */
.pub-access { padding: 2px 0; }

.pub-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--ink-a14);
}
.pub-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pub-toggle-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c5);
    font-family: 'Montserrat', sans-serif;
}
.pub-toggle-desc {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.45;
}

/* Toggle switch */
.pub-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.pub-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.pub-switch-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.12);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s;
}
.pub-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.pub-switch input:checked + .pub-switch-slider { background: var(--c3); }
.pub-switch input:checked + .pub-switch-slider::before { transform: translateX(20px); }

.pub-options {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pub-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pub-role-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}
.pub-role-btns { display: flex; gap: 6px; }
.pub-role-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--ink-a35);
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Montserrat', sans-serif;
}
.pub-role-btn:hover { border-color: var(--c3); color: var(--c3); }
.pub-role-btn.active { border-color: var(--c3); background: var(--c3); color: #fff; }

.pub-link-row { display: flex; gap: 8px; align-items: center; }
.pub-link-input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid var(--ink-a14);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    padding: 7px 10px;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    outline: none;
}
.pub-link-copy-btn {
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: var(--c3);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}
.pub-link-copy-btn:hover { opacity: 0.85; }

.pub-link-feedback {
    font-size: 0.75rem;
    min-height: 1.1em;
    color: transparent;
}
.pub-link-feedback--ok { color: #7be47b; }



/* ======================================================
   MODAL IMPORT DE DOCUMENT
   ====================================================== */
.import-doc-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.import-doc-modal.open { display: flex; }

.import-doc-modal__box {
    background: var(--c2);
    border-radius: 16px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.import-doc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.import-doc-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c5);
}

.import-doc-modal__close {
    background: transparent;
    border: none;
    color: var(--c4);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 16px;
    transition: color 0.15s, background 0.15s;
}
.import-doc-modal__close:hover { color: var(--c5); background: var(--ink-a08); }

.import-doc-modal__hint {
    font-size: 0.82rem;
    color: var(--c4);
    background: var(--ink-a07);
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.5;
}
.import-doc-modal__hint strong { color: var(--c5); }

.import-doc-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--c4);
    border-radius: 14px;
    padding: 32px 20px;
    cursor: pointer;
    color: var(--c4);
    font-size: 0.875rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}
.import-doc-dropzone:hover,
.import-doc-dropzone--over {
    border-color: var(--c5);
    background: var(--ink-a08);
    color: var(--c5);
}
.import-doc-dropzone:hover svg,
.import-doc-dropzone--over svg { stroke: var(--c5); }

.import-doc-dropzone__icon svg {
    stroke: var(--c4);
    transition: stroke 0.15s;
    display: block;
}

.import-doc-dropzone__title {
    font-weight: 600;
    color: inherit;
}

.import-doc-dropzone__formats {
    color: var(--c4);
    font-size: 0.78rem;
}

.import-doc-file-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.import-doc-name {
    font-size: 0.875rem;
    color: var(--c5);
    font-weight: 600;
    padding: 6px 10px;
    background: var(--ink-a07);
    border-radius: 8px;
    word-break: break-all;
}

.import-doc-actions {
    display: flex;
    justify-content: flex-end;
}

.import-doc-submit {
    padding: 10px 24px;
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.import-doc-submit:hover   { opacity: 0.85; }
.import-doc-submit:disabled { opacity: 0.5; cursor: default; }

.import-doc-feedback {
    min-height: 1.2em;
    font-size: 0.82rem;
    color: var(--c4);
}
.import-doc-feedback--error { color: #e05252; }
.import-doc-feedback--ok    { color: #4caf82; }

/* ======================================================
   MODAL INSERTION D'IMAGE
   ====================================================== */
/* Les styles img-ai-modal ont été remplacés par ndoc-overlay/ndoc-modal */

/* Textarea dans ndoc-modal : même look que l'input, juste resize autorisé */
textarea.ndoc-modal__input { resize: vertical; }

/* img-modal inner elements */

/* Onglets */
.img-modal__tabs {
    display: flex;
    gap: 4px;
    background: var(--ink-a07);
    border-radius: 16px;
    padding: 4px;
}

.img-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--c4);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.img-tab--active {
    background: var(--ink-a12);
    color: var(--c5);
}

/* Panneaux */
.img-panel--hidden { display: none; }

/* Zone drag-and-drop */
.img-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--c4);
    border-radius: 14px;
    padding: 32px 20px;
    cursor: pointer;
    color: var(--c4);
    font-size: 0.875rem;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    position: relative;
}

.img-dropzone:hover,
.img-dropzone--over {
    border-color: var(--c5);
    background: var(--ink-a08);
    color: var(--c5);
}

.img-dropzone__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.img-dropzone__icon img {
    width: 28px;
    height: 28px;
    filter: var(--icon-c4);
    transition: filter 0.15s;
}

.img-dropzone:hover .img-dropzone__icon img,
.img-dropzone--over .img-dropzone__icon img {
    filter: var(--icon-c5);
}

.img-dropzone__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
}

.img-dropzone small {
    color: var(--c4);
    font-size: 0.78rem;
    opacity: 0.65;
}

.img-file-hidden {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Ligne URL */
.img-url-row {
    display: flex;
    gap: 10px;
}

.img-url-field {
    flex: 1;
    background: var(--ink-a07);
    border: none;
    border-radius: 16px;
    color: var(--c5);
    font-family: inherit;
    font-size: 0.875rem;
    padding: 10px 14px;
    outline: none;
    min-width: 0;
}

.img-url-field::placeholder { color: var(--c4); }

.img-url-btn {
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 10px 18px;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.img-url-btn:hover { opacity: 0.85; }
.img-url-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Prévisualisation */
.img-preview-wrap {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.img-preview-wrap--visible {
    display: flex;
}

.img-preview {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.img-insert-btn {
    background: var(--c5);
    color: var(--c1);
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 10px 24px;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
    text-align: center;
}

.img-insert-btn:hover { opacity: 0.85; }

/* Feedback */
.img-feedback {
    font-size: 0.82rem;
    min-height: 1.2em;
    text-align: center;
}

.img-feedback--error { color: #e05252; }
.img-feedback--info  { color: var(--c4); }

/* ======================================================
   MOBILE BOTTOM NAV (base — hidden on desktop/tablet)
   ====================================================== */
.mobile-bottomnav {
    display: none;
}

/* Sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 199;
}

.sidebar-overlay.open {
    display: block;
}

/* ======================================================
   RESPONSIVE — max-width: 768px
   ====================================================== */
/* ===== TABLET : sidebar icônes uniquement ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .sidebar {
        width: 64px;
        padding: 16px 8px;
        align-items: center;
    }

    /* Logo : icône seule, centrée */
    .sidebar-logo {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
    }

    .sidebar-logo span {
        display: none;
    }

    /* Nav : icônes centrées, pas de texte, pas de hover */
    .nav-btn {
        justify-content: center;
        padding: 10px;
        gap: 0;
    }

    .nav-btn:not(.active):hover {
        background-color: transparent;
    }

    /* Pas de hover sur premium et profil en tablette */
    .nav-btn--premium:hover {
        background-color: var(--c6) !important;
    }

    .nav-btn--profil:hover {
        background-color: transparent !important;
    }

    .nav-btn span {
        display: none;
    }

    .sidebar-bottom {
        width: 100%;
    }
}

@media (max-width: 768px) {

    /* Hide desktop sidebar (including editor-page 64px override — !important needed for specificity) */
    .sidebar { display: none; }
    body.editor-page .sidebar { display: none !important; }

    /* Main content adds space for bottom nav */
    body:not(.editor-page) .main-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Restore right margin on mobile for page components */
    .dashboard-hero,
    .doc-section,
    .stats-wrap,
    .ai-quota-section,
    .profil-hero,
    .pref-section,
    .docsearch-wrap,
    .premium-banner,
    .premium-cta-final,
    .outils-block,
    .premium-page-hero {
        margin-right: 12px !important;
    }

    /* Bottom nav — collé au bord sans marges */
    .mobile-bottomnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(80px + env(safe-area-inset-bottom, 0px));
        background-color: var(--c2);
        border-radius: 20px 20px 0 0;
        align-items: stretch;
        z-index: 100;
        padding: 8px 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 2px;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.10);
    }

    .mobile-bottomnav__item {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        text-decoration: none;
        transition: background 0.12s;
    }

    .mobile-bottomnav__item img {
        width: 22px;
        height: 22px;
        filter: var(--icon-c5);
    }

    .mobile-bottomnav__item.active {
        background-color: var(--c5);
    }

    .mobile-bottomnav__item.active img {
        filter: var(--icon-on-c5);
    }

    /* État drag : même visuel que active mais temporaire */
    .mobile-bottomnav__item--dragging {
        background-color: var(--c5);
    }
    .mobile-bottomnav__item--dragging img {
        filter: var(--icon-on-c5);
    }

    /* Premium : fond transparent au repos, var(--c6) si actif (jamais var(--c5)) */
    .mobile-bottomnav__item--premium {
        background-color: transparent;
    }

    .mobile-bottomnav__item--premium.active,
    .mobile-bottomnav__item--premium.mobile-bottomnav__item--dragging {
        background-color: var(--c6) !important;
    }

    .mobile-bottomnav__item--premium.active img,
    .mobile-bottomnav__item--premium.mobile-bottomnav__item--dragging img {
        filter: brightness(0) !important;
    }

    /* Premium banner */
    .premium-banner {
        grid-template-columns: 1fr;
    }

    .premium-banner__right {
        padding: 4px 0;
    }

    .premium-banner__title {
        font-size: 1.15rem;
    }

    /* Stats rapides */
    .stats-wrap {
        padding: 0;
        gap: 8px;
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stats-card {
        padding: 12px 14px;
    }

    .stats-card__value {
        font-size: 1.5rem;
    }

    /* Dashboard hero */
    .dashboard-hero {
        margin: 12px 0 0 12px;
        padding: 28px 20px;
    }

    .dashboard-hero__title {
        font-size: 1.35rem;
    }

    .dashboard-hero__desc {
        font-size: 0.85rem;
    }

    .dashboard-hero__actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Document sections */
    .doc-section__header {
        flex-direction: row;
        align-items: center;
    }

    /* Docpage header */
    .docpage__header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 16px 0;
    }

    .docpage__actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .docpage__search {
        max-width: 100%;
    }

    /* Folder create row */
    .folder-create-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Editor page: disable main-content scroll (editor-area handles its own scroll) */
    body.editor-page .main-content {
        overflow: hidden;
        padding-left: 0; /* annule le décalage sidebar du desktop */
        padding-bottom: 0;
    }

    /* Hide the regular bottom nav on editor page */
    body.editor-page .mobile-bottomnav {
        display: none;
    }

    /* Editor: topbar + toolbar flush at top, no floating pill */
    .editor-shell {
        height: 100vh;
        margin: 0;
    }

    .editor-wrapper {
        height: 100%;
        padding-top: 0;
        margin: 0;
        border-radius: 0;
    }

    body.editor-page .editor-bars {
        z-index: 100;
    }

    .editor-topbar {
        position: static;
        margin: 12px;
        border-radius: 16px;
        border-bottom: none;
        box-shadow: none;
        padding: 10px 14px;
        height: auto;
        gap: 8px;
    }

    .editor-toolbar {
        margin: 0 12px;
        border-radius: 0 0 16px 16px;
    }

    .editor-docname {
        font-size: 0.88rem;
        min-width: 0;
        max-width: none;
        flex: 1;
    }

    .editor-status {
        display: none;
    }

    .editor-back {
        width: 30px;
        height: 30px;
    }

    .tr-body,
    .tr-eval-form { padding: 24px 20px 32px; }

    .tr-review { padding: 0 20px 32px; }

    .tr-score { padding: 32px 20px 20px; }

    /* Action modal */
    .action-modal__box {
        margin: auto 12px;
        max-width: calc(100% - 24px);
    }

    /* ── Versions & AI-chat & Training panels → modal like ndoc-modal on mobile (bottom sheet) ── */

    /* Annule le décalage editor-bars et la scrollbar qui s'appliquent sur desktop */
    body.editor-page:has(.versions-panel.open) .editor-bars,
    body.editor-page:has(.ai-chat-panel.open)  .editor-bars,
    body.editor-page:has(.training-panel.open) .editor-bars { right: 0 !important; }
    body.editor-page:has(.versions-panel.open) #editor-cscroll,
    body.editor-page:has(.ai-chat-panel.open)  #editor-cscroll,
    body.editor-page:has(.training-panel.open) #editor-cscroll { right: 0 !important; }
    body.editor-page:has(.versions-panel.open) .bottom-bars,
    body.editor-page:has(.ai-chat-panel.open)  .bottom-bars,
    body.editor-page:has(.training-panel.open) .bottom-bars { right: 12px !important; }

    body.editor-page .bottom-bars {
        z-index: 100;
    }

    .versions-panel,
    .ai-chat-panel {
        position: fixed;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 500 !important;
        overflow: visible;
        background: rgba(0,0,0,0.35) !important;
        pointer-events: auto;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: none;
        align-items: flex-end;
        justify-content: center;
    }
    .versions-panel.open,
    .ai-chat-panel.open {
        display: flex;
    }

    .versions-panel .versions-panel__inner,
    .ai-chat-panel .versions-panel__inner {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh;
        margin: 0;
        background: var(--c1);
        border-radius: 20px 20px 0 0;
        padding: 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.14);
        pointer-events: auto;
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
}

/* ======================================================
   RESPONSIVE — max-width: 480px (very small screens)
   ====================================================== */
@media (max-width: 480px) {

    .dashboard-hero__title {
        font-size: 1.15rem;
    }

    .dashboard-hero {
        padding: 20px 16px;
    }

    .docpage__header h1,
    .docpage__header h2 {
        font-size: 1.1rem;
    }

    .editor-docname {
        font-size: 0.82rem;
    }

    .folder-create-ok,
    .folder-create-cancel {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ===== PAGE PREMIUM ===== */

/* Plans toggle */
.plans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.plans-toggle {
    display: inline-flex;
    background-color: var(--c2);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.plans-toggle__btn {
    padding: 6px 18px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c5);
    cursor: pointer;
    transition: background 0.18s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.plans-toggle__btn:not(.plans-toggle__btn--active):hover {
    background-color: var(--c3);
}

.plans-toggle__btn--active {
    background-color: var(--c5);
    color: var(--c1);
}

.plans-toggle__btn--active:hover {
    background-color: var(--c5);
}

.plans-toggle__save {
    background-color: var(--c6);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 100px;
}

.plans-toggle__btn--active .plans-toggle__save {
    background-color: var(--c6);
    color: #000;
}

/* Plans grid */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 0;
}

.plan-card {
    background-color: var(--c2);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plan-card--highlighted {
    border: none;
}

/* ── Forfait Pro : fond uni inversé (noir en light, blanc en dark) ─── */
.plan-card--pro {
    background: #111111;
    position: relative;
}

body.theme-dark-mono .plan-card--pro,
body.theme-dark-color .plan-card--pro {
    background: #ffffff;
}

/* ── Supprimer la bordure pour Pro ─── */
.plan-card--pro.plan-card--bordered {
    border: none;
}

/* ── Adapter les couleurs du texte pour Pro (inversées) ─── */
.plan-card--pro .plan-card__title {
    color: #ffffff;
}

body.theme-dark-mono .plan-card--pro .plan-card__title,
body.theme-dark-color .plan-card--pro .plan-card__title {
    color: #111111;
}

.plan-card--pro .plan-card__tagline {
    color: rgba(255, 255, 255, 0.7);
}

body.theme-dark-mono .plan-card--pro .plan-card__tagline,
body.theme-dark-color .plan-card--pro .plan-card__tagline {
    color: rgba(17, 17, 17, 0.7);
}

.plan-card--pro .plan-card__amount {
    color: #ffffff;
}

body.theme-dark-mono .plan-card--pro .plan-card__amount,
body.theme-dark-color .plan-card--pro .plan-card__amount {
    color: #111111;
}

.plan-card--pro .plan-card__period {
    color: rgba(255, 255, 255, 0.7);
}

body.theme-dark-mono .plan-card--pro .plan-card__period,
body.theme-dark-color .plan-card--pro .plan-card__period {
    color: rgba(17, 17, 17, 0.7);
}

.plan-card--pro .plan-feature--ok {
    color: #ffffff;
}

body.theme-dark-mono .plan-card--pro .plan-feature--ok,
body.theme-dark-color .plan-card--pro .plan-feature--ok {
    color: #111111;
}

/* ── Adapter les icônes pour Pro ─── */
.plan-card--pro .plan-feature--ok .plan-feature__icon {
    filter: brightness(0) invert(1) opacity(0.85);
}

body.theme-dark-mono .plan-card--pro .plan-feature--ok .plan-feature__icon,
body.theme-dark-color .plan-card--pro .plan-feature--ok .plan-feature__icon {
    filter: brightness(0) opacity(0.75);
}

/* ── Adapter le badge populaire pour Pro ─── */
.plan-card--pro .plan-card__popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff8c06;
    color: #111111;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    padding: 6px 16px;
    white-space: nowrap;
    font-weight: 700;
    z-index: 10;
    border-radius: 16px;
}

.plan-card--pro .plan-card__popular-badge img {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    filter: brightness(0);
}

body.theme-dark-mono .plan-card--pro .plan-card__popular-badge,
body.theme-dark-color .plan-card--pro .plan-card__popular-badge {
    background: #ff8c06;
    color: #111111;
}

/* ── Promo lancement Pro ── */
.plan-card__price-wrap:has(.plan-card__price-row) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.plan-card__price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.plan-card__promo-note {
    font-size: 0.72rem;
    color: var(--c4);
    margin: 2px 0 0;
    line-height: 1.4;
}
.plan-card__discount-pct {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: #e53935;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

/* ── Badge essai gratuit (texte simple) ─── */
.plan-card__trial-badge {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c6);
    margin-bottom: 4px;
}

/* ── Prix sous-prix pour essai gratuit ─── */
.plan-card__trial-subprice {
    display: block;
    font-size: 0.75rem;
    color: var(--c4);
    margin-top: 2px;
}

/* ── Prix de base (sans 2 mois offerts) ─── */
.plan-card__base-price {
    display: block;
    font-size: 0.7rem;
    color: var(--c4);
    margin-top: 4px;
    opacity: 0.8;
}

/* Badge "Populaire" / "Popular" — au-dessus de la carte, centré, moitié chevauchement */
.plan-card__popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: var(--c5);
    color: var(--c1);
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
}
.plan-card__popular-badge img {
    width: 12px;
    height: 12px;
    filter: var(--icon-on-c5);
    flex-shrink: 0;
}

.plan-card__top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-card__crown img {
    width: 18px;
    height: 18px;
    filter: var(--icon-c5);
    display: block;
}

.plan-card__tagline {
    font-size: 0.83rem;
    color: var(--c4);
    line-height: 1.5;
}

.plan-card__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
}

.plan-card__amount {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--c5);
    transition: opacity 0.15s;
}

.plan-card__period {
    font-size: 0.85rem;
    color: var(--c4);
}

/* Feature list */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.plan-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.87rem;
}

.plan-feature--ok {
    color: var(--c5);
}

.plan-feature--no {
    color: var(--c4);
}

.plan-feature__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.plan-feature--ok .plan-feature__icon {
    filter: brightness(0) opacity(0.75);
}

body.theme-dark-mono .plan-feature--ok .plan-feature__icon,
body.theme-dark-color .plan-feature--ok .plan-feature__icon {
    filter: brightness(0) invert(1) opacity(0.85);
}

.plan-feature--no .plan-feature__icon {
    filter: brightness(0) saturate(0%) opacity(35%);
}

/* Plan buttons */
.plan-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.15s;
}

.plan-card__btn--disabled {
    background-color: transparent;
    color: var(--c4);
    cursor: default;
}

/* Adapter le bouton disabled pour Pro (inversé) */
.plan-card--pro .plan-card__btn--disabled {
    color: rgba(255, 255, 255, 0.5);
}

body.theme-dark-mono .plan-card--pro .plan-card__btn--disabled,
body.theme-dark-color .plan-card--pro .plan-card__btn--disabled {
    color: rgba(17, 17, 17, 0.5);
}

.plan-card__btn--dark {
    background-color: var(--c5);
    color: var(--c1);
}

/* ── Adapter le bouton pour Pro (inversé) ─── */
.plan-card--pro .plan-card__btn--dark {
    background-color: #ffffff;
    color: #111111;
}

body.theme-dark-mono .plan-card--pro .plan-card__btn--dark,
body.theme-dark-color .plan-card--pro .plan-card__btn--dark {
    background-color: #111111;
    color: #ffffff;
}

.plan-card__btn--gold {
    background-color: var(--c6);
    color: #000000;
}

.plan-card__btn--gold img {
    width: 16px;
    height: 16px;
    filter: brightness(0);
}

.plan-card__new {
    font-size: 0.68rem;
    font-weight: 700;
    background-color: var(--c6);
    color: #000000;
    padding: 2px 8px;
    border-radius: 100px;
    margin-left: 4px;
    align-self: center;
}

/* Plans comparison table */
.plans-table-wrap {
    background-color: var(--c2);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 24px;
    /* masquer la scrollbar tout en gardant le scroll tactile */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge legacy */
}
.plans-table-wrap::-webkit-scrollbar {
    display: none;               /* Chrome / Safari / Opera */
}

.plans-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

.plans-table thead tr {
    background-color: var(--c2);
    border-bottom: 2px solid var(--ink-a07);
}

.plans-table th {
    padding: 14px 20px;
    font-weight: 700;
    color: var(--c5);
    text-align: center;
}

.plans-table th.plans-table__feature-col {
    text-align: left;
}

.plans-table tbody tr:nth-child(odd) {
    background-color: var(--c2);
}

.plans-table tbody tr:nth-child(even) {
    background-color: var(--c2);
}

.plans-table td {
    padding: 12px 20px;
    color: var(--c5);
    text-align: center;
    border-top: 1px solid var(--ink-a07);
}

.plans-table td:first-child {
    text-align: left;
    font-weight: 600;
}

/* ── Colonne forfait actuel ──────────────────────────────────────── */
.plans-table--current-freemium th:nth-child(2),
.plans-table--current-freemium td:nth-child(2),
.plans-table--current-starter  th:nth-child(3),
.plans-table--current-starter  td:nth-child(3),
.plans-table--current-pro      th:nth-child(4),
.plans-table--current-pro      td:nth-child(4),
.plans-table--current-ultra    th:nth-child(5),
.plans-table--current-ultra    td:nth-child(5) {
    background-color: #111111;
    color: #ffffff;
}

/* Icones check dans la colonne actuelle (light : fond #111111 → icone blanche) */
.plans-table--current-freemium td:nth-child(2) .pt-icon--ok,
.plans-table--current-starter  td:nth-child(3) .pt-icon--ok,
.plans-table--current-pro      td:nth-child(4) .pt-icon--ok,
.plans-table--current-ultra    td:nth-child(5) .pt-icon--ok {
    filter: brightness(0) invert(1) opacity(0.85);
}

/* Icones croix dans la colonne actuelle (light : fond #111111 → icone blanche semi-transparente) */
.plans-table--current-freemium td:nth-child(2) .pt-icon--no,
.plans-table--current-starter  td:nth-child(3) .pt-icon--no,
.plans-table--current-pro      td:nth-child(4) .pt-icon--no,
.plans-table--current-ultra    td:nth-child(5) .pt-icon--no {
    filter: brightness(0) invert(1) opacity(0.25);
}

/* Valeurs texte dans la colonne actuelle (light) */
.plans-table--current-freemium td:nth-child(2) .pt-val,
.plans-table--current-starter  td:nth-child(3) .pt-val,
.plans-table--current-pro      td:nth-child(4) .pt-val,
.plans-table--current-ultra    td:nth-child(5) .pt-val {
    color: #ffffff;
}

/* Thème dark : colonne actuelle */
body.theme-dark-mono .plans-table--current-freemium th:nth-child(2),
body.theme-dark-mono .plans-table--current-freemium td:nth-child(2),
body.theme-dark-mono .plans-table--current-starter  th:nth-child(3),
body.theme-dark-mono .plans-table--current-starter  td:nth-child(3),
body.theme-dark-mono .plans-table--current-pro      th:nth-child(4),
body.theme-dark-mono .plans-table--current-pro      td:nth-child(4),
body.theme-dark-mono .plans-table--current-ultra    th:nth-child(5),
body.theme-dark-mono .plans-table--current-ultra    td:nth-child(5),
body.theme-dark-color .plans-table--current-freemium th:nth-child(2),
body.theme-dark-color .plans-table--current-freemium td:nth-child(2),
body.theme-dark-color .plans-table--current-starter  th:nth-child(3),
body.theme-dark-color .plans-table--current-starter  td:nth-child(3),
body.theme-dark-color .plans-table--current-pro      th:nth-child(4),
body.theme-dark-color .plans-table--current-pro      td:nth-child(4),
body.theme-dark-color .plans-table--current-ultra    th:nth-child(5),
body.theme-dark-color .plans-table--current-ultra    td:nth-child(5) {
    background-color: #ffffff;
    color: #111111;
}

/* Icones check dans la colonne actuelle (dark : fond #ffffff → icone noire) */
body.theme-dark-mono .plans-table--current-freemium td:nth-child(2) .pt-icon--ok,
body.theme-dark-mono .plans-table--current-starter  td:nth-child(3) .pt-icon--ok,
body.theme-dark-mono .plans-table--current-pro      td:nth-child(4) .pt-icon--ok,
body.theme-dark-mono .plans-table--current-ultra    td:nth-child(5) .pt-icon--ok,
body.theme-dark-color .plans-table--current-freemium td:nth-child(2) .pt-icon--ok,
body.theme-dark-color .plans-table--current-starter  td:nth-child(3) .pt-icon--ok,
body.theme-dark-color .plans-table--current-pro      td:nth-child(4) .pt-icon--ok,
body.theme-dark-color .plans-table--current-ultra    td:nth-child(5) .pt-icon--ok {
    filter: brightness(0) opacity(0.8);
}

/* Icones croix dans la colonne actuelle (dark : fond #ffffff → icone noire semi-transparente) */
body.theme-dark-mono .plans-table--current-freemium td:nth-child(2) .pt-icon--no,
body.theme-dark-mono .plans-table--current-starter  td:nth-child(3) .pt-icon--no,
body.theme-dark-mono .plans-table--current-pro      td:nth-child(4) .pt-icon--no,
body.theme-dark-mono .plans-table--current-ultra    td:nth-child(5) .pt-icon--no,
body.theme-dark-color .plans-table--current-freemium td:nth-child(2) .pt-icon--no,
body.theme-dark-color .plans-table--current-starter  td:nth-child(3) .pt-icon--no,
body.theme-dark-color .plans-table--current-pro      td:nth-child(4) .pt-icon--no,
body.theme-dark-color .plans-table--current-ultra    td:nth-child(5) .pt-icon--no {
    filter: brightness(0) opacity(0.2);
}

/* Valeurs texte dans la colonne actuelle (dark) */
body.theme-dark-mono .plans-table--current-freemium td:nth-child(2) .pt-val,
body.theme-dark-mono .plans-table--current-starter  td:nth-child(3) .pt-val,
body.theme-dark-mono .plans-table--current-pro      td:nth-child(4) .pt-val,
body.theme-dark-mono .plans-table--current-ultra    td:nth-child(5) .pt-val,
body.theme-dark-color .plans-table--current-freemium td:nth-child(2) .pt-val,
body.theme-dark-color .plans-table--current-starter  td:nth-child(3) .pt-val,
body.theme-dark-color .plans-table--current-pro      td:nth-child(4) .pt-val,
body.theme-dark-color .plans-table--current-ultra    td:nth-child(5) .pt-val {
    color: #111111;
}

/* Badge exp dans la colonne actuelle */
.plans-table--current-freemium td:nth-child(2) .pf-xp-badge,
.plans-table--current-starter  td:nth-child(3) .pf-xp-badge,
.plans-table--current-pro      td:nth-child(4) .pf-xp-badge,
.plans-table--current-ultra    td:nth-child(5) .pf-xp-badge {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}
body.theme-dark-mono .plans-table--current-freemium td:nth-child(2) .pf-xp-badge,
body.theme-dark-mono .plans-table--current-starter  td:nth-child(3) .pf-xp-badge,
body.theme-dark-mono .plans-table--current-pro      td:nth-child(4) .pf-xp-badge,
body.theme-dark-mono .plans-table--current-ultra    td:nth-child(5) .pf-xp-badge,
body.theme-dark-color .plans-table--current-freemium td:nth-child(2) .pf-xp-badge,
body.theme-dark-color .plans-table--current-starter  td:nth-child(3) .pf-xp-badge,
body.theme-dark-color .plans-table--current-pro      td:nth-child(4) .pf-xp-badge,
body.theme-dark-color .plans-table--current-ultra    td:nth-child(5) .pf-xp-badge {
    background: rgba(0,0,0,0.12);
    color: #111111;
}

.pt-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* Light theme : check sombre, croix grisée */
.pt-icon--ok {
    filter: brightness(0) opacity(0.8);
}

.pt-icon--no {
    filter: brightness(0) opacity(0.2);
}

/* Dark theme : check clair, croix grisée claire */
body.theme-dark-mono .plans-table .pt-icon--ok,
body.theme-dark-color .plans-table .pt-icon--ok {
    filter: brightness(0) invert(1) opacity(0.85);
}

body.theme-dark-mono .plans-table .pt-icon--no,
body.theme-dark-color .plans-table .pt-icon--no {
    filter: brightness(0) invert(1) opacity(0.25);
}

.pt-val {
    font-weight: 700;
    color: var(--c5);
    text-align: center;
}

@media (max-width: 600px) {
    .plans-table th,
    .plans-table td {
        padding: 10px 10px;
        font-size: 0.8rem;
    }
}

@media (max-width: 860px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }
    .plans-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.premium-hero {
    background-image: linear-gradient(rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.2)),
                      url('../images/background_banner2.webp');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 80px 40px;
    margin: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.premium-hero__content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.premium-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--c6);
    color: #000000;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 100px;
    width: fit-content;
}

.premium-hero__badge img {
    width: 14px;
    height: 14px;
    filter: brightness(0);
}

.premium-hero__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c5);
    margin: 0;
    line-height: 1.25;
}

.premium-hero__desc {
    font-size: 0.95rem;
    color: var(--ink-a60);
    margin: 0;
    line-height: 1.6;
}

.premium-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* Boutons CTA Premium */
.premium-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.premium-cta:hover {
    opacity: 0.85;
}

.premium-cta--main {
    background-color: var(--c6);
    color: #000000;
}

.premium-cta--main img {
    width: 16px;
    height: 16px;
    filter: brightness(0);
}

.premium-cta--secondary {
    background-color: transparent;
    color: var(--c5);
    border: 1.5px solid var(--c3);
}

.premium-cta--secondary:hover {
    background-color: var(--c2);
    opacity: 1;
}

/* Plans */
.premium-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.premium-plan {
    background-color: var(--c1);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.premium-plan--highlighted {
    border: 2px solid var(--c6);
}

.premium-plan__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-plan__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    width: fit-content;
}

.premium-plan__badge--free {
    background-color: var(--c2);
    color: var(--c5);
}

.premium-plan__badge--premium {
    background-color: var(--c6);
    color: #000000;
}

.premium-plan__badge--premium img {
    width: 13px;
    height: 13px;
    filter: brightness(0);
}

.premium-plan__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.premium-plan__amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c5);
}

.premium-plan__period {
    font-size: 0.85rem;
    color: var(--c4);
}

.premium-plan__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.premium-plan__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--c5);
}

.premium-plan__feature--no {
    color: var(--c4);
}

.premium-plan__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

.premium-plan__check--ok {
    background-color: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.premium-plan__check--no {
    background-color: var(--ink-a08);
    color: var(--c4);
}

.premium-plan__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
}

.premium-plan__btn--disabled {
    background-color: var(--c2);
    color: var(--c4);
    cursor: default;
}

.premium-plan__btn--premium {
    background-color: var(--c6);
    color: #000000;
}

.premium-plan__btn--premium img {
    width: 16px;
    height: 16px;
    filter: brightness(0);
}

.premium-plan__btn--premium:hover {
    opacity: 0.85;
}

/* Feature cards */
.premium-feature-card {
    gap: 12px;
}

.premium-feature-card__icon-wrap {
    width: 40px;
    height: 40px;
    background-color: var(--c2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.premium-feature-card__icon-wrap .stats-card__icon {
    width: 22px;
    height: 22px;
}

.premium-feature-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c5);
}

.premium-feature-card__desc {
    font-size: 0.83rem;
    color: var(--c4);
    line-height: 1.55;
    margin: 0;
}

/* CTA final */
.premium-cta-final {
    background: var(--c2);
    border-radius: 16px;
    margin: 24px 0 12px 12px;
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-cta-final__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 520px;
}

.premium-cta-final__icon {
    width: 40px;
    height: 40px;
    filter: var(--icon-c5);
}

.premium-cta-final__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c5);
    margin: 0;
}

.premium-cta-final__desc {
    font-size: 0.9rem;
    color: var(--c4);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .premium-plans {
        grid-template-columns: 1fr;
    }

    .premium-hero__title {
        font-size: 1.5rem;
    }

    .premium-hero {
        padding: 50px 24px;
    }
}

@media (max-width: 600px) {
    .premium-hero__title {
        font-size: 1.25rem;
    }

    .premium-hero__desc br {
        display: none;
    }

    .premium-hero {
        padding: 36px 16px;
    }

    .premium-cta-final {
        padding: 28px 16px;
    }

    .premium-cta-final__title {
        font-size: 1.1rem;
    }
}


/* ===== ALWAYS-DARK SECTION OVERRIDES =====
 * These elements sit on hardcoded dark backgrounds (#1b1b2f / #2e2e55)
 * that do NOT participate in the palette. Their text must always be white
 * regardless of the active theme/palette combination.
 * ========================================== */

/* -- Docpage (cards always on #2e2e55 bg) -- */
.docpage__title,
.docpage__search-input,
.docpage__card-title { color: #ffffff !important; }

/* -- Auth pages -- */



/* ═══════════════════════════════════════════
   TRAINING PANEL
   ═══════════════════════════════════════════ */

/* Container — identique à .versions-panel et .ai-chat-panel */
.training-panel {
    position: fixed;
    right: 12px; top: 12px; bottom: 12px;
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    height: auto;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Ajuster le panneau training quand la bannière BETA est présente (PC uniquement) */
@media (min-width: 769px) {
    body.has-beta-banner.editor-page .training-panel {
        top: 56px; /* 12px margin + 32px banner + 12px margin */
    }
}
.training-panel.open { width: 320px; }

/* Wide mode (40%) uniquement sur PC */
@media (min-width: 769px) {
    .training-panel.open.wide { width: 40%; }
    body.editor-page:has(.training-panel.open.wide) .editor-bars { right: calc(40% + 24px); }
    body.editor-page:has(.training-panel.open.wide) #editor-cscroll { right: calc(40% + 24px); }
    body.editor-page:has(.training-panel.open.wide) .bottom-bars { right: calc(40% + 24px); }

    /* Blur avec grain sur le document en mode training wide */
    body.editor-page:has(.training-panel.open.wide) .editor-area {
        position: relative;
    }
    body.editor-page:has(.training-panel.open.wide) .editor-area::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(var(--hero-overlay), var(--hero-overlay));
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 5;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    body.editor-page:has(.training-panel.open.wide) .editor-area::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 200px;
        opacity: 0.08;
        pointer-events: none;
        z-index: 6;
        transition: opacity 0.3s ease;
    }
    /* Au hover, enlever temporairement le blur */
    body.editor-page:has(.training-panel.open.wide) .editor-area:hover::before,
    body.editor-page:has(.training-panel.open.wide) .editor-area:hover::after {
        opacity: 0;
    }

    /* Skeleton loader sur le document pendant le chargement training */
    body.editor-page.training-loading .editor-area::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(var(--hero-overlay), var(--hero-overlay));
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 5;
        pointer-events: none;
    }
    body.editor-page.training-loading .editor-area::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 200px;
        opacity: 0.08;
        pointer-events: none;
        z-index: 6;
    }
}

/* Skeleton loader overlay */
.training-skeleton-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    padding: 12px;
    display: none;
    pointer-events: none;
}
body.editor-page.training-loading .training-skeleton-overlay {
    display: block;
}

/* Skeleton loader au chargement de la page */
.page-skeleton-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    width: 800px;
    min-width: 800px;
    max-width: 800px;
    padding: 49px 57px 64px;
    box-sizing: border-box;
    display: none;
    pointer-events: none;
}
body.editor-page:not(.editor-ready) .page-skeleton-overlay {
    display: block;
}
body.editor-page.editor-ready .page-skeleton-overlay {
    display: none;
}

.training-skeleton-block,
.page-skeleton-block {
    background: var(--ink-a12);
    border-radius: 4px;
    margin-bottom: 12px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.training-skeleton-block--title,
.page-skeleton-block--title {
    height: 32px;
    width: 60%;
    margin-bottom: 24px;
}
.training-skeleton-block--text,
.page-skeleton-block--text {
    height: 16px;
    width: 100%;
}
.training-skeleton-block--text-short,
.page-skeleton-block--text-short {
    height: 16px;
    width: 70%;
}
.training-skeleton-block--image,
.page-skeleton-block--image {
    height: 200px;
    width: 100%;
    margin-bottom: 24px;
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

.training-panel .versions-panel__inner {
    width: 308px;
    height: 100%;
    margin: 0 12px 0 0;
    background: var(--c2);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
.training-panel.wide .versions-panel__inner {
    width: calc(100% - 12px);
}
.training-panel .versions-panel__header { border-bottom: none; }

/* ── Training grid ─────────────────────────────────────────────── */
.training-panel .training-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.training-panel .training-grid::-webkit-scrollbar { display: none; }
.training-panel .training-grid { scrollbar-width: none; }

/* ── Training panel → modal like ndoc-modal on mobile (bottom sheet) ── */
@media (max-width: 768px) {
    .training-panel {
        position: fixed;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 500 !important;
        overflow: visible;
        background: rgba(0,0,0,0.35) !important;
        pointer-events: auto;
        display: none;
        align-items: flex-end;
        justify-content: center;
    }
    .training-panel.open {
        display: flex;
        pointer-events: auto;
    }
    .training-panel .versions-panel__inner {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh;
        margin: 0;
        background: var(--c1);
        border-radius: 20px 20px 0 0;
        padding: 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.14);
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
}

/* ═══════════════════════════════════════════
   AI CHAT PANEL
   ═══════════════════════════════════════════ */

/* Container — identique à .versions-panel */
.ai-chat-panel {
    position: fixed;
    right: 12px; top: 12px; bottom: 12px;
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    height: auto;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Ajuster le panneau AI chat quand la bannière BETA est présente (PC uniquement) */
@media (min-width: 769px) {
    body.has-beta-banner.editor-page .ai-chat-panel {
        top: 56px; /* 12px margin + 32px banner + 12px margin */
    }
}
.ai-chat-panel.open { width: 320px; }

.ai-chat-panel .versions-panel__inner {
    width: 308px;
    height: 100%;
    margin: 0 12px 0 0;
    background: var(--c2);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
.ai-chat-panel .versions-panel__header { border-bottom: none; }

/* ── Messages ─────────────────────────────────────────────── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.chat-messages::-webkit-scrollbar { display: none; }
.chat-messages { scrollbar-width: none; }

/* ── Message individuel ───────────────────────────────────── */
.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 100%;
}
.chat-msg__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 4px;
}
.chat-msg__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c3);
    color: var(--c5);
    font-size: 0.62rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    letter-spacing: 0;
}
.chat-msg__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chat-msg--assistant .chat-msg__avatar {
    background: #ff8c06;
    color: #fff;
}
.chat-msg--assistant .chat-msg__sender {
    color: #ff8c06;
}
.chat-msg--user .chat-msg__avatar {
    background: var(--c5);
    color: var(--c1);
}
.chat-msg__sender {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c4);
    letter-spacing: 0.01em;
}
.chat-msg__time {
    font-size: 0.68rem;
    color: var(--c4);
    opacity: 0.6;
}
.chat-msg__content {
    padding: 9px 12px;
    font-size: 0.855rem;
    line-height: 1.6;
    color: var(--c5);
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 10px;
}
.chat-msg--user .chat-msg__content {
    background: var(--ink-a12);
    border-radius: 10px 10px 4px 10px;
}
.chat-msg--assistant .chat-msg__content {
    background: var(--ink-a08);
    border-radius: 10px 10px 10px 4px;
}

/* ── Indicateur de frappe ─────────────────────────────────── */
.chat-msg--thinking .chat-msg__content { padding: 12px 16px; }
.chat-msg__dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.chat-msg__dots span {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c4);
    animation: chat-dot-bounce 1.2s infinite ease-in-out;
}
.chat-msg__dots span:nth-child(1) { animation-delay: 0s; }
.chat-msg__dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%            { transform: translateY(-5px); opacity: 1;   }
}

/* ── Badge statut modification document ───────────────────── */
.chat-msg__proposal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    align-self: flex-start;
    margin-left: 0;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 180, 0, 0.18);
    color: #a06000;
    border-radius: 20px;
    padding: 2px 8px 2px 6px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
body.theme-dark-mono .chat-msg__proposal-badge,
body.theme-dark-color .chat-msg__proposal-badge {
    background: rgba(255, 180, 0, 0.15);
    color: #ffc93c;
}

/* Icône dans le badge — suit currentColor automatiquement via mask */
.chat-proposal-badge-icon {
    flex-shrink: 0;
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background-color: currentColor;
    -webkit-mask-image: var(--bdg-icon);
    mask-image: var(--bdg-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.chat-msg__proposal-badge--applied {
    background: rgba(34, 197, 94, 0.13);
    color: #15803d;
}
body.theme-dark-mono .chat-msg__proposal-badge--applied,
body.theme-dark-color .chat-msg__proposal-badge--applied {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.chat-msg__proposal-badge--rejected {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    opacity: 0.75;
}
body.theme-dark-mono .chat-msg__proposal-badge--rejected,
body.theme-dark-color .chat-msg__proposal-badge--rejected {
    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
}

/* ── Overlay preview local (IA + versions) ───────────────── */
/* Positionné dans #pm-scale-inner (position:relative) ;
   hérite du même transform/zoom/background/scroll que le vrai doc.
   background: var(--c2) = fond de page (mode paginé).
   En mode continu #pm-scale-inner est transparent → on utilise var(--c1) (fond body). */
#pm-scale-inner { position: relative; }
#preview-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; min-height: 100%;
    z-index: 3;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    background: var(--c2);
}
.editor-view--continuous #preview-overlay {
    background: var(--c1);
}
#preview-overlay[hidden] { display: none; }
#preview-overlay .ProseMirror {
    outline: none;
}

/* ── Barre de proposition ─────────────────────────────────── */
.chat-proposal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 3px 10px;
    flex-shrink: 0;
    background: var(--ink-a05);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid var(--ink-a08);
}
.chat-proposal-bar[hidden] { display: none; }

.chat-proposal-bar__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c4);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    opacity: 0.85;
}
.chat-proposal-bar__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.chat-proposal-bar__btn {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.chat-proposal-bar__btn img {
    display: block;
    filter: var(--icon-c4);
}
.chat-proposal-bar__btn:hover { background: var(--ink-a12); }
.chat-proposal-bar__btn:hover img { filter: var(--icon-c5); }
.chat-proposal-bar__preview.active { background: var(--ink-a12); }
.chat-proposal-bar__preview.active img { filter: var(--icon-c5); }
.chat-proposal-bar__btn:disabled { opacity: 0.4; cursor: default; }

/* ── Zone de saisie ───────────────────────────────────────── */
.chat-input-area {
    padding: 8px 12px 12px;
    flex-shrink: 0;
}
/* Quand la barre proposition est visible, wrapper le tout dans un conteneur arrondi */
.chat-input-area:has(.chat-proposal-bar:not([hidden])) {
    background: var(--ink-a08);
    border-radius: 14px;
    overflow: hidden;
    padding: 0 12px 12px;
}
.chat-input-area:has(.chat-proposal-bar:not([hidden])) .chat-proposal-bar {
    margin: 0;
    border-radius: 0;
    background: transparent;
}
.chat-input-area:has(.chat-proposal-bar:not([hidden])) .chat-input-wrap {
    background: transparent;
    border-radius: 0 0 10px 10px;
}
.chat-input-wrap {
    display: flex;
    flex-direction: column;
    background: var(--ink-a08);
    border-radius: 14px;
    overflow: visible;
    position: relative;
}
.chat-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--c5);
    padding: 10px 12px 4px;
    resize: none;
    min-height: 52px;
    max-height: 160px;
    overflow-y: auto;
    font-size: 0.855rem;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    display: block;
}
.chat-input::placeholder { color: var(--c4); }
.chat-input:disabled     { opacity: 0.5; }

.chat-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 6px;
    gap: 2px;
}
.chat-footer-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.chat-send-btn {
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c5);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.chat-send-btn img { display: block; filter: var(--icon-on-c5); }
.chat-send-btn:hover:not(:disabled) { opacity: 0.75; }
.chat-send-btn:disabled { opacity: 1; cursor: default; }
/* Icône dans bouton générer (modifier image IA) — toujours sur fond var(--c5) */
#img-ai-modal-submit-icon { filter: var(--icon-on-c5); }

/* ── Bouton microphone ──────────────────────────────────────────────── */
.chat-mic-wrap { display: flex; align-items: center; }
.chat-mic-btn {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, width 0.2s;
    padding: 0;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}
.chat-mic-btn img { display: block; filter: var(--icon-c4); flex-shrink: 0; }
.chat-mic-btn img[hidden] { display: none; }
.chat-mic-btn:hover:not(.chat-mic-btn--recording) { background: var(--ink-a12); }
.chat-mic-btn:hover:not(.chat-mic-btn--recording) img { filter: var(--icon-c5); }

/* État enregistrement actif (même bouton, contenu changé) */
.chat-mic-btn--recording {
    width: auto;
    padding: 0 9px;
    background: transparent;
}
.chat-mic-btn--recording:hover { background: var(--ink-a12); }

/* Barres animées (hidden par défaut) */
.chat-mic-bars[hidden] { display: none; }
.chat-mic-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 16px;
    flex-shrink: 0;
}
.chat-mic-bars span {
    display: block;
    width: 2.5px;
    border-radius: 2px;
    background: var(--c5);
    transform-origin: center center;
    animation: mic-bar 0.75s ease-in-out infinite alternate;
}
.chat-mic-bars span:nth-child(1) { height: 5px;  animation-delay: 0s;    }
.chat-mic-bars span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.chat-mic-bars span:nth-child(3) { height: 15px; animation-delay: 0.3s;  }
.chat-mic-bars span:nth-child(4) { height: 10px; animation-delay: 0.15s; }
.chat-mic-bars span:nth-child(5) { height: 5px;  animation-delay: 0s;    }
@keyframes mic-bar {
    from { transform: scaleY(0.2); opacity: 0.5; }
    to   { transform: scaleY(1);   opacity: 1;   }
}
/* Chrono (hidden par défaut) */
.chat-mic-timer[hidden] { display: none; }
.chat-mic-timer {
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--c4);
    letter-spacing: 0.03em;
    min-width: 26px;
    -webkit-user-select: none;
    user-select: none;
}

/* Locked send button (upsell) */
.chat-send-btn--locked {
    background: var(--c6);
    cursor: pointer;
}
.chat-send-btn--locked img {
    filter: brightness(0) !important;
}
.chat-send-btn--locked:hover { opacity: 1; }

/* ── Bouton pièce jointe ──────────────────────────────────── */
.chat-attach-btn {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.chat-attach-btn img { display: block; filter: var(--icon-c4); }
.chat-attach-btn:hover { background: var(--ink-a12); }
.chat-attach-btn:hover img { filter: var(--icon-c5); }
.chat-attach-btn--image-mode { background: var(--ink-a12); }
.chat-attach-btn--image-mode img { filter: var(--icon-c5); }

/* ── Mode popup (joindre / générer image) ─────────────────── */
.chat-mode-wrap { position: relative; }
.chat-mode-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: var(--c2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    min-width: 80px;
    z-index: 600;
}
.chat-mode-popup.open { display: flex; flex-direction: column; gap: 2px; }
.chat-mode-item {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 12px; border: none; border-radius: 6px;
    background: transparent; color: var(--ink-a60);
    font-family: 'Montserrat', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; text-align: left;
    transition: background 0.15s;
}
.chat-mode-item img { filter: var(--icon-c4); flex-shrink: 0; }
.chat-mode-item:hover { background: var(--ink-a07); color: var(--c5); }
.chat-mode-item:hover img { filter: var(--icon-c5); }
.chat-mode-item--active { background: var(--ink-a12); color: var(--c5); }
.chat-mode-item--active img { filter: var(--icon-c5); }
.chat-mode-item--active .chat-mode-credit-badge,
.chat-mode-item:hover .chat-mode-credit-badge { color: #000; }
.chat-mode-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 1px 6px 1px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--c6);
    color: #000;
    border-radius: 20px;
}
.chat-mode-credit-badge img { filter: brightness(0); opacity: .75; flex-shrink: 0; }

/* ── Slash commands popup ─────────────────────────────────── */
.chat-slash-popup {
    position: absolute; bottom: 100%; left: 0; right: 0;
    background: var(--c2); border: 1px solid var(--ink-a12);
    border-radius: 10px; overflow: hidden; z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    max-height: 200px; overflow-y: auto;
    margin-bottom: 4px;
}
.chat-slash-item { padding: 9px 14px; font-size: .875rem; cursor: pointer; color: var(--c5); }
.chat-slash-item--active, .chat-slash-item:hover { background: var(--ink-a08); }

/* ── Streaming cursor ─────────────────────────────────────── */
.chat-stream-cursor { display: inline-block; animation: chat-blink .7s step-end infinite; }
@keyframes chat-blink { 50% { opacity: 0; } }

/* ── Thinking text (raisonnement interne) ─────────────────── */
.chat-thinking-text { color: var(--ink-40); font-style: italic; font-size: .85em; white-space: pre-wrap; }

/* ── Markdown in chat ─────────────────────────────────────── */
.chat-msg__content .chat-code-block {
    background: var(--c1); border: 1px solid var(--ink-a12);
    border-radius: 8px; padding: 10px 12px; font-size: .82rem;
    overflow-x: auto; margin: 6px 0; font-family: monospace; white-space: pre;
}
.chat-msg__content code.chat-code-inline {
    background: var(--ink-a08); border-radius: 4px;
    padding: 0 4px; font-size: .88em; font-family: monospace;
}
.chat-msg__content .chat-md-h1 { display: block; font-size: 1rem; font-weight: 700; margin-top: 8px; }
.chat-msg__content .chat-md-h2 { display: block; font-size: .95rem; font-weight: 700; margin-top: 6px; }
.chat-msg__content .chat-md-h3 { display: block; font-size: .9rem; font-weight: 600; margin-top: 4px; }
.chat-msg__content ul { padding-left: 18px; margin: 4px 0; }
.chat-msg__content li { margin: 2px 0; }

/* ── Chip fichier joint ───────────────────────────────────── */
.chat-attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 6px;
    padding: 5px 10px 5px 8px;
    background: var(--ink-a08);
    border: 1px solid var(--ink-a12);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c5);
    max-width: calc(100% - 24px);
}
.chat-attachment-chip__icon { filter: var(--icon-c4); flex-shrink: 0; }
.chat-attachment-chip__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-attachment-chip__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c4);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.12s;
}
.chat-attachment-chip__remove:hover { color: var(--c5); }
.chat-attachment-chip[hidden] { display: none; }

/* ── Modal pièce jointe ───────────────────────────────────── */
.chat-attach-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.chat-attach-modal.open {
    display: flex;
}
.chat-attach-modal__box {
    background: var(--c1);
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-attach-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
    gap: 12px;
}
.chat-attach-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0;
}
.chat-attach-modal__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px 20px;
}
.chat-attach-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.chat-attach-option:not(.chat-attach-option--soon):hover { background: var(--ink-a08); }
.chat-attach-option--soon { opacity: 0.45; cursor: default; }
.chat-attach-option__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.chat-attach-option__icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--ink-a08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--c5);
}
.chat-attach-option__label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c5);
    line-height: 1.2;
}
.chat-attach-option__sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c4);
    margin-top: 1px;
}
.chat-attach-option > :not(.chat-attach-option__input) {
    pointer-events: none;
}
.chat-attach-option__badge {
    position: absolute;
    top: 8px; right: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--ink-a12);
    color: var(--c4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}
/* Stack label/sub vertically */
.chat-attach-option__text { display: flex; flex-direction: column; }

/* Chat upsell banner */
.chat-upsell-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 4px;
    padding: 9px 12px;
    background: var(--c6);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #000;
    flex-wrap: wrap;
}
.chat-upsell-banner__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: brightness(0);
}
.chat-upsell-banner__link {
    margin-left: auto;
    color: #000;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

/* ── AI-chat panel → modal like ndoc-modal on mobile (bottom sheet) ── */
@media (max-width: 768px) {
    .ai-chat-panel {
        position: fixed;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 500 !important;
        overflow: visible;
        background: rgba(0,0,0,0.35) !important;
        pointer-events: auto;
        display: none;
        align-items: flex-end;
        justify-content: center;
    }
    .ai-chat-panel.open {
        display: flex;
        pointer-events: auto;
    }
    .ai-chat-panel .versions-panel__inner {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh;
        margin: 0;
        background: var(--c1);
        border-radius: 20px 20px 0 0;
        padding: 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.14);
        animation: ndoc-slide-up 0.22s cubic-bezier(.32,1,.4,1) both;
    }
}

/* ═══════════════════════════════════════════════════════════════
   POLICY PAGES  (politique-confidentialite, conditions-utilisation,
   politique-cookies, mentions-legales)
═══════════════════════════════════════════════════════════════ */

body.policy-page .main-content-public {
    display: block;
    min-height: 100vh;
    padding: 48px 24px 72px;
}

.policy-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}

.policy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.policy-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c4);
    text-decoration: none;
    transition: color 0.15s;
    letter-spacing: 0.02em;
}
.policy-back:hover { color: var(--c5); }
.policy-back svg { flex-shrink: 0; color: currentColor; }

.policy-updated {
    font-size: 0.75rem;
    color: var(--c4);
    opacity: 0.6;
    margin: 0;
}

.policy-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--c5);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.policy-intro {
    font-size: 1rem;
    color: var(--c4);
    line-height: 1.75;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--c3);
}

.policy-section {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--c3);
}
.policy-section:last-of-type { border-bottom: none; }

.policy-section h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--c5);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.policy-section h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c5);
    margin: 20px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.policy-section p {
    font-size: 0.92rem;
    color: var(--c4);
    line-height: 1.75;
    margin-bottom: 10px;
}
.policy-section p:last-child { margin-bottom: 0; }

.policy-section ul {
    margin: 8px 0 10px 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.policy-section ul li {
    font-size: 0.92rem;
    color: var(--c4);
    line-height: 1.65;
}
.policy-section ul li strong { color: var(--c5); }

.policy-section a {
    color: var(--c5);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.policy-section a:hover { opacity: 0.75; }

/* Highlight contact section */
.policy-section--contact {
    background: var(--c2);
    border-radius: 14px;
    padding: 24px 28px;
    border-bottom: none;
    margin-top: 8px;
}
.policy-section--contact h2 { margin-bottom: 10px; }

/* Cookie table */
.policy-table-wrap {
    overflow-x: auto;
    margin: 10px 0 6px;
    border-radius: 10px;
    border: 1px solid var(--c3);
}
.policy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.policy-table th {
    background: var(--c2);
    color: var(--c4);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 14px;
    text-align: left;
}
.policy-table td {
    padding: 10px 14px;
    color: var(--c4);
    border-top: 1px solid var(--c3);
    vertical-align: top;
    line-height: 1.5;
}
.policy-table td code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    background: var(--c3);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--c5);
    white-space: nowrap;
}

/* Cross-links at bottom of each page */
.policy-footer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 32px;
    margin-top: 8px;
    border-top: 1px solid var(--c3);
}
.policy-footer-links a {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c4);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--c2);
    border: 1px solid var(--c3);
    transition: border-color 0.15s, color 0.15s;
}
.policy-footer-links a:hover {
    border-color: var(--c5);
    color: var(--c5);
}

@media (max-width: 520px) {
    body.policy-page .main-content-public { padding: 32px 24px 56px; }
    .policy-title { font-size: 1.5rem; }
    .policy-section--contact { padding: 20px; }
}

/* ── Link Modal — styles migrés vers .ndoc-overlay/.ndoc-modal ── */

/* ── Slash Commands Menu ─────────────────────────────────── */
.slash-menu {
    position: fixed; z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    min-width: 80px;
}
@keyframes slashFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.slash-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-size: 0.8rem; font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink-a60);
    text-align: center;
    transition: background 0.15s;
    white-space: nowrap;
}
.slash-menu__item:hover, .slash-menu__item.active { background: var(--c3); color: var(--c5); }
.slash-menu__icon { width: 24px; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--ink-a60); flex-shrink: 0; }
.slash-menu__label { flex: 1; }

/* ── Task List (Checklist) ───────────────────────────────── */
.ProseMirror ul[data-type="taskList"] {
    list-style: none; padding-left: 0; margin: .5em 0;
}
.ProseMirror ul[data-type="taskList"] li {
    display: flex; align-items: flex-start; gap: 8px; padding: 1px 0;
}
.ProseMirror ul[data-type="taskList"] li > label {
    flex-shrink: 0; margin-top: 3px; cursor: pointer;
}
.ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
    width: 15px; height: 15px; cursor: pointer; accent-color: var(--c6);
}
.ProseMirror ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.ProseMirror ul[data-type="taskList"] li > div > p { margin: 0; padding: 0; }
.ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
    text-decoration: line-through; opacity: .55;
}
.ProseMirror ul[data-type="taskList"] ul[data-type="taskList"] { padding-left: 22px; margin: 0; }

/* ── Editor Links ────────────────────────────────────────── */
.ProseMirror a.editor-link, .editor-link {
    color: #ff8c06; text-decoration: underline;
    text-decoration-color: #ff8c06;
    cursor: pointer; transition: color .15s, text-decoration-color .15s;
}
.ProseMirror a.editor-link:hover { text-decoration-color: #ff8c06; }

/* Link toolbar button active state */
#toolbar-link-btn.active { color: #ff8c06; }

/* ── Code Block ──────────────────────────────────────────── */
.ProseMirror pre,
.editor-area pre {
    background: var(--c2);
    color: var(--c4);
    border-radius: 8px; padding: 0; overflow: visible;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6; margin: .75em 0; position: relative;
}
.ProseMirror pre code,
.editor-area pre code {
    display: block; background: none; padding: 14px 16px; border: none; color: var(--c4);
}

/* ── Inline Code ─────────────────────────────────────────── */
.ProseMirror code:not(pre code) {
    background: #dddddd;
    border-radius: 4px; padding: 1px 5px;
    font-family: 'Courier New', Courier, monospace;
}
body.theme-dark-mono .ProseMirror code:not(pre code),
body.theme-dark-color .ProseMirror code:not(pre code) {
    background: #222222;
}


/* ── Horizontal Rule in editor ───────────────────────────── */
.ProseMirror hr {
    border: none;
    border-top: 2px solid #dddddd;
    margin: 1.2em 0;
    cursor: grab;
    border-radius: 2px;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}
body.theme-dark-mono .ProseMirror hr,
body.theme-dark-color .ProseMirror hr {
    border-top-color: #222222;
}
.ProseMirror hr.ProseMirror-selectednode {
    outline: none !important;
}
.ProseMirror hr.hr-selected {
    border-top-color: var(--c3);
}

/* ── Overlay de sélection / resize des <hr> ─────────────── */
/* Hérite de .img-resize-overlay — override minimal */
.hr-resize-overlay {
    border-radius: 2px;
    min-height: 16px;
}

/* PB overlay (saut de page) — même contour que image, sans poignées */
.pb-overlay {
    border-radius: 8px;
}

/* ── YouTube embed ───────────────────────────────────────── */
.ProseMirror div[data-youtube-video] {
    cursor: pointer;
    display: block; max-width: 100%;
    margin: 12px 0;
    line-height: 0; font-size: 0;
}
/* Même raison que pour .editor-img floatté : margin-top:0 pour aligner
   le curseur ProseMirror avec la première ligne de texte adjacente. */
.ProseMirror div[data-youtube-video][style*="float:left"],
.ProseMirror div[data-youtube-video][style*="float: left"],
.ProseMirror div[data-youtube-video][style*="float:right"],
.ProseMirror div[data-youtube-video][style*="float: right"] {
    margin-top: 0.38rem !important;
    margin-bottom: 12px !important;
}
.ProseMirror div[data-youtube-video] {
    overflow: hidden; /* évite tout débordement de l'iframe */
}
/* L'iframe hérite toujours la totalité du div, peu importe son style inline.
   !important est nécessaire car TipTap injecte style="width:N%;height:Ypx;" sur
   l'iframe via mergeAttributes — un % relatif au div créerait une taille récursive. */
.ProseMirror div[data-youtube-video] iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 8px;
    pointer-events: none;
}
.ProseMirror div[data-youtube-video].ProseMirror-selectednode {
    outline: none !important; box-shadow: none !important;
}

/* ── Saut de page : mode continu — bande colorée arrondie ─────────────── */
.editor-view--continuous .ProseMirror div[data-page-break] {
    display: block;
    clear: both; /* toujours en dessous des images/vidéos flottées */
    height: 32px;
    margin: 8px 0;
    background: #dddddd;
    border-radius: 8px;
    border: none;
    box-shadow: none;
    position: relative;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
body.theme-dark-mono.editor-view--continuous .ProseMirror div[data-page-break],
body.theme-dark-color.editor-view--continuous .ProseMirror div[data-page-break] {
    background: #222222;
}
.editor-view--continuous .ProseMirror div[data-page-break]::before {
    content: '— saut de page —';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: .68rem; font-style: italic;
    color: rgba(0,0,0,0.35);
    white-space: nowrap; pointer-events: none;
}
body.theme-dark-mono.editor-view--continuous .ProseMirror div[data-page-break]::before,
body.theme-dark-color.editor-view--continuous .ProseMirror div[data-page-break]::before {
    color: rgba(255,255,255,0.35);
}
.editor-view--continuous .ProseMirror div[data-page-break].ProseMirror-selectednode {
    outline: none !important;
}

@media print {
    div[data-page-break] { page-break-after: always; clear: both; height: 0 !important; border: none; margin: 0; box-shadow: none; }
    div[data-page-break]::before { display: none !important; }
}

/* ── Emoji picker ────────────────────────────────────────── */
.toolbar-emoji-wrap { position: relative; display: inline-flex; align-items: center; }

/* ── Table toolbar ───────────────────────────────────────── */
.toolbar-table-wrap { position: relative; display: inline-flex; align-items: center; }

/* Picker grille NxM */
.table-picker {
    position: fixed;
    z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    padding: 8px;
    min-width: 176px;
}
.table-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 3px;
    margin-bottom: 6px;
}
.table-picker__cell {
    width: 18px; height: 18px;
    border: 1.5px solid var(--c3);
    border-radius: 3px;
    background: var(--c2);
    cursor: pointer;
    transition: background 0.08s, border-color 0.08s;
}
.table-picker__cell.active {
    background: rgba(108,99,255,0.18);
    border-color: var(--c-accent, #6c63ff);
}
.table-picker__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c4);
    text-align: center;
    margin: 0;
}

/* Menu contextuel tableau (quand curseur dans un tableau) */
.table-ctx-menu {
    position: fixed;
    z-index: 600;
    background: var(--c2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    padding: 4px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.table-ctx-menu[hidden],
.table-picker[hidden] { display: none !important; }
.table-ctx-item {
    background: none; border: none; cursor: pointer;
    text-align: left; width: 100%;
    padding: 7px 12px;
    border-radius: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem; font-weight: 500;
    color: var(--c5);
    transition: background 0.1s;
}
.table-ctx-item:hover { background: var(--c3); }
.table-ctx-item--danger { color: #ef4444; }
.table-ctx-item--danger:hover { background: rgba(239,68,68,0.1); }
.table-ctx-sep { height: 1px; background: var(--c3); margin: 3px 0; }

/* ── Table rendering in editor ───────────────────────────── */
.ProseMirror table {
    border-collapse: collapse;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 1.2em 0;
    table-layout: fixed;
    clip-path: inset(0 round 10px);
}
.ProseMirror table td,
.ProseMirror table th {
    border: 1.5px solid var(--c2);
    padding: 8px 12px;
    min-width: 1em;
    width: auto !important;
    position: relative;
    box-sizing: border-box;
    background: transparent;
}
/* En-tête (première ligne) */
.ProseMirror table th {
    background: var(--c2);
    font-weight: 700;
    font-size: 0.88em;
    text-align: left;
}
/* tbl-focused : classe marqueur uniquement, le rendu est fait par #tbl-overlay en JS */
.ProseMirror .tableWrapper.tbl-focused { outline: none; /* visuel géré via overlay JS */ }
/* Sélection multi-cellules : remplir toute la cellule avec la couleur de l'utilisateur */
.ProseMirror table .selectedCell::after { display: none !important; }
.ProseMirror table .selectedCell {
    background: rgba(var(--sel-color, 224,61,122), 0.18) !important;
}
/* Quand le curseur revient sur la cellule ancre (CellSelection mono-cellule en cours de drag),
   masquer le fond pour donner l'apparence d'une sélection texte normale */
body.tbl-single-cell-drag .ProseMirror table .selectedCell {
    background: transparent !important;
}
/* Cacher les poignées de redimensionnement et désactiver les événements */
.ProseMirror table .column-resize-handle { 
    display: none !important;
    pointer-events: none !important;
}
/* overflow:hidden sur le wrapper pour contraindre la largeur */
.ProseMirror .tableWrapper {
    overflow-x: auto;
    position: relative;
    max-width: 100%;
}
.emoji-dropdown {
    display: none; position: fixed;
    z-index: 600; background: var(--c2);
    border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.16);
    padding: 8px; flex-direction: column; gap: 4px;
    width: 196px;
    max-height: 320px; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: var(--ink-a12) transparent;
}
.emoji-dropdown::-webkit-scrollbar { width: 5px; }
.emoji-dropdown::-webkit-scrollbar-track { background: transparent; }
.emoji-dropdown::-webkit-scrollbar-thumb { background: var(--ink-a12); border-radius: 99px; }
.emoji-dropdown.open { display: flex; }
.emoji-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink-a60);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 2px 2px;
    -webkit-user-select: none; user-select: none;
}
.emoji-section-label:not(:first-child) { margin-top: 4px; }
.emoji-section {
    display: grid;
    grid-template-columns: repeat(5, 32px);
    gap: 3px;
}
.emoji-btn {
    background: none; border: none; cursor: pointer; font-size: 1.1rem;
    width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; border-radius: 6px; padding: 0; flex-shrink: 0;
}
.emoji-btn:hover { background: var(--c3); }

/* ── Placeholder (TipTap) — uniquement quand le document entier est vide ── */
.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder); float: left;
    color: var(--c4); opacity: .5; pointer-events: none; height: 0;
}

/* ── Plein écran ─────────────────────────────────────────── */
body.editor-fullscreen { overflow: hidden; }
#editor-shell.fullscreen {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--c1); overflow-y: auto; padding-bottom: 40px;
}
#editor-shell.fullscreen .editor-wrapper { max-width: 860px; margin: 0 auto; }

/* ── Conteneur barres inférieures ─────────────────────── */
.bottom-bars {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    left: 12px;
    right: 12px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide bottom-bars on non-editor pages */
body:not(.editor-page) .bottom-bars {
    display: none;
}
.bottom-bars > * { pointer-events: auto; }
body.editor-page.doc-under-zoom .bottom-bars > * {
    box-shadow: 0 -4px 12px rgba(0,0,0,0.20), 0 -1px 3px rgba(0,0,0,0.12);
}

/* ── Barre d'état (mots / caractères) ───────────────────── */
.editor-statusbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--c2);
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-a60);
    font-family: 'Montserrat', sans-serif;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .bottom-bars { left: 8px; right: 8px; gap: 6px; }
    .editor-statusbar { padding: 6px 8px; font-size: 0.72rem; }
}

/* ===== ADMIN DASHBOARD ===== */
.dashboard-header {
    background: var(--c2);
    padding: 24px;
    margin: 12px 0 0 12px;
    border-radius: 16px;
}

.dashboard-header__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0 0 4px 0;
}

.dashboard-header__subtitle {
    font-size: 0.95rem;
    color: var(--c4);
    margin: 0;
}

.dashboard-section {
    background: var(--c2);
    padding: 24px;
    margin: 12px 0 0 12px;
    border-radius: 16px;
}

.dashboard-section__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c5);
    margin: 0 0 20px 0;
}

.dashboard-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.dashboard-form__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c5);
}

.dashboard-form__input,
.dashboard-form__select {
    padding: 12px 16px;
    border: 1.5px solid var(--c3);
    border-radius: 10px;
    background: var(--c1);
    color: var(--c5);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.dashboard-form__input:focus,
.dashboard-form__select:focus {
    outline: none;
    border-color: var(--c5);
}

.dashboard-form__user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--c3);
    border-radius: 8px;
    font-size: 0.85rem;
}

.dashboard-form__user-name {
    font-weight: 600;
    color: var(--c5);
}

.dashboard-form__user-id {
    color: var(--c4);
}

.dashboard-form__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c1);
    border: 1.5px solid var(--c3);
    border-radius: 10px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-form__suggestion {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--c3);
    transition: background 0.2s ease;
}

.dashboard-form__suggestion:last-child {
    border-bottom: none;
}

.dashboard-form__suggestion:hover {
    background: var(--c3);
}

.dashboard-form__suggestion strong {
    display: block;
    color: var(--c5);
    font-size: 0.9rem;
}

.dashboard-form__suggestion span {
    color: var(--c4);
    font-size: 0.85rem;
}

.dashboard-form__hint {
    font-size: 0.8rem;
    color: var(--c4);
    margin: 0;
}

.dashboard-form__error {
    font-size: 0.85rem;
    color: #e53e3e;
    margin: 0;
}

.dashboard-form__success {
    font-size: 0.9rem;
    color: #10b981;
    margin: 0;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
}

.dashboard-form__btn {
    padding: 12px 24px;
    background: var(--c5);
    color: var(--c2);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dashboard-form__btn:hover {
    background: var(--c6);
}

.dashboard-form__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-list__loading,
.dashboard-list__empty,
.dashboard-list__error {
    text-align: center;
    padding: 20px;
    color: var(--c4);
    font-size: 0.9rem;
}

.dashboard-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--c1);
    border-radius: 12px;
    gap: 16px;
}

.dashboard-list__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-list__name {
    font-weight: 600;
    color: var(--c5);
}

.dashboard-list__email {
    font-size: 0.85rem;
    color: var(--c4);
}

.dashboard-list__details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-list__plan {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-list__plan--starter {
    background: #e0f2fe;
    color: #0369a1;
}

.dashboard-list__plan--pro {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-list__plan--ultra {
    background: #fce7f3;
    color: #9d174d;
}

.dashboard-list__period {
    font-size: 0.85rem;
    color: var(--c4);
}

.dashboard-list__status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-list__status--active {
    background: #dcfce7;
    color: #166534;
}

.dashboard-list__status--cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-list__status--expired {
    background: #f3f4f6;
    color: #6b7280;
}

.dashboard-list__date {
    font-size: 0.8rem;
    color: var(--c4);
}

@media (max-width: 768px) {
    .dashboard-list__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-list__details {
        width: 100%;
        justify-content: flex-start;
    }
}
.statusbar-sep { opacity: .4; font-weight: 400; }

/* Masquer les barres fixes en plein écran natif */
:fullscreen         .editor-bars,
:-webkit-full-screen .editor-bars,
:fullscreen         .bottom-bars,
:-webkit-full-screen .bottom-bars { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
:fullscreen:hover         .editor-bars,
:-webkit-full-screen:hover .editor-bars,
:fullscreen:hover         .bottom-bars,
:-webkit-full-screen:hover .bottom-bars { opacity: 1; pointer-events: auto; }

/* ── RTL / LTR text direction ────────────────────────────── */
.ProseMirror [dir="rtl"] { direction: rtl; text-align: right; }
.ProseMirror [dir="ltr"] { direction: ltr; }

/* ── Direction select toolbar ────────────────────────────── */
.toolbar-select--dir { width: 72px; }