/* Styles pour l'animation de texte */
.animated-text-container {
    display: inline-block;
}

#animated-text {
    display: inline-block;
    min-width: 150px;
}
@media (min-width: 768px) {
    h1.text-6xl.font-bold.tracking-tighter.text-left.sm\:text-7xl.md\:text-8xl.sm\:text-center.lg\:text-left.text-zinc-900.text-balance{
        font-size: 4rem;
        line-height: 4.2rem;
    } 
}

.shadow-xl {
    --tw-shadow: unset;
    --tw-shadow-colored: unset;
    box-shadow: unset;
}

.h-full-not-full {
    height: 80vh;
}
.h-full-not-full > img {
    max-height: 100%; 
}
.h-full-not-full2 > img {
    max-height: 90%;
}

/* Hauteur fixe pour les images de couverture des projets */
.project-cover-container {
    height: 517px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #ebebed;
}


/* Miniature personnage dans l'onglet Personnages */
.character-thumbnail {
    width: 100%;
    height: 100%; /* même hauteur que h-48 */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    display: block;
    /* height: 400px; */
}

.character_prompt {
    height: 70px;
    overflow-y: scroll;
}
.border-l-4.p-4.mb-4.rounded-r.bg-green-50.border-green-500.text-green-800.dark\:bg-green-900\/50.dark\:border-green-600.dark\:text-green-100.mb-4 {
    background: #dcfce7;
}
.image_source_custom {
    max-height: 500px;
}
.miniature_styles_custom {
    max-height: 500px;
}
.scene_prompt {
    height: 140px;
    overflow-y: scroll;
}

/* Miniature scène dans l'onglet Scènes */
.scene-thumbnail {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.relative.h-48.bg-gray-200.dark\:bg-gray-600 {
    height: 170px;
}
img#modalImage {
    max-height: 80vh;
}
.absolute.top-2.right-2.z-10 {
    right: 4px;
    top: 4px;
}

/* Styles pour la visionneuse de livre */
.book-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.book-wrapper .page-wrapper {
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.book-wrapper .page-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: white;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.book-container {
    height: 70vh !important;
    max-height: 800px;
    margin: 0 auto;
}

.book-viewer {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .book-container {
        height: 50vh !important;
    }
}

/* Animation de page qui tourne */
@keyframes page-flip {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
}

img.max-w-full.h-auto.rounded-lg.shadow-md.mb-4, .book-page img {
    max-height: 80vh;
}

/* Visionneuse publique — lecteur page par page.
   Le livre est une colonne : l'en-tête en haut, puis le volet des planches qui
   prend tout le reste. Sans ça la planche déborde du cadre blanc ou laisse un
   grand vide sous elle, la hauteur du livre (95vh) et celle du volet étant
   fixées chacune de leur côté. */
div#book {
    height: 95vh;
    display: flex;
    flex-direction: column;
}

/* Le bouton plein écran s'applique au livre lui-même (#book), pas à l'overlay. */
div#book:fullscreen {
    height: 100vh;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

#bulle-reader-pages {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

#book-pages {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}

#book-pages .book-page > div {
    height: 100%;
    justify-content: center;
}

/* La planche s'inscrit dans le volet au lieu d'imposer sa hauteur. */
#book-pages .book-page img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin-bottom: 0;
    object-fit: contain;
}

/* Compteur « page courante / total » sous les planches. */
span#page-indicator {
    display: block;
    width: 100%;
    margin: 0.5rem auto 0;
    text-align: center;
}

/* Vue publique d'un projet : la colonne titre + description occupe toute la
   largeur restante à côté de la couverture. */
.md\:w-3\/5.p-8 {
    width: 100%;
}

/* Flèches de navigation du livre */
.book-nav-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.arrow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(79, 70, 229, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    user-select: none;
    -webkit-user-select: none;
}

.arrow-nav:hover {
    background-color: rgba(79, 70, 229, 1);
    transform: translateY(-50%) scale(1.1);
}

.arrow-prev { left: 20px; }
.arrow-next { right: 20px; }

.arrow-nav.disabled { opacity: 0.3; pointer-events: none; }

.scenario_custom_p {
    height: 142px;
    overflow-y: scroll;
}
.custom_infos_scenario {
    height: 140px;
    overflow-y: scroll;
}


.custom_project_description {
    height: 103px;
    overflow-y: scroll;
}
.custom_page_img_by_fifi {
    max-height: 500px;
}
.page_description_custom {
    height: 67px;
    overflow-y: scroll;
}
@media (max-width: 768px) {
    .scenario_custom_p, .page_description_custom, .custom_infos_scenario, .scene-thumbnail2 {
        height: unset;
    }
}

/* Style de bouton noir et gris standardisé */
.btn-bulle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: #1f2937; /* gray-800 */
    color: white;
    border: 1px solid transparent;
}

/* Un `.btn-bulle` masqué doit RESTER masqué.
 *
 * La classe pose son propre `display: inline-flex`. Or `styles.css` est chargé
 * APRÈS Tailwind : à spécificité égale, c'est lui qui gagnait, et un bouton
 * porteur de `[hidden]` ou de la classe utilitaire `.hidden` s'affichait quand
 * même. C'est ce qui laissait « Générer les images avec Bulle » visible en
 * permanence dans l'onglet « Pages », alors que ses voisins rouges — sans
 * `.btn-bulle` — se cachaient correctement.
 *
 * Réglé ici pour tous les boutons du site, plutôt que scope par scope comme
 * c'était fait jusqu'ici (éditeur de planche, fiche personnage, volet page).
 * Pas de `!important` : la spécificité (0,2,0) suffit à battre `.btn-bulle`,
 * et un `style="display:…"` posé par du JS continue de primer. */
.btn-bulle[hidden],
.btn-bulle.hidden {
    display: none;
}

.btn-bulle:hover {
    background-color: #111827; /* gray-900 */
}

.btn-bulle:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.5);
}

.btn-bulle.btn-secondary {
    background-color: rgb(244, 244, 245); /* gray-600 */
    color: black;
}

.btn-bulle.btn-secondary:hover {
    background-color: rgb(229, 229, 231); /* gray-700 */
}

.btn-bulle.btn-danger {
    background-color: #dc2626; /* red-600 */
    color: white;
}

.btn-bulle.btn-danger:hover {
    background-color: #b91c1c; /* red-700 */
}

/* Bouton rond (ex. fermer / supprimer sur carte) — même noir que .btn-bulle, hover danger */
.btn-bulle-dismiss-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 9999px;
    background-color: #1f2937; /* identique .btn-bulle */
    color: white;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.btn-bulle-dismiss-round:hover {
    background-color: #dc2626; /* identique .btn-bulle.btn-danger */
}

.btn-bulle-dismiss-round:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.5);
}

/* Formulaire bouton croix sur carte projet : au-dessus du lien couverture (hors overflow-hidden de la vignette) */
.bulle-project-card-destroy-form {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 100;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

/* Modale de confirmation — composant <x-modal.confirm> (même esprit que wizard auto / btn-bulle) */
.bulle-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.bulle-confirm-modal.is-open {
    display: flex;
    overflow-y: scroll;
}

/* fixed : avec overflow-y sur .is-open, absolute+inset:0 ne couvre pas la zone scrollée (bande claire). */
.bulle-confirm-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

.bulle-confirm-modal__panel-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

.bulle-confirm-modal__panel-wrap > div {
    pointer-events: auto;
}

/* Modale large (étape 5 wizard sur l’édition projet) */
.bulle-confirm-modal--wide .bulle-confirm-modal__panel-wrap {
    max-width: 56rem;
}

/* Modale « Générer les pages » (edit projet) : borne la hauteur du wrap pour que la grille interne puisse défiler */
#bulle-edit-auto-pages-modal .bulle-confirm-modal__panel-wrap {
    max-height: calc(100vh - 2rem);
}

/* ── Choix de la méthode de création dans la modale « Générer les pages » ──
   Même vocabulaire visuel que les cartes de l'éditeur de planche
   (.bulle-board-choice-cards) : la modale et l'éditeur parlent des trois
   MÊMES méthodes, elles doivent se reconnaître au premier coup d'œil. */
