/*
 * Mobilier d'ÉDITION de l'éditeur Scormia (design « CODE V1 ») — chargé par
 * editor_controller.js UNIQUEMENT (jamais par le player : l'apprenant ne voit
 * rien de tout ça). Shell : sommaire arbre (.sc-toc-*), canevas fil d'Ariane +
 * carte (.sc-ed-*), wrappers de blocs (.blk-*). Les valeurs viennent du POC
 * CODE V1 ; les tokens neutres de tokens.css quand ils existent.
 */
@import '../../scormia/tokens.css';
/* Parité polices éditeur/player : Poppins + Fraunces embarquées. */
@import '../../scormia/fonts.css';

/* ===== Animations (POC) ===== */
@keyframes popIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes blkIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Scrollbar fine (sommaire + canevas — classe posée par le contrôleur) ===== */
.sc-ed-scroll { scrollbar-width: thin; scrollbar-color: #d5dbe6 transparent; }
.sc-ed-scroll::-webkit-scrollbar { width: 8px; }
.sc-ed-scroll::-webkit-scrollbar-thumb { background: #d5dbe6; border-radius: 99px; }

/* ===== Popover « Réglages » : champ nombre (sans flèches) + slider aux couleurs du module ===== */
.sc-num { -moz-appearance: textfield; appearance: textfield; }
.sc-num::-webkit-inner-spin-button,
.sc-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.sc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: transparent; cursor: pointer; }
.sc-range:focus { outline: none; }
/* WebKit : piste + remplissage via --sc-range-fill (0–100 %, mis à jour en JS). */
.sc-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 99px;
    background: linear-gradient(to right, var(--acc) 0 var(--sc-range-fill, 50%), var(--line-2) var(--sc-range-fill, 50%) 100%);
}
.sc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -5px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--acc); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
    transition: transform .12s;
}
.sc-range::-webkit-slider-thumb:active { transform: scale(1.12); }
.sc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); }
/* Firefox : remplissage natif via ::-moz-range-progress. */
.sc-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line-2); }
.sc-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--acc); }
.sc-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--acc); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* ===== Sommaire : lignes de l'arbre ===== */
.sc-toc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 6px;
    margin-bottom: 1px;
    border-radius: 9px;
    cursor: pointer;
}
.sc-toc-row:hover { background: #f4f6fb; }
.sc-toc-row:active { cursor: grab; } /* maintien = intention de glisser */
.sc-toc-row--selected { background: var(--acc-soft); }
.sc-toc-row--dragging { opacity: .5; }
/* Indicateur d'insertion du drag-and-drop : ligne 2px accent. */
.sc-toc-row--drop-before { box-shadow: 0 -2px 0 0 var(--acc); }
.sc-toc-row--drop-after { box-shadow: 0 2px 0 0 var(--acc); }

/* Chevron d'expansion (slot fixe de 16px pour l'alignement des lignes). */
.sc-toc-chevron {
    flex: 0 0 auto;
    width: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mut-2);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease;
}
.sc-toc-chevron:disabled { cursor: inherit; }
.sc-toc-chevron--open { transform: rotate(90deg); }

/* Puces : carré arrondi (niveau 1), point rond 5px (niveaux 2-3). */
.sc-toc-bullet {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--acc-line);
}
.sc-toc-bullet--dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acc-mid);
}

/* Titre du nœud (renommable en place quand la ligne est déjà sélectionnée). */
.sc-toc-title {
    flex: 1;
    min-width: 0;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}
