@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
    --color-primary: #D6B4FC;
}

body {
    background-color: #111 !important;
    background-image: url('/user/pages/01.accueil/01._hero-banner/site-banner.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    position: relative;
    z-index: 1;
    font-family: 'Open Sans', sans-serif !important;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    /* Layer semi-transparent très sombre */
    z-index: -1;
}

/* Header */

#header {
    font-family: "Amatic SC", sans-serif !important;
    font-size: 1.1rem !important;
    border-bottom: 2px solid #fff !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* Lègere teinte pour le header */
    backdrop-filter: blur(10px);
    /* Effet verre dépoli */
}

/* Empêcher le fond blanc au scroll */
#header.scrolled {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

#header a,
#header.scrolled a,
#header.scrolled .logo a {
    color: #fff !important;
}

#header.scrolled a:hover,
#header.scrolled a.active {
    color: var(--color-primary) !important;
}

.header-dark #header:not(.scrolled) .dropmenu ul ul a {
    color: #fff !important;
}

.dropmenu ul li a:before {
    margin-right: -25px !important;
}

.dropmenu ul li ul li a:before {
    margin-right: -10px !important;
}


/* Réduire l'espace entre le menu et le titre */
#body-wrapper {
    padding-top: 4rem !important;
}

#body-wrapper .section {
    padding-top: 1rem !important;
}

/* Hero banner */

.hero {
    padding-top: 8rem;
    padding-bottom: 6rem;
    background-position: center 40% !important;
}

.hero p {
    background: rgba(0, 0, 0, 0.7) !important;
    font-family: "Amatic SC", sans-serif !important;
    color: #fff !important;

    font-size: 2rem;
    padding: 1rem !important;
}

.hero p:nth-child(2) {
    background: transparent !important;
    font-size: 1.5rem !important;
    color: var(--color-primary) !important;
    font-weight: bold !important;
}

#to-start {
    display: none !important;
}

/* Footer */

#footer {
    background: transparent !important;
    padding: 2rem 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    color: #fff !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}

.social-icons {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
}

.social-icons a i {
    font-size: 1.5rem;
    color: #fff !important
}

/* Champs de formulaire (Spécifique à Spectre / Quark) */
.form-input {
    background: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 0.5rem;
}

.form-input:focus {
    box-shadow: 0 0 0 2px rgba(158, 92, 230, 0.3) !important;
    /* violet mystique */
    border-color: var(--color-primary) !important;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Styling global des titres de page (Contact, Galerie, Romans) */

#body-wrapper h1,
#body-wrapper h2.title.text-center {
    color: var(--color-primary) !important;
    font-family: "Amatic SC", sans-serif !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important;
    font-weight: normal !important;
    font-size: 2.5rem !important;
    scroll-margin-top: 6rem;
    /* Empêche le titre d'être caché par le header lors du scroll */
}

#contact-form-wrapper,
.form-wrapper {
    max-width: 600px !important;
    margin: 0 auto !important;
}

.form-label {
    color: #fff !important;
}

button[type="submit"] {
    width: 100% !important;
    height: 40px !important;
    align-items: center;
    background: transparent !important;
    color: white !important;
    font-size: 1.1rem !important;
    border: 1px solid #fff !important;
    cursor: pointer !important;
}

button[type="submit"]:hover {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* === LANDING SCREEN (HOME PAGE) === */
body.landing-active {
    overflow: hidden !important;
}

#landing-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    /* Laisse le fond étoilé via body::before afficher */
    transition: opacity 1s ease-in-out;
}

.landing-content {
    text-align: center;
    animation: fadeIn 2s ease-in;
}

.landing-title {
    color: var(--color-primary);
    font-family: 'Open Sans', sans-serif;
    font-size: 4rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 5px 15px rgba(0, 0, 0, 0.8);
}

.landing-subtitle {
    color: #fff;
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 0.5rem;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
    font-family: 'Open Sans', sans-serif;
}

.landing-signature {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 3rem;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}

#enter-universe-btn {
    cursor: pointer;
}

/* Hide content when landing is active */
body.landing-active #page-wrapper.hidden-on-landing,
body.landing-active #footer {
    opacity: 0;
    pointer-events: none;
}

#page-wrapper.hidden-on-landing,
#footer {
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* News & Events Section Padding */
.news-section {
    padding: 1.5rem 0 1rem 0 !important;
    background-color: transparent !important;
}

.modular-evenements {
    padding: 1.5rem 0 4rem 0 !important;
    background-color: transparent !important;
}

/* Elegant News Card */
.news-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-left: 3px solid var(--color-primary) !important;
    border-radius: 0 !important;
    color: #fff !important;
    height: 100% !important;
    padding: 1.8rem 1.5rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important;
}

.news-date {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-family: 'Open Sans', sans-serif;
}

