/* ============================================================
 * Utilitaires — stack, eyebrow, card, muted
 * Petits helpers réutilisables qu'on combine librement.
 * ============================================================ */

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.muted  { color: var(--muted); }
.subtle { color: var(--subtle); }

.text-center { text-align: center; }

/* Eyebrow : label de section discret au-dessus d'un titre.
   Format : uppercase, letter-spacing ample, accent orange + trait à gauche.
   "Coup de cœur", "Pour vous", "À lire ensuite" — c'est l'ADN éditorial. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--orange);
    margin-bottom: var(--space-3);
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--orange);
}

.card {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
}
.card--paper {
    background: var(--bg-paper);
    border: none;
    box-shadow: none;
}

/* Couverture traitée en "objet posé" : coins doux, ombre douce, et une fine
   hairline interne qui la détache d'un fond clair (cover blanche sur off-white).
   À poser sur l'<img> de cover. Le contenu est le héros. */
.cover-elev {
    border-radius: var(--radius);
    box-shadow: var(--shadow-cover), inset 0 0 0 1px rgba(15, 15, 18, 0.07);
}
[data-theme="dark"] .cover-elev {
    box-shadow: var(--shadow-cover), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Retour tactile subtil au tap, pour les éléments interactifs custom (chips,
   lignes cliquables) qui ne sont pas déjà des .btn. */
.tap {
    transition: transform 90ms cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}
.tap:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
    .tap { transition: none; }
    .tap:active { transform: none; }
}

/* ========== Back button — app mobile feel ========== */
/* Bouton retour réutilisable. Tap target 44px, icône chevron-left. */
.back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 var(--space-3) calc(-1 * var(--space-2));
    color: var(--ink);
    background: transparent;
    border-radius: 50%;
    text-decoration: none;
    transition: background 120ms ease;
}
.back-button:hover,
.back-button:focus-visible {
    background: var(--bg-paper);
    outline: none;
    text-decoration: none;
}
.back-button:active {
    text-decoration: none;
}

/* ========== Page toolbar : back + actions sur la même ligne ==========
   Pattern app mobile : barre haut de page avec back-button à gauche et
   action(s) à droite (burger menu, share, etc.). Utilisée sur la fiche
   livre, le profil d'un autre user, etc. */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
    min-height: 44px;
}
.page-toolbar .back-button {
    margin: 0;
}
/* Variante : actions seules (own profile, pas de back) → alignées à droite */
.page-toolbar--end {
    justify-content: flex-end;
}

/* ========== Hero des pages auth (login / register) ========== */
.auth-hero {
    text-align: center;
    margin-bottom: var(--space-4);
}
.auth-hero__logo {
    display: block;
    margin: 0 auto var(--space-3);
    width: auto;
    max-width: 220px;
    height: 48px;
    object-fit: contain;
}