.bulle-gen-method {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.bulle-gen-method button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 0.6rem;
    border: 2px solid #d1d5db;
    border-radius: 0.6rem;
    background: #fff;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms, background-color 120ms, transform 120ms;
}
.bulle-gen-method button:hover {
    border-color: #818cf8;
    transform: translateY(-1px);
}
.bulle-gen-method button.is-active {
    border-color: #4f46e5;
    background: #eef2ff;
}
.bulle-gen-method button strong {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
}
.bulle-gen-method__icon { font-size: 1.4rem; line-height: 1; }
.dark .bulle-gen-method button { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark .bulle-gen-method button.is-active { border-color: #6366f1; background: rgba(99, 102, 241, 0.15); }

.bulle-gen-method__hint {
    margin-top: 0.6rem;
    min-height: 2.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #4b5563;
}
.dark .bulle-gen-method__hint { color: #9ca3af; }

.bulle-gen-method__options {
    margin-top: 0.9rem;
    padding: 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    background: #f9fafb;
}
.bulle-gen-method__options[hidden] { display: none; }
.dark .bulle-gen-method__options { border-color: #374151; background: rgba(17, 24, 39, 0.45); }

.bulle-gen-method__toggle {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 0.78rem;
    color: #374151;
}
.bulle-gen-method__toggle.is-active { border-color: #4f46e5; }
.bulle-gen-method__toggle em { font-style: normal; font-size: 0.7rem; color: #6b7280; }
.dark .bulle-gen-method__toggle { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark .bulle-gen-method__toggle em { color: #9ca3af; }

.bulle-gen-method__cost {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: #4f46e5;
}
.dark .bulle-gen-method__cost { color: #a5b4fc; }

/* Prompts rendus par le parcours « IA externe » en lot */
.bulle-gen-prompt-row {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}
.dark .bulle-gen-prompt-row { border-color: #374151; }
.bulle-gen-prompt-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: #f3f4f6;
    font-size: 0.85rem;
}
.dark .bulle-gen-prompt-row__head { background: rgba(17, 24, 39, 0.6); }
.bulle-gen-prompt-row__text {
    max-height: 11rem;
    overflow: auto;
    margin: 0;
    padding: 0.7rem;
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: #374151;
}
.dark .bulle-gen-prompt-row__text { color: #d1d5db; }

@media (max-width: 640px) {
    .bulle-gen-method { grid-template-columns: 1fr; }
}

/* Wizard auto — #wizard-alert en fixe (showAlert(..., true)) : même composant qu’en flux, visible en haut de fenêtre */
#wizard-alert.bulle-wizard-alert--viewport-top {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    max-width: min(36rem, calc(100vw - 2rem));
    width: calc(100vw - 2rem);
    margin-bottom: 0 !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}

.little_warning_custom {
    background: #eaeaec;
  }

  @media (min-width: 640px) {
    .sm\:grid-cols-8 {
      grid-template-columns: repeat(8,minmax(0,1fr));
    }
}

/* Style pour les messages d'avertissement */
.warning {
    background-color: #FECACA !important; /* Rouge clair */
    border-left: 4px solid #EF4444 !important; /* Rouge plus foncé */
    color: #7F1D1D !important; /* Texte rouge foncé */
}

.dark .warning {
    background-color: #991B1B !important; /* Rouge foncé pour le mode sombre */
    border-left: 4px solid #F87171 !important; /* Rouge plus clair pour le contraste */
    color: #FEF2F2 !important; /* Texte blanc cassé */
}
.scene-thumbnail2, #scene-preview {
    height: 230px;
}
.prompt_custom {
    height: 508px;
}
#imageModalTitle {
    text-align: center;
  }
  #closeImageModal, #closeStyleModal {
    right: 11px;
  }
  div#styleModal img {
    max-height: 80vh;
}
.separateur_sidebar {
    height: 5px;
    border-top: 1px solid #e4e6e8;
    display: block;
    width: 100%;
}
.flexit {
    display: flex;
}

/* Éditeur d’image page (tui.image-editor) */
.bulle-page-image-editor-panel {
    border-radius: 0.5rem;
    border: 1px solid rgb(212 212 216);
    background-color: rgb(250 250 250);
    padding: 1rem;
}

.dark .bulle-page-image-editor-panel {
    border-color: rgb(63 63 70);
    background-color: rgb(24 24 27);
}

.bulle-tui-image-editor-wrap {
    min-height: 720px;
    width: 100%;
}

/* tui-image-editor : pas de logo Toast UI ni Load/Download (chargement = image page, export = boutons Bulle) */
.bulle-tui-image-editor-wrap .tui-image-editor-header {
    display: none;
}

.bulle-tui-image-editor-wrap .tui-image-editor-controls-logo,
.bulle-tui-image-editor-wrap .tui-image-editor-controls-buttons {
    display: none;
}

/* ============================================================
   BLOG
   ============================================================ */

.blog-article-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #18181b;
}

.blog-article-content h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #27272a;
}

.blog-article-content p {
    margin-bottom: 1.25rem;
    line-height: 1.75;
    color: #3f3f46;
}

.blog-article-content ul,
.blog-article-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    color: #3f3f46;
}

.blog-article-content ul {
    list-style-type: disc;
}

.blog-article-content ol {
    list-style-type: decimal;
}

.blog-article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.75;
}

.blog-article-content a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-article-content a:hover {
    color: #1d4ed8;
}

.blog-article-content img {
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.blog-article-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #3b82f6;
    background-color: #f0f9ff;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #1e40af;
    font-style: italic;
}

.blog-article-content pre {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #18181b;
    color: #e4e4e7;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.blog-article-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875em;
}

.blog-article-content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.blog-article-content th,
.blog-article-content td {
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    text-align: left;
}

.blog-article-content th {
    background-color: #f4f4f5;
    font-weight: 600;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog article : grille colonne + sidebar (style proche Cardmarket / u-article-layout) */
.bulle-blog-article-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .bulle-blog-article-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 2.5rem;
        align-items: start;
    }

    .bulle-blog-aside-wrap {
        position: sticky;
        top: 5.5rem;
        align-self: start;
    }
}

.bulle-blog-article-main {
    min-width: 0;
}

.bulle-blog-toc .bulle-blog-toc-list a {
    text-decoration: none;
}

.bulle-blog-toc .bulle-blog-toc-list a:hover {
    text-decoration: underline;
}

.bulle-blog-aside-wrap {
    min-width: 0;
}

.bulle-cm-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bulle-cm-aside__block {
    padding: 1.25rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    background: #fff;
}

.bulle-cm-aside__block--author {
    background: #fafafa;
}

.bulle-cm-aside__title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #71717a;
}

.bulle-cm-aside__search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.bulle-cm-aside__search-inner {
    flex: 1 1 120px;
    min-width: 0;
}

.bulle-cm-aside__search-inner input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #d4d4d8;
    border-radius: 0.5rem;
    background: #fff;
}

.bulle-cm-aside__search-inner input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    border-color: transparent;
}

.bulle-cm-aside__cta {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.bulle-cm-aside__cta--block {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.75rem;
    white-space: normal;
}

.bulle-cm-aside__author-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
}

.bulle-cm-aside__author-logo {
    max-height: 1.75rem;
    width: auto;
    height: auto;
}

.bulle-cm-aside__author-name {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #18181b;
}

.bulle-cm-aside__author-bio {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #52525b;
}

.bulle-cm-aside__block--promo {
    padding: 0;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #3730a3 100%);
    color: #fff;
}

.bulle-cm-aside__promo-title {
    margin: 0;
    padding: 1.25rem 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.bulle-cm-aside__promo-text {
    margin: 0.5rem 0 0;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #dbeafe;
}

.bulle-cm-aside__cta--light {
    display: block;
    margin: 1rem 1.25rem 0;
    padding: 0.625rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: #1e40af;
    background: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
}

.bulle-cm-aside__cta--light:hover {
    background: #eff6ff;
}

.bulle-cm-aside__promo-banner {
    display: block;
    margin-top: 1rem;
    text-decoration: none;
    color: #bfdbfe;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bulle-cm-aside__promo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.12);
}

.bulle-cm-aside__promo-banner:hover .bulle-cm-aside__promo-banner-inner {
    background: rgba(0, 0, 0, 0.18);
}

.bulle-cm-aside__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bulle-cm-aside__list-item + .bulle-cm-aside__list-item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f4f4f5;
}