.news-title {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.news-card .card-body {
    color: #ccc !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
}

.news-read-more {
    color: #fff !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.news-read-more:hover {
    color: var(--color-primary) !important;
    transform: translateX(5px);
}

/* Modal Customization */
.modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Card Summary Clamp */
.news-card-summary {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.news-card-summary p {
    margin-bottom: 0 !important;
}

/* Romans Layout Premium Editorial */
.novel-container {
    background: transparent !important;
    padding: 1rem 2rem 1rem 0;
    transition: all 0.3s ease;
    border: none !important;
    text-align: left;
}

.book-cover {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.8);
    margin-bottom: 2rem;
    transition: transform 0.5s ease;
    display: block;
}

.book-cover:hover {
    transform: scale(1.02) translateY(-5px);
}

.novel-title {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-shadow: none;
}

.novel-subtitle {
    color: var(--color-primary);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.novel-decorator {
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    margin-bottom: 1.5rem;
}

.novel-date {
    color: var(--color-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-family: 'Open Sans', sans-serif;
}

.novel-description {
    color: #aaa;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Modale */
.novel-description a,
.modal-body a {
    color: var(--color-primary) !important;
    text-decoration: underline;
}

.btn-japan {
    display: inline-block;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0.6rem 2rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-japan:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    text-decoration: none;
    box-shadow: none;
}

/* Sub-menu (Dropmenu) Aesthetic Redesign */
/* On garde le positionnement natif de Quark (qui gère très bien le multi-niveaux), et on change juste le look ! */

.dropmenu ul ul {
    background-color: rgba(12, 12, 12, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 2px solid var(--color-primary) !important;
    border-radius: 4px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important;
    padding: 0 !important;
    min-width: 220px !important;
}

/* Retrait de la petite fleche native de Quark si elle existe, ou de la mienne qui cassait tout */
.dropmenu ul ul::before {
    display: none !important;
}

.dropmenu ul ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dropmenu ul ul li:last-child {
    border-bottom: none !important;
}

.dropmenu ul ul li a {
    color: #ffffff !important;
    opacity: 1 !important;
    padding: 0.8rem 1.2rem !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

/* Hover effect */
.dropmenu ul ul li a:hover {
    background-color: rgba(158, 92, 230, 0.25) !important;
    color: #fff !important;
    padding-left: 1.6rem !important;
}

/* Couleur pour l'élément actif */
.dropmenu ul ul li.active>a {
    color: #ffffff !important;
    background-color: rgba(158, 92, 230, 0.3) !important;
}

/* SOUS-SOUS-MENU (Niveau 3) Fly-out aligné verticalement */
.dropmenu ul ul li {
    position: relative !important;
}

.dropmenu ul ul ul {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin: 0 !important;
    margin-top: -2px !important;
    /* Aligner parfaitement avec la bordure supérieure de l'élément parent */
    margin-left: 2px !important;
    /* Léger décalage horizontal */
    min-width: 220px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 2px solid var(--color-primary) !important;
    background-color: rgba(12, 12, 12, 0.96) !important;
    border-radius: 4px !important;
    padding: 0 !important;
}

/* Animations de fushion des sous-menus */
.dropmenu ul li:hover>ul {
    animation: menuFadeIn 0.3s ease forwards !important;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        margin-top: 10px;
    }

    to {
        opacity: 1;
        margin-top: 20px;
    }
}

/* Masonry Gallery CSS */
.masonry-grid {
    column-count: 3;
    column-gap: 1.5rem;
    padding-bottom: 3rem;
}

@media (max-width: 900px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

.masonry-item {
    display: block;
    break-inside: avoid;
    margin-bottom: 1.5rem;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background: #111;
    cursor: pointer;
    text-decoration: none;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.masonry-item:hover img {
    transform: scale(1.03);
    filter: brightness(0.6);
}

.masonry-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1rem 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    pointer-events: none;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.masonry-item:hover .masonry-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Lexique Dynamique - Étape 2 */
.lexicon-term {
    color: var(--color-primary) !important;
    border-bottom: 2px dotted rgba(214, 180, 252, 0.5);
    cursor: help;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.lexicon-term:hover {
    background: rgba(214, 180, 252, 0.1);
    border-bottom-color: var(--color-primary);
}

/* Tooltip Verre Dépoli (Glassmorphism) */
.lexicon-term::after {
    content: attr(data-tippy-content);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    /* Effet Verre Opaque Premium */
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);

    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    width: 260px;
    white-space: normal;
    text-align: left;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Triangle du tooltip */
.lexicon-term::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1) transparent transparent transparent;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lexicon-term:hover::after,
.lexicon-term:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Responsive Tooltip */
@media (max-width: 768px) {
    .lexicon-term::after {
        width: 220px;
        font-size: 0.85rem;
    }
}

/* Music Control Button */
.music-btn {
    opacity: 0.8;
    transform: scale(1);
}

.music-btn:hover {
    opacity: 1 !important;
    transform: scale(1.1);
    color: #fff !important;
    text-shadow: 0 0 10px var(--color-primary);
}

.music-btn i {
    transition: transform 0.3s ease;
}

@media (max-width: 840px) {
    .audio-control-wrapper {
        margin-left: 0.5rem !important;
    }

    .music-btn {
        font-size: 1rem !important;
    }
}

/* Leaflet Dark Theme */
.leaflet-container {
    background: #111 !important;
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.leaflet-tile {
    filter: brightness(0.6) saturate(0.5);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid var(--color-primary);
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    background: #333 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Chapter Light Mode */
.chapter-container.light-mode {
    background: rgba(255, 255, 255, 0.95) !important;
}

.chapter-container.light-mode .flex-lexicon-enabled {
    color: #111 !important;
}

.chapter-container.light-mode .flex-lexicon-enabled h1,
.chapter-container.light-mode .flex-lexicon-enabled h2,
.chapter-container.light-mode .flex-lexicon-enabled h3,
.chapter-container.light-mode .flex-lexicon-enabled h4,
.chapter-container.light-mode .flex-lexicon-enabled p {
    color: #111 !important;
}

.chapter-container.light-mode .chapter-sticky-header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.chapter-container.light-mode .chapter-sticky-header h1 {
    color: #111 !important;
    text-shadow: none !important;
}

.chapter-container.light-mode .chapter-sticky-header h2 {
    color: #666 !important;
}

.chapter-container.light-mode .btn-japan {
    border-color: #111 !important;
    color: #111 !important;
}

.chapter-container.light-mode .btn-japan:hover {
    background: #111 !important;
    color: #fff !important;
}

.chapter-container.light-mode .lexicon-term {
    border-bottom: 2px dotted rgba(158, 92, 230, 0.8) !important;
}

/* Floating Theme Toggle */
.floating-theme-toggle {
    position: fixed;
    top: 5.5rem;
    right: 2rem;
    z-index: 999;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    font-size: 1.2rem !important;
}

.floating-theme-toggle:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    transform: scale(1.1);
}

.floating-theme-toggle.light-mode {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #111 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 1200px) {
    .floating-theme-toggle {
        right: 1rem;
    }
}

@media (max-width: 768px) {
    .floating-theme-toggle {
        top: 5rem;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 1rem !important;
    }
}

/* Welcome Section (Home Page) */
.welcome-section {
    padding: 4rem 1.5rem 1rem 1.5rem !important;
    background-color: transparent !important;
    text-align: center !important;
}

.welcome-section h1 {
    font-family: "Amatic SC", sans-serif !important;
    font-size: 3.5rem !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 2.5rem !important;
    letter-spacing: 2px !important;
    font-weight: normal !important;
}

.welcome-section p {
    color: rgba(240, 240, 240, 0.92) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    max-width: 850px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.9) !important;
    font-weight: 300 !important;
}

.welcome-section p:last-child {
    margin-bottom: 0.5rem !important;
}

/* Custom Logo Styling */
#header:not(.scrolled) {
    height: 4.6rem !important;
}

.navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.navbar-brand img {
    width: 70px !important;
    height: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    transition: width 0.3s ease, height 0.3s ease, max-height 0.3s ease !important;
}

#header.scrolled .navbar-brand img {
    width: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
}


/* ==========================================================================
   AMÉLIORATIONS DESIGN : JAPON TRADITIONNEL & MYSTIQUE
   ========================================================================== */

/* 1. Fond du site animé (Respiration onirique + Esprits / Hitodama) */
#mystic-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: #111;
}

#mystic-bg-image {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    background-image: url('/user/pages/01.accueil/01._hero-banner/site-banner.jpg');
    background-size: cover;
    background-position: center center;
    animation: mysticBgBreath 36s ease-in-out infinite alternate;
    will-change: transform;
}

#mystic-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 25%, rgba(214, 180, 252, 0.08) 0%, rgba(0, 0, 0, 0.68) 65%, rgba(0, 0, 0, 0.85) 100%);
}

/* Contraste renforcé (halo d'encre noire + nuage d'encre subtil localisé sous le titre) */
h2.title.text-center,
#body-wrapper h1,
#body-wrapper h2.title.text-center {
    color: var(--color-primary) !important;
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0.3rem 2.5rem !important;
    background: radial-gradient(ellipse at center, rgba(10, 8, 14, 0.58) 0%, rgba(10, 8, 14, 0.28) 52%, transparent 76%) !important;
    border-radius: 999px !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 -1px 2px rgba(0, 0, 0, 0.9),
        0 3px 10px rgba(0, 0, 0, 0.95),
        0 0 22px rgba(0, 0, 0, 0.9) !important;
}

.landing-title,
.landing-signature {
    color: var(--color-primary) !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 3px 10px rgba(0, 0, 0, 0.95),
        0 0 22px rgba(0, 0, 0, 0.9) !important;
}

#mystic-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes mysticBgBreath {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.045) translate3d(-1%, -0.8%, 0);
    }
    100% {
        transform: scale(1.08) translate3d(1%, 0.6%, 0);
    }
}

