/* ================================================================
   auteur-sidebar.css
   Structure commune aux 3 sidebars (auteur, glossaire, références).
   Classes structurelles : .ikt-sidebar-*  (génériques)
   Classes contenu auteur : .asb-*         (spécifiques)
   ================================================================ */

/* ── Wrapper de positionnement ───────────────────────────────── */
/* z-index très au-dessus des plus hauts z-index plein écran du site
   (.pdf-is-fullscreen/.pdf-fs-veil : 99999-999999 ; Lecture/Xmind : jusqu'à
   100000) — sans quoi ce panneau, réutilisé aussi en repli CSS iOS (où il
   reste enfant de <body>, cf. _reparentSidebarsForFullscreen dans
   common-layout.js), resterait masqué SOUS le lecteur en plein écran.
   Reste sous les toasts (#ikt-toast-container : 1000000), qui doivent
   toujours rester visibles par-dessus. */
.ikt-sidebar-wrapper {
    position: fixed;
    top: 0; bottom: 0; right: 0;
    width: 600px;
    max-width: 92vw;
    z-index: 500000;
    pointer-events: none;
    /* Container query pour adapter le header à la largeur réelle */
    container-type: inline-size;
    container-name: ikt-sidebar-wrap;
}

/* ── Poignée de redimensionnement (partagée entre toutes les sidebars) ── */
.ikt-sidebar-resize-handle {
    position: absolute;
    top: 0; left: -5px; bottom: 0;
    width: 10px;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
}

/* Côté gauche : poignée sur le bord droit */
.ikt-sidebar-wrapper[data-side="left"] .ikt-sidebar-resize-handle {
    left: auto;
    right: -5px;
}

.ikt-sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 3px; height: 36px;
    border-radius: 2px;
    background: var(--border-color);
    opacity: 0;
    transition: opacity 0.15s;
}

.ikt-sidebar-resize-handle:hover::after,
.ikt-sidebar-resize-handle.ikt-resize-active::after {
    opacity: 1;
}

.ikt-sidebar-resize-handle:hover,
.ikt-sidebar-resize-handle.ikt-resize-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

body.ikt-resizing-active {
    user-select: none !important;
    cursor: ew-resize !important;
}

/* En mode double sidebar, le basculement de côté est bloqué */
body.ikt-dual-sidebar .ikt-sidebar-flip-btn {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.ikt-sidebar-wrapper[data-side="left"] { right: auto; left: 0; }
.ikt-sidebar-wrapper.open              { pointer-events: auto; }

/* ── Panneau visuel ──────────────────────────────────────────── */
.ikt-sidebar {
    position: absolute; inset: 0;
    background: var(--panel-light);
    border-left: 1px solid var(--border-color);
    box-shadow: -6px 0 32px rgba(0, 0, 0, 0.12);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ikt-sidebar-wrapper[data-side="left"] .ikt-sidebar {
    border-left: none; border-right: 1px solid var(--border-color);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
}

.ikt-sidebar-wrapper.open .ikt-sidebar { transform: translateX(0); }

/* ── En-tête ─────────────────────────────────────────────────── */
.ikt-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-light);
    flex-shrink: 0; gap: 8px; min-height: 52px;
}

.ikt-sidebar-header-left {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}

/* Icône des sidebars Glossaire/Références (SVG fill="currentColor", premier
   enfant de .ikt-sidebar-header-left) : noir en thème clair (blanc/beige),
   blanc en thème sombre. Ce panneau générique sert aussi Auteur, qui n'a pas
   d'icône ici — sélecteur donc scopé aux deux panneaux concernés. */
.ikt-sidebar-wrapper[data-sidebar-id="glossaire"] .ikt-sidebar-header-left > svg,
.ikt-sidebar-wrapper[data-sidebar-id="refs"] .ikt-sidebar-header-left > svg {
    color: #000000;
}
body.theme-noir .ikt-sidebar-wrapper[data-sidebar-id="glossaire"] .ikt-sidebar-header-left > svg,
body.theme-noir .ikt-sidebar-wrapper[data-sidebar-id="refs"] .ikt-sidebar-header-left > svg {
    color: #ffffff;
}