.bulle-cm-aside__list-link {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

.bulle-cm-aside__list-link:hover .bulle-cm-aside__list-title {
    color: #2563eb;
}

.bulle-cm-aside__list-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.375rem;
    background: #f4f4f5;
}

.bulle-cm-aside__list-thumb--placeholder {
    display: inline-block;
    background: linear-gradient(135deg, #e4e4e7, #f4f4f5);
}

.bulle-cm-aside__list-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bulle-cm-aside__list-date {
    font-size: 0.75rem;
    color: #a1a1aa;
}

.bulle-cm-aside__list-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #18181b;
}

.bulle-cm-aside__featured {
    margin-top: 1rem;
}

.bulle-cm-aside__featured:first-of-type {
    margin-top: 0;
}

.bulle-cm-aside__featured-media {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.bulle-cm-aside__featured-media img {
    width: 100%;
    height: auto;
    vertical-align: middle;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bulle-cm-aside__badge {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1e40af;
    background: #dbeafe;
    border-radius: 0.25rem;
}

.bulle-cm-aside__featured-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.bulle-cm-aside__featured-title a {
    color: #18181b;
    text-decoration: none;
}

.bulle-cm-aside__featured-title a:hover {
    color: #2563eb;
}

a.bulle-cm-aside__cta.bulle-cm-aside__cta--light.bulle-cm-aside__cta--block {
    width: 88%;
}

/* Hub choix mode création projet */
.bulle-project-create-hub {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .bulle-project-create-hub {
        flex-direction: row;
        align-items: stretch;
        gap: 1.5rem;
    }
}

.bulle-project-create-mode-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    padding: 2rem 1.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: 0.75rem;
    border: 2px solid #e4e4e7;
    background: #fafafa;
    color: #18181b;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.dark .bulle-project-create-mode-card {
    border-color: #3f3f46;
    background: #27272a;
    color: #f4f4f5;
}

.bulle-project-create-mode-card:hover {
    border-color: #6366f1;
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.25);
    transform: translateY(-2px);
}

.bulle-project-create-mode-card--auto:hover {
    border-color: #7c3aed;
    box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.25);
}

.bulle-project-create-mode-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.bulle-project-create-mode-card__phosphor {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}

.bulle-project-create-mode-card__phosphor--manual {
    color: #4f46e5;
}

.dark .bulle-project-create-mode-card__phosphor--manual {
    color: #818cf8;
}

.bulle-project-create-mode-card__phosphor--auto {
    color: #7c3aed;
}

.dark .bulle-project-create-mode-card__phosphor--auto {
    color: #a78bfa;
}

.bulle-project-create-mode-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.bulle-project-create-mode-card__desc {
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.9;
}

/* Wizard auto – stepper */
.bulle-wizard-progress {
    user-select: none;
}

button.bulle-wizard-step {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
}

.bulle-wizard-step {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    border: 2px solid #d4d4d8;
    color: #a1a1aa;
    background: #fafafa;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.dark .bulle-wizard-step {
    border-color: #52525b;
    color: #71717a;
    background: #27272a;
}

.bulle-wizard-step:hover:not(:disabled) {
    border-color: #a1a1aa;
}

.dark .bulle-wizard-step:hover:not(:disabled) {
    border-color: #71717a;
}

.bulle-wizard-step:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
}

.bulle-wizard-step--active {
    border-color: #6366f1;
    color: #fff;
    background: #6366f1;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #6366f1;
    cursor: default;
}

.dark .bulle-wizard-step--active {
    box-shadow: 0 0 0 3px #18181b, 0 0 0 5px #818cf8;
}

.bulle-wizard-step--done {
    border-color: #16a34a;
    color: #fff;
    background: #22c55e;
}

.bulle-wizard-step--done .bulle-wizard-step__number {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.bulle-wizard-step--done .bulle-wizard-step__number::after {
    content: '\2713';
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.bulle-wizard-step--reachable {
    border-color: #818cf8;
    color: #4338ca;
    background: #eef2ff;
}

.dark .bulle-wizard-step--reachable {
    border-color: #6366f1;
    color: #c7d2fe;
    background: #312e81;
}

.bulle-wizard-step--locked {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
}

.dark .bulle-wizard-step--locked {
    background: transparent;
}

.bulle-wizard-step:disabled {
    cursor: not-allowed;
}

.bulle-wizard-step--done + .bulle-wizard-step__line {
    background: #22c55e;
}

.bulle-wizard-step__line {
    width: 1.25rem;
    height: 2px;
    background: #d4d4d8;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.dark .bulle-wizard-step__line {
    background: #3f3f46;
}

@media (min-width: 640px) {
    .bulle-wizard-step__line {
        width: 2rem;
    }
}

/* Wizard auto – page count grid */
.bulle-page-count-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.75rem;
}

.bulle-page-count-grid.hidden {
    display: none;
}

.bulle-page-count-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    border: 2px solid #e4e4e7;
    background: #fafafa;
    color: #18181b;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.dark .bulle-page-count-btn {
    border-color: #3f3f46;
    background: #27272a;
    color: #f4f4f5;
}

.bulle-page-count-btn:hover {
    border-color: #6366f1;
    transform: translateY(-1px);
}

.bulle-page-count-btn--selected {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    background: #eef2ff;
}

.dark .bulle-page-count-btn--selected {
    background: #312e81;
    border-color: #818cf8;
}

.bulle-page-count-btn__number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.bulle-page-count-btn__cost {
    font-size: 0.7rem;
    margin-top: 0.25rem;
    opacity: 0.75;
}

/* Wizard auto – progress bar animation */
.bulle-progress-bar-animated {
    transition: width 0.6s ease;
}

/*
 * Modale chargement couverture — au-dessus de la sidebar (z-50) et du reste de l’UI.
 * html.bulle-cover-generating-lock : bloque tous les clics / taps hors de la modale.
 */
.bulle-cover-loading-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: auto;
}

.bulle-cover-loading-modal--edit {
    z-index: 999999;
}

html.bulle-cover-generating-lock {
    overflow: hidden;
    touch-action: none;
}

html.bulle-cover-generating-lock body {
    overflow: hidden;
}

html.bulle-cover-generating-lock body * {
    pointer-events: none !important;
}

html.bulle-cover-generating-lock .bulle-cover-loading-modal,
html.bulle-cover-generating-lock .bulle-cover-loading-modal * {
    pointer-events: auto !important;
}

/* Modale prompt IA externe (x-external-ai-prompt-modal) : même exception que chargement Gemini */
.bulle-external-ai-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;
    pointer-events: auto;
    background-color: rgba(17, 24, 39, 0.65);
}

.dark .bulle-external-ai-prompt-modal {
    background-color: rgba(0, 0, 0, 0.75);
}

html.bulle-cover-generating-lock .bulle-external-ai-prompt-modal,
html.bulle-cover-generating-lock .bulle-external-ai-prompt-modal * {
    pointer-events: auto !important;
}

.bulle-cover-loading-spinner {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 3px solid #e4e4e7;
    border-top-color: #6366f1;
    animation: bulle-cover-spin 0.85s linear infinite;
}

.dark .bulle-cover-loading-spinner {
    border-color: #3f3f46;
    border-top-color: #818cf8;
}

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

/* Wizard auto — génération des pages (étape 5) */
.bulle-wizard-pages-progress {
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e4e4e7;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.dark .bulle-wizard-pages-progress {
    border-color: #3f3f46;
    background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Wizard auto — étape 4 : personnages pour la couverture (comme édition scénario) */
.bulle-wizard-cover-char-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .bulle-wizard-cover-char-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bulle-wizard-cover-char-label {
    border: 2px solid #d4d4d8;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .bulle-wizard-cover-char-label {
    border-color: #3f3f46;
}

.bulle-wizard-cover-char-label:hover {
    border-color: #a5b4fc;
}

.bulle-wizard-cover-char-label--selected {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.dark .bulle-wizard-cover-char-label--selected {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
}

.bulle-wizard-cover-characters--no-people .bulle-wizard-cover-char-label {
    opacity: 0.55;
    cursor: not-allowed;
}

#btn-bulle-cover-no-characters.is-active,
#edit-cover-no-characters-btn.is-active {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
}

.dark #btn-bulle-cover-no-characters.is-active,
.dark #edit-cover-no-characters-btn.is-active {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
}

/* Wizard auto — étape 5 : accordéon revue des pages */
.bulle-wizard-page-accordion {
    border-radius: 0.75rem;
    border: 1px solid #e4e4e7;
    background: #fafafa;
    overflow: hidden;
}

.dark .bulle-wizard-page-accordion {
    border-color: #3f3f46;
    background: #27272a;
}

.bulle-wizard-page-accordion__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: #18181b;
}

