/* Pile : conteneur portrait (ratio couverture), cartes superposées en absolute.
   On remplit la hauteur de contenu dispo (viewport moins header + nav, déjà
   réservés par le padding de .app-main) et on centre verticalement carte +
   actions : plus de bloc collé en haut avec du vide en bas. */
.discovery-deck {
    max-width: 440px;
    margin: 0 auto;
    /* hauteur = espace visible (viewport moins header + nav). On centre le
       groupe carte+boutons ; la carte est plafonnée (ni géante ni rognée). */
    height: calc(100dvh - var(--header-h) - var(--bottom-nav-h) - var(--safe-bottom) - var(--space-6));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.discovery-stack {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2 / 3;
    /* plafond : jamais plus grand que ~480px, et toujours moins que l'espace
       dispo moins la place des boutons → carte raisonnable, boutons visibles. */
    max-height: min(480px, calc(100dvh - var(--header-h) - var(--bottom-nav-h) - var(--safe-bottom) - 210px));
    flex: 0 0 auto;
    margin: 0 auto var(--space-4);
}
.discovery-card {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--bg-paper);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    /* profondeur : chaque carte sous le dessus recule + rétrécit un peu */
    transform: translateY(calc(var(--depth, 0) * 14px)) scale(calc(1 - var(--depth, 0) * 0.05));
    transform-origin: top center;
    z-index: calc(10 - var(--depth, 0));
    touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
}
/* Indice « glisse pour passer » en haut de la pile, disparaît au 1er swipe. */
.discovery-hint {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 12; pointer-events: none;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 8px 15px; border-radius: 999px;
    /* fond sombre FIXE (pas --ink, qui s'inverse en dark) : lisible sur
       n'importe quelle cover, dans les deux thèmes. */
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    color: #fff; font-size: 0.84rem; font-weight: 600; letter-spacing: -0.01em;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: opacity 300ms;
}
.discovery-hint svg { color: #fff; width: 18px; height: 18px; }
.discovery-hint.is-hidden { opacity: 0; }

.discovery-card.is-top { touch-action: none; cursor: grab; }
.discovery-card.is-top:active { cursor: grabbing; }
.discovery-card.is-dragging { transition: none; }
/* display:none (pas visibility:hidden) : les cartes enterrées ne chargent PAS
   leur cover HD tant qu'elles ne remontent pas (perf : ~3 covers au lieu de 20). */
.discovery-card.is-buried { display: none; }
.discovery-card.is-gone { pointer-events: none; }

/* Cover = héros : remplit la carte, texte en surimpression sur un dégradé.
   Le lien couvre toute la carte ; le scrim est un calque au-dessus (siblings)
   pour pouvoir y placer un bouton « Voir plus » valide (pas dans le <a>). */
.discovery-card__link { position: absolute; inset: 0; display: block; text-decoration: none; color: #fff; }
.discovery-card__link:hover { text-decoration: none; }
.discovery-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discovery-card__img--ph {
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); background: var(--bg-paper);
}

.discovery-card__scrim {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    max-height: 88%; overflow-y: auto;
    padding: var(--space-7) var(--space-4) var(--space-4);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.8) 32%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}