/* 2. Séparateurs mystiques japonais (Style Mizuhiki / Losange sacré) */
.japanese-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 520px;
    margin: 2rem auto 0.5rem auto;
    user-select: none;
}

.japanese-divider .divider-line {
    flex: 1;
    height: 1px;
    position: relative;
}

.japanese-divider .divider-line.left {
    background: linear-gradient(to right, transparent, rgba(214, 180, 252, 0.65));
}

.japanese-divider .divider-line.right {
    background: linear-gradient(to left, transparent, rgba(214, 180, 252, 0.65));
}

.japanese-divider .divider-symbol {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    line-height: 1;
}

.japanese-divider .divider-knot {
    color: var(--color-primary);
    font-size: 1.15rem;
    line-height: 1;
    text-shadow: 0 0 12px rgba(214, 180, 252, 0.85);
    animation: knotPulse 4s ease-in-out infinite alternate;
}

@keyframes knotPulse {
    from {
        opacity: 0.75;
        text-shadow: 0 0 6px rgba(214, 180, 252, 0.4);
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        text-shadow: 0 0 14px rgba(214, 180, 252, 0.95);
        transform: scale(1.08);
    }
}

/* 3. Cartes Verre Dépoli Mystique (sans coins techniques) & Typographie harmonisée */
.shoji-card {
    position: relative !important;
    background: rgba(17, 17, 17, 0.58) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    color: #fff !important;
    height: 100% !important;
    padding: 1.25rem 1.35rem !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                background 0.4s ease !important;
    display: flex;
    flex-direction: column;
}