.bulle-wizard-page-accordion__summary::-webkit-details-marker {
    display: none;
}

.dark .bulle-wizard-page-accordion__summary {
    color: #f4f4f5;
}

.bulle-wizard-page-accordion__summary:hover {
    background: rgba(99, 102, 241, 0.06);
}

.dark .bulle-wizard-page-accordion__summary:hover {
    background: rgba(129, 140, 248, 0.12);
}

.bulle-wizard-page-accordion__pos {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #6366f1;
    min-width: 2.5rem;
}

.bulle-wizard-page-accordion__has-image {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #16a34a;
    background: #dcfce7;
    border-radius: 9999px;
    padding: 0.1em 0.45em;
    font-weight: 700;
    line-height: 1.4;
}

.dark .bulle-wizard-page-accordion__has-image {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.bulle-wizard-page-accordion__title {
    flex: 1;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.35;
}

.bulle-wizard-page-accordion__body {
    border-top: 1px solid #e4e4e7;
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
}

.dark .bulle-wizard-page-accordion__body {
    border-top-color: #3f3f46;
    background: #18181b;
}

/* Wizard auto – character card */
.bulle-character-card {
    transition: transform 0.15s ease;
}

.bulle-character-card:hover {
    transform: translateY(-2px);
}

.bulle-character-card__edit .js-char-edit-prompt {
    min-height: 7.5rem;
    resize: vertical;
}

/* Wizard auto — étape personnages : carte IA centrée */
.bulle-wizard-char-modes {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.25rem;
}

.bulle-wizard-char-modes > .bulle-wizard-char-mode {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.bulle-wizard-char-mode {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid #e4e4e7;
    background: linear-gradient(165deg, #fafafa 0%, #f4f4f5 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.35rem;
    min-height: 0;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dark .bulle-wizard-char-mode {
    border-color: #3f3f46;
    background: linear-gradient(165deg, #27272a 0%, #18181b 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bulle-wizard-char-mode:hover {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
    border-color: #c7d2fe;
}

.dark .bulle-wizard-char-mode:hover {
    border-color: #6366f1;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.bulle-wizard-char-mode--manual {
    border-top: 3px solid #6366f1;
}

.bulle-wizard-char-mode--auto {
    border-top: 3px solid #8b5cf6;
}

.bulle-wizard-char-mode__head {
    margin-bottom: 1rem;
    text-align: center;
}

.bulle-wizard-char-mode__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: #e0e7ff;
    color: #4338ca;
    margin-bottom: 0.5rem;
}

.dark .bulle-wizard-char-mode__badge {
    background: #312e81;
    color: #c7d2fe;
}

.bulle-wizard-char-mode__badge--auto {
    background: #ede9fe;
    color: #5b21b6;
}

.dark .bulle-wizard-char-mode__badge--auto {
    background: #4c1d95;
    color: #ddd6fe;
}

.bulle-wizard-char-mode__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: #18181b;
    margin: 0 0 0.35rem 0;
}

.dark .bulle-wizard-char-mode__title {
    color: #fafafa;
}

.bulle-wizard-char-mode__intro {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #52525b;
    margin: 0;
}

.dark .bulle-wizard-char-mode__intro {
    color: #a1a1aa;
}

.bulle-wizard-char-mode__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3f3f46;
    margin-bottom: 0.35rem;
}

.dark .bulle-wizard-char-mode__label {
    color: #d4d4d8;
}

.bulle-wizard-char-mode__body {
    flex: 1 1 auto;
    min-height: 0;
}

.bulle-wizard-char-mode__body--auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 8rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.bulle-wizard-char-mode__auto-illus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 12rem;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #e0e7ff 100%);
    border: 1px dashed #a5b4fc;
}

.dark .bulle-wizard-char-mode__auto-illus {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-color: #6366f1;
}

.bulle-wizard-char-mode__auto-sparkle {
    width: 3.5rem;
    height: 3.5rem;
    color: #6366f1;
    opacity: 0.9;
}

.dark .bulle-wizard-char-mode__auto-sparkle {
    color: #a5b4fc;
}

.bulle-wizard-char-mode__actions {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e4e4e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dark .bulle-wizard-char-mode__actions {
    border-top-color: #3f3f46;
}

.bulle-wizard-char-mode__actions .btn-bulle {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.5rem;
    text-align: center;
}

.bulle-wizard-char-mode__cost {
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
}

.bulle-wizard-char-mode__actions .btn-bulle.bulle-wizard-char-mode__btn-auto {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    border: none;
    color: #fff;
}

.bulle-wizard-char-mode__actions .btn-bulle.bulle-wizard-char-mode__btn-auto:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
}

/* Wizard auto — choix rédaction / image (étape 3) */
.bulle-wizard-char-hint-mode {
    width: 100%;
}

.bulle-wizard-char-input-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .bulle-wizard-char-input-mode-grid {
        max-width: 24rem;
        gap: 1rem;
    }
}

.bulle-wizard-char-input-mode__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 7.5rem;
    padding: 1rem 0.75rem;
    border-radius: 0.75rem;
    border: 2px solid #e4e4e7;
    background: #fff;
    color: #18181b;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dark .bulle-wizard-char-input-mode__btn {
    border-color: #3f3f46;
    background: #18181b;
    color: #fafafa;
}

.bulle-wizard-char-input-mode__btn:hover:not(:disabled) {
    border-color: #a5b4fc;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}

.dark .bulle-wizard-char-input-mode__btn:hover:not(:disabled) {
    border-color: #6366f1;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.bulle-wizard-char-input-mode__btn.is-selected {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.dark .bulle-wizard-char-input-mode__btn.is-selected {
    border-color: #818cf8;
    background: #312e81;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.4);
}

.bulle-wizard-char-input-mode__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bulle-wizard-char-input-mode__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulle-wizard-char-input-mode__label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    padding: 0 0.25rem;
}

/* Liste scénarios (projet) : accordéon + poignée de tri */
.bulle-scenario-accordion summary {
    list-style: none;
}

.bulle-scenario-accordion summary::-webkit-details-marker {
    display: none;
}

.bulle-scenario-accordion[open] .bulle-scenario-chevron {
    transform: rotate(180deg);
}

.bulle-scenario-accordion .bulle-scenario-chevron {
    transition: transform 0.15s ease;
}

/* Prompts globaux (fichiers storage) — édition projet, onglets admin */
.bulle-admin-global-prompt-accordion summary {
    list-style: none;
}

.bulle-admin-global-prompt-accordion summary::-webkit-details-marker {
    display: none;
}

.bulle-admin-global-prompt-accordion[open] .bulle-admin-global-prompt-chevron {
    transform: rotate(180deg);
}

.bulle-admin-global-prompt-accordion .bulle-admin-global-prompt-chevron {
    transition: transform 0.15s ease;
}

.bulle-scenario-sort-row.sortable-ghost {
    opacity: 0.55;
}
div#bulkBubbleChoiceModal, div#characterImageMethodModal, div#coverImageMethodModal, div#bulleCustomStyleModal, div#bulleStylePromptModal, div#bulleStylePromptModalPreview, div.bulle-image-generation-method-modal, div#bubbleChoiceModal {
    z-index: 99;
}

/* Grille styles : cartes + tuile « Créer mon style » à la même hauteur (ligne de grille) */
.bulle-style-picker-grid {
    align-items: stretch;
}

.bulle-style-picker-grid > .bulle-style-tile,
.bulle-style-picker-grid > .bulle-custom-style-create-slot {
    height: 100%;
    min-height: 0;
}

.bulle-style-picker-grid .bulle-style-tile {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bulle-custom-style-create-slot {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}

.bulle-style-create-tile-btn {
    flex: 1 1 auto;
    min-height: 100%;
}
.bulle-delete-custom-style-btn {
    right: 5px;
}
div#bulleConfirmModalAsync {
    z-index: 100;
}
/* Modal « prompt envoyé » (page) — même principe que .bulle-confirm-modal (ARCHITECTURE.md : backdrop fixed + scroll) */
.bulle-page-sent-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.bulle-page-sent-prompt-modal:not(.hidden) {
    display: flex;
    overflow-y: auto;
}