.sc-toc-title--sub { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.sc-toc-row--selected .sc-toc-title { color: var(--acc-deep); font-weight: 600; }
.sc-toc-title--editing {
    background: #fff;
    box-shadow: 0 0 0 2px var(--acc);
    cursor: text;
    text-overflow: clip;
}

/* Menu « ⋯ » révélé au survol de la ligne (et maintenu menu ouvert). */
.sc-toc-kebab {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mut-2);
    font-size: 17px;
    line-height: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s ease;
}
.sc-toc-row:hover .sc-toc-kebab,
.sc-toc-row--menu .sc-toc-kebab { opacity: 1; }
.sc-toc-kebab:hover { background: #e9edf5; color: var(--acc); }

/* Popover du menu de nœud. */
.sc-toc-menu {
    position: absolute;
    right: 6px;
    top: 36px;
    z-index: 30;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 34px -12px rgba(27, 36, 64, .5);
    animation: popIn .16s ease;
    cursor: default;
}
.sc-toc-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
}
.sc-toc-menu__item:hover { background: #f4f6fb; }
.sc-toc-menu__item--danger { color: var(--danger); }
.sc-toc-menu__item--danger:hover { background: #fdeef1; }

/* ===== Canevas : fil d'Ariane + carte ===== */
.sc-ed-page { max-width: 980px; margin: 0 auto; }
.sc-ed-crumb {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mut);
}
.sc-ed-card {
    background: #fff;
    border-radius: 22px;
    padding: 52px 64px 60px;
    box-shadow: 0 12px 34px -22px rgba(27, 36, 64, .22);
    min-height: 400px;
}
.sc-ed-card--narrow { padding: 32px 22px 40px; }

/* La page éditeur charge le reset Tailwind (preflight) ; le player autonome
   rend SANS reset, sur les styles UA du navigateur. Ces règles `revert`, à
   spécificité nulle (:where), annulent le reset pour retomber sur la valeur
   UA — toute règle de scormia.css (spécificité >= 0,1,0) garde naturellement
   la main. Résultat : la carte reproduit la cascade « UA + scormia.css » du
   player (mêmes règles que l'ancien .sc-player--embedded). */
.sc-ed-card :where(*),
.sc-ed-card :where(*)::before,
.sc-ed-card :where(*)::after { box-sizing: revert; }
.sc-ed-card :where(h1, h2, h3, h4, h5, h6) { margin: revert; font-size: revert; font-weight: revert; }
.sc-ed-card :where(p, blockquote, figure, hr, pre, dl, dd) { margin: revert; }
.sc-ed-card :where(ul, ol) { margin: revert; padding: revert; list-style: revert; }
/* :not(.sc-button__btn) : le CTA du bloc bouton garde ses couleurs POC
   (scormia.css : plein/pilule = blanc sur accent, contour = accent) — sans
   l'exclusion, ce revert (même spécificité 0-1-0, chargé APRÈS scormia.css)
   repeignait le <a> du bouton en bleu navigateur souligné. */
.sc-ed-card :where(a:not(.sc-button__btn)) { color: revert; text-decoration: revert; }
/* Le preflight met les boutons en cursor:default ; les blocs interactifs
   (quiz, accordéon, flashcards…) restent cliquables comme chez l'apprenant. */
.sc-ed-card :where(button:enabled) { cursor: pointer; }

/* ===== Wrapper d'édition d'un bloc =====
   Le padding est compensé par des marges négatives : le halo déborde autour
   du bloc SANS décaler le contenu — le rythme vertical de .sc-stack (gap 26px
   entre contenus) reste celui du player. */
.blk-row {
    position: relative;
    border-radius: 12px;
    padding: 6px 10px;
    margin: -6px -10px;
    transition: box-shadow .15s ease, background .15s ease;
    cursor: default;
}
.blk-row:not(.blk-row--selected):hover { background: #f7f9fc; }
.blk-row--selected {
    box-shadow: 0 0 0 2px var(--acc);
    background: #fbfcff;
}
/* Toolbar flottante du bloc sélectionné. Responsive : jamais plus large que le
   bloc (max-width) — quand la place manque, elle passe sur plusieurs lignes et
   s'étend vers le HAUT (ancrage bottom) au lieu de déborder du canvas. */
.blk-toolbar {
    position: absolute;
    bottom: 100%;
    left: 8px;
    max-width: calc(100% - 16px);
    z-index: 6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 7px;
    background: #fff;
    border: 1px solid #eaeef4;
    border-radius: 10px;
    box-shadow: 0 12px 30px -12px rgba(27, 36, 64, .35);
    animation: popIn .16s ease;
}
.blk-toolbar__type {
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mut);
    white-space: nowrap;
    /* Libellé long sur bloc étroit : tronqué avec … plutôt que de déborder. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blk-toolbar__sep { width: 1px; height: 18px; background: #eef1f6; }
.blk-tb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
}
.blk-tb-btn:hover:not(:disabled) { background: #f1f3f8; }
.blk-tb-btn:disabled { opacity: .3; cursor: default; }
.blk-tb-btn--danger { color: var(--danger); }

/* Pastille couleur du texte (bouton) : swatch cliquable enveloppant l'<input type=color>. */
.blk-tb-color {
    position: relative;
    width: 26px;
    height: 26px;
    margin: 0; /* neutralise le margin-bottom global des <label> (layer components) */
    border-radius: 7px;
    border: 2px solid #e6ebf5;
    background: var(--sw, #fff);
    cursor: pointer;
    overflow: hidden;
    flex: 0 0 auto;
}
.blk-tb-color input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}
.blk-tb-btn--danger:hover:not(:disabled) { background: #fdeef1; }
/* Sélecteur compact dans la toolbar (ex. colonnes par ligne du bloc stats). */
.blk-tb-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    margin: 0; /* neutralise le margin-bottom global des <label> (layer components) */
    padding: 0 4px 0 7px;
    border-radius: 8px;
    border: 1.5px solid #e6ebf5;
    background: #fff;
    color: var(--ink-3);
    cursor: pointer;
    flex: 0 0 auto;
}
.blk-tb-select svg { flex: 0 0 auto; }
.blk-tb-select select { border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: inherit; cursor: pointer; outline: none; padding: 0; }
/* État actif d'un bouton icône (alignement courant, lien posé — elements/button.js). */
.blk-tb-btn--active,
.blk-tb-btn--active:hover:not(:disabled) { background: var(--acc-soft); color: var(--acc); }

/* Chips de variantes dans la toolbar : 26×26 radius 8, alignés aux boutons. */
.blk-tb-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #f1f3f8;
    color: var(--mut);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.blk-tb-chip:hover:not(.blk-tb-chip--active) { background: var(--acc-soft); }
.blk-tb-chip--active {
    background: var(--acc);
    color: #fff;
}

/* Contrôle spécial de la toolbar (element.toolbarExtra — ex. spacer : « px »). */
.blk-tb-extra { display: inline-flex; align-items: center; gap: 5px; padding: 0 4px; }
.blk-tb-input {
    width: 52px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: #fff;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    box-shadow: none; /* Empêche fuite app.css du focus ring global */
}
.blk-tb-input:focus { border-color: var(--acc); box-shadow: none; }
.blk-tb-extra__unit { font-size: 11.5px; color: var(--mut-2); }

/* Bouton MÉDIA UNIQUE de la toolbar (toolbarExtra des médias) — pilule POC.
   État AJOUT (« + Média ») : fond --acc-soft, libellé 12.5/600 accent. État
   RETRAIT (« Supprimer le média », modificateur --remove) : pilule danger
   discrète (fond rose, libellé rouge) — consolide l'ancien « ✕ Retirer le
   média » (retour Andrew #7). */
.blk-tb-media {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: none;
    border-radius: 8px;
    background: var(--acc-soft);
    color: var(--acc);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.blk-tb-media:hover { background: #e0e9ff; }
.blk-tb-media--remove { background: #fbe9ee; color: #c05063; }
.blk-tb-media--remove:hover { background: #f7dbe2; color: #b0364c; }

/* « + Ajouter un bloc » en fin de pile : pilule pointillée pleine largeur. */
.sc-ed-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 28px;
    padding: 12px;
    border: 1.5px dashed var(--acc-border);
    border-radius: 99px;
    background: #fff;
    color: var(--acc);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.sc-ed-add:hover { background: var(--acc-soft); border-color: var(--acc); }

/* ===== Édition en place (contenteditable des blocs) ===== */
.sc-ed-card [contenteditable="true"] {
    outline: none;
    cursor: text;
    border-radius: 6px;
}
.sc-ed-card [contenteditable="true"]:hover { background: rgba(99, 131, 235, .10); }
.sc-ed-card [contenteditable="true"]:focus {
    background: rgba(99, 131, 235, .15);
    box-shadow: 0 0 0 2px rgba(99, 131, 235, .5);
}
/* Placeholder POC (champs data-ph des futurs blocs du picker phase 2)… */
.sc-ed-card [data-ph]:empty::before,
[data-scormia--editor-target="outline"] [data-ph]:empty::before {
    content: attr(data-ph);
    color: var(--ph);
    font-weight: 400;
    font-style: normal;
    pointer-events: none;
}
/* …et placeholder des éléments existants (blocks/inline_edit.js : trackEmpty).
   La classe est posée/retirée selon textContent (trim) ; la variante compacte
   (légendes, étiquettes, items) tient sur une ligne cliquable. */
.sc-edit-empty { min-height: 3rem; cursor: text; }
.sc-edit-empty::before {
    content: attr(data-placeholder);
    color: var(--ph);
    pointer-events: none;
}
.sc-edit-empty.sc-edit-empty--compact { min-height: 1.6em; }

/* Item de liste en édition (elements/list.js : textZone) : la zone éditable
   est un <span> rendu bloc — elle commence APRÈS la pastille/le badge (dessinés
   en ::before/::after sur le <li>) et couvre toute la ligne cliquable ; le
   placeholder (.sc-edit-empty::before) vit sur ce span, plus de collision avec
   le ::before du design de la liste. */
.sc-ed-card .sc-ed-li-text { display: block; }

/* Accordéon en édition (elements/accordion.js) : le titre est flex:1 dans le
   rendu partagé (le chevron va à droite) → en édition, le fond de sélection
   remplissait TOUT l'en-tête (retour Andrew). On fait coller le fond au texte
   (le titre ne prend plus que sa largeur, margin-right:auto repousse ✕/chevron
   à droite), on allège l'en-tête et on borne la zone de contenu vide. */
.sc-ed-card .sc-accordion__header { padding: 12px 16px; }
.sc-ed-card .sc-accordion__title {
    flex: 0 1 auto;
    margin-right: auto;
    padding: 3px 8px;
    border-radius: 7px;
}
.sc-ed-card .sc-accordion__inner { border-radius: 8px; }
.sc-ed-card .sc-accordion__inner.sc-edit-empty { min-height: 2.2em; }

/* Auteur de citation (elements/quote.js) : un span inline VIDE n'a pas de
   boîte stable (caret et anneau de focus fantômes, placeholder décroché de la
   ligne) — inline-block garantit caret + placeholder au même endroit, sur une
   seule ligne ; vide, une largeur mini rend le champ cliquable. */
.sc-ed-card .sc-quote__name { display: inline-block; max-width: 100%; }
.sc-ed-card .sc-quote__name.sc-edit-empty { min-width: 150px; }
/* Carte pull-quote : pastille d'initiales fantôme masquée tant que l'auteur est
   vide. Fond clair --acc-soft → le placeholder --ph par défaut reste lisible. */
.sc-ed-card .sc-quote__initials:empty { display: none; }

/* Contrôles des flashcards en mode ÉDITION (coin haut droit de la carte,
   valeurs POC) : ↺ retourne (le clic simple édite les faces), ✕ supprime —
   posés par inlineEdit (flashcards.js), jamais dans le player. */
.sc-ed-cardctrl {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 3;
}
.sc-ed-flip {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: var(--acc);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 4px rgba(27, 36, 64, .2);
}
.sc-ed-flip:hover { background: #fff; }

/* Espacement en mode ÉDITION : liseré pointillé discret + étiquette centrée
   « Espacement · NN px » (::after ← data-label posé par le rendu). Le player,
   sans .sc-ed-card, ne voit qu'un div vide de la bonne hauteur. */
.sc-ed-card .sc-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #e0e5ee;
    border-radius: 10px;
}
.sc-ed-card .sc-spacer::after {
    content: attr(data-label);
    color: #c3ccdb;
    font-size: 12px;
    letter-spacing: .5px;
}

/* Bouton « Ajouter une image/vidéo/… » du placeholder des médias : masqué par
   scormia.css (player = carte inerte), révélé ici SEULEMENT sous .sc-ed-card.
   Style POC (état vide du hotspot) : blanc bordé accent, radius 10, 13/600. */
.sc-ed-card .sc-media-ph__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1.5px solid var(--acc-border);
    border-radius: 10px;
    background: #fff;
    color: var(--acc);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sc-ed-card .sc-media-ph__btn:hover { background: var(--acc-soft); }
/* Garde : la galerie du panneau Thème porte aussi .sc-ed-card (inert) — si un
   média y entrait un jour, son bouton ne doit jamais apparaître. */
.sc-th-demo .sc-media-ph__btn { display: none; }

/* Le champ « Alt » séparé a été retiré (retour Fabrice #8) : la légende
   (figcaption.sc-caption éditable ci-dessous) sert désormais aussi de texte
   alternatif de l'image — un seul champ pour les deux. */

/* Légendes des médias (image/audio — figcaption.sc-caption éditable) : le
   hover/focus GÉNÉRIQUE des contenteditable (fond plein + anneau EXTERNE 2px)
   déborde sur le média du dessus — et l'ordre de peinture CSS passe les fonds/
   anneaux des boîtes AVANT le contenu des images : le bandeau bleu passait
   SOUS la photo (capture polaroïd). Ici tout reste DANS l'emprise de la
   figcaption : fond subtil + anneau inset léger, radius cohérent. */
.sc-ed-card .sc-caption[contenteditable="true"] { border-radius: 8px; }
.sc-ed-card .sc-caption[contenteditable="true"]:hover { background: rgba(99, 131, 235, .07); }
.sc-ed-card .sc-caption[contenteditable="true"]:focus {
    background: rgba(99, 131, 235, .10);
    box-shadow: inset 0 0 0 1.5px rgba(99, 131, 235, .40);
}
/* Polaroïd : l'écart photo→légende est un PADDING-TOP de la figcaption
   (scormia.css : 14px) — sa boîte colle donc au bas de la photo et le fond
   focus peignait tout l'écart. En édition, l'écart devient une MARGE :
   géométrie inchangée au pixel, fond/anneau confinés sous la photo. */
.sc-ed-card .sc-image--v2 .sc-caption[contenteditable="true"] {
    margin-top: 14px;
    padding-top: 0;
}

/* La ligne « ✕ Retirer le média » sous le média a été retirée (retour Andrew
   #7) : le retrait est consolidé dans le bouton média UNIQUE de la toolbar
   (« Supprimer le média » quand un média est présent — voir .blk-tb-media). */

/* Mobilier des collections en mode ÉDITION (stats… — posé par inlineEdit) :
   « + Ajouter … » sous la grille, ✕ par item révélé au survol de l'item. */
.sc-ed-add-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 14px;
    border: 1.5px dashed var(--acc-border);
    border-radius: 10px;
    background: #fff;
    color: var(--acc);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.sc-ed-add-item:hover { background: var(--acc-soft); border-color: var(--acc); }
.sc-ed-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: #f4f6fb;
    color: #c05063;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}
:hover > .sc-ed-del,
.sc-ed-del:focus-visible { opacity: 1; }

/* ===== Mobilier éditeur Tableau (posé par inlineEdit de table.js) =====
   Les ajouts « ligne / colonne » vivent dans la toolbar flottante
   (toolbarExtra de table.js : boutons icône .blk-tb-btn). */
/* Le span d'en-tête occupe sa cellule : un span inline vide se réduirait à un
   point (carré bleu fantôme) ; le placeholder « Colonne » (trackEmpty,
   .sc-edit-empty::before) vit dessus. */
.sc-ed-card .sc-table .sc-th-text { display: block; min-height: 1.2em; }
/* Focus des cellules : l'anneau reste DANS la case (box-shadow inset — pas de
   débordement sur la colonne voisine), géométrie de cellule sans arrondi. */
.sc-ed-card .sc-table [contenteditable="true"] { border-radius: 0; }
.sc-ed-card .sc-table [contenteditable="true"]:focus {
    background: rgba(99, 131, 235, .15);
    box-shadow: inset 0 0 0 2px rgba(99, 131, 235, .5);
}
/* ✕ suppression de colonne : dans la cellule th (en-tête), au survol. */
.sc-ed-del-col {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: #f4f6fb;
    color: #c05063;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}
/* ✕ suppression de ligne : à droite de chaque ligne de données, au survol. */
.sc-ed-del-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: #f4f6fb;
    color: #c05063;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
    align-self: stretch;
}
/* Révélation au survol de la ligne/colonne via JS (classe .is-hovered). */
.sc-table th:hover > .sc-ed-del-col,
.sc-ed-del-col:focus-visible { opacity: 1; }
.sc-table tr:hover .sc-ed-del-row,
.sc-ed-del-row:focus-visible { opacity: 1; }
/* th de l'en-tête : position relative pour placer le bouton ✕. */
.sc-ed-card .sc-table thead th { position: relative; padding-right: 26px; }

/* ===== Mobilier éditeur Bloc de code (posé par inlineEdit de code.js) ===== */
/* Sélecteur de langage dans la barre de titre (remplace le label du player). */
.sc-ed-code-lang {
    background: #2a2d38;
    color: #cdd8f5;
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    box-shadow: none;
}
.sc-ed-code-lang:focus { box-shadow: none; }
/* Textarea transparent superposé au <pre> colorié (technique POC) : MÊMES
   métriques de fonte que .sc-code__pre (scormia.css : var(--font-code)
   13.5px / lh 1.7 / pre-wrap) — glyphes exactement alignés, seul le caret
   (blanc) est visible, la coloration reste portée par le <pre> en dessous.
   Le <pre> (flux normal) dicte la hauteur de .sc-code__body ; le textarea
   (inset sur les 4 côtés) le suit — hauteur = contenu, jamais de scroll
   interne, donc caret toujours sur la ligne coloriée correspondante.
   width/height/box-shadow ÉPINGLÉS : app.css style les textarea globalement
   (« Symfony Form Inputs », @layer components : width:100%, box-shadow au
   focus) — nos déclarations non-layered gagnent, mais SEULEMENT pour les
   propriétés posées ici. Sans width:auto, width:100% s'applique (right:18px
   ignoré) → textarea 36px plus large que le <pre> → points de wrap
   différents → lignes qui dérivent. */
.sc-ed-code-ta {
    position: absolute;
    inset: 16px 18px; /* = padding de .sc-code__body */
    width: auto;
    height: auto;
    border: none;
    outline: none;
    box-shadow: none;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: #fff;
    font-family: var(--font-code);
    font-size: 13.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* ===== Mobilier éditeur Quiz (posé par inlineEdit de quiz.js — design POC) ===== */
/* En-tête : badge « QUIZ QCM » + pilule « N questions · une par une ». */
.sc-ed-quiz__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sc-ed-quiz__badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--acc);
    background: var(--acc-soft);
    padding: 5px 11px;
    border-radius: 99px;
    letter-spacing: .4px;
}
.sc-ed-quiz__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acc);
    background: var(--acc-soft);
    padding: 5px 12px;
    border-radius: 99px;
}
/* Cartes de questions numérotées. */
.sc-ed-quiz__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sc-ed-quiz__q {
    border: 1.5px solid var(--bg-app);
    border-radius: 16px;
    padding: 18px 20px;
    background: #fafbfd;
}
.sc-ed-quiz__qhead {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}
.sc-ed-quiz__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acc);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.sc-ed-quiz__qtext {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    outline: none;
}
/* Segmenté du type de question (Choix unique / Choix multiple / Vrai-Faux). */
.sc-ed-quiz__seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-app);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
}
.sc-ed-quiz__chip {
    padding: 6px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    background: transparent;
    color: var(--mut);
}
.sc-ed-quiz__chip.is-active {
    background: #fff;
    color: var(--acc);
    box-shadow: 0 1px 4px rgba(27, 36, 64, .14);
}
/* Réponses : pastille = marquer correct, surlignage vert des correctes. */
.sc-ed-quiz__opts {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sc-ed-quiz__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line-2);
    background: #fff;
}
.sc-ed-quiz__opt.is-correct {
    border-color: var(--ok-line);
    background: var(--ok-bg);
}
.sc-ed-quiz__mark {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 2px solid #cdd5e2;
    background: #fff;
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.sc-ed-quiz__mark--multi { border-radius: 7px; }
.sc-ed-quiz__opt.is-correct .sc-ed-quiz__mark {
    border-color: var(--ok);
    background: var(--ok);
}
.sc-ed-quiz__opttext {
    flex: 1;
    font-size: 15px;
    color: #33405c;
    outline: none;
}
/* ✕ de suppression (question / réponse) — style POC delItemStyle. */
.sc-ed-quiz__del {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: none;
    background: #f4f6fb;
    color: #c05063;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
/* « + Ajouter une question » : pilule pointillée pleine largeur. */
.sc-ed-quiz__addq {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 13px;
    border: 1.5px dashed var(--acc-border);
    background: #f7f9ff;
    color: var(--acc);
    border-radius: 13px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.sc-ed-quiz__addq:hover { background: var(--acc-soft); border-color: var(--acc); }

/* ===== Mobilier éditeur des interactifs V2 : match / fill / order ===== */
/* Aide POC en tête de bloc : pastille ronde (✓ vert ou i accent) + une ligne grise. */
.sc-ed-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--mut);
    margin-bottom: 14px;
    line-height: 1.5;
}
.sc-ed-help__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
    margin-top: 1px;
}
.sc-ed-help__dot--ok { background: var(--ok-bg); color: var(--ok); }
.sc-ed-help b { color: var(--ink-2); }
/* ✕ de suppression d'une ligne (paire, étape) — style POC delItemStyle. */
.sc-ed-item-del {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: none;
    background: #f4f6fb;
    color: #c05063;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
/* — match : lignes terme ↔ définition (grille POC v0). — */
.sc-ed-match__list { display: flex; flex-direction: column; gap: 11px; }
.sc-ed-match__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 12px;
    align-items: center;
}
.sc-ed-match__term {
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid #d7deea;
    background: #f5f7fc;
    color: #33405c;
    outline: none;
}
.sc-ed-match__def {
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid var(--line-2);
    background: #fff;
    color: var(--ink-3);
    outline: none;
}
.sc-ed-match__mid { color: var(--acc); font-weight: 700; font-size: 16px; }
/* — fill : champ de saisie bordé + aperçu des trous verts. — */
.sc-ed-fill__field {
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink);
    padding: 14px 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    outline: none;
    white-space: pre-wrap;
}
.sc-ed-fill__preview { margin-top: 18px; }
.sc-ed-fill__preview-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--mut-2);
    margin-bottom: 10px;
}
.sc-ed-fill__preview-text { font-size: 18px; line-height: 2.2; color: var(--ink); white-space: pre-wrap; }
.sc-ed-fill__hole {
    display: inline-block;
    margin: 0 3px;
    padding: 2px 12px;
    border-radius: 8px;
    background: var(--ok-bg);
    border: 1.5px solid var(--ok-line);
    color: var(--ok);
    font-weight: 700;
}
/* — order : lignes numérotées + ↑↓ (POC v0). — */
.sc-ed-order__list { display: flex; flex-direction: column; gap: 11px; }
.sc-ed-order__row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 13px;
    border: 1.5px solid #e9edf3;
}
.sc-ed-order__num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--acc-soft);
    color: var(--acc);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