.ikt-sidebar-header-right {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* Titre panel (glossaire, refs) */
.ikt-sidebar-panel-title {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 1rem; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Badge raccourci clavier */
.ikt-sidebar-panel-kbd {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.7rem; font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--border-color); border-radius: 4px;
    padding: 2px 5px; white-space: nowrap; background: var(--panel); flex-shrink: 0;
}

/* ── Badge contexte livre (filtrage en page lecture) ─────────────────────── */
.ikt-sidebar-book-badge {
    align-self: flex-start;
    margin: 7px 16px 0;
    padding: 3px 10px;
    border: none; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
    font-family: var(--font-sans, 'Inter', sans-serif);
    cursor: pointer;
    max-width: calc(100% - 32px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* Inactif : sombre neutre */
    background: color-mix(in srgb, var(--text-primary) 14%, transparent);
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.ikt-sidebar-book-badge:hover { opacity: 0.75; }
/* Actif : couleur accent */
.ikt-sidebar-book-badge.ikt-badge-on {
    background: var(--accent);
    color: #fff;
}

/* Boutons header auteur (share, rahimahu, flip) */
.ikt-sidebar-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--panel); border: 1px solid var(--border-color); border-radius: 20px;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap;
    font-family: var(--font-sans, 'Inter', sans-serif);
}
.ikt-sidebar-share-btn:hover { background: var(--hover-bg); color: var(--text-primary); }

.ikt-sidebar-rahimahu {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 0.95rem; color: var(--accent-gold);
    padding: 4px 12px; border: 1px solid var(--accent-gold); border-radius: 20px; flex-shrink: 0;
}

.ikt-sidebar-openpage-btn,
.ikt-sidebar-flip-btn,
.ikt-sidebar-expand-btn,
.ikt-sidebar-tutorial-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-color); background: var(--panel);
    color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ikt-sidebar-openpage-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.ikt-sidebar-flip-btn:hover    { background: var(--hover-bg); color: var(--text-primary); }
.ikt-sidebar-expand-btn:hover  { background: var(--hover-bg); color: var(--text-primary); }

/* Bouton "?" tutoriel : texte au lieu d'une icône SVG (cf. .help-button-circle
   dans book-detail.css, même esprit) */
.ikt-sidebar-tutorial-btn {
    font-weight: 700;
    font-size: 15px;
    color: var(--accent-gold);
}
.ikt-sidebar-tutorial-btn:hover { background: var(--hover-bg); color: var(--text-primary); }

/* ── Sidebar plein écran ─────────────────────────────────────── */
.ikt-sidebar-wrapper.ikt-animating-width {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ikt-sidebar-wrapper.ikt-expanded {
    width: 100vw !important;
}
/* En plein écran on peut quand même réduire manuellement — poignée visible */

/* ── Corps scrollable ────────────────────────────────────────── */
.ikt-sidebar-body {
    flex: 1;
    min-height: 0; /* Safari : sans cela le flex child ne se contraint pas → pas de scroll */
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.ikt-sidebar-body::-webkit-scrollbar       { width: 4px; }
.ikt-sidebar-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

/* Padding du contenu auteur */
.ikt-sidebar-content { padding: 24px 20px 48px; }

/* ── Loading / Erreur ────────────────────────────────────────── */
.ikt-sidebar-loading {
    min-height: 200px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; color: var(--muted);
}
.asb-error { text-align: center; color: var(--muted); padding: 40px 16px; }

/* ================================================================
   CONTENU AUTEUR — classes .asb-* (inchangées)
   ================================================================ */
.asb-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.asb-image-nom-arabe { display: block; flex-shrink: 0; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin: 0; outline: 1.5px solid var(--accent-gold); outline-offset: 3px; }
.asb-identity-text { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; text-align: right; min-width: 0; }
.asb-name     { font-family: var(--font-serif,'Lora',serif); font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; line-height: 1.2; }
.asb-name-arabic { font-family: var(--font-arabic,'Amiri',serif); font-size: 1.4rem; color: var(--accent-gold); margin: 0 0 6px; line-height: 1.5; text-align: right; }
.asb-alts     { font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0; }
.asb-dua-badge { display: inline-block; font-family: var(--font-arabic,'Amiri',serif); font-size: 0.88rem; color: var(--accent-gold); padding: 2px 12px; border: 1px solid var(--accent-gold); border-radius: 20px; line-height: 1.6; margin: 2px 0 6px; }

.asb-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.asb-category-badge { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1.5px solid var(--border-color); border-radius: 20px; padding: 4px 12px; white-space: nowrap; }
.asb-cat-fr  { font-family: var(--font-sans,'Inter',sans-serif); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-secondary); }
.asb-cat-sep { font-size: 0.65rem; color: var(--muted); }
.asb-cat-ar  { font-family: var(--font-arabic,'Amiri',serif); font-size: 0.88rem; color: var(--accent-gold); line-height: 1.2; }

.asb-dates-block { display: flex; align-items: center; gap: 8px; }
.asb-dates { font-size: 0.88rem; color: var(--text-secondary); font-weight: 500; }

.asb-cal-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 2px 0; user-select: none; margin-left: auto; }
.asb-cal-label  { font-size: 0.78rem; font-weight: 700; color: var(--muted); transition: color 0.2s; letter-spacing: 0.05em; min-width: 11px; text-align: center; }
.asb-cal-label.asb-cal-active { color: var(--text-primary); }
.asb-cal-track  { width: 34px; height: 18px; background: color-mix(in srgb, var(--text-primary) 18%, transparent); border-radius: 9px; position: relative; flex-shrink: 0; }
.asb-cal-thumb  { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--accent-gold); border-radius: 50%; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.asb-cal-toggle--gregorian .asb-cal-thumb { transform: translateX(16px); }