.bulle-page-sent-prompt-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

.bulle-page-sent-prompt-modal__panel-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

.bulle-page-sent-prompt-modal__panel-wrap > div {
    pointer-events: auto;
}

/* Accueil — bandeau projets mis en avant (public + featured) */
.bulle-home-featured-slider__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bulle-home-featured-slider__track::-webkit-scrollbar {
    display: none;
}

.bulle-home-featured-slider__card {
    scroll-snap-align: start;
}

.bulle-home-featured-slider__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(228 228 231);
    background-color: #fff;
    color: rgb(63 63 70);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bulle-home-featured-slider__nav-btn:hover {
    background-color: rgb(244 244 245);
    border-color: rgb(212 212 216);
    color: rgb(24 24 27);
}

.bulle-home-featured-slider__nav-btn:focus-visible {
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
}

/* Hauteur fixe 400px par couverture (slider accueil) — sur l’image, pas seulement le conteneur */
.bulle-home-featured-slider__cover-wrap {
    display: inline-block;
    line-height: 0;
}

.bulle-home-featured-slider__cover-img {
    display: block;
    height: 400px;
    width: auto;
    max-width: min(100%, calc(100vw - 2.5rem));
    object-fit: contain;
}

/* Accueil — slider projets : mobile = 1 carte pleine largeur, images fluides */
@media (max-width: 639px) {
    .bulle-home-featured-slider__cover-img {
        width: 100%;
        height: auto;
        max-height: min(400px, 70vh);
        max-width: 100%;
        object-fit: contain;
    }

    .bulle-home-featured-slider__nav-btn--mobile {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Partage social — composant x-share-buttons (bouton + modale type bulle-confirm-modal) */
.bulle-share-root {
    display: block;
}

.bulle-share-buttons--float-tr {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
}

.bulle-share-modal.bulle-confirm-modal .bulle-confirm-modal__panel-wrap {
    max-width: 22rem;
}

.bulle-share-modal__panel {
    overflow: hidden;
}

.bulle-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgb(228 228 231);
}

.dark .bulle-share-modal__header {
    border-bottom-color: rgb(55 65 81);
}

.bulle-share-modal__heading {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .bulle-share-modal__heading {
    color: rgb(243 244 246);
}

.bulle-share-modal__close {
    flex-shrink: 0;
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
}

.bulle-share-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
}

.bulle-share-modal__li {
    margin: 0;
    border-bottom: 1px solid rgb(244 244 245);
}

.dark .bulle-share-modal__li {
    border-bottom-color: rgb(55 65 81);
}

.bulle-share-modal__li:last-child {
    border-bottom: none;
}

.bulle-share-modal__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 1rem;
    text-align: left;
    text-decoration: none;
    color: rgb(24 24 27);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9375rem;
    transition: background-color 0.12s ease;
}

.dark .bulle-share-modal__row {
    color: rgb(244 244 245);
}

.bulle-share-modal__row:hover {
    background-color: rgb(250 250 250);
}

.dark .bulle-share-modal__row:hover {
    background-color: rgb(39 39 42);
}

.bulle-share-modal__row:focus-visible {
    outline: 2px solid rgb(59 130 246);
    outline-offset: -2px;
}

.bulle-share-modal__row--button {
    font-family: inherit;
}

.bulle-share-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    color: #fff;
}

.bulle-share-modal__label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.bulle-share-modal__icon--native {
    background: rgb(79 70 229);
}

.bulle-share-modal__icon--whatsapp {
    background: #25d366;
}

.bulle-share-modal__icon--telegram {
    background: #26a5e4;
}

.bulle-share-modal__icon--facebook {
    background: #1877f2;
}

.bulle-share-modal__icon--messenger {
    background: #006aff;
}

.bulle-share-modal__icon--x {
    background: #000;
}

.bulle-share-modal__icon--linkedin {
    background: #0a66c2;
}

.bulle-share-modal__icon--reddit {
    background: #ff4500;
}

.bulle-share-modal__icon--pinterest {
    background: #e60023;
}

.bulle-share-modal__icon--email {
    background: rgb(63 63 70);
}

.bulle-share-modal__icon--copy {
    background: rgb(82 82 91);
}

@media (max-width: 639px) {
    .bulle-share-buttons--float-tr {
        top: 0.5rem;
        right: 0.5rem;
    }

    .bulle-share-modal.bulle-confirm-modal .bulle-confirm-modal__panel-wrap {
        max-width: min(22rem, calc(100vw - 2rem));
    }
}

/* Modale vidéo YouTube DRY (<x-modal.youtube>) — réutilise la coque .bulle-confirm-modal */
/* z-index au-dessus des autres .bulle-confirm-modal (ex. #bulle-edit-auto-pages-modal « Générer des pages avec l’IA ») */
.bulle-youtube-modal.bulle-confirm-modal {
    z-index: 100;
}

.bulle-youtube-modal.bulle-confirm-modal .bulle-confirm-modal__panel-wrap,
.bulle-youtube-modal__panel-wrap {
    max-width: 56rem;
}

.bulle-youtube-modal__frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 0.5rem;
}

.bulle-youtube-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Lien discret « Voir le tutoriel » (hub création projet) */
.bulle-project-create-hub-tutorial {
    text-align: center;
    margin-top: 1.25rem;
}

.bulle-project-create-hub-tutorial a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s ease;
}

.bulle-project-create-hub-tutorial a:hover,
.bulle-project-create-hub-tutorial a:focus {
    color: #4f46e5;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark .bulle-project-create-hub-tutorial a {
    color: #9ca3af;
}

.dark .bulle-project-create-hub-tutorial a:hover,
.dark .bulle-project-create-hub-tutorial a:focus {
    color: #a5b4fc;
}

/* Hero marketing : vidéo MP4 autoplay muette, sans contrôles (même principe que france-verification.com) */
.bulle-hero-video-shell {
    pointer-events: none;
}

.bulle-hero-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #09090b;
    box-shadow: 0 8px 30px rgba(24, 24, 27, 0.12);
}

.dark .bulle-hero-video-container {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.bulle-hero-demo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Page /help — surbrillance de la carte FAQ lors d’une ancre (#tutorial, etc.) */
@keyframes bulle-help-faq-highlight-border {
    0% {
        border-color: rgba(79, 70, 229, 0.2);
    }
    50% {
        border-color: rgba(79, 70, 229, 1);
    }
    100% {
        border-color: rgba(79, 70, 229, 0.2);
    }
}

.bulle-help-faq-highlight-target {
    animation: bulle-help-faq-highlight-border 1.5s ease-in-out 3;
    border-width: 2px !important;
}

/* ==========================================================================
   Modale « Que faire avec X crédits ? » — <x-modal.credits-value>
   Réutilise la coque .bulle-confirm-modal ; seul le tableau est spécifique.
   ========================================================================== */
.bulle-credits-value-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.5rem;
}

.bulle-credits-value-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bulle-credits-value-table th,
.bulle-credits-value-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.bulle-credits-value-table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background-color: rgba(148, 163, 184, 0.12);
}

.bulle-credits-value-table tbody tr:last-child td {
    border-bottom: 0;
}

.bulle-credits-value-num {
    text-align: right;
    white-space: nowrap;
}

.bulle-credits-value-qty {
    font-weight: 700;
    color: #4f46e5;
}

.dark .bulle-credits-value-table thead th {
    color: #cbd5f5;
    background-color: rgba(30, 41, 59, 0.6);
}

.dark .bulle-credits-value-qty {
    color: #a5b4fc;
}

/* ==========================================================================
   Centre d'aide intégré (lot L6) — bouton flottant + modale de recherche
   ========================================================================== */
.bulle-help-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 55;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 9999px;
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
    cursor: pointer;
}

.bulle-help-fab:hover {
    background-color: #4338ca;
}

.bulle-help-modal .bulle-confirm-modal__panel-wrap {
    max-width: 42rem;
}

.bulle-help-results {
    max-height: 50vh;
    overflow-y: auto;
}

.bulle-help-result {
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.bulle-help-result summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
}

.bulle-help-result__body {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #52525b;
}

.dark .bulle-help-result__body {
    color: #d4d4d8;
}

/* ==========================================================================
   Galerie communautaire (lot K) — votes, lecteur double mode
   ========================================================================== */