/* Le texte garde le curseur texte : le glisser est désactivé pendant l'édition. */
.sc-ed-order__text { flex: 1; font-size: 15px; color: var(--ink); outline: none; cursor: text; }
.sc-ed-order__ctrl { display: flex; gap: 2px; flex: 0 0 auto; }
.sc-ed-order__move {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: #7c8698;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    transition: background .15s ease;
}
.sc-ed-order__move:hover { background: var(--bg-app); }

/* ===== Mobilier éditeur des interactifs V4 : hotspot / dragdrop ===== */
/* — hotspot : points déplaçables au pointer (inlineEdit de hotspot.js). — */
.sc-ed-card .sc-hotspot__spot { cursor: grab; touch-action: none; }
.sc-ed-card .sc-hotspot__spot:active { cursor: grabbing; }
/* Liste d'édition ajoutée pour les variantes sans liste partagée (0 et 2) :
   mêmes cartes que la variante « Points + liste », sur une seule colonne. */
.sc-hotspot__list--ed { grid-template-columns: 1fr; }
/* — dragdrop : étiquettes dans leur bonne catégorie (paintEditor POC). — */
.sc-ed-drag__zones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-ed-drag--compact .sc-ed-drag__zones { grid-template-columns: 1fr; }
.sc-ed-drag__zone { display: flex; flex-direction: column; }
.sc-ed-drag--cols .sc-ed-drag__zone {
    border: 2px dashed #d7deea;
    border-radius: 16px;
    padding: 16px 18px;
    min-height: 120px;
}
.sc-ed-drag--cards .sc-ed-drag__zone {
    border: 1.5px solid var(--line);
    background: #fafbfd;
    border-radius: 16px;
    padding: 16px 18px;
}
.sc-ed-drag--compact .sc-ed-drag__zone {
    border: 1.5px solid var(--bg-app);
    border-radius: 14px;
    padding: 15px 17px;
}
.sc-ed-drag__zonehead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sc-ed-drag__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc);
    text-transform: uppercase;
    letter-spacing: .5px;
    outline: none;
}
.sc-ed-drag__chips { display: flex; flex-direction: column; gap: 8px; }
.sc-ed-drag__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--acc-soft);
    border-radius: 10px;
    padding: 9px 12px;
}
.sc-ed-drag__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #fff;
    color: var(--acc);
}
.sc-ed-drag__label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--acc); outline: none; }
.sc-ed-drag__chipdel {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #8ea0d6;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
.sc-ed-drag__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1.5px dashed var(--acc-border);
    border-radius: 10px;
    background: transparent;
    color: var(--acc);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.sc-ed-drag__add:hover { background: var(--acc-soft); }

/* ===== Panneau Thème (overlay 2 volets — lib/theme_panel.js) ===== */
@keyframes thFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes thIn {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: scale(1); }
}
.sc-th-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27, 36, 64, .45);
    animation: thFade .2s ease;
}
.sc-th-sheet {
    position: absolute;
    inset: 24px;
    /* Écran très large : la feuille reste une modale centrée de largeur bornée —
       sans quoi l'aperçu (centré dans le volet droit) semble « décalé », perdu
       loin des préréglages avec un grand vide entre les deux. */
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(27, 36, 64, .5);
    overflow: hidden;
    animation: thIn .2s ease;
}
/* Écran étroit : volets empilés (préréglages en haut, aperçu dessous). */
@media (max-width: 768px) {
    .sc-th-sheet { flex-direction: column; }
    .sc-th-left {
        flex: 0 0 auto;
        width: 100%;
        max-height: 45%;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
}
.sc-th-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: #fff;
    color: var(--mut-2);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(27, 36, 64, .14);
}
.sc-th-close:hover { background: #f4f6fb; color: var(--ink); }

/* Volet gauche : presets + couleurs personnalisées. */
.sc-th-left {
    flex: 0 0 300px;
    width: 300px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 18px;
}
.sc-th-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.sc-th-sub { margin-top: 2px; font-size: 12px; color: var(--mut); }
.sc-th-label {
    margin: 18px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mut);
}
.sc-th-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
}
.sc-th-item:hover { background: #f4f6fb; }
.sc-th-item.is-active { background: var(--acc-soft); color: var(--acc-deep); }
.sc-th-swatch {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(27, 36, 64, .12);
}
/* Anneau 2px accent sur la pastille active (liseré blanc : lisible même quand
   la pastille EST la couleur d'accent). */
.sc-th-item.is-active .sc-th-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acc); }
.sc-th-del {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mut-2);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}
.sc-th-item:hover .sc-th-del,
.sc-th-del:focus-visible { opacity: 1; }
.sc-th-del:hover { background: #fdeef1; color: var(--danger); }
.sc-th-hint { padding: 2px 10px 4px; font-size: 12px; color: var(--mut-2); }
.sc-th-pickrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 2px; }
.sc-th-picker {
    flex: 0 0 auto;
    width: 44px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}