.news-card.shoji-card {
    border-left: 3px solid var(--color-primary) !important;
    background:
        linear-gradient(90deg, rgba(214, 180, 252, 0.08) 0%, transparent 45%),
        rgba(17, 17, 17, 0.58) !important;
}

.event-card.shoji-card {
    border-top: 3px solid var(--color-primary) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 180, 252, 0.12) 0%, transparent 65%),
        rgba(17, 17, 17, 0.58) !important;
}

.event-card .card-header {
    text-align: center !important;
    padding-bottom: 0.55rem !important;
    border-bottom: 1px solid rgba(214, 180, 252, 0.14) !important;
}

.event-card .event-date {
    display: inline-block !important;
    padding: 0.15rem 0.65rem !important;
    border: 1px solid rgba(214, 180, 252, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(214, 180, 252, 0.06) !important;
    margin-bottom: 0.45rem !important;
}

.event-card .card-footer {
    text-align: center !important;
}

.shoji-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(24, 20, 32, 0.72) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.75) !important;
}

/* Typographie & espacements harmonisés des cartes (Actualités & Événements) */
.news-date,
.event-date {
    color: var(--color-primary) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 0.35rem !important;
    font-family: 'Open Sans', sans-serif !important;
}

.news-title,
.event-title {
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.28 !important;
}

.event-location {
    color: #fff !important;
    opacity: 0.65 !important;
    font-size: 0.82rem !important;
    font-style: italic !important;
    margin-bottom: 0.2rem !important;
}

.news-card .card-body {
    color: rgba(235, 235, 235, 0.88) !important;
    font-size: 0.92rem !important;
    line-height: 1.48 !important;
    font-weight: 300 !important;
    margin-bottom: 0.9rem !important;
}

.card-summary-clamp {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: rgba(235, 235, 235, 0.88) !important;
    font-size: 0.92rem !important;
    line-height: 1.48 !important;
    font-weight: 300 !important;
}

.card-summary-clamp p {
    margin-bottom: 0 !important;
}

.news-read-more {
    font-size: 0.9rem !important;
}

.event-card .btn-japan {
    font-size: 0.9rem !important;
    padding: 0.4rem 1.2rem !important;
}

.event-map .leaflet-container {
    background: #111;
}


/* ==========================================================================
   4. MODALES ACTUALITÉS & ÉVÉNEMENTS (STYLE ESTAMPE / KAKEJIKU MYSTIQUE)
   ========================================================================== */

.mystic-modal .modal-overlay {
    background: rgba(5, 4, 8, 0.78) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.mystic-modal-container {
    position: relative !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 180, 252, 0.1) 0%, transparent 60%),
        rgba(14, 13, 18, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(214, 180, 252, 0.25) !important;
    border-radius: 2px !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.9),
        0 0 35px rgba(214, 180, 252, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    max-width: 640px !important;
    padding: 0 !important;
    overflow: hidden !important;
    animation: modalUnroll 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.mystic-modal-container.mystic-modal-lg {
    max-width: 860px !important;
}

@keyframes modalUnroll {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Barre supérieure lumineuse façon rouleau Kakejiku */
.mystic-modal-top-bar {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    opacity: 0.9;
}

/* Bouton de fermeture en médaillon circulaire */
.mystic-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.75) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: all 0.3s ease;
    z-index: 5;
}

.mystic-modal-close:hover {
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
    background: rgba(214, 180, 252, 0.1);
    transform: rotate(90deg);
    box-shadow: 0 0 12px rgba(214, 180, 252, 0.3);
}

/* En-tête de la modale */
.mystic-modal-header {
    padding: 1.8rem 2.2rem 0.6rem 2.2rem !important;
    text-align: center;
}

.mystic-modal-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.mystic-badge {
    color: var(--color-primary);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Open Sans', sans-serif;
    padding: 0.2rem 0.75rem;
    border: 1px solid rgba(214, 180, 252, 0.28);
    background: rgba(214, 180, 252, 0.06);
    border-radius: 999px;
}