.bulle-vote-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #d4d4d8;
    border-radius: 9999px;
    background-color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3f3f46;
    cursor: pointer;
}

.bulle-vote-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bulle-vote-button.is-voted {
    border-color: #e11d48;
    background-color: #fff1f2;
    color: #be123c;
}

.bulle-vote-count {
    padding: 0 0.5rem;
    border-radius: 9999px;
    background-color: rgba(148, 163, 184, 0.2);
    font-size: 0.75rem;
}

/* ==========================================================================
   Outils gratuits d'acquisition (lot J) — générateur et utilitaires
   ========================================================================== */
.bulle-freetool-format {
    padding: 0.5rem 1rem;
    border: 1px solid #d4d4d8;
    border-radius: 9999px;
    background-color: #ffffff;
    font-size: 0.875rem;
    color: #3f3f46;
    cursor: pointer;
}

.bulle-freetool-format.is-active {
    border-color: #4f46e5;
    background-color: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}

.bulle-utility-preview svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
}

.bulle-utility-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background-color: #ffffff;
}

.bulle-utility-table th,
.bulle-utility-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid #e4e4e7;
}

.bulle-utility-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #71717a;
    background-color: #fafafa;
}

.bulle-utility-table tbody tr:last-child td {
    border-bottom: 0;
}

.bulle-utility-link {
    background: none;
    border: 0;
    padding: 0;
    color: #4f46e5;
    text-decoration: underline;
    font-size: 0.875rem;
    cursor: pointer;
}

.bulle-utility-chip {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d4d4d8;
    border-radius: 9999px;
    background-color: #ffffff;
    font-size: 0.8125rem;
    color: #3f3f46;
    cursor: pointer;
}

.bulle-utility-chip.is-active {
    border-color: #4f46e5;
    background-color: #4f46e5;
    color: #ffffff;
}

/* Bascule mensuel / annuel des formules d'abonnement */
.bulle-interval-switch {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 9999px;
    background-color: rgba(148, 163, 184, 0.18);
}