.sc-th-save {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.sc-th-save:hover:not(:disabled) { background: var(--acc-soft); border-color: var(--acc-border); color: var(--acc-deep); }
.sc-th-save:disabled { opacity: .45; cursor: default; }
.sc-th-err { min-height: 16px; margin-top: 8px; font-size: 12px; color: var(--danger); }

/* Volet droit : galerie live sur fond teinté par l'accent. */
.sc-th-right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--acc-bg);
    padding: 28px 34px;
}
/* La carte de démonstration garde la cascade de .sc-ed-card (parité player) —
   seuls radius / padding / ombre / hauteur sont resserrés pour la galerie. */
.sc-th-demo {
    max-width: 820px;
    margin: 0 auto;
    border-radius: 16px;
    padding: 26px 30px;
    box-shadow: 0 12px 30px -22px rgba(27, 36, 64, .25);
    min-height: 0;
}

/* Sous 760px : volets empilés (presets en haut, galerie en dessous). */
@media (max-width: 760px) {
    .sc-th-sheet { flex-direction: column; }
    .sc-th-left {
        flex: 0 0 auto;
        width: auto;
        max-height: 44%;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .sc-th-right { padding: 20px 16px; }
    .sc-th-demo { padding: 20px 18px; }
}

/* ===== Picker « Ajouter un bloc » (overlay centré — lib/picker.js) ===== */
/* Voile : même teinte que le panneau thème (thFade) ; carte : fade + scale (popIn). */
.sc-pk-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 56px 24px 24px;
    background: rgba(27, 36, 64, .45);
    animation: thFade .2s ease;
}
.sc-pk-card {
    display: flex;
    flex-direction: column;
    width: 720px;
    max-width: 100%;
    max-height: 82vh;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 40px 90px -30px rgba(27, 36, 64, .5);
    animation: popIn .2s ease;
}

