/* ==========================================================================
   MIRIADE Wild — bibliothèque « présentoir frontal » (shelf3d.js)
   Grille HTML accessible + canvas WebGL glissé dessous (couvertures en 3D).
   Thème clair / sombre : variables de styles.css ([data-theme="dark"]).
   ========================================================================== */

/* ---------- bascule Étagère / Grille (même langage que les onglets de filtre) */
.library-filters .view-switch {
    display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: var(--r-pill, 999px);
    background: var(--surface-3); overflow: visible;
}
.library-filters .view-switch button {
    appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
    border: 0; border-radius: var(--r-pill, 999px); padding: 6px 13px;
    background: transparent; color: var(--ink-2); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
    transition: background var(--t-fast, .15s), color var(--t-fast, .15s), box-shadow var(--t-fast, .15s);
}
.library-filters .view-switch button svg { flex: 0 0 auto; }
.library-filters .view-switch button:hover:not(.active) { color: var(--ink); }
.library-filters .view-switch button.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-1); }
.library-filters .view-switch button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- affichage selon le mode */
body.shelf-mode #stories-grid { display: none !important; }
body.shelf-mode #shelf3d.shelf3d-wrap { display: block; }
body:not(.shelf-mode) #shelf3d.shelf3d-wrap { display: none; }

/* l'ancien habillage (boîte en bois) est neutralisé */
#shelf3d.shelf3d-wrap {
    position: relative; margin: 10px 0 34px; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}

/* ---------- canvas WebGL : sous la grille, calé sur la fenêtre (pas d'événements) */
#shelf3d .s3-gl {
    position: absolute; top: -72px; bottom: -30px; left: -16px; right: -16px; z-index: 0;
    overflow: hidden; pointer-events: none; contain: strict;
}
#shelf3d .s3-gl canvas {
    position: absolute; left: 0; top: 0; display: block; will-change: transform;
    opacity: 0; transition: opacity .35s ease;
}
#shelf3d .s3-gl.is-ready canvas { opacity: 1; }
#shelf3d.s3-nogl .s3-gl { display: none; }

/* ---------- grille des livres */
#shelf3d .s3-list {
    position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    column-gap: clamp(22px, 2.8vw, 38px); row-gap: clamp(30px, 3.2vw, 44px);
}
#shelf3d .s3-cell { position: relative; min-width: 0; display: flex; flex-direction: column; }

#shelf3d .s3-open {
    appearance: none; display: flex; flex-direction: column; align-items: stretch; width: 100%;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
    cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
#shelf3d .s3-open:focus { outline: none; }
#shelf3d .s3-open:focus-visible { outline: 3px solid var(--primary); outline-offset: 8px; }
/* anneau de focus autour de toute la cellule (livre + légende + actions) quand :has est disponible */
@supports selector(:has(*)) {
    #shelf3d .s3-open:focus-visible { outline: none; }
    #shelf3d .s3-cell { border-radius: 14px; }
    #shelf3d .s3-cell:has(> .s3-open:focus-visible) { outline: 3px solid var(--primary); outline-offset: 8px; }
}

/* emplacement du livre (ratio de la couverture) + réserve pour la planche */
#shelf3d .s3-slot {
    position: relative; display: block; width: 100%;
    aspect-ratio: var(--s3-ratio, .6667); margin-bottom: 24px;
}
/* silhouette d'attente (couleur du style) le temps que la 3D apparaisse */
#shelf3d .s3-slot::before {
    content: ''; position: absolute; inset: 0; border-radius: 3px 5px 5px 3px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--s3-cover, #6d5dfc) 30%, transparent), color-mix(in srgb, var(--s3-cover, #6d5dfc) 14%, transparent));
    opacity: 1; transition: opacity .35s ease;
}
#shelf3d.s3-ready .s3-slot::before, #shelf3d.s3-nogl .s3-slot::before { opacity: 0; }
#shelf3d .s3-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden;
    border-radius: 3px 5px 5px 3px; background: var(--surface-3);
}

/* légende */
#shelf3d .s3-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25;
    letter-spacing: -.01em; color: var(--ink); transition: color var(--t-fast, .15s);
}
#shelf3d .s3-cell:hover .s3-title, #shelf3d .s3-open:focus-visible .s3-title { color: var(--primary-ink); }
#shelf3d .s3-meta {
    display: flex; align-items: baseline; gap: 0; min-width: 0; margin-top: 3px;
    font-size: .8rem; line-height: 1.35; color: var(--ink-2); white-space: nowrap;
}
#shelf3d .s3-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#shelf3d .s3-author.is-me { color: var(--success); font-weight: 600; }
#shelf3d .s3-author:not([hidden]) + .s3-pages::before { content: '·'; margin: 0 6px; color: var(--ink-3); }
#shelf3d .s3-pages { flex: 0 0 auto; }

#shelf3d .s3-foot { display: flex; align-items: center; gap: 4px; margin-top: 7px; min-height: 32px; }
#shelf3d .s3-style {
    flex: 0 1 auto; min-width: 0; margin-right: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 7px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px);
    background: var(--surface); color: var(--ink-2); font-size: .74rem; font-weight: 600; line-height: 1.3;
}
#shelf3d .s3-style::before {
    content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: var(--s3-dot, var(--primary)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
#shelf3d .s3-style > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#shelf3d .s3-style.is-empty { border: 0; padding: 0; background: none; }
#shelf3d .s3-style.is-empty::before { display: none; }

#shelf3d .s3-icon {
    flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer;
    transition: background var(--t-fast, .15s), color var(--t-fast, .15s), transform var(--t-fast, .15s);
}
#shelf3d .s3-icon:hover { background: var(--surface-3); color: var(--ink); }
#shelf3d .s3-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
#shelf3d .s3-fav.on { color: #e11d48; --s3-heart-fill: currentColor; }
[data-theme="dark"] #shelf3d .s3-fav.on { color: #fb7185; }
#shelf3d .s3-fav.on:hover { color: #be123c; }
#shelf3d .s3-fav.is-static { cursor: default; background: none; }
#shelf3d .s3-fav[aria-pressed="true"] svg { animation: s3-pop .28s var(--ease, ease); }
@keyframes s3-pop { 50% { transform: scale(1.25); } }

/* ---------- repli sans WebGL (contexte perdu) : vraies images de couverture */
#shelf3d.s3-nogl .s3-img {
    visibility: visible;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 26px -12px rgba(28, 26, 51, .45), 0 2px 5px rgba(28, 26, 51, .18);
}
#shelf3d.s3-nogl .s3-slot::after {
    content: ''; position: absolute; left: -10px; right: -10px; bottom: -14px; height: 10px; border-radius: 3px;
    background: linear-gradient(#f7f5fe, #e6e1f8); box-shadow: 0 6px 12px -6px rgba(28, 26, 51, .35), inset 0 1px 0 #b3a3ff;
}
[data-theme="dark"] #shelf3d.s3-nogl .s3-slot::after { background: linear-gradient(#2c2858, #211e46); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .7), inset 0 1px 0 #a08cff; }

/* ---------- téléphone : deux colonnes */
@media (max-width: 560px) {
    #shelf3d .s3-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 30px; }
    #shelf3d .s3-slot { margin-bottom: 21px; }
    #shelf3d .s3-title { font-size: .95rem; }
    #shelf3d .s3-foot { margin-top: 5px; }
    #shelf3d .s3-style { font-size: .7rem; padding: 2px 8px 2px 6px; }
    .library-filters .view-switch button { padding: 6px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    #shelf3d .s3-gl canvas { transition: none; }
    #shelf3d .s3-fav[aria-pressed="true"] svg { animation: none; }
}