.mystic-meta-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.mystic-location-pill {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.84rem;
    font-style: italic;
    font-family: 'Open Sans', sans-serif;
}

.mystic-location-pill i {
    color: var(--color-primary);
    margin-right: 4px;
}

.mystic-modal-title {
    color: #ffffff !important;
    font-family: "Amatic SC", sans-serif !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    margin: 0.2rem 0 0.8rem 0 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 18px rgba(214, 180, 252, 0.25) !important;
}

.mystic-modal-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: 280px;
    margin: 0 auto;
}

.mystic-modal-divider .divider-line {
    flex: 1;
    height: 1px;
}

.mystic-modal-divider .divider-line.left {
    background: linear-gradient(to right, transparent, rgba(214, 180, 252, 0.5));
}

.mystic-modal-divider .divider-line.right {
    background: linear-gradient(to left, transparent, rgba(214, 180, 252, 0.5));
}

.mystic-modal-divider .divider-knot {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(214, 180, 252, 0.7);
}

/* Corps de la modale */
.mystic-modal-body {
    padding: 1.4rem 2.2rem 1.6rem 2.2rem !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
}

.mystic-modal-content {
    color: rgba(240, 240, 240, 0.92) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

.mystic-modal-content p:last-child {
    margin-bottom: 0 !important;
}

.mystic-modal-content strong,
.mystic-modal-content b {
    color: #fff !important;
    font-weight: 600 !important;
}

.mystic-modal-content em,
.mystic-modal-content i {
    color: var(--color-primary) !important;
}

/* Séparation verticale douce entre description et carte dans la modale Événements */
@media (min-width: 841px) {
    .mystic-event-col-left {
        border-right: 1px solid rgba(214, 180, 252, 0.14);
        padding-right: 1.5rem !important;
    }
}

.mystic-map-wrapper {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(214, 180, 252, 0.22);
    padding: 0.65rem;
    border-radius: 2px;
}

.mystic-map-label {
    color: var(--color-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0.5rem;
    text-align: center;
}

.mystic-event-map {
    height: 240px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Pied de la modale */
.mystic-modal-footer {
    padding: 1rem 2.2rem 1.4rem 2.2rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    margin-top: 0 !important;
}

.mystic-modal-footer .btn-japan {
    font-size: 0.88rem !important;
    padding: 0.42rem 1.4rem !important;
}

.mystic-modal-footer .mystic-btn-primary {
    border-color: rgba(214, 180, 252, 0.55) !important;
    color: var(--color-primary) !important;
    background: rgba(214, 180, 252, 0.08) !important;
}

.mystic-modal-footer .mystic-btn-primary:hover {
    background: rgba(214, 180, 252, 0.2) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}


/* ==========================================================================
   5. SECTION DERNIERS CHAPITRES PUBLIÉS (HOME PAGE)
   ========================================================================== */

.modular-chapitres,
.chapitres-section {
    padding: 1.5rem 0 1rem 0 !important;
    background-color: transparent !important;
}

.chapter-card.shoji-card {
    border-top: 1px solid rgba(214, 180, 252, 0.45) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    background:
        linear-gradient(180deg, rgba(214, 180, 252, 0.06) 0%, transparent 35%, rgba(214, 180, 252, 0.05) 100%),
        rgba(17, 17, 17, 0.58) !important;
    overflow: hidden !important;
}

.card-watermark {
    position: absolute;
    top: -0.6rem;
    right: 0.6rem;
    font-family: "Amatic SC", sans-serif;
    font-size: 4.5rem;
    color: var(--color-primary);
    opacity: 0.08;
    pointer-events: none;
    line-height: 1;
    user-select: none;
}

.chapter-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.chapter-book-badge {
    color: var(--color-primary) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-family: 'Open Sans', sans-serif !important;
    background: rgba(214, 180, 252, 0.08);
    border-left: 2px solid var(--color-primary);
    padding: 0.15rem 0.55rem;
}

.chapter-date-pill {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.5px;
}

.chapter-excerpt-quote {
    font-style: italic !important;
    border-left: 1px solid rgba(214, 180, 252, 0.35) !important;
    padding-left: 0.75rem !important;
    color: rgba(240, 240, 240, 0.85) !important;
}

.chapter-card .chapter-read-btn {
    font-size: 0.88rem !important;
    padding: 0.4rem 1.2rem !important;
    width: 100% !important;
    text-align: center !important;
}


/* ==========================================================================
   6. PAGE BOUTIQUE & CARTES ARTICLES
   ========================================================================== */

.boutique-card.shoji-card {
    border-top: 2px solid var(--color-primary) !important;
    padding: 1.1rem 1.25rem 1.3rem 1.25rem !important;
}

.boutique-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 255px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none !important;
}

.boutique-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.boutique-card:hover .boutique-image {
    transform: scale(1.04);
}

.boutique-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(214, 180, 252, 0.45);
    font-size: 0.85rem;
    font-style: italic;
}

.boutique-image-placeholder i {
    font-size: 2.2rem;
}

.boutique-price-tag {
    position: absolute;
    bottom: 0.65rem;
    right: 0.65rem;
    background: rgba(14, 12, 20, 0.9);
    backdrop-filter: blur(8px);
    color: var(--color-primary);
    border: 1px solid rgba(214, 180, 252, 0.5);
    padding: 0.22rem 0.75rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.boutique-card-footer {
    padding: 0 !important;
    margin-top: auto !important;
    padding-top: 1.1rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.boutique-details-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.82rem;
    text-align: center;
    text-decoration: underline !important;
    transition: color 0.3s ease;
}

.boutique-details-link:hover {
    color: var(--color-primary) !important;
}

.boutique-contact-btn {
    width: 100% !important;
    text-align: center !important;
    font-size: 0.88rem !important;
    padding: 0.48rem 1rem !important;
    border-color: rgba(214, 180, 252, 0.45) !important;
    background: rgba(214, 180, 252, 0.08) !important;
}

.boutique-contact-btn:hover {
    background: rgba(214, 180, 252, 0.2) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}

.boutique-modal-img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border: 1px solid rgba(214, 180, 252, 0.25);
    background: rgba(0, 0, 0, 0.4);
    padding: 0.4rem;
}


/* Barre de bascule Mosaïque / Liste (Boutique) */
.boutique-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.boutique-view-switcher {
    display: inline-flex;
    background: rgba(17, 17, 17, 0.65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(214, 180, 252, 0.25);
    padding: 0.2rem;
    gap: 0.2rem;
}

.boutique-view-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.boutique-view-btn:hover {
    color: #fff;
}

.boutique-view-btn.active {
    background: rgba(214, 180, 252, 0.16);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px rgba(214, 180, 252, 0.4);
}

/* Prix affiché uniquement en mode Liste */
.boutique-list-price {
    display: none;
}

/* Mode Liste (sans image) */
#boutique-items-container.boutique-list-mode .boutique-item-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 1rem !important;
}

#boutique-items-container.boutique-list-mode .boutique-image-wrapper {
    display: none !important;
}