.discovery-card__title { font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.discovery-card__meta { font-size: 0.9rem; margin-top: 4px; color: rgba(255, 255, 255, 0.85); }
.discovery-card__star { color: var(--orange); }
.discovery-card__desc {
    margin-top: 8px; font-size: 0.88rem; line-height: 1.45; color: rgba(255, 255, 255, 0.9);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Déplié : voile foncé sur TOUTE la cover pour lire la description en entier. */
.discovery-card.is-expanded .discovery-card__scrim {
    top: 0; max-height: none;
    background: rgba(0, 0, 0, 0.9);
    touch-action: pan-y; /* lecture scrollable au doigt malgré touch-action:none du drag */
}
.discovery-card.is-expanded .discovery-card__desc { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.discovery-card__more {
    margin-top: 2px; min-height: 44px; padding: 8px 0; background: none; border: none;
    display: inline-flex; align-items: center;
    color: var(--violet-pale); font-family: inherit; font-size: 0.8rem; font-weight: 600;
    text-align: left; cursor: pointer;
}
.discovery-card__hook {
    margin-top: 8px; font-family: var(--font-mono); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--violet-pale, #b68ff7);
}

/* « Voir la fiche » : accès explicite à la fiche livre en cas de doute
   (la cover est déjà cliquable, mais l'affordance n'est pas évidente).
   Pill discret en haut à droite, toujours visible au-dessus de la cover. */
.discovery-card__fiche {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 40px; padding: 0 12px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: 0.78rem; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.discovery-card__fiche:hover { background: rgba(15, 15, 18, 0.68); text-decoration: none; }
.discovery-card__fiche:active { transform: scale(0.97); }
.discovery-card__fiche svg { width: 14px; height: 14px; margin-right: -2px; }

/* Badge « ✓ À lire / ✓ Lu » quand la carte est confirmée (elle reste). */
.discovery-card__badge {
    position: absolute; top: 14px; left: 14px; z-index: 4;
    display: none; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--violet); color: #fff; font-size: 0.82rem; font-weight: 600;
    box-shadow: var(--shadow-md);
}
.discovery-card.is-confirmed .discovery-card__badge { display: inline-flex; }
.discovery-card.is-confirmed--read .discovery-card__badge { background: var(--cyan); }

/* Voile coloré appliqué DÈS le clic (« Déjà lu » cyan / « À lire » violet) :
   confirmation visuelle immédiate sur la cover, avant même la réponse réseau.
   Le badge (z-index 4) reste au-dessus du voile (z-index 3). */
.discovery-card.is-confirmed::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    pointer-events: none; border-radius: inherit;
}
.discovery-card.is-confirmed--read::after { background: rgba(6, 182, 212, 0.34); }
.discovery-card.is-confirmed--want::after { background: rgba(134, 73, 241, 0.34); }

/* Note (étoiles orange) + mini commentaire, révélés par-dessus le voile cyan
   quand « Déjà lu » est sélectionné. Au-dessus du voile (z-index 5). */
.discovery-card__rate {
    position: absolute; inset: 0; z-index: 5;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: var(--space-5); text-align: center;
    border-radius: inherit;
    /* fond sombre teinté cyan (accent « lu ») : masque la cover + le scrim pour
       que note et commentaire soient parfaitement lisibles, plus de superposition. */
    background: rgba(4, 32, 38, 0.92);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    /* transparent au drag : le swipe passe au travers, seuls les étoiles et le
       champ (pointer-events: auto ci-dessous) captent le tap. */
    pointer-events: none;
}
.discovery-card__rate .discovery-stars,
.discovery-card__rate .discovery-comment { pointer-events: auto; }
.discovery-card.is-confirmed--read .discovery-card__rate { display: flex; }
.discovery-rate__label {
    color: #fff; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.discovery-stars { display: inline-flex; gap: 4px; }
.discovery-star {
    width: 42px; height: 42px; padding: 5px;
    border: none; background: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    transition: color 100ms, transform 100ms;
}
.discovery-star svg { width: 100%; height: 100%; fill: currentColor; stroke: none; display: block; }
.discovery-star.is-on { color: var(--orange); }
.discovery-star:active { transform: scale(0.88); }
.discovery-comment {
    width: 100%; max-width: 280px; min-height: 44px;
    padding: 10px 14px; border-radius: var(--radius-btn);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.55); color: #fff;
    font-family: inherit; font-size: 0.9rem;
}
.discovery-comment::placeholder { color: rgba(255, 255, 255, 0.6); }
.discovery-comment:disabled { opacity: 0.5; cursor: not-allowed; }

/* Carte finale (« Recharger ») : derrière tout, centrée. */
.discovery-card--end { z-index: 0; display: flex; align-items: center; justify-content: center; }
.discovery-end { text-align: center; padding: var(--space-5); }
.discovery-end__title { font-weight: 600; }
.discovery-end__hint { color: var(--muted); font-size: 0.9rem; margin: 6px 0 var(--space-4); }

/* Barre d'actions SOUS la pile (agit sur la carte du dessus).
   Les 3 boutons sont HOMOGÈNES : même taille exacte (flex-basis 0), même
   fond clair, même couleur de texte (encre), même graisse. Seule une petite
   icône colorée les distingue (violet = à lire, cyan = déjà lu, gris = pas
   pour moi) : la couleur sert d'accent, jamais de fond plein. */
/* Full-bleed : la rangée déborde du padding latéral de .app-main pour prendre
   toute la largeur de l'écran → boutons plus larges, « Non merci » aéré. */
.discovery-actions {
    display: flex; gap: 6px;
    margin: 0 calc(-1 * max(var(--space-4), var(--safe-right))) var(--space-3) calc(-1 * max(var(--space-4), var(--safe-left)));
    padding: 0 8px;
}
.discovery-act {
    flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    white-space: nowrap;
    border-radius: 16px; border: none;
    box-shadow: 0 1px 2px rgba(15, 15, 18, 0.08);
    background: var(--bg-elevated); color: var(--ink);
    font-family: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer;
    transition: background 120ms, box-shadow 120ms;
}
.discovery-act svg { width: 15px; height: 15px; flex: 0 0 auto; }
.discovery-act--want svg { color: var(--violet); }
.discovery-act--read svg { color: var(--cyan); }
.discovery-act--dismiss svg { color: var(--muted); }
.discovery-act:active { background: var(--bg-paper); box-shadow: none; }
.discovery-act[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.discovery-controls { display: flex; justify-content: center; }
.discovery-skip {
    min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg-paper); color: var(--muted); font-family: inherit; font-size: 0.9rem; cursor: pointer;
}

.discovery-empty { max-width: 340px; margin: var(--space-6) auto; text-align: center; }
.discovery-empty__title { font-weight: 600; }
.discovery-empty__hint { color: var(--muted); font-size: 0.92rem; margin: 6px 0 var(--space-4); }

.discovery-skeleton { max-width: 320px; margin: var(--space-6) auto 0; text-align: center; }
.discovery-skeleton__card {
    width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-lg);
    max-height: min(480px, calc(100dvh - var(--header-h) - var(--bottom-nav-h) - var(--safe-bottom) - 210px));
    margin: 0 auto;
    background-color: var(--bg-paper); box-shadow: var(--shadow-lg);
    /* Shimmer : un reflet balaie la carte pendant que la sélection charge
       (ForYouService via Google Books, ~1s). Vivant, pas figé. */
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: discovery-shimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .discovery-skeleton__card {
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.08) 50%, transparent 65%);
}
@keyframes discovery-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -80% 0; }
}
.discovery-skeleton__msg {
    margin: var(--space-4) 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

/* Bouton « Recharger » : spinner affiché pendant le chargement du frame
   (Turbo pose [busy]/[aria-busy] sur la turbo-frame le temps du fetch). */
.discovery-reload__spin {
    display: none; width: 14px; height: 14px; margin-right: 7px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    vertical-align: -2px;
    animation: discovery-spin 0.7s linear infinite;
}
turbo-frame#discovery-deck[busy] .discovery-reload__spin,
turbo-frame#discovery-deck[aria-busy="true"] .discovery-reload__spin { display: inline-block; }
@keyframes discovery-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .discovery-card { transition: none; }
    .discovery-reload__spin { animation: none; }
    .discovery-skeleton__card { animation: none; }
}