.bulle-interval-switch button {
    border: 0;
    background: none;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bulle-interval-switch button.is-active {
    background-color: #ffffff;
    color: #4f46e5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.bulle-interval-badge {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background-color: rgba(34, 197, 94, 0.18);
    color: #15803d;
}

.dark .bulle-interval-switch button {
    color: #cbd5f5;
}

.dark .bulle-interval-switch button.is-active {
    background-color: #1e293b;
    color: #a5b4fc;
}

.dark .bulle-interval-badge {
    color: #86efac;
}

/* Statut d'une commission d'affiliation (tableau /affiliation/transactions) */
.bulle-commission-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.bulle-commission-status--approved {
    background-color: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.bulle-commission-status--paid {
    background-color: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.bulle-commission-status--canceled {
    background-color: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.dark .bulle-commission-status {
    color: #cbd5f5;
}

.dark .bulle-commission-status--approved {
    color: #93c5fd;
}

.dark .bulle-commission-status--paid {
    color: #86efac;
}

.dark .bulle-commission-status--canceled {
    color: #fca5a5;
}

/* Lien déclencheur discret sous un plan de crédits */
.bulle-credits-value-trigger {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.8125rem;
    color: #4f46e5;
    text-decoration: underline;
    cursor: pointer;
}

.bulle-credits-value-trigger:hover {
    color: #4338ca;
}

.dark .bulle-credits-value-trigger {
    color: #a5b4fc;
}

/* ==========================================================================
   Éditeur de planche à cases (lots A et B — chantier « rattrapage Anifusion »)
   Vue : resources/views/projects/board/editor.blade.php
   JS  : public/js/bulle-board-engine.js + public/js/bulle-board-bubbles.js
   ========================================================================== */

.bulle-board {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 8rem);
    min-height: 560px;
    background: #eef0f1;
    border-radius: 0.5rem;
    overflow: hidden;
}
.dark .bulle-board { background: #0f1417; }

/* Barre supérieure */
.bulle-board-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.9rem;
    background: #fff;
    border-bottom: 1px solid #d8dee1;
    flex: 0 0 auto;
}
.dark .bulle-board-topbar { background: #172026; border-bottom-color: #2b3941; }

.bulle-board-back { font-size: 0.85rem; color: #00719d; text-decoration: none; white-space: nowrap; }
.bulle-board-back:hover { text-decoration: underline; }
.dark .bulle-board-back { color: #48b9e0; }

.bulle-board-topbar-actions { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
.bulle-board-btn-sm { padding: 0.3rem 0.6rem !important; font-size: 0.8rem !important; }

.bulle-board-status { font-size: 0.78rem; color: #6b7a82; font-variant-numeric: tabular-nums; }
.bulle-board-status.is-pending { color: #8a5f08; }
.bulle-board-status.is-ok { color: #1e7a5a; }
.bulle-board-status.is-error { color: #a8125d; }

/* Corps en trois colonnes */
.bulle-board-body { flex: 1 1 auto; display: flex; min-height: 0; }

.bulle-board-aside,
.bulle-board-panel {
    width: 250px;
    flex: 0 0 250px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.bulle-board-aside { border-right: 1px solid #d8dee1; }
.bulle-board-panel { border-left: 1px solid #d8dee1; }
.dark .bulle-board-aside,
.dark .bulle-board-panel { background: #172026; border-color: #2b3941; }

.bulle-board-section { padding: 0.8rem 0.85rem; border-bottom: 1px solid #e6eaec; }
.dark .bulle-board-section { border-bottom-color: #232f36; }
.bulle-board-section-grow { flex: 1 1 auto; min-height: 0; }

.bulle-board-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00719d;
    margin: 0 0 0.55rem;
}
.dark .bulle-board-section-title { color: #48b9e0; }
.bulle-board-section-title + .bulle-board-section-title { margin-top: 1.1rem; }

.bulle-board-hint { font-size: 0.72rem; color: #6b7a82; margin: 0.35rem 0 0.55rem; line-height: 1.45; }
.bulle-board-empty { font-size: 0.78rem; color: #6b7a82; line-height: 1.5; margin: 0; }
.bulle-board-full { width: 100%; margin-top: 0.4rem; }

/* Colonne des pages */
.bulle-board-pages { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.bulle-board-page { display: flex; align-items: center; gap: 0.3rem; border-radius: 0.3rem; }
.bulle-board-page:hover { background: #eef2f4; }
.dark .bulle-board-page:hover { background: #1d2830; }
.bulle-board-page.is-current { background: #e2f1f8; }
.dark .bulle-board-page.is-current { background: #16323d; }

.bulle-board-page-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.82rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
.bulle-board-page-num {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-content: center;
    border: 1px solid currentColor;
    border-radius: 0.2rem;
    font-family: Consolas, monospace;
    font-size: 0.68rem;
}
.bulle-board-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulle-board-page-tools { display: flex; gap: 0.1rem; opacity: 0; transition: opacity 0.12s; }
.bulle-board-page:hover .bulle-board-page-tools { opacity: 1; }
.bulle-board-page-tools button {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.2rem 0.25rem;
    font-size: 0.8rem;
    line-height: 1;
    color: #6b7a82;
}
.bulle-board-page-tools button:hover { color: #a8125d; }

/* Colonne des calques */
.bulle-board-layers { font-size: 0.8rem; }
.bulle-board-layer-group { border: 1px solid #e6eaec; border-radius: 0.3rem; margin-bottom: 0.35rem; }
.dark .bulle-board-layer-group { border-color: #232f36; }
.bulle-board-layer-group.is-selected { border-color: #00719d; }

.bulle-board-layer-panel {
    width: 100%;
    text-align: left;
    background: #f2f5f6;
    border: 0;
    cursor: pointer;
    padding: 0.35rem 0.45rem;
    font-weight: 700;
    font-size: 0.76rem;
    color: inherit;
}
.dark .bulle-board-layer-panel { background: #1d2830; }

/* En-tête d'une case dans la colonne des calques : sélection + suppression. */
.bulle-board-layer-panel-row { display: flex; align-items: center; background: #f2f5f6; }
.dark .bulle-board-layer-panel-row { background: #1d2830; }
.bulle-board-layer-panel-row .bulle-board-layer-panel { flex: 1 1 auto; width: auto; min-width: 0; background: none; }
.bulle-board-layer-panel-row .bulle-board-layer-del { padding: 0.2rem 0.45rem; }

.bulle-board-layer-row { display: flex; align-items: center; gap: 0.15rem; padding: 0 0.2rem; }
.bulle-board-layer-row.is-selected { background: #e2f1f8; }
.dark .bulle-board-layer-row.is-selected { background: #16323d; }
.bulle-board-layer-row.is-dragging { opacity: 0.4; }
.bulle-board-layer-row.is-drop-target { box-shadow: inset 0 2px 0 0 #00719d; }

.bulle-board-layer-grip {
    flex: 0 0 auto;
    cursor: grab;
    color: #b6c2c7;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0 0.1rem;
    user-select: none;
}
.bulle-board-layer-row:active .bulle-board-layer-grip { cursor: grabbing; }

.bulle-board-layer-rename {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.22rem 0.3rem;
    font-size: 0.76rem;
    border: 1px solid #00719d;
    border-radius: 0.2rem;
    background: #fff;
    color: inherit;
}
.dark .bulle-board-layer-rename { background: #1d2830; }

.bulle-board-layer {
    flex: 1 1 auto;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.3rem 0.25rem;
    font-size: 0.76rem;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bulle-board-layer-eye,
.bulle-board-layer-rename-btn,
.bulle-board-layer-lock,
.bulle-board-layer-add,
.bulle-board-layer-del {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.7rem;
    line-height: 1;
    color: #6b7a82;
    flex: 0 0 auto;
}
.bulle-board-layer-del:hover { color: #a8125d; }
.bulle-board-layer-add { white-space: nowrap; }
.bulle-board-layer-add:hover { color: #00719d; }
.bulle-board-layer-panel-row .bulle-board-layer-add { padding: 0.2rem 0.15rem; }

/* Scène */
.bulle-board-stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;   /* pas de loupe / menu de sélection au long-press */
}
.bulle-board-canvas { position: absolute; inset: 0; touch-action: none; }
/* Le canvas est focusable (espace = main temporaire) : pas de liseré de focus. */
.bulle-board-canvas:focus,
.bulle-board-canvas:focus-visible { outline: none; }
/* Boutons de l'éditeur : pas de délai ni de zoom au double-tap sur mobile. */
.bulle-board button { touch-action: manipulation; }

.bulle-board-toolbar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 0.15rem;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid #d8dee1;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(17, 26, 32, 0.14);
}
.dark .bulle-board-toolbar { background: #172026; border-color: #2b3941; }

.bulle-board-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    min-width: 58px;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: inherit;
}
.bulle-board-tool span { font-size: 0.95rem; line-height: 1; }
.bulle-board-tool em { font-style: normal; font-size: 0.62rem; letter-spacing: 0.03em; }
.bulle-board-tool:hover { background: #eef2f4; }
.dark .bulle-board-tool:hover { background: #1d2830; }
.bulle-board-tool.is-active { background: #00719d; color: #fff; }

.bulle-board-subtools {
    position: absolute;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    display: flex;
    gap: 0.2rem;
    padding: 0.25rem;
    background: #fff;
    border: 1px solid #d8dee1;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(17, 26, 32, 0.12);
}
.dark .bulle-board-subtools { background: #172026; border-color: #2b3941; }
/* `display: flex` l'emporte sur l'attribut hidden : il faut le neutraliser. */
.bulle-board-subtools[hidden] { display: none; }
.bulle-board-subtools button {
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
}
.bulle-board-subtools button.is-active { background: #00719d; color: #fff; }

.bulle-board-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.2rem;
    background: #fff;
    border: 1px solid #d8dee1;
    border-radius: 999px;
}
.dark .bulle-board-zoom { background: #172026; border-color: #2b3941; }
.bulle-board-zoom button {
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.bulle-board-zoom button:hover { background: #eef2f4; border-radius: 999px; }

/* Gabarits */
.bulle-board-layouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.bulle-board-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.25rem;
    border: 1px solid #d8dee1;
    border-radius: 0.35rem;
    background: #fff;
    cursor: pointer;
    color: inherit;
}
.dark .bulle-board-layout { background: #1d2830; border-color: #2b3941; }
.bulle-board-layout:hover { border-color: #00719d; }
.bulle-board-layout em { font-style: normal; font-size: 0.62rem; text-align: center; line-height: 1.25; }
.bulle-board-layout-thumb { display: block; line-height: 0; }
.bulle-board-layout-thumb canvas { border: 1px solid #d8dee1; }

/* Champs de l'inspecteur */
.bulle-board-field { display: block; margin-bottom: 0.5rem; font-size: 0.74rem; }
.bulle-board-field span { display: block; margin-bottom: 0.18rem; color: #6b7a82; }
.bulle-board-field select,
.bulle-board-field input[type="color"] {
    width: 100%;
    padding: 0.28rem 0.35rem;
    font-size: 0.78rem;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
    background: #fff;
    color: inherit;
}
.dark .bulle-board-field select { background: #1d2830; border-color: #2b3941; }
.bulle-board-field input[type="color"] { height: 2rem; padding: 0.1rem; cursor: pointer; }

.bulle-board-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
}

.bulle-board-range {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.4rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
}
.bulle-board-range span { grid-column: 1 / -1; color: #6b7a82; }
.bulle-board-range input[type="range"] { width: 100%; }
.bulle-board-range output {
    font-family: Consolas, monospace;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    min-width: 2.6rem;
    text-align: right;
}

.bulle-board-textarea {
    width: 100%;
    padding: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
    background: #fff;
    color: inherit;
    resize: vertical;
    margin-bottom: 0.5rem;
}
.dark .bulle-board-textarea { background: #1d2830; border-color: #2b3941; }

.bulle-board-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-bottom: 0.6rem; }
.bulle-board-grid2 .btn-bulle { font-size: 0.7rem !important; padding: 0.35rem 0.3rem !important; }

.bulle-board-inline,
.bulle-board-modes { display: flex; gap: 0.2rem; margin-bottom: 0.5rem; }
.bulle-board-inline button,
.bulle-board-modes button {
    flex: 1 1 auto;
    padding: 0.3rem 0.2rem;
    font-size: 0.72rem;
    cursor: pointer;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
    background: #fff;
    color: inherit;
}
.dark .bulle-board-inline button,
.dark .bulle-board-modes button { background: #1d2830; border-color: #2b3941; }
.bulle-board-inline button.is-active,
.bulle-board-modes button.is-active { background: #00719d; border-color: #00719d; color: #fff; }

.bulle-board-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; margin-bottom: 0.6rem; }
.bulle-board-shapes button {
    padding: 0.1rem;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
    line-height: 0;
}
.dark .bulle-board-shapes button { background: #e9edee; border-color: #2b3941; }
.bulle-board-shapes button.is-active { border-color: #00719d; box-shadow: 0 0 0 2px rgba(0, 113, 157, 0.25); }

.bulle-board-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }

/* Génération pilotée par le scénario */
.bulle-board-characters {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
}
.dark .bulle-board-characters { border-color: #2b3941; }

.bulle-board-prompt { margin-top: 0.7rem; font-size: 0.72rem; }
.bulle-board-prompt summary { cursor: pointer; color: #00719d; }
.dark .bulle-board-prompt summary { color: #48b9e0; }
.bulle-board-prompt pre {
    margin: 0.4rem 0 0;
    padding: 0.5rem;
    max-height: 220px;
    overflow: auto;
    background: #f2f5f6;
    border-radius: 0.25rem;
    font-family: Consolas, monospace;
    font-size: 0.68rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.dark .bulle-board-prompt pre { background: #1d2830; }

/* Modale d'export */
.bulle-board-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(17, 26, 32, 0.55);
}
.bulle-board-modal[hidden] { display: none; }
.bulle-board-modal-panel {
    width: min(420px, 92vw);
    padding: 1.3rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}
.dark .bulle-board-modal-panel { background: #172026; }
.bulle-board-modal-panel h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.9rem; }
/* Deux exports côte à côte, Annuler en pleine largeur dessous : pas de
   retour à la ligne bancal quand les libellés sont longs. */
.bulle-board-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.1rem;
}
.bulle-board-modal-actions .btn-bulle {
    width: 100%;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.bulle-board-modal-actions .bulle-board-modal-cancel { grid-column: 1 / -1; }
@media (max-width: 480px) {
    .bulle-board-modal-actions { grid-template-columns: 1fr; }
    .bulle-board-modal-actions .bulle-board-modal-cancel { grid-column: auto; }
}

/* L'attribut [hidden] doit gagner même sur les classes qui posent un display
   (ex. .btn-bulle en inline-flex écrase la règle UA) : sans ça, masquer un
   bouton selon la méthode de création ne fait rien. */
.bulle-board [hidden] { display: none !important; }

/* ── Méthode de création de la planche (sélecteur + cartes d'état vide) ── */
.bulle-board-method {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.3rem;
}
.bulle-board-method button {
    padding: 0.45rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background-color 120ms, color 120ms, border-color 120ms;
}
.bulle-board-method button:hover { border-color: #9ca3af; }
.bulle-board-method button.is-active {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}
.dark .bulle-board-method button { background: #1f2937; border-color: #374151; color: #d1d5db; }
.dark .bulle-board-method button.is-active { background: #3b82f6; border-color: #3b82f6; color: #fff; }

.bulle-board-choice {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 1rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
}
.bulle-board-choice[hidden] { display: none; }
.dark .bulle-board-choice { background: rgba(15, 22, 28, 0.88); }
.bulle-board-choice h3 { font-size: 1.15rem; font-weight: 700; }
.bulle-board-choice-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}
.bulle-board-choice-cards button {
    width: 200px;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 0.6rem;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 120ms, box-shadow 120ms, border-color 120ms;
}
.bulle-board-choice-cards button:hover {
    transform: translateY(-2px);
    border-color: #9ca3af;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.dark .bulle-board-choice-cards button { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.bulle-board-choice-icon { font-size: 1.6rem; }
.bulle-board-choice-cards strong { font-size: 0.9rem; }
.bulle-board-choice-cards em {
    font-style: normal;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #6b7280;
}
.dark .bulle-board-choice-cards em { color: #9ca3af; }

@media (max-width: 1100px) {
    .bulle-board-aside,
    .bulle-board-panel { width: 210px; flex-basis: 210px; }
}

/* Écrans tactiles : les outils par page (dupliquer, supprimer) n'ont pas de
   survol pour apparaître — ils restent visibles en permanence. */
@media (hover: none) {
    .bulle-board-page-tools { opacity: 1; }
}

/* Mobile : colonnes empilées, la ZONE DE TRAVAIL passe en premier sous la
   barre d'actions ; les volets Pages / réglages suivent dans le flux de la
   page (plus de double ascenseur imbriqué). */
@media (max-width: 860px) {
    .bulle-board { height: auto; min-height: 0; }
    .bulle-board-topbar { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
    .bulle-board-body { flex-direction: column; }
    .bulle-board-stage {
        order: 0;
        flex: 0 0 auto;
        height: 62vh;
        height: 62dvh;    /* barre d'URL mobile : le viewport dynamique évite la coupe */
        min-height: 320px;
    }
    .bulle-board-aside,
    .bulle-board-panel {
        order: 1;
        width: 100%;
        flex-basis: auto;
        max-height: none;
        overflow-y: visible;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #d8dee1;
    }
    .bulle-board-panel { order: 2; }
    .dark .bulle-board-aside,
    .dark .bulle-board-panel { border-top-color: #2b3941; }
}

.bulle-board-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.bulle-board-edit-actions .btn-bulle {
    font-size: 0.68rem !important;
    padding: 0.35rem 0.25rem !important;
    line-height: 1.25;
}

/* Traçabilité de génération d'une case : graine et modèle (lot C10). */
.bulle-board-trace {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: #6b7a82;
    word-break: break-all;
}
.bulle-board-trace code { font-size: 0.7rem; }

/* ══════════════════════════════════════════════════════════════════════════
 * LOT E — fiches personnages, références multiples et bibliothèque
 * Aucune de ces règles ne doit être recopiée dans une vue Blade.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Fiches personnages : références, fiche multi-angles, bibliothèque ─── */

.bulle-character-extra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.bulle-character-card {
    padding: 1.1rem;
    border: 1px solid #e2e8eb;
    border-radius: 0.5rem;
    background: #fbfcfd;
}
.dark .bulle-character-card { background: #1d2830; border-color: #2b3941; }

.bulle-character-card-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}
.bulle-character-card-help {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6b7a82;
}
.bulle-character-card-empty {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: #8a969c;
}

.bulle-character-references {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.bulle-character-reference img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid #d8dee1;
    margin-bottom: 0.3rem;
}
.dark .bulle-character-reference img { border-color: #2b3941; }
.bulle-character-reference-delete { width: 100%; font-size: 0.72rem; }

.bulle-character-reference-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.bulle-character-sheet-preview { margin-bottom: 0.7rem; }
.bulle-character-sheet-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.35rem;
    border: 1px solid #d8dee1;
}
.dark .bulle-character-sheet-preview img { border-color: #2b3941; }

.bulle-character-sheet-status {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: #6b7a82;
}
.bulle-character-sheet-status.is-error { color: #c0392b; }
.dark .bulle-character-sheet-status.is-error { color: #ff8b7a; }

.bulle-character-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Import depuis la bibliothèque, dans l'onglet Personnages du projet */

.bulle-character-library-import {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px dashed #cfd8dc;
    border-radius: 0.5rem;
}
.dark .bulle-character-library-import { border-color: #3a4750; }

.bulle-character-library-import-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.bulle-character-library-import-label { font-size: 0.85rem; color: #6b7a82; }
.bulle-character-library-import-empty { margin: 0; font-size: 0.85rem; color: #8a969c; }
.bulle-character-library-import-link { font-size: 0.85rem; color: #1f7ea1; text-decoration: underline; }

/* Page bibliothèque */

.bulle-character-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bulle-character-library-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fbfcfd;
}
.dark .bulle-character-library-item { background: #1d2830; border-color: #2b3941; }

.bulle-character-library-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #eef2f4;
}
.dark .bulle-character-library-thumb { background: #16202a; }
.bulle-character-library-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bulle-character-library-thumb-empty { font-size: 0.8rem; color: #8a969c; }

.bulle-character-library-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem 1rem;
}
.bulle-character-library-name { font-weight: 600; color: inherit; }
.bulle-character-library-excerpt {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.45;
    color: #6b7a82;
}
.bulle-character-library-meta { margin: 0; font-size: 0.78rem; color: #8a969c; }

/*
 * `[hidden]` ne suffit pas sur un `.btn-bulle` : la classe impose son propre
 * `display`, qui l'emporte sur la regle du navigateur. Sans ca, « Accepter »
 * et « Jeter » s'affichent avant meme qu'une fiche ait ete proposee.
 */
.bulle-character-sheet-actions .btn-bulle[hidden],
.bulle-character-extra [hidden] { display: none; }

/*
 * Volet « Page » de l'editeur de planche : le narratif de la page, repris de
 * l'ancien ecran d'edition, toujours visible au-dessus des reglages de case.
 */
/*
 * `.bulle-board-panel` est un conteneur flex en colonne : sans `flex-shrink: 0`
 * le volet, qui est le premier et le plus long, se fait comprimer par les
 * sections suivantes et son contenu deborde.
 */
.bulle-board-page-block {
    flex: 0 0 auto;
    border-bottom: 2px solid #e2e8eb;
    padding-bottom: 0.9rem;
}
.dark .bulle-board-page-block { border-bottom-color: #2b3941; }

.bulle-board-page-block .bulle-board-field input[type="text"],
.bulle-board-page-block .bulle-board-field textarea {
    width: 100%;
    padding: 0.3rem 0.4rem;
    font-size: 0.76rem;
    line-height: 1.35;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
    background: #fff;
    color: inherit;
    resize: vertical;
}
.dark .bulle-board-page-block .bulle-board-field input[type="text"],
.dark .bulle-board-page-block .bulle-board-field textarea {
    background: #1d2830;
    border-color: #2b3941;
}

.bulle-board-page-block-characters {
    max-height: 9rem;
    overflow-y: auto;
    padding: 0.3rem 0.4rem;
    border: 1px solid #d8dee1;
    border-radius: 0.25rem;
}
.dark .bulle-board-page-block-characters { border-color: #2b3941; }

/* Boutons masques tant qu'aucune image n'est proposee. */
.bulle-board-page-block .btn-bulle[hidden],
.bulle-board-page-block [hidden] { display: none; }