#boutique-items-container.boutique-list-mode .boutique-card.shoji-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
    padding: 1.1rem 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid var(--color-primary) !important;
}

#boutique-items-container.boutique-list-mode .boutique-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

#boutique-items-container.boutique-list-mode .boutique-card-header {
    margin-top: 0 !important;
}

#boutique-items-container.boutique-list-mode .boutique-card-body {
    margin-top: 0.25rem !important;
}

#boutique-items-container.boutique-list-mode .card-summary-clamp {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

#boutique-items-container.boutique-list-mode .boutique-card-footer {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.2rem !important;
}

#boutique-items-container.boutique-list-mode .boutique-list-price {
    display: inline-block;
    color: var(--color-primary);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.25rem 0.85rem;
    border: 1px solid rgba(214, 180, 252, 0.35);
    background: rgba(214, 180, 252, 0.08);
    white-space: nowrap;
}

#boutique-items-container.boutique-list-mode .boutique-details-link {
    white-space: nowrap;
}

#boutique-items-container.boutique-list-mode .boutique-contact-btn {
    width: auto !important;
    white-space: nowrap;
    padding: 0.45rem 1.15rem !important;
}

@media (max-width: 768px) {
    #boutique-items-container.boutique-list-mode .boutique-card.shoji-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    #boutique-items-container.boutique-list-mode .boutique-card-footer {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between !important;
    }
}


/* Gestion Rupture de Stock (Boutique) */
.boutique-stock-badge.out-of-stock {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    background: rgba(18, 16, 22, 0.92);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.2rem 0.65rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
}

.out-of-stock-card .boutique-image,
.out-of-stock-card .boutique-image-placeholder {
    filter: none;
    opacity: 1;
}

.boutique-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.boutique-list-stock-badge {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.12rem 0.55rem;
    margin-bottom: 0.45rem;
}

