/* « Sur la moto ». Le thème force un fond orange !important sur TOUT <button> :
   sélecteurs id + classe + balise d'emblée, sinon ils perdent. */
#mc-editor .mcmk-bascule { display: inline-flex; margin-left: 6px; }
#mc-editor .mcmk-bascule button.mcmk-bouton {
    background: transparent !important; color: inherit;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 0;
}
#mc-editor .mcmk-bascule button.mcmk-bouton:first-child { border-radius: 6px 0 0 6px; }
#mc-editor .mcmk-bascule button.mcmk-bouton:last-child  { border-radius: 0 6px 6px 0; border-left: 0; }
#mc-editor .mcmk-bascule button.mcmk-bouton.is-actif { background: var(--id-orange, #ff6a00) !important; color: #fff; }

#mc-editor #mcmk-panneau {
    position: absolute; inset: 0; z-index: 30; background: #111;
    display: flex; flex-direction: column; gap: 8px; padding: 12px; box-sizing: border-box;
}
#mc-editor #mcmk-panneau .mcmk-scene {
    position: relative; flex: 1; min-height: 60%; /* la photo garde la place : 16 couleurs proposées
    l'écrasaient à 166 px sur 609 (KTM SX 2026, impactracing, 2026-10-07) */
    display: flex; align-items: center; justify-content: center;
}
#mc-editor #mcmk-panneau canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
#mc-editor #mcmk-panneau .mcmk-etat {
    position: absolute; margin: 0; color: #ddd; font-size: 15px;
}
#mc-editor #mcmk-panneau .mcmk-note { margin: 0; color: #f3b; font-size: 13px; text-align: center; }
#mc-editor #mcmk-panneau .mcmk-vignettes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
#mc-editor #mcmk-panneau button.mcmk-vignette {
    background: transparent !important; color: #eee;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; padding: 6px 12px;
}
#mc-editor #mcmk-panneau button.mcmk-vignette.is-actif { background: var(--id-orange, #ff6a00) !important; color: #fff; }

/* Atelier de calage (administrateur). Fixe, DANS #mc-editor : visible en plein écran. */
#mcmk-atelier {
    position: fixed; inset: 0; z-index: 100000;
    display: grid; grid-template-columns: 280px 1fr;
    background: #16171a; color: #eee; font: 14px/1.4 system-ui, sans-serif;
}
#mcmk-atelier .mcmk-cote { padding: 14px; overflow: auto; border-right: 1px solid #333; display: flex; flex-direction: column; gap: 10px; }
#mcmk-atelier h2 { margin: 0; font-size: 16px; color: #fff; }
#mcmk-atelier .mcmk-aide { margin: 0; color: #aaa; font-size: 12px; }
#mcmk-atelier .mcmk-liste { list-style: none; margin: 0; padding: 0; }
#mcmk-atelier .mcmk-liste li { padding: 5px 8px; border-radius: 4px; cursor: pointer; }
#mcmk-atelier .mcmk-liste li.is-cale { color: #7fd97f; }
#mcmk-atelier .mcmk-liste li.is-actif { background: #333; color: #fff; }
#mcmk-atelier .mcmk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#mcmk-atelier .mcmk-act {
    display: inline-block; padding: 6px 10px; border: 1px solid #555; border-radius: 6px;
    color: #eee; text-decoration: none; cursor: pointer; user-select: none;
}
#mcmk-atelier .mcmk-act--fort { background: #ff6a00; border-color: #ff6a00; color: #fff; }
#mcmk-atelier .mcmk-etat { margin: 0; color: #ffd27f; min-height: 1.4em; }
#mcmk-atelier .mcmk-scene { display: flex; align-items: center; justify-content: center; padding: 12px; min-width: 0; min-height: 0; }
#mcmk-atelier .mcmk-scene canvas { max-width: 100%; max-height: calc(100vh - 24px); cursor: crosshair; touch-action: none; }
#mcmk-atelier .mcmk-reglages { display: flex; flex-wrap: wrap; gap: 6px; }
#mcmk-atelier .mcmk-valeurs { margin: 0; color: #9cc3ff; font-size: 12px; min-height: 1.3em; }
#mcmk-atelier .mcmk-vues { display: flex; gap: 6px; }
#mcmk-atelier .mcmk-act.is-actif { background: #ff6a00; border-color: #ff6a00; color: #fff; }

/* Page Mockups (administration) */
#mcmk-import .mcmk-import-champs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#mcmk-import .mcmk-progres { color: #2271b1; min-height: 1.4em; }
#mcmk-import .mcmk-bloc { border: 1px solid #dcdcde; border-radius: 6px; padding: 12px; margin: 12px 0; background: #fff; }
#mcmk-import .mcmk-images { display: flex; gap: 12px; flex-wrap: wrap; }
#mcmk-import .mcmk-images img, #mcmk-import .mcmk-images canvas { max-width: 100%; height: auto; border: 1px solid #eee; }
#mcmk-import .mcmk-alertes li { color: #b32d2e; }
.mcmk-pastille { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #999; vertical-align: middle; }
.mcmk-couleurs-admin summary { list-style: none; display: inline-block; }

/* Pastilles de couleur du client, sous l'image « Sur la moto » (aperçu seulement). */
#mc-editor #mcmk-panneau .mcmk-couleurs { display: flex; flex-direction: column; gap: 4px; align-items: center; color: #ddd; font-size: 13px;
    flex: 0 1 auto; min-height: 0; overflow-y: auto; } /* au-delà de la place restante : défilement */
#mc-editor #mcmk-panneau .mcmk-ligne { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
#mc-editor #mcmk-panneau .mcmk-partie { min-width: 110px; text-align: right; margin-right: 6px; }
#mc-editor #mcmk-panneau button.mcmk-pastille-client {
    width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4); background: transparent !important; color: #eee; font-size: 12px; line-height: 1;
}
#mc-editor #mcmk-panneau button.mcmk-pastille-client.is-actif { outline: 2px solid var(--id-orange, #ff6a00); outline-offset: 1px; }
#mc-editor #mcmk-panneau .mcmk-apercu-seul { margin: 2px 0 0; color: #999; font-size: 12px; }

/* Mode vitrine : étiquette « Option » sur le bouton, bulle au premier clic.
   L'étiquette est un <span> (le thème ne force rien dessus) ; le bouton de la
   bulle, lui, subit le fond orange !important du thème : id + classe + balise. */
#mc-editor .mcmk-bascule button.mcmk-bouton .mcmk-etiquette {
    display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 9px;
    font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .03em; text-transform: uppercase;
    border: 1px solid currentColor; opacity: .85; vertical-align: middle;
}
#mc-editor .mcmk-bulle {
    position: fixed; z-index: 2147483000; box-sizing: border-box; width: 328px; max-width: calc(100vw - 16px);
    padding: 12px 14px; border-radius: 10px; background: #fff; color: #1d2327;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35); font-size: 13px; line-height: 1.45;
}
#mc-editor .mcmk-bulle p { margin: 0 0 10px; color: #1d2327; }
#mc-editor .mcmk-bulle .mcmk-bulle-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
#mc-editor .mcmk-bulle .mcmk-bulle-actions a { color: #b34700; font-weight: 600; text-decoration: underline; }
#mc-editor .mcmk-bulle button.mcmk-bulle-ok {
    background: #1d2327 !important; color: #fff !important; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer;
}