/* En-tête fixe : titre + ✕, recherche, chips — seul le corps défile. */
.sc-pk-head { flex: 0 0 auto; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.sc-pk-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sc-pk-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.sc-pk-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--mut-2);
    cursor: pointer;
}
.sc-pk-close:hover { background: #f4f6fb; color: var(--ink); }
.sc-pk-search { position: relative; margin-bottom: 12px; }
.sc-pk-search > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ph);
    pointer-events: none;
}
.sc-pk-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #f5f7fb;
    border: 1.5px solid transparent;
    border-radius: 13px;
    outline: none;
}
.sc-pk-input:focus { border-color: var(--acc); background: #fff; }
.sc-pk-input::placeholder { color: var(--ph); }
.sc-pk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sc-pk-chip {
    padding: 7px 14px;
    border: 1.5px solid var(--line-2);
    border-radius: 99px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mut);
    cursor: pointer;
    transition: all .15s ease;
}
.sc-pk-chip:not(.is-active):hover { border-color: #c3ccdb; color: var(--acc); }
.sc-pk-chip.is-active { background: var(--acc); border-color: var(--acc); color: #fff; }

/* Corps scrollable : sections de catégorie (point coloré + label uppercase). */
.sc-pk-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 22px 20px;
}
.sc-pk-section { margin-bottom: 20px; }
.sc-pk-section:last-child { margin-bottom: 0; }
.sc-pk-cat { display: flex; align-items: center; gap: 8px; margin: 2px 2px 11px; }
.sc-pk-dot { width: 7px; height: 7px; border-radius: 50%; }
.sc-pk-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mut);
}
.sc-pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Carte : vignette d'aperçu + badge de catégorie + nom + description. */
.sc-pk-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1.5px solid #eef0f5;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: all .15s ease;
}
.sc-pk-item:hover {
    border-color: color-mix(in srgb, var(--acc) 40%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--acc) 40%, transparent);
}
.sc-pk-thumb {
    display: block;
    flex: 0 0 auto;
    height: 92px;
    overflow: hidden;
    background: #fafbfe;
    border-bottom: 1px solid #f0f2f7;
    pointer-events: none;
}
/* Mini écran réel (renderBlock + sample) réduit — pattern galerie du thème. */
.sc-pk-mini {
    display: block;
    transform: scale(.6);
    transform-origin: top left;
    width: 167%;
    min-height: 154px;
    padding: .8rem .9rem;
}
/* Cadre factice de repli des types sans sample ni miniature POC (défense). */
.sc-pk-fake {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--acc) 10%, #fff),
        color-mix(in srgb, var(--acc-deep) 16%, #fff));
}
/* Miniatures factices POC des 4 médias (picker.js : pocMediaThumb). */
.sc-pk-media { display: flex; height: 100%; padding: 10px; }
.sc-pk-media__tile { flex: 1; display: flex; align-items: center; justify-content: center; }
.sc-pk-media__tile--image { border-radius: 8px; background: linear-gradient(135deg, #e2e9fb, #eef1f6); }
.sc-pk-media__tile--video { border-radius: 8px; background: linear-gradient(135deg, #2a3352, #3a4668); }
.sc-pk-media__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
}
.sc-pk-media__tile--audio { gap: 3px; }
.sc-pk-media__tile--audio > span { width: 3px; border-radius: 2px; background: var(--acc); }
.sc-pk-media__tile--audio > span:nth-child(3), .sc-pk-media__tile--audio > span:nth-child(5) { background: var(--acc-mid); }
.sc-pk-media__tile--audio > span:nth-child(6) { background: var(--acc-line); }
.sc-pk-media__tile--embed { flex-direction: column; align-items: stretch; border: 1.5px solid #e0e5ee; border-radius: 8px; overflow: hidden; }
.sc-pk-media__dots { display: flex; gap: 4px; padding: 6px 8px; background: #f2f4f9; }
.sc-pk-media__dots span { width: 6px; height: 6px; border-radius: 50%; }
.sc-pk-media__dots span:nth-child(1) { background: #ff5f57; }
.sc-pk-media__dots span:nth-child(2) { background: #febc2e; }
.sc-pk-media__dots span:nth-child(3) { background: #28c840; }
.sc-pk-media__webbody { flex: 1; display: flex; align-items: center; justify-content: center; }

.sc-pk-meta { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
.sc-pk-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
}
.sc-pk-text { min-width: 0; }
.sc-pk-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-pk-desc {
    display: block;
    font-size: 11.5px;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-pk-empty { padding: 30px 10px; text-align: center; font-size: 15px; color: var(--mut-2); }

/* Grille resserrée : 2 colonnes sous 760px, 1 seule sous 520px. */
@media (max-width: 760px) {
    .sc-pk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .sc-pk-grid { grid-template-columns: 1fr; }
}

/* ===== Modale média (overlay ~860px à onglets — lib/media_modal.js) ===== */
/* Voile : même teinte que le picker/panneau thème ; carte : valeurs POC
   (860px, radius 22, ombre profonde, fade + scale via popIn). */
.sc-mm-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(27, 36, 64, .45);
    animation: thFade .2s ease;
}
.sc-mm-card {
    display: flex;
    flex-direction: column;
    width: 860px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 80px);
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 50px 100px -30px rgba(27, 36, 64, .6);
    animation: popIn .2s ease;
}

/* En-tête : titre 22/700 + sous-titre discret + ✕ rond (POC). */
.sc-mm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 26px 30px 0;
    flex: 0 0 auto;
}
.sc-mm-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); }
.sc-mm-sub { margin: 3px 0 0; font-size: 14px; color: var(--mut-2); }
.sc-mm-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1f3f8;
    color: var(--mut);
    cursor: pointer;
    flex: 0 0 auto;
}
.sc-mm-close:hover { background: #e6e9f0; color: var(--ink); }

/* Onglets soulignés (actif : accent) sur une ligne de séparation. */
.sc-mm-tabs {
    display: flex;
    gap: 26px;
    padding: 20px 30px 0;
    border-bottom: 1px solid #eef1f6;
    flex: 0 0 auto;
    overflow-x: auto;
}
.sc-mm-tab {
    padding: 0 2px 14px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--mut-2);
    cursor: pointer;
    white-space: nowrap;
}
.sc-mm-tab:hover:not(.is-active) { color: var(--ink-3); }
.sc-mm-tab.is-active { color: var(--acc); border-bottom-color: var(--acc); }

/* Corps scrollable (grille ou formulaire URL/Importer). */
.sc-mm-body {
    flex: 1;
    min-height: 0;
    padding: 24px 30px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Grille 3 colonnes de vignettes (POC : gap 16, cartes radius 14). */
.sc-mm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sc-mm-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1.5px solid #eef1f6;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}
.sc-mm-item:hover { border-color: var(--acc); }
.sc-mm-item.is-busy { opacity: .5; pointer-events: none; }
.sc-mm-item__visual { height: 130px; background: #f4f6fb; }
.sc-mm-item__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Tuile sans vignette (audio, vidéo) : dégradé doux + pictogramme accent. */
.sc-mm-item__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    background: linear-gradient(135deg, var(--acc-soft), #f3f5fa);
    color: var(--acc);
}
.sc-mm-item__name {
    padding: 9px 12px;
    border-top: 1px solid #f0f2f7;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-mm-empty { padding: 36px 12px; text-align: center; font-size: 14.5px; color: var(--mut-2); }

/* Formulaires URL / Importer (métriques POC : input 14/16, bouton accent sombre). */
.sc-mm-label { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sc-mm-input {
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    outline: none;
}
.sc-mm-input:focus { border-color: var(--acc); }
.sc-mm-input::placeholder { color: var(--ph); }
.sc-mm-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 11px;
    background: var(--acc-deep);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease;
}
.sc-mm-btn:hover:not(:disabled) { opacity: .9; }
.sc-mm-btn:disabled { opacity: .55; cursor: default; }
.sc-mm-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--mut-2); }
.sc-mm-file { display: none; }

/* Message d'erreur discret (pattern theme_panel), en pied de corps. */
.sc-mm-err { min-height: 18px; margin: 14px 0 0; font-size: 12.5px; color: var(--danger); }

/* Grille resserrée : 2 colonnes sous 760px, 1 seule sous 520px. */
@media (max-width: 760px) {
    .sc-mm-grid { grid-template-columns: 1fr 1fr; }
    .sc-mm-tabs { gap: 18px; }
}
@media (max-width: 520px) {
    .sc-mm-grid { grid-template-columns: 1fr; }
}

/* ===== Mini-modale « Lien du bouton » (elements/button.js — pattern média en plus petit) ===== */
.sc-mm-card--mini { width: 420px; }
.sc-mm-actions { display: flex; align-items: center; gap: 10px; }
/* Action secondaire (« Retirer le lien ») : blanc bordé, padding -1.5px = même gabarit. */
.sc-mm-btn--ghost {
    padding: 10.5px 22.5px;
    border: 1.5px solid var(--line-2);
    background: #fff;
    color: var(--ink-3);
}
.sc-mm-btn--ghost:hover:not(:disabled) { opacity: 1; border-color: var(--acc-border); background: #f7f9ff; }