.boutique-contact-btn.is-disabled,
.boutique-contact-btn:disabled {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

.boutique-modal-stock-out {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}


/* ==========================================================================
   7. BOUTON & MODALE DE COMMENTAIRE PRIVÉ (FIN DE CHAPITRE)
   ========================================================================== */

.chapter-bottom-actions {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.chapter-comment-trigger {
    border-color: rgba(214, 180, 252, 0.5) !important;
    background: rgba(214, 180, 252, 0.08) !important;
    color: var(--color-primary) !important;
}

.chapter-comment-trigger:hover {
    background: rgba(214, 180, 252, 0.2) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}

.chapter-comment-intro {
    color: rgba(240, 240, 240, 0.85);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    text-align: center;
}

.chapter-comment-intro strong {
    color: #fff;
}

.chapter-comment-intro em {
    color: var(--color-primary);
}

.chapter-comment-form .form-label {
    font-size: 0.85rem;
    color: var(--color-primary) !important;
    margin-bottom: 0.3rem;
    display: block;
    text-align: left;
}

.chapter-comment-form .form-input {
    border-color: rgba(214, 180, 252, 0.28) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    font-size: 0.92rem;
    width: 100%;
}

.chapter-comment-feedback {
    padding: 0.75rem 1rem;
    border-radius: 2px;
    font-size: 0.9rem;
    margin-top: 0.8rem;
    text-align: center;
}

.chapter-comment-feedback.is-success {
    background: rgba(214, 180, 252, 0.14);
    border: 1px solid var(--color-primary);
    color: #fff;
}

.chapter-comment-feedback.is-error {
    background: rgba(220, 60, 60, 0.18);
    border: 1px solid rgba(255, 100, 100, 0.6);
    color: #ffb3b3;
}


/* ==========================================================================
   8. BANNIÈRE HORIZONTALE DES CONTES & SOUS-CONTES (FONDU BORDS SANS OPACITY)
   ========================================================================== */

.chapter-list-banner-wrapper {
    max-width: 980px;
    margin: 0 auto 2.5rem auto;
    position: relative;
    overflow: hidden;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
}

.chapter-list-banner-img {
    width: 100%;
    max-height: 310px;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 1 !important;
    /* Intégration fondue sur les 4 bords dans le décor sans réduire l'opacité de l'image */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
}


/* ==========================================================================
   9. VUE MOSAÏQUE & VUE LISTE DES CHAPITRES / CONTES (AVEC MINIATURE OPTIONNELLE)
   ========================================================================== */

.chapter-card-link {
    display: block;
    height: 100%;
    text-decoration: none !important;
}

.chapter-list-card.shoji-card {
    padding: 1.15rem 1.25rem 1.3rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    height: 100% !important;
}

.chapter-thumb-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 1rem;
}

.chapter-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.chapter-list-card:hover .chapter-thumb-img {
    transform: scale(1.05);
}

.chapter-thumb-wrapper.is-placeholder {
    background:
        radial-gradient(circle at 50% 50%, rgba(214, 180, 252, 0.12) 0%, rgba(10, 8, 14, 0.65) 75%),
        rgba(14, 12, 18, 0.6);
    border: 1px solid rgba(214, 180, 252, 0.14);
}

.chapter-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.chapter-thumb-placeholder .placeholder-knot {
    color: var(--color-primary);
    font-size: 1.8rem;
    opacity: 0.7;
    text-shadow: 0 0 12px rgba(214, 180, 252, 0.6);
}

.chapter-thumb-placeholder .placeholder-label {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.chapter-card-main {
    flex: 1 1 auto;
}

.chapter-item-title {
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    margin: 0 !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.chapter-item-subtitle {
    color: rgba(255, 255, 255, 0.68);
    font-style: italic;
    margin-top: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.4;
}

.chapter-item-excerpt {
    margin-top: 0.65rem;
    border-left: 1px solid rgba(214, 180, 252, 0.3);
    padding-left: 0.65rem;
    font-style: italic;
    font-size: 0.88rem !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

.chapter-card-footer {
    margin-top: 1.1rem;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chapter-grid-btn {
    width: 100% !important;
    text-align: center !important;
    font-size: 0.86rem !important;
    padding: 0.42rem 1rem !important;
}

.chapter-list-arrow {
    display: none;
    color: var(--color-primary);
    font-size: 1.35rem;
    transition: transform 0.25s ease;
}

.chapter-list-card:hover .chapter-list-arrow {
    transform: translateX(4px);
}

/* Mode Liste (sans miniature, affichage horizontal épuré) */
#chapter-items-container.chapter-list-mode .chapter-item-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 1.15rem !important;
}

#chapter-items-container.chapter-list-mode .chapter-thumb-wrapper,
#chapter-items-container.chapter-list-mode .chapter-grid-meta,
#chapter-items-container.chapter-list-mode .chapter-item-excerpt,
#chapter-items-container.chapter-list-mode .chapter-grid-btn {
    display: none !important;
}

#chapter-items-container.chapter-list-mode .chapter-list-card.shoji-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.6rem !important;
    gap: 1.2rem !important;
}

#chapter-items-container.chapter-list-mode .chapter-item-title {
    font-size: 1.22rem !important;
}

#chapter-items-container.chapter-list-mode .chapter-card-footer {
    margin-top: 0 !important;
    flex: 0 0 auto;
}

#chapter-items-container.chapter-list-mode .chapter-list-arrow {
    display: inline-block;
}


/* ==========================================================================
   10. MENU BURGER MOBILE & OVERLAY (COULEUR VIOLETTE & LOGO DU SITE)
   ========================================================================== */

/* Barres du menu burger (fermé et ouvert en croix) en violet #D6B4FC */
.mobile-menu .button_container span,
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom {
    background: var(--color-primary) !important;
    box-shadow: 0 0 8px rgba(214, 180, 252, 0.45);
}

/* Logo du site à l'ouverture du menu mobile */
.overlay .mobile-logo {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.4rem 0.5rem 1.4rem;
}

.overlay .mobile-logo .navbar-brand {
    height: auto !important;
}