.asb-section         { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border-color); }
.asb-section-title   { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-family: var(--font-sans,'Inter',sans-serif); }
.asb-section-title-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.asb-section-title-row .asb-section-title { margin-bottom: 0; flex: 1; min-width: 0; }

.asb-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ikt-sidebar-content .tag { background: transparent; border-color: var(--border-color); font-size: 0.76rem; padding: 3px 11px; color: var(--text-primary); }

.asb-bio            { font-size: 0.9rem; line-height: 1.8; color: var(--text-secondary); }
.asb-bio p          { margin: 0 0 10px; }
.asb-bio p:last-child { margin-bottom: 0; }

.asb-lineage       { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.asb-lineage-row   { display: grid; grid-template-columns: 20px auto 1fr; gap: 6px; align-items: baseline; line-height: 1.6; }
.asb-lineage-arrow { font-size: 1rem; font-weight: 700; line-height: 1; }
.asb-lineage-up    { color: var(--accent); }
.asb-lineage-down  { color: var(--accent-gold); }
.asb-lineage-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.asb-lineage-names { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.asb-lineage-full-link { background: none; border: none; padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--accent-gold); cursor: pointer; text-align: left; transition: opacity 0.2s; font-family: inherit; }
.asb-lineage-full-link:hover { opacity: 0.75; }

.asb-reading-time   { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; align-self: flex-end; }

.asb-books-carousel { display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding-bottom: 8px; padding-top: 6px; margin-top: -6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--accent-gold) transparent; }
.asb-books-carousel::-webkit-scrollbar       { height: 3px; }
.asb-books-carousel::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: 2px; }

.asb-book-card { flex: 0 0 130px; scroll-snap-align: start; cursor: pointer; display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 8px; overflow: visible; transition: transform 0.2s, box-shadow 0.2s; outline: none; background: var(--panel); position: relative; }
.asb-book-card:hover, .asb-book-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.asb-book-cover-wrap { width: 100%; aspect-ratio: 2/3; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: var(--panel); border-radius: var(--cover-radius, 4px); }
.asb-book-cover { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.asb-book-card:hover .asb-book-cover, .asb-book-card:focus-visible .asb-book-cover { will-change: transform; }
.asb-book-cover-fallback { color: var(--text-secondary); text-align: center; padding: 10px 8px; line-height: 1.5; font-family: var(--font-arabic,'Amiri',serif); font-size: 0.95rem; direction: rtl; word-break: break-word; }
.asb-book-cover-wrap:has(.asb-book-cover) .asb-book-cover-fallback { display: none; }
.asb-book-card:hover .book-hover-overlay { opacity: 1; }

.asb-official-site { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--panel); border: 1px solid var(--border-color); border-radius: var(--card-radius,8px); font-size: 0.9rem; gap: 10px; color: var(--text-secondary); text-decoration: none; transition: background 0.2s, color 0.2s; }
.asb-official-site:hover { background: var(--hover-bg); color: var(--text-primary); }
.asb-official-site > svg:first-child { flex-shrink: 0; opacity: 0.6; color: var(--text-secondary); }
.asb-lien-description { min-width: 0; text-align: center; color: var(--text-secondary); }
.asb-official-site > svg:last-child { flex-shrink: 0; opacity: 0.5; color: var(--text-secondary); }
.asb-official-site:hover > svg:last-child { opacity: 0.8; }

.asb-section--map { background: var(--panel); border-radius: var(--card-radius,8px); padding: 16px 18px; border: 1px solid var(--border-color); border-bottom: none; margin-bottom: 0; }
.asb-section--map .asb-section-title { margin-bottom: 4px; }
.asb-map-desc  { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; line-height: 1.5; overflow-wrap: break-word; }
.asb-map-navigate-btn { font-size: 0.82rem; font-weight: 600; color: var(--accent-gold); background: none; border: none; padding: 0; cursor: pointer; transition: opacity 0.2s; }
.asb-map-navigate-btn:hover { opacity: 0.75; }


/* ── Responsive ──────────────────────────────────────────────────────────
   Sous 769px, plus assez de place pour 2 sidebars côte à côte (gauche/
   droite) : une seule sidebar (la plus récente — gérée par
   sidebar-manager.js _enforceConstraint) s'affiche, ancrée en bas plutôt
   qu'à gauche/droite. Au-delà de 768px (tablette et plus), comportement
   desktop inchangé (jusqu'à 2 sidebars, via sidebar-manager.js) — seuil
   aligné sur le breakpoint mobile/desktop déjà utilisé partout ailleurs
   sur le site (768px).
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* !important nécessaire : book-detail.js / auteur-sidebar.js / common-layout.js
       posent top/bottom/left/right en inline à la création (anti-FOUC avant
       chargement de ce CSS) et ne les retirent jamais — sans !important, ces
       styles inline gagnent toujours sur les règles ci-dessous. */
    .ikt-sidebar-wrapper,
    .ikt-sidebar-wrapper[data-side="left"] {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 55vh !important;
        max-height: 55vh !important;
    }

    /* Pas de redimensionnement ni de bascule gauche/droite en mode feuille du bas */
    .ikt-sidebar-wrapper .ikt-sidebar-resize-handle,
    .ikt-sidebar-wrapper .ikt-sidebar-expand-btn,
    .ikt-sidebar-wrapper .ikt-sidebar-flip-btn {
        display: none !important;
    }

    .ikt-sidebar,
    .ikt-sidebar-wrapper[data-side="left"] .ikt-sidebar {
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
        transform: translateY(100%);
    }

    /* Header compact : moins de padding, et on garde le titre visible en
       masquant les éléments secondaires du bandeau plutôt que de le laisser
       s'écraser à 0 (header-right a flex-shrink:0, donc c'est le titre qui
       trinque en premier si on ne libère pas de place ici). */
    .ikt-sidebar-header {
        min-height: 44px;
        padding: 8px 12px;
    }

    .ikt-sidebar-share-label,
    .ikt-sidebar-rahimahu {
        display: none !important;
    }

    .ikt-sidebar-share-btn {
        padding: 6px 8px;
    }

    /* Moins d'espace inutile en haut du contenu, vu la hauteur réduite */
    .ikt-sidebar-content {
        padding: 12px 16px 32px;
    }

    .ikt-sidebar-wrapper.open .ikt-sidebar {
        transform: translateY(0);
    }
}

/* ── Mobile auteur modal (dialog.showModal, rendu natif) ─────── */
dialog.auteur-mobile-dialog {
    padding: 0;
    margin: 0;
    border: none;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--panel-light);
    color: inherit;
    outline: none;
}

dialog.auteur-mobile-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

/* Le .ikt-sidebar interne : position static + pleine hauteur */
dialog.auteur-mobile-dialog .ikt-sidebar {
    position: static;
    height: 100%;
    transform: none !important;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
}

dialog.auteur-mobile-dialog .ikt-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* ── Header compact à largueur réduite (container query) ─────── */
/* Quand la sidebar est proche de son minimum, masquer le label du bouton partage
   et le rahimahu pour éviter l'écrasement des boutons de droite.             */
@container ikt-sidebar-wrap (max-width: 360px) {
    .ikt-sidebar-share-label { display: none; }
    .ikt-sidebar-share-btn   { padding: 6px 8px; }
    .ikt-sidebar-rahimahu    { display: none !important; }
}