/* =========================================================
🎮 CCTP — Thème Game Boy Color (Lisibilité 100%)
- Palette verte GBC, contrastes élevés
- Tailles confortables (texte, boutons, cellules)
- Icônes d’action = icônes seules (pas de fond)
- Focus accessibles (clavier)
- Zébrage des tableaux + hover clair
- Responsive (sidebar passe dessous)
Active quand
========================================================= */
/* ---------- Base (toujours utile) ---------- */
:root {
--font-ui: 'Press Start 2P', monospace;
--font-body: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
--radius-0: 0;
}
html { scroll-behavior: smooth; }
/* Lisibilité par défaut (hors thème) */
body, .cctp-page-container {
font-family: var(--font-body);
line-height: 1.6;
color: #222;
}
/* Focus visible pour l’accessibilité */
:where(button, [type="button"], [type="submit"], a, input, textarea, select):focus-visible {
outline: 3px solid #1f4d1f;
outline-offset: 2px;
}
/* Placeholders drag */
.drag-placeholder {
border: 2px dashed #2f6b2f;
background: rgba(47,107,47,.08);
}
/* ----------- GAME BOY THEME ----------- */
body.theme-gb {
--gb-screen: #f6efda; /* fond écran crème/vert */
--gb-panel: #f6efda; /* panneaux et zones */
--gb-light: #f5f1e4; /* variantes + claires */
--gb-dark: #1f2a1f; /* texte bien lisible */
--gb-mid: #a6863d; /* foncé secondaire */
--gb-accent: #ad5f24; /* vert accent */
--gb-shadow: #6a765a; /* ombre pixel soft */
--gb-danger: #9e1f1f; /* rouge erreur */
--gb-border: #1c2418; /* bordure GBC */
--gb-glow: rgba(47,107,47,.12);
background: var(--gb-screen);
color: var(--gb-dark);
image-rendering: pixelated;
}
body.theme-gb .cctp-page-container {
max-width: 95%;
margin: 0 auto;
padding: 24px 16px 120px; /* espace bas pour footer fixe */
}
/* ---------- Titres ---------- */
body.theme-gb .cctp-page-title {
font-family: var(--font-ui);
text-transform: uppercase;
font-size: 20px;
letter-spacing: .8px;
color: var(--gb-mid);
margin: 6px 0 18px;
text-shadow: 0 1px 0 #fff;
}
/* ---------- Inputs & formulaires ---------- */
body.theme-gb .cctp-title-input-wrapper label {
font-family: var(--font-ui);
font-size: 12px;
text-transform: uppercase;
color: var(--gb-mid);
}
body.theme-gb .cctp-title-input,
body.theme-gb input[type="text"] {
background: var(--gb-light);
color: var(--gb-dark);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow: inset 2px 2px 0 var(--gb-shadow);
font-family: var(--font-body);
font-size: 16px;
padding: 10px 12px;
width: min(680px, 100%);
}
body.theme-gb .cctp-title-input:focus {
box-shadow: inset 2px 2px 0 var(--gb-shadow), 0 0 0 4px var(--gb-glow);
}
/* ---------- Boutons principaux (texte) ---------- */
body.theme-gb .cctp-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 18px;
}
body.theme-gb .cctp-btn,
body.theme-gb .cctp-buttons button,
body.theme-gb button.cctp-btn {
font-family: var(--font-ui);
text-transform: uppercase;
font-size: 12px;
line-height: 1.3;
letter-spacing: .3px;
color: var(--gb-dark);
background: var(--gb-panel);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow:
2px 2px 0 var(--gb-border),
4px 4px 0 var(--gb-shadow);
padding: 12px 14px;
cursor: pointer;
transition: transform .05s linear, box-shadow .05s linear, background .1s;
}
body.theme-gb .cctp-btn:hover {
background: var(--gb-light);
transform: translate(1px, 1px);
box-shadow:
1px 1px 0 var(--gb-border),
3px 3px 0 var(--gb-shadow);
}
body.theme-gb .cctp-btn:active {
transform: translate(2px, 2px);
box-shadow:
0 0 0 var(--gb-border),
1px 1px 0 var(--gb-shadow);
}
/* Accent spécial pour Enregistrer / Export */
body.theme-gb #btn-save-cctp {
background: #e8f3e6;
border-color: #2a6b2a;
}
body.theme-gb #btn-save-cctp:hover { background: #f5ebe4; }
body.theme-gb #btn-export-doc,
body.theme-gb #btn-export-excel,
body.theme-gb #btn-export-pdf {
background: #f7f3d9;
border-color: #786f20;
}
body.theme-gb #btn-export-doc:hover,
body.theme-gb #btn-export-excel:hover,
body.theme-gb #btn-export-pdf:hover {
background: #fbf8e7;
}
/* ---------- Icônes d’action (🗑 ⎘ ↕ + etc.) ---------- */
/* Icônes = éléments cliquables sans fond ni bordure, taille/contraste lisibles */
body.theme-gb .delete-section-btn,
body.theme-gb .dup-section-btn,
body.theme-gb .drag-section-btn,
body.theme-gb .btn-title-add,
body.theme-gb .btn-title-delete,
body.theme-gb .btn-title-drag,
body.theme-gb .delete-row-btn,
body.theme-gb .dup-row-btn,
body.theme-gb .drag-row-btn,
body.theme-gb .section-toggle-btn,
body.theme-gb .title-toggle-btn {
background: none !important;
border: none !important;
color: var(--gb-mid);
font-size: 18px;
line-height: 1;
min-width: 32px; /* zone cliquable confortable */
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 4px !important;
cursor: pointer;
}
body.theme-gb .delete-section-btn:hover,
body.theme-gb .btn-title-delete:hover,
body.theme-gb .delete-row-btn:hover { color: var(--gb-danger); }
body.theme-gb .dup-section-btn:hover,
body.theme-gb .btn-title-add:hover,
body.theme-gb .dup-row-btn:hover { color: var(--gb-accent); }
body.theme-gb .drag-section-btn:hover,
body.theme-gb .btn-title-drag:hover,
body.theme-gb .drag-row-btn:hover,
body.theme-gb .section-toggle-btn:hover,
body.theme-gb .title-toggle-btn:hover { color: var(--gb-dark); }
body
/* --- Base générique pour tous les boutons icône --- */
body.theme-gb .cctp-icon-btn {
background: none !important;
border: none !important;
color: var(--gb-mid);
font-size: 18px;
line-height: 1;
min-width: 32px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 4px !important;
cursor: pointer;
}
/* Teintes de hover par "rôle" (optionnel mais pratique) */
body.theme-gb .cctp-icon-btn.btn-danger:hover { color: var(--gb-danger); }
body.theme-gb .cctp-icon-btn.btn-accent:hover { color: var(--gb-accent); }
body.theme-gb .cctp-icon-btn.btn-plain:hover { color: var(--gb-dark); }
/* ---------- Layout éditeur ---------- */
body.theme-gb .cctp-editor-wrapper {
display: grid;
grid-template-columns: 1fr minmax(280px, 360px);
gap: 18px;
}
@media (max-width: 1100px) {
body.theme-gb .cctp-editor-wrapper {
grid-template-columns: 1fr;
}
}
/* Panneaux */
body.theme-gb .cctp-editor-main,
body.theme-gb .cctp-sections-editor,
body.theme-gb .cctp-titles-container,
body.theme-gb .cctp-sidebar {
background: var(--gb-panel);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
padding: 14px;
}
/* ---------- Titres hiérarchiques ---------- */
body.theme-gb .cctp-title-node {
background: var(--gb-light);
border: 2px solid var(--gb-border);
margin: 14px 0;
padding: 10px;
}
body.theme-gb .title-total {
font-family: var(--font-ui);
font-size: 12px;
color: var(--gb-accent);
background: rgba(47,107,47,.08);
border: 1px solid rgba(47,107,47,.35);
padding: 4px 8px;
margin-left: 8px;
}
/* ---------- Sections ---------- */
body.theme-gb .cctp-section {
background: var(--gb-panel);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
padding: 16px;
margin: 14px 0;
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
}
body.theme-gb .section-number {
font-family: var(--font-ui);
color: var(--gb-accent);
font-size: 13px;
min-width: 34px;
display: inline-block;
}
/* ---------- Quill ---------- */
body.theme-gb .ql-toolbar.ql-snow {
background: var(--gb-light);
border: 2px solid var(--gb-border);
border-bottom: none;
box-shadow: 2px 2px 0 var(--gb-shadow);
}
body.theme-gb .ql-container.ql-snow {
border: 2px solid var(--gb-border);
background: var(--gb-light);
}
body.theme-gb .ql-editor {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--gb-dark);
min-height: 120px;
}
/* ---------- Tableaux de sections ---------- */
body.theme-gb .cctp-section .cctp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--gb-panel);
border: 2px solid var(--gb-border);
}
body.theme-gb .cctp-section .cctp-table thead th {
background: var(--gb-mid);
color: #f5f7e6;
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: .5px;
font-size: 11px;
padding: 10px 8px;
border-bottom: 2px solid var(--gb-border);
}
body.theme-gb .cctp-section .cctp-table td {
background: var(--gb-panel);
color: var(--gb-dark);
font-family: var(--font-body);
font-size: 15px;
padding: 10px 8px;
border-bottom: 1px solid rgba(0,0,0,.1);
vertical-align: middle;
}
body.theme-gb .cctp-section .cctp-table tbody tr:nth-child(odd) td {
background: var(--gb-light);
}
body.theme-gb .cctp-section .cctp-table tbody tr:hover td {
background: #f5ebe4;
}
body.theme-gb .cctp-section .cctp-table tfoot td {
background: #e9eed1;
font-weight: 700;
border-top: 2px solid var(--gb-border);
}
/* Cellule image (drop) lisible */
body.theme-gb .image-drop-area {
width: 110px;
height: 110px;
border: 2px dashed var(--gb-mid);
background: var(--gb-light);
display: flex; align-items: center; justify-content: center;
font-size: 12px;
color: var(--gb-mid);
text-align: center;
}
/* ---------- Sidebar ---------- */
body.theme-gb .cctp-sidebar-title {
font-family: var(--font-ui);
text-transform: uppercase;
font-size: 20px;
color: var(--gb-mid);
border-bottom: 2px solid var(--gb-border);
padding-bottom: 6px;
margin-bottom: 8px;
padding-top: 10px;
}
body.theme-gb .cctp-sections-list li,
body.theme-gb .sections-list li,
body.theme-gb .section-node {
list-style: none;
padding: 6px 8px;
font-family: var(--font-body);
border-left: 2px solid var(--gb-border);
}
body.theme-gb .section-node:hover {
background: #f5ebe4;
}
/* sous-listes */
body.theme-gb #sections-list ul.nested {
margin-left: 16px;
padding-left: 10px;
border-left: 2px solid var(--gb-border);
}
/* ---------- Liste des CCTP ---------- */
body.theme-gb .cctp-list-table,
body.theme-gb #cctps-list {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--gb-panel);
font-family: var(--font-body);
}
body.theme-gb #cctps-list th {
background: var(--gb-mid);
color: #f5f7e6;
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: .5px;
font-size: 11px;
padding: 10px 8px;
}
body.theme-gb #cctps-list td {
padding: 10px 8px;
border-bottom: 1px solid rgba(0,0,0,.1);
color: var(--gb-dark);
font-size: 15px;
}
body.theme-gb #cctps-list tbody tr:nth-child(odd) td { background: var(--gb-light); }
body.theme-gb #cctps-list tbody tr:hover td { background: #f5ebe4; }
/* ---------- Totaux (footer fixe) ---------- */
body.theme-gb #cctp-footer-totals {
background: var(--gb-panel) !important;
border-top: 2px solid var(--gb-border) !important;
color: var(--gb-dark) !important;
font-family: var(--font-ui) !important;
font-size: 12px !important;
letter-spacing: .6px;
}
/* ---------- Drag & Drop indicateurs ---------- */
body.theme-gb .drag-placeholder {
border: 2px dashed var(--gb-accent);
background: repeating-linear-gradient(
45deg, rgba(47,107,47,.10), rgba(47,107,47,.10) 8px,
rgba(47,107,47,.18) 8px, rgba(47,107,47,.18) 16px
);
height: 44px;
margin: 6px 0;
}
/* =========================================================
Modales & Toasts (clair + Game Boy)
========================================================= */
/* ---------- Base (clair) ---------- */
.cctp-modal-backdrop {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,.35);
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.cctp-modal {
width: min(560px, 96vw);
background: #fff;
color: #111;
border: 1px solid rgba(0,0,0,.15);
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,.22);
overflow: hidden;
font-family: var(--font-body);
}
.cctp-modal__header {
padding: 14px 16px;
border-bottom: 1px solid rgba(0,0,0,.08);
font-weight: 700;
font-size: 16px;
}
.cctp-modal__body {
padding: 16px;
font-size: 15px;
line-height: 1.6;
}
.cctp-modal__field {
margin-top: 10px;
}
.cctp-modal__label {
display: block; font-size: 13px; margin-bottom: 6px; color: #444;
}
.cctp-modal__input {
width: 100%;
padding: 10px 12px;
font-size: 15px;
border: 1px solid #cfd4dc;
border-radius: 8px;
background: #f9fafb;
}
.cctp-modal__footer {
display: flex; gap: 10px; justify-content: flex-end;
padding: 12px 16px;
border-top: 1px solid rgba(0,0,0,.08);
}
.cctp-modal-btn {
padding: 10px 14px; border-radius: 8px;
border: 1px solid #cfd4dc; background: #f6f7f9;
cursor: pointer; font-weight: 600;
}
.cctp-modal-btn:hover { background: #eef0f3; }
.cctp-modal-btn--primary {
background: #1f6feb; border-color: #1f6feb; color: #fff;
}
.cctp-modal-btn--primary:hover { filter: brightness(.96); }
.cctp-modal-btn--danger {
background: #fee2e2; border-color: #ef4444; color: #b91c1c;
}
/* Toasts (clair) */
.cctp-toast-container {
position: fixed; z-index: 10001;
right: 20px; bottom: 20px;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
}
.cctp-toast {
pointer-events: auto;
min-width: 260px;
max-width: 420px;
background: #111; color: #fff;
border-radius: 10px; padding: 10px 14px;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
font-size: 14px;
}
.cctp-toast--success { background: #16a34a; }
.cctp-toast--error { background: #dc2626; }
.cctp-toast--info { background: #1f6feb; }
/* ---------- Overrides Game Boy ---------- */
body.theme-gb .cctp-modal-backdrop { background: rgba(28,36,24,.55); }
body.theme-gb .cctp-modal {
background: var(--gb-panel); color: var(--gb-dark);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow: 4px 4px 0 var(--gb-shadow), 2px 2px 0 var(--gb-border);
}
body.theme-gb .cctp-modal__header {
background: var(--gb-light);
border-bottom: 2px solid var(--gb-border);
font-family: var(--font-ui);
text-transform: uppercase; font-size: 12px; letter-spacing: .6px;
}
body.theme-gb .cctp-modal__body { background: var(--gb-panel); }
body.theme-gb .cctp-modal__label { color: var(--gb-mid); font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; }
body.theme-gb .cctp-modal__input {
background: var(--gb-light); color: var(--gb-dark);
border: 2px solid var(--gb-border); border-radius: var(--radius-0);
box-shadow: inset 2px 2px 0 var(--gb-shadow);
}
body.theme-gb .cctp-modal__footer { border-top: 2px solid var(--gb-border); }
body.theme-gb .cctp-modal-btn {
font-family: var(--font-ui); text-transform: uppercase; font-size: 12px;
background: var(--gb-panel); color: var(--gb-dark);
border: 2px solid var(--gb-border); border-radius: var(--radius-0);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
}
body.theme-gb .cctp-modal-btn:hover {
background: var(--gb-light);
transform: translate(1px,1px);
box-shadow: 1px 1px 0 var(--gb-border), 3px 3px 0 var(--gb-shadow);
}
body.theme-gb .cctp-modal-btn--primary {
background: #f7f3d9; border-color: #786f20;
}
body.theme-gb .cctp-modal-btn--danger {
background: #f9e1e1; border-color: #9e1f1f; color: #9e1f1f;
}
body.theme-gb .cctp-toast-container { right: 14px; bottom: 14px; }
body.theme-gb .cctp-toast {
border: 2px solid var(--gb-border); border-radius: var(--radius-0);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
font-family: var(--font-ui); text-transform: uppercase; font-size: 11px;
}
/* ---------- Petites finitions ---------- */
body.theme-gb ::-webkit-scrollbar { width: 12px; height: 12px; }
body.theme-gb ::-webkit-scrollbar-thumb {
background: #c8cfb2;
border: 2px solid var(--gb-border);
}
/* Moins de mouvements si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* Indicateur "busy" quand on déplace (optionnel) */
body.theme-gb .cctp-sections-list.is-moving,
body.theme-gb #sections-list.is-moving { opacity: .6; pointer-events: none; }
/* Ligne de drop */
body.theme-gb .tree-drop-placeholder {
list-style: none;
height: 36px;
margin: 6px 0;
border: 2px dashed var(--gb-accent);
background:
repeating-linear-gradient(
45deg, rgba(47,107,47,.10), rgba(47,107,47,.10) 8px,
rgba(47,107,47,.18) 8px, rgba(47,107,47,.18) 16px
);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 11px;
color: var(--gb-mid);
box-shadow: 0 0 0 2px rgba(0,0,0,.05) inset;
}
/* Surbrillance de la cible */
body.theme-gb .section-node.drag-over > div {
background: #eef2d7;
outline: 2px solid var(--gb-accent);
}
body.theme-gb .section-node.dragging > div {
opacity: .6;
transform: rotate(1deg);
transition: transform .05s linear;
}
/* Placeholder DnD pour lignes de tableau */
.cctp-row-drop-box {
height: 36px;
margin: 6px;
border: 2px dashed var(--gb-accent);
background: repeating-linear-gradient(
45deg,
rgba(47,107,47,.10),
rgba(47,107,47,.10) 8px,
rgba(47,107,47,.18) 8px,
rgba(47,107,47,.18) 16px
);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 11px;
color: var(--gb-mid);
}
/* Placeholder de drop pour lignes */
.cctp-row-drop-tr td {
padding: 6px 8px;
border: 2px dashed #999;
background: #fafafa;
text-align: center;
font-style: italic;
}
/* Placeholder dans l’arbo templates */
li.tree-drop-placeholder {
list-style: none;
margin: 4px 0;
padding: 6px 8px;
border: 2px dashed #00aaff;
border-radius: 8px;
background: #e0f7ff;
color: #0077aa;
font: 13px/1.2 system-ui;
}
/* Placeholder côté CCTP (sections/titres) avec le même look */
.drag-placeholder {
border: 2px dashed #00aaff !important;
background: #e0f7ff !important;
border-radius: 8px !important;
margin: 6px 0 !important;
height: 40px; /* ajuste si besoin */
}
/* Curseur poignée + petit feedback visuel */
.drag-row-btn { cursor: grab; }
tr[draggable="true"] { opacity: .75; }
.row-ghost td { opacity: .5; }
.row-chosen td { outline: 2px dashed var(--gb-accent); }
.drag-row-btn { user-select: none; cursor: grab; }
.drag-armed { outline: 1px dashed #999; }
/* Recherche templates */
li.section-node.search-hit > div { outline: 2px solid #7cb342; background: #f3faed; }
li.section-node.search-ancestor > div { outline: 1px dashed #90caf9; background: #f5faff; }
li.section-node.search-selected > div { box-shadow: 0 0 0 2px #1565c0 inset; }
.cctp-table tbody tr.is-selected { outline: 2px solid #2f7ae5; background: #eef5ff; }
/*Bulle FAQ*/
/* === CCTP Chatbot Bubble — Skin Game Boy === */
body.theme-gb #cctp-bubble {
position: fixed; right: 18px; bottom: 50px; z-index: 9999;
width: 58px; height: 58px;
border-radius: var(--radius-0);
background: var(--gb-panel);
color: var(--gb-dark);
border: 2px solid var(--gb-border);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-ui); font-size: 11px; line-height: 1; text-transform: uppercase;
letter-spacing: .3px; cursor: pointer; user-select: none;
}
body.theme-gb #cctp-bubble span { text-align: center; }
body.theme-gb #cctp-bubble:hover {
background: var(--gb-light);
transform: translate(1px,1px);
box-shadow: 1px 1px 0 var(--gb-border), 3px 3px 0 var(--gb-shadow);
}
body.theme-gb #cctp-bubble:active {
transform: translate(2px,2px);
box-shadow: 0 0 0 var(--gb-border), 1px 1px 0 var(--gb-shadow);
}
/* Panneau */
body.theme-gb #cctp-panel {
position: fixed; right: 18px; bottom: 86px; z-index: 9999;
width: min(420px, 92vw); max-height: 78vh; overflow: hidden;
background: var(--gb-panel);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow: 4px 4px 0 var(--gb-shadow), 2px 2px 0 var(--gb-border);
display: none; flex-direction: column;
font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--gb-dark);
}
body.theme-gb #cctp-panel.open { display: flex; }
/* Header */
body.theme-gb #cctp-head {
padding: 10px 12px;
background: var(--gb-light);
border-bottom: 2px solid var(--gb-border);
display: flex; align-items: center; gap: 10px;
}
body.theme-gb #cctp-logo {
width: 26px; height: 26px; border-radius: var(--radius-0);
background: var(--gb-panel); color: var(--gb-dark);
border: 2px solid var(--gb-border);
display:flex; align-items:center; justify-content:center;
font-family: var(--font-ui); font-weight: 700; font-size: 11px;
}
body.theme-gb #cctp-head-title {
font-family: var(--font-ui);
text-transform: uppercase; letter-spacing: .6px; font-size: 12px;
color: var(--gb-mid); font-weight: 700;
}
body.theme-gb #cctp-close {
margin-left: auto; background: none; border: none; cursor: pointer; font-size: 18px;
color: var(--gb-mid);
}
body.theme-gb #cctp-close:hover { color: var(--gb-dark); }
/* Corps */
body.theme-gb #cctp-body { padding: 12px; display: grid; gap: 10px; }
body.theme-gb #cctp-prompt {
width: 100%; padding: 10px 12px;
background: var(--gb-light); color: var(--gb-dark);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow: inset 2px 2px 0 var(--gb-shadow);
font-family: var(--font-body); font-size: 14px;
}
body.theme-gb #cctp-prompt:focus {
box-shadow: inset 2px 2px 0 var(--gb-shadow), 0 0 0 4px var(--gb-glow);
}
/* Boutons actions */
body.theme-gb #cctp-actions { display:flex; gap: 10px; flex-wrap: wrap; }
body.theme-gb #cctp-actions button {
font-family: var(--font-ui);
text-transform: uppercase; font-size: 11px; letter-spacing: .3px;
color: var(--gb-dark);
background: var(--gb-panel);
border: 2px solid var(--gb-border);
border-radius: var(--radius-0);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
padding: 10px 12px;
cursor: pointer;
transition: transform .05s linear, box-shadow .05s linear, background .1s;
}
body.theme-gb #cctp-actions button:hover {
background: var(--gb-light);
transform: translate(1px,1px);
box-shadow: 1px 1px 0 var(--gb-border), 3px 3px 0 var(--gb-shadow);
}
body.theme-gb #cctp-actions button:active {
transform: translate(2px,2px);
box-shadow: 0 0 0 var(--gb-border), 1px 1px 0 var(--gb-shadow);
}
body.theme-gb #cctp-actions button:disabled {
opacity: .55; cursor: not-allowed;
}
/* Zone d’édition (avec scroll) */
body.theme-gb #cctp-editor {
border: 2px dashed var(--gb-border);
border-radius: var(--radius-0);
background: var(--gb-light);
padding: 10px;
min-height: 220px;
white-space: pre-wrap;
max-height: 50vh; /* limite la hauteur */
overflow-y: auto; /* active le scroll vertical */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-gutter: stable;
word-break: break-word;
box-shadow: inset 2px 2px 0 var(--gb-shadow);
}
body.theme-gb #cctp-editor[placeholder]:empty:before {
content: attr(placeholder); color: var(--gb-mid);
}
body.theme-gb #cctp-status { color: var(--gb-mid); font-size: 11px; min-height: 16px; }
/* Footer */
body.theme-gb #cctp-footer {
display:flex; justify-content: space-between; align-items:center;
padding: 8px 12px;
background: var(--gb-light);
border-top: 2px solid var(--gb-border);
color: var(--gb-dark);
}
body.theme-gb #cctp-footer small code {
background: #efe9ce;
padding: 2px 6px;
border: 1px solid var(--gb-border);
}
/* =========================================================
🎮 BULLE IA — SKINS MARIO (Game Boy theme)
Utilisation :
- …
- …
La pièce n’apparaît/animée que si la bulle est réduite (pas .is-open)
========================================================= */
/* Base neutre (hérite déjà du skin Game Boy général) */
body.theme-gb #cctp-bubble {
position: fixed; right: 18px; bottom: 50px; z-index: 9999;
width: 58px; height: 58px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; user-select: none;
}
/* =============== SKIN 2 : PIÈCE QUI TOURNE =============== */
/* La bulle devient un petit socle sobre */
body.theme-gb #cctp-bubble[data-skin="coin"] {
border-radius: 0%;
background: var(--gb-panel);
border: 2px solid var(--gb-border);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
position: right;
}
/* La pièce (apparait seulement quand le panneau est FERMÉ = pas .is-open) */
body.theme-gb #cctp-bubble[data-skin="coin"]:not(.is-open)::before {
content: "";
position: absolute;
left: 50%; bottom: 66px; /* au-dessus de la bulle */
width: 34px; height: 34px;
transform: translateX(-50%);
/* Pièce en SVG (rayons + centre) */
background-image: url("data:image/svg+xml;utf8,\
");
background-size: contain;
background-repeat: no-repeat;
will-change: transform;
animation: coin-spin 1s linear infinite, coin-bob 1.8s ease-in-out infinite;
pointer-events: none;
}
/* Quand le panneau est OUVERT, on retire la pièce (classe posée en JS) */
body.theme-gb #cctp-bubble[data-skin="coin"].is-open::before {
display: none;
}
/* Animation : rotation 3D + flottement */
@keyframes coin-spin {
0% { transform: translateX(-50%) rotateY(0deg); }
100% { transform: translateX(-50%) rotateY(360deg); }
}
@keyframes coin-bob {
0%,100% { bottom: 66px; }
50% { bottom: 78px; }
}
/* Petit feedback hover du socle */
body.theme-gb #cctp-bubble[data-skin="coin"]:hover {
transform: translate(1px,1px);
box-shadow: 1px 1px 0 var(--gb-border), 3px 3px 0 var(--gb-shadow);
}
#excel-export-options {
border: 2px solid var(--gb-border);
box-shadow: 2px 2px 0 var(--gb-border), 4px 4px 0 var(--gb-shadow);
background: #fbf8e7;
}