.overlay .mobile-logo .navbar-brand img {
    width: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

/* Liens et puces du menu mobile en violet / blanc harmonisé */
.overlay-menu .treemenu li {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 2px solid rgba(214, 180, 252, 0.35);
    padding: 0.55rem 0.6rem !important;
    margin-bottom: 4px !important;
}

.overlay-menu .treemenu li a {
    color: var(--color-primary) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1rem !important;
    transition: color 0.25s ease !important;
}

.overlay-menu .treemenu li a:hover,
.overlay-menu .treemenu li a:focus,
.overlay-menu .treemenu li a.active {
    color: #ffffff !important;
}

.overlay-menu .treemenu .toggler {
    color: var(--color-primary) !important;
}


/* ==========================================================================
   11. LECTURE DE CHAPITRE : Z-INDEX, MODE CLAIR SANS OMBRE, BOUTON INTÉGRÉ & MOBILE
   ========================================================================== */

/* Hiérarchie des z-index : le menu principal et l'overlay mobile passent toujours au-dessus du header de chapitre */
.header-fixed #header,
#header {
    z-index: 1000 !important;
}

.mobile-container,
.overlay {
    z-index: 1050 !important;
}

.mobile-menu {
    z-index: 1100 !important;
}

.chapter-sticky-header {
    z-index: 50 !important;
}

/* Synchronisation du header de chapitre collé sous le menu principal (non-scrollé = 4.6rem, scrollé = 2.3rem) */
#header:not(.scrolled) ~ #start .chapter-sticky-header {
    top: 4.6rem !important;
}

body.header-fixed.header-animated #header.scrolled ~ #start .chapter-sticky-header,
#header.scrolled ~ #start .chapter-sticky-header {
    top: 2.3rem !important;
}

/* Intégration du bouton switch clair/sombre directement dans le header du chapitre */
.chapter-sticky-header .floating-theme-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 1.25rem !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
}

.chapter-sticky-header .floating-theme-toggle:hover {
    transform: translateY(-50%) scale(1.08) !important;
}

/* Suppression de toutes les ombres portées (halo radial, text-shadow, box-shadow) en mode clair */
.chapter-container.light-mode,
.chapter-container.light-mode .chapter-sticky-header,
.chapter-container.light-mode .floating-theme-toggle,
.floating-theme-toggle.light-mode {
    box-shadow: none !important;
}

#body-wrapper .chapter-container.light-mode h1,
#body-wrapper .chapter-container.light-mode h2,
#body-wrapper .chapter-container.light-mode .chapter-sticky-header h1,
#body-wrapper .chapter-container.light-mode .chapter-sticky-header h2,
.chapter-container.light-mode .flex-lexicon-enabled h1,
.chapter-container.light-mode .flex-lexicon-enabled h2,
.chapter-container.light-mode .flex-lexicon-enabled h3,
.chapter-container.light-mode .flex-lexicon-enabled h4,
.chapter-container.light-mode .flex-lexicon-enabled p {
    text-shadow: none !important;
    background: none !important;
    box-shadow: none !important;
}

#body-wrapper .chapter-container.light-mode h1,
#body-wrapper .chapter-container.light-mode .chapter-sticky-header h1 {
    color: #111 !important;
}

@media (max-width: 768px) {
    /* Header de chapitre directement collé au menu principal dès le haut de page (suppression de tous les paddings intermédiaires) */
    #body-wrapper:has(.chapter-reading-section) {
        padding-top: 4.6rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    #header.scrolled ~ #start #body-wrapper:has(.chapter-reading-section) {
        padding-top: 2.3rem !important;
    }

    #body-wrapper:has(.chapter-reading-section) > .container {
        padding: 0 !important;
        max-width: 100vw !important;
    }

    #body-wrapper .section.chapter-reading-section,
    .chapter-reading-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fond semi-transparent occupant 100vw et au minimum 100vh, padding réduit */
    .chapter-container {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 1.15rem 2.5rem 1.15rem !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* Barre sticky du titre du chapitre collée au menu et avec espace pour le bouton intégré */
    .chapter-sticky-header {
        margin: 0 -1.15rem 1.25rem -1.15rem !important;
        padding: 0.55rem 3.1rem !important;
        border-radius: 0 !important;
    }

    #body-wrapper .chapter-sticky-header h1,
    .chapter-sticky-header h1 {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
        padding: 0.1rem 0.4rem !important;
        margin: 0 auto !important;
    }

    .chapter-sticky-header h2 {
        font-size: 0.85rem !important;
    }

    /* Bouton clair/sombre intégré à droite dans le header du chapitre sur mobile */
    .chapter-sticky-header .floating-theme-toggle {
        right: 0.75rem !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
    }

    /* Barre méta (temps de lecture & musique) plus compacte */
    .chapter-meta-bar {
        gap: 0.85rem !important;
        margin-bottom: 1.35rem !important;
    }

    /* Texte de lecture : largeur maximale exploitée et interlignage confortable */
    .chapter-container .flex-lexicon-enabled {
        max-width: 100% !important;
        font-size: 1.05rem !important;
        line-height: 1.72 !important;
    }
}