/* ═══════════════════════════════════════════════════════════════
   À LIRE — Cartes redessinées
═══════════════════════════════════════════════════════════════ */

.tr-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: transform .2s, box-shadow .2s;
}
.tr-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--shadow-color); }

/* Header */
.tr-header {
    display: flex;
    gap: 12px;
    padding: 14px 14px 10px;
    align-items: flex-start;
}
.tr-cover {
    width: 56px;
    height: 82px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tr-meta { flex: 1; min-width: 0; }
.tr-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 2px;
}
.tr-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tr-temp-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
.tr-publisher { font-size: .72rem; color: var(--gray-text); margin-bottom: 4px; }

/* Barre de progression dégradée rouge→vert */
.tr-progress-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.tr-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--series-drawer-bg);
    border-radius: 99px;
    overflow: hidden;
}
.tr-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 40%, #22c55e 100%);
    background-size: 200% 100%;
    background-position: right center; /* plein = vert à droite */
    transition: width .4s ease;
}
/* Astuce : on veut que 0% = rouge et 100% = vert
   On fait background-position dynamique via calc en JS ou on inverse */
.tr-progress-label {
    font-size: .7rem;
    color: var(--gray-text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bouton priorité */
.tr-prio-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--gray-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
    transition: all .15s;
}
.tr-prio-btn:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.1); }
.tr-prio-btn--active { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.15); }

/* Tomes à lire */
.tr-volumes {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
    align-items: flex-end;
    border-top: 1px solid var(--border-color);
}
.tr-vol-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
}
.tr-vol-item--first { flex: 1.4; }
.tr-vol-cover-wrap { position: relative; }
.tr-vol-cover {
    width: 52px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.tr-vol-item--first .tr-vol-cover {
    width: 64px;
    height: 94px;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.tr-vol-num {
    font-size: .65rem;
    color: var(--gray-text);
    text-align: center;
}
.tr-read-btn {
    width: 100%;
    padding: 5px 4px;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--series-drawer-bg);
    color: var(--gray-text);
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.tr-read-btn:hover { background: var(--hover-bg); color: var(--text-color); }
.tr-read-btn--primary {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-size: .76rem;
    padding: 7px 6px;
}
.tr-read-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tr-vol-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: var(--gray-text);
    padding: 0 4px;
    flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   RECOMMANDATIONS — Boutons redessinés
═══════════════════════════════════════════════════════════════ */

.rec-actions {
    margin-top: auto; /* push to bottom */
    display: flex;
    gap: 6px;
    margin-top: 10px;
    width: 100%;
    align-items: center;
}
.rec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .17s;
}
.rec-btn--read {
    flex: 1;
    padding: 9px 14px;
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.rec-btn--read:hover { filter: brightness(1.1); transform: translateY(-1px); }
.rec-btn--prio {
    width: 38px;
    height: 38px;
    background: var(--series-drawer-bg);
    color: var(--gray-text);
    border-color: var(--border-color);
    flex-shrink: 0;
}
.rec-btn--prio:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.1); }
.rec-btn--prio-active { border-color: #f59e0b !important; color: #f59e0b !important; background: rgba(245,158,11,.15) !important; }

/* Description fiche volume — hauteur auto */
.vi-description {
    font-size: .8rem;
    color: var(--gray-text);
    line-height: 1.6;
    padding: 10px 12px;
    background: var(--series-drawer-bg);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
    /* Pas de line-clamp — hauteur automatique */
}

/* ── Collection filter bar spacer ── */
.coll-filter-spacer { flex: 1; min-width: 20px; }

/* ── À Lire : carte prioritaire avec aura glow ── */
/* ── À Lire : carte prioritaire — même aura que collection ── */
.tr-card--priority {
    box-shadow: 0 0 15px 5px rgba(252, 211, 77, 0.7) !important;
    border-color: #fcd34d !important;
}

/* ── Recommandations : carte prioritaire — même aura ── */
.rec-card--priority {
    box-shadow: 0 0 15px 5px rgba(252, 211, 77, 0.7) !important;
    border-color: #fcd34d !important;
    border-left-color: #fcd34d !important;
}

/* ── Carte prioritaire wide dans recommandations ── */

.rec-priority-wide-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.rec-priority-wide-series {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-color);
}
.rec-priority-wide-publisher {
    font-size: .72rem;
    color: var(--gray-text);
    margin-top: 1px;
}
.rec-priority-vols {
    display: flex;
    gap: 10px;
    align-items: flex-end;  /* aligner par le bas = pieds alignés */
    flex: 1;
    flex-wrap: nowrap;
}
.rec-priority-vol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.rec-priority-vol--main { flex: 0 0 auto; }  /* taille fixe, pas de stretch */
.rec-priority-vol-cover {
    width: 70px;
    height: 100px;
    object-fit: cover;
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    display: block;
}
.rec-priority-vol--main .rec-priority-vol-cover {
    width: 86px;
    height: 124px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.rec-priority-vol-num {
    font-size: .7rem;
    color: var(--gray-text);
    text-align: center;
}
.rec-priority-vol-read {
    width: 100%;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), #6366f1);
    color: #fff;
    cursor: pointer;
    transition: all .18s;
    text-align: center;
    box-shadow: 0 2px 10px rgba(var(--primary-rgb,99,102,241),.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.rec-priority-vol-read:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(var(--primary-rgb,99,102,241),.55);
    filter: brightness(1.08);
}

.rec-priority-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    min-width: 140px;
    max-width: 180px;
}

/* ── Animation slide pour mélanger recommandations ── */
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}
@keyframes slideInLeft {
    from { transform: translateX(-120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.rec-slide-out { animation: slideOutRight 0.28s ease-in forwards; }
.rec-slide-in  { animation: slideInLeft  0.32s ease-out forwards; }

/* ── Description fiche tome — espace bas ── */
.vi-description {
    font-size: .8rem;
    color: var(--gray-text);
    line-height: 1.6;
    padding: 12px 14px 16px;
    background: var(--series-drawer-bg);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
    margin-bottom: 6px;
}

/* ── Autosave indicator (centré si seul élément) ── */
.vi-actions:has(> span:only-child) {
    justify-content: flex-start;
    padding-top: 0;
}


/* ── Grille recommandations avec support carte pleine largeur ── */
.rec-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
    align-items: start;
}

/* ── Largeur des cartes dans rec-grid (8 colonnes) ── */
/* Reprendre la Lecture : span 2 = 2/8 = 1/4 */
.rec-std-card[data-rec-type="resume-reading"] {
    grid-column: span 2;
}
/* Toutes les autres cartes standard : span 1 = 1/8 */
.rec-std-card[data-rec-type="close-to-complete"],
.rec-std-card[data-rec-type="long-owned"],
.rec-std-card[data-rec-type="large-difference"],
.rec-std-card[data-rec-type="random"],
.rec-std-card[data-rec-type="missing-volume"],
.rec-std-card[data-rec-type="upcoming"],
.rec-std-card[data-rec-type="long-unread"] {
    grid-column: span 1;
}

/* ── Order within rec-grid ── */
.rec-std-card[data-rec-type="resume-reading"]           { order: 1; grid-column: span 2; }
.rec-std-card[data-rec-type="close-to-complete"]        { order: 2; grid-column: span 1; }
.rec-std-card[data-rec-type="large-difference"]         { order: 3; grid-column: span 1; }
.rec-std-card[data-rec-type="random"]                   { order: 4; grid-column: span 1; }
.rec-std-card[data-rec-type="gamification-placeholder"] { order: 5; grid-column: span 1; }
.rec-std-card[data-rec-type="missing-volume"]           { order: 6; grid-column: span 1; }
.rec-std-card[data-rec-type="upcoming"]                 { order: 7; grid-column: span 1; }
.rec-std-card[data-rec-type="long-owned"]               { order: 8; grid-column: span 1; }
.rec-std-card[data-rec-type="long-unread"]              { order: 9; grid-column: span 1; }

/* ── recBuyZone: Panier Express + Suite à acheter côte à côte ── */
/* Chaque carte = span 2 dans la grille 8 = 1/4 total            */
#recBuyZone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    /* Chaque carte = span 2/8 de rec-grid = même largeur que Reprendre la Lecture */
    width: calc(50% - 0.5rem);
    align-items: stretch;
}
#recBuyZone .rec-buy-card {
    width: 100%;
    min-height: 140px;
    height: 100%;
    box-sizing: border-box;
}

/* Force la carte prioritaire large à être vraiment en premier et pleine largeur */
.rec-grid 


/* ═══════════════════════════════════════════════════════════════
   RECOMMANDATIONS — Cartes standard taille uniforme
═══════════════════════════════════════════════════════════════ */

.rec-std-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    /* Height: match tallest card in same grid row */
    height: 100%;
    min-height: 280px;
    box-sizing: border-box;
}

.rec-std-cover {
    width: 100px;
    height: 144px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    flex-shrink: 0;
    margin-bottom: 4px;
}

.rec-std-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 10px;
    width: 100%;
}

/* Titre clampé — jamais plus de 2 lignes, police réduite si long */
.rec-std-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.rec-std-vol {
    font-size: .78rem;
    color: var(--gray-text);
}

.rec-std-type {
    font-size: .72rem;
    font-weight: 600;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   CARTE PRIORITAIRE — Flèches de progression animées
═══════════════════════════════════════════════════════════════ */

/* Flèches entre tomes — effet vague clignotante */
.rec-priority-arrows {
    display: flex;
    flex-direction: row;      /* ← horizontal */
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 6px;
    align-self: center;
    margin-bottom: 28px;      /* aligne avec le bas des jaquettes */
    flex-shrink: 0;
}

.rec-priority-arrows span {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fcd34d;
    line-height: 1;
    opacity: 0;
    animation: arrowWave 1.4s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(252,211,77,.9), 0 0 20px rgba(252,211,77,.4);
}

/* Vague gauche→droite sur les 3 flèches horizontales */
.rec-priority-arrows span:nth-child(1) { animation-delay: 0s; }
.rec-priority-arrows span:nth-child(2) { animation-delay: 0.2s; }
.rec-priority-arrows span:nth-child(3) { animation-delay: 0.4s; }

/* Flèche simple (entre T14 et T15) */
.rec-priority-arrows--single span:nth-child(2),
.rec-priority-arrows--single span:nth-child(3) { display: none; }

@keyframes arrowWave {
    0%   { opacity: .1;  transform: translateX(-4px) scale(.85); }
    35%  { opacity: 1;   transform: translateX(3px)  scale(1.1); }
    65%  { opacity: .65; transform: translateX(1px)  scale(1);   }
    100% { opacity: .1;  transform: translateX(-4px) scale(.85); }
}

/* Jaquettes plus grandes dans la carte prioritaire */
/* Covers des tomes suivants — taille "proche de compléter" */
.rec-priority-vol-cover {
    width: 110px;
    height: 158px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    display: block;
    transition: opacity .2s, transform .2s;
}

/* Cover du tome PRINCIPAL — encore plus grand */
.rec-priority-vol--main .rec-priority-vol-cover {
    width: 140px;
    height: 200px;
    box-shadow: 0 6px 22px rgba(0,0,0,.5);
    border: 2px solid rgba(252,211,77,.6);
}

/* Tomes suivants légèrement transparents au repos */
.rec-priority-vol:not(.rec-priority-vol--main) .rec-priority-vol-cover {
    opacity: .82;
}
.rec-priority-vol:not(.rec-priority-vol--main):hover .rec-priority-vol-cover {
    opacity: 1;
    transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════════
   CARTE PRIORITAIRE — Layout 5 quartiers
═══════════════════════════════════════════════════════════════ */

/* Conteneur global de la carte : row avec 3 zones */
.rec-priority-wide {
    grid-column: 1 / -1;
    width: 100%;
    background: var(--card-bg);
    border: 2px solid #fcd34d;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 0 15px 5px rgba(252, 211, 77, 0.7);
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-end;
    order: -99;
    overflow: hidden;
}

/* Zone gauche : info série + grande jaquette (50% de la carte) */
.rpw-main {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex: 2;            /* prend ~40% */
    min-width: 0;
}

.rpw-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
    max-width: 160px;
    flex-shrink: 0;
    padding-bottom: 2px;
    position: relative;
}

/* Croix retirer — en haut à droite du bloc info */
.rpw-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    font-size: .85rem;
    padding: 3px;
    border-radius: 50%;
    transition: color .15s;
    line-height: 1;
}
.rpw-remove:hover { color: #ef4444; }

/* Grande jaquette du tome principal */
.rpw-cover-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.rpw-cover-img {
    width: 140px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
    border: 2px solid rgba(252,211,77,.55);
    display: block;
}

/* Bouton Marquer lu — sous la grande jaquette */
.rec-priority-vol-read {
    width: 100%;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), #6366f1);
    color: #fff;
    cursor: pointer;
    transition: all .18s;
    text-align: center;
    box-shadow: 0 2px 10px rgba(var(--primary-rgb,99,102,241),.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}
.rec-priority-vol-read:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(var(--primary-rgb,99,102,241),.55);
    filter: brightness(1.08);
}
.rpw-unowned {
    font-size: .64rem;
    color: var(--gray-text);
    opacity: .7;
    text-align: center;
}

/* Zone centrale : 3 grandes flèches (centré verticalement) */
.rpw-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 4px;
    margin-bottom: 28px; /* aligner avec bas des jaquettes */
}

/* Zone droite : T14 + flèche + T15 (50% de la carte) */
.rpw-follows {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 2;
    justify-content: flex-start;
}

.rpw-follow-vol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    max-width: 130px;
}

/* Jaquettes des tomes suivants — taille "proche de compléter" */
.rpw-follow-cover {
    width: 110px;
    height: 158px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(0,0,0,.32);
    display: block;
    opacity: .88;
    transition: opacity .2s, transform .2s;
}
.rpw-follow-cover:hover { opacity: 1; transform: translateY(-3px); }

/* Flèches : taille augmentée */
.rec-priority-arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 4px;
    align-self: center;
    flex-shrink: 0;
}
.rec-priority-arrows span {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    color: #fcd34d;
    line-height: 1;
    opacity: 0;
    animation: arrowWave 1.4s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(252,211,77,.9), 0 0 24px rgba(252,211,77,.4);
}
.rec-priority-arrows span:nth-child(1) { animation-delay: 0s; }
.rec-priority-arrows span:nth-child(2) { animation-delay: 0.2s; }
.rec-priority-arrows span:nth-child(3) { animation-delay: 0.4s; }
.rec-priority-arrows--single span:nth-child(2),
.rec-priority-arrows--single span:nth-child(3) { display: none; }
@keyframes arrowWave {
    0%   { opacity: .1;  transform: translateX(-4px) scale(.85); }
    35%  { opacity: 1;   transform: translateX(3px)  scale(1.15); }
    65%  { opacity: .65; transform: translateX(1px)  scale(1);   }
    100% { opacity: .1;  transform: translateX(-4px) scale(.85); }
}

/* ═══════════════════════════════════════════════════════════════
   CARTE PRIORITAIRE — Layout sketch 5 zones (session finale)
   Layout: [Info+btn] | [Jaquette principale] | [>>>] | [T+1] [›] [T+2]
═══════════════════════════════════════════════════════════════ */

.rec-priority-wide {
    grid-column: 1 / -1;
    order: -99;
    width: 100%;
    background: var(--card-bg);
    border: 2px solid #fcd34d;
    border-radius: 14px;
    box-shadow: 0 0 15px 5px rgba(252,211,77,0.65);
    display: flex;
    flex-direction: row;
    align-items: center;        /* centrage vertical */
    gap: 0;
    overflow: hidden;
    min-height: 220px;
}

/* ── Zone 1 : Info + bouton (fixe, ~160px) ── */
.rpw-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    min-width: 140px;
    max-width: 165px;
    flex-shrink: 0;
    align-self: stretch;
    justify-content: center;
    position: relative;
    border-right: 1px solid rgba(252,211,77,.2);
}

.rpw-remove {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    font-size: .85rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s;
    line-height: 1;
}
.rpw-remove:hover { color: #ef4444; }

.rec-priority-wide-header {
    font-size: .72rem;
    font-weight: 700;
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rec-priority-wide-series {
    font-size: .9rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rec-priority-wide-publisher {
    font-size: .7rem;
    color: var(--gray-text);
}
.rec-priority-vol-read {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 700;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), #6366f1);
    color: #fff;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb,99,102,241),.4);
    transition: all .18s;
    margin-top: 4px;
}
.rec-priority-vol-read:hover { filter: brightness(1.1); transform: translateY(-1px); }

.rpw-unowned {
    font-size: .66rem;
    color: var(--gray-text);
    opacity: .7;
}

/* ── Zone 2 : Grande jaquette principale ── */
.rpw-main-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 8px 12px;
    align-self: stretch;
    justify-content: flex-end;
}
.rpw-cover-img {
    width: 130px;
    height: 190px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,.5);
    border: 2px solid rgba(252,211,77,.45);
    display: block;
}
.rpw-cover-placeholder {
    width: 130px;
    height: 190px;
    border-radius: 8px;
    background: var(--series-drawer-bg);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--gray-text);
}
.rpw-cover-placeholder--sm {
    width: 100px;
    height: 145px;
    font-size: 1rem;
}

/* ── Zone 3 : Flèches 3× (centré verticalement) ── */
.rpw-arrows-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    flex-shrink: 0;
    align-self: center;
}

/* ── Zones 4+5 : Tomes suivants (prennent l'espace restant) ── */
.rpw-follows {
    display: flex;
    align-items: center;        /* centrage vertical de toute la zone */
    gap: 4px;
    flex: 1;
    padding: 0 12px 0 4px;
    justify-content: flex-start;
}
.rpw-follow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.rpw-follow-cover {
    width: 100px;
    height: 145px;
    object-fit: cover;
    border-radius: 7px;
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
    display: block;
    opacity: .88;
    transition: opacity .2s, transform .2s;
}
.rpw-follow-cover:hover { opacity: 1; transform: translateY(-2px); }

/* ── Flèches animées (réutilisées) ── */
.rec-priority-arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
}
.rec-priority-arrows span {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    color: #fcd34d;
    line-height: 1;
    opacity: 0;
    animation: arrowWave 1.4s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(252,211,77,.9), 0 0 24px rgba(252,211,77,.4);
}
.rec-priority-arrows span:nth-child(1) { animation-delay: 0s; }
.rec-priority-arrows span:nth-child(2) { animation-delay: 0.2s; }
.rec-priority-arrows span:nth-child(3) { animation-delay: 0.4s; }
.rec-priority-arrows--single span:nth-child(2),
.rec-priority-arrows--single span:nth-child(3) { display: none; }
.rec-priority-arrows--single span { font-size: 1.4rem; }

.rec-priority-vol-num {
    font-size: .7rem;
    color: var(--gray-text);
    text-align: center;
}

@keyframes arrowWave {
    0%   { opacity: .1;  transform: translateX(-4px) scale(.85); }
    35%  { opacity: 1;   transform: translateX(3px)  scale(1.15); }
    65%  { opacity: .6;  transform: translateX(1px)  scale(1); }
    100% { opacity: .1;  transform: translateX(-4px) scale(.85); }
}

/* ── Prioritaire : demi-largeur (2 cartes côte à côte) ── */
.rec-priority-half {
    grid-column: span 2;  /* prend 2 colonnes sur 4 au lieu de tout */
}
/* Sur petits écrans, pleine largeur */
@media (max-width: 700px) {
    .rec-priority-half { grid-column: 1 / -1; }
}

/* ── Tomes non possédés : grisé + bouton achat ── */
.rpw-follow-unowned,
.rpw-main-cover-wrap.rpw-follow-unowned {
    position: relative;
}
.rpw-follow-unowned img,
.rpw-follow-unowned .rpw-cover-img {
    filter: grayscale(60%) brightness(0.7);
    opacity: .65;
}

.rpw-buy-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--primary-color), #6366f1);
    color: #fff;
    border: none;
    border-radius: 0 0 7px 7px;
    padding: 7px 6px;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 -1px 8px rgba(0,0,0,.3);
    transition: filter .15s;
    width: 100%;
}
.rpw-buy-btn:hover { filter: brightness(1.15); }

.rpw-buy-btn--lg {
    padding: 9px 8px;
    font-size: .78rem;
    border-radius: 0 0 9px 9px;
}

.rpw-follow-cover-wrap,
.rpw-main-cover-wrap {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;  /* clip the bottom button */
}

.rpw-unowned-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.7);
    color: #aaa;
    font-size: .62rem;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
}


/* ── Zone recommandations prioritaires : max 2 par ligne ── */
.rec-priority-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* exactement 2 colonnes */
    gap: 16px;
    margin-bottom: 8px;
}
/* Sur petits écrans : 1 seule colonne */
@media (max-width: 1100px) {
    .rec-grid { grid-template-columns: repeat(4, 1fr); }
    #recBuyZone { width: 100%; }
}
@media (max-width: 700px) {
    .rec-priority-grid { grid-template-columns: 1fr; }
    .rec-grid { grid-template-columns: repeat(2, 1fr); }
    .rec-std-card[data-rec-type="resume-reading"] { grid-column: span 2; }
    #recBuyZone { width: 100%; }
}
@media (max-width: 480px) {
    .rec-grid { grid-template-columns: 1fr; }
    .rec-std-card[data-rec-type="resume-reading"] { grid-column: span 1; }
}

/* La carte wide prend 1 colonne dans la grille prioritaire */
.rec-priority-grid .rec-priority-wide {
    grid-column: span 1;  /* 1 colonne = demi-largeur de la zone */
    order: unset;
}

/* Supprimer l'ancien span 2 qui causait 4 cartes sur la même ligne */
.rec-priority-half {
    grid-column: unset !important;
}

/* ── Bouton achat plus grand et visible ── */
.rpw-buy-btn {
    padding: 8px 14px !important;
    font-size: .78rem !important;
    border-radius: 9px !important;
    gap: 5px !important;
}
.rpw-buy-btn--lg {
    padding: 10px 16px !important;
    font-size: .84rem !important;
    bottom: 8px !important;
}

/* ── Recommandation card animations ── */
.rec-std-card { perspective: 800px; }  /* needed for rotateY */
@keyframes recSpin {
    from { transform: rotateY(0deg) scale(1); }
    to   { transform: rotateY(90deg) scale(0.8); }
}

/* ── Recommandation achat ── */
.rec-buy-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
    width: 100%;
    transition: filter .15s;
}
.rec-buy-cta:hover { filter: brightness(1.1); }

/* ═══════════════════════════════════════════════════════════════
   GACHA DUEL LÉGENDAIRE
═══════════════════════════════════════════════════════════════ */

.gacha-duel-overlay {
    z-index: 9999;
    background: rgba(0,0,0,.85);
}
.gacha-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(252,211,77,.08) 0%, transparent 70%);
    pointer-events: none;
}
.gacha-duel-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 24px;
    max-width: 600px;
    width: 96%;
    z-index: 1;
}
.gacha-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.gacha-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 110%;
    animation: gachaFloat linear infinite;
}
@keyframes gachaFloat {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-110vh) rotate(720deg); opacity: 0; }
}
.gacha-question {
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 30px rgba(252,211,77,.8), 0 2px 4px rgba(0,0,0,.5);
    letter-spacing: .02em;
}
.gacha-subtitle {
    font-size: .85rem;
    font-weight: 700;
    color: #fcd34d;
    text-align: center;
    letter-spacing: .12em;
    animation: gachaSubtitlePulse 1.5s ease-in-out infinite;
}
@keyframes gachaSubtitlePulse {
    0%, 100% { opacity: .7; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.05); }
}
.gacha-cards-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.gacha-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.07);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 20px 16px;
    text-decoration: none;
    width: 230px;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    animation: gachaCardIn .5s cubic-bezier(.175,.885,.32,1.275) both;
    backdrop-filter: blur(10px);
}
.gacha-card--red  { animation-delay: .1s; }
.gacha-card--blue { animation-delay: .25s; }
@keyframes gachaCardIn {
    from { transform: translateY(60px) scale(.8); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.gacha-card:hover { transform: translateY(-8px) scale(1.04); }
.gacha-card--red:hover  { box-shadow: 0 0 40px rgba(239,68,68,.6), 0 0 80px rgba(239,68,68,.2); border-color: #ef4444; }
.gacha-card--blue:hover { box-shadow: 0 0 40px rgba(59,130,246,.6), 0 0 80px rgba(59,130,246,.2); border-color: #3b82f6; }
.gacha-card-glow {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.gacha-card--red  .gacha-card-glow { background: radial-gradient(ellipse, rgba(239,68,68,.3), transparent 70%); }
.gacha-card--blue .gacha-card-glow { background: radial-gradient(ellipse, rgba(59,130,246,.3), transparent 70%); }
.gacha-card:hover .gacha-card-glow { opacity: 1; }
.gacha-cover {
    width: 160px;
    height: 232px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.gacha-info { text-align: center; }
.gacha-title {
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gacha-vol   { font-size: .72rem; color: rgba(255,255,255,.6); margin-top: 3px; }
.gacha-stars { font-size: .7rem; margin-top: 4px; }
.gacha-cta   {
    margin-top: 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.gacha-card--red  .gacha-cta { color: #fca5a5; }
.gacha-card--blue .gacha-cta { color: #93c5fd; }
.gacha-vs {
    font-size: 2rem;
    font-weight: 900;
    color: #fcd34d;
    text-shadow: 0 0 20px rgba(252,211,77,.8);
    animation: vsGlow 1.2s ease-in-out infinite alternate;
    flex-shrink: 0;
}
@keyframes vsGlow {
    from { text-shadow: 0 0 10px rgba(252,211,77,.4); }
    to   { text-shadow: 0 0 30px rgba(252,211,77,1), 0 0 60px rgba(245,158,11,.5); }
}
.gacha-close-btn {
    margin-top: 4px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.5);
    border-radius: 8px;
    padding: 6px 20px;
    font-size: .78rem;
    cursor: pointer;
    transition: all .15s;
}
.gacha-close-btn:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8); }


/* ── Carte Acheter permanente ── */
.rec-buy-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    background: var(--card-bg);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 10px 12px;
    position: relative;
    box-shadow: 0 0 12px rgba(59,130,246,.2);
    flex: 1;
    min-width: 0;
    height: 150px;       /* hauteur fixe identique pour les deux cartes */
    box-sizing: border-box;
    transition: box-shadow .2s;
    overflow: hidden;
}
.rec-buy-card:hover { box-shadow: 0 0 20px rgba(59,130,246,.35); }
.rec-buy-cover {
    width: 56px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.rec-buy-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.rec-buy-body .rec-buy-cta,
.rec-buy-body a[href] {
    margin-top: auto;   /* pousse le bouton tout en bas */
    align-self: flex-start;
    flex-shrink: 0;
}
.rec-buy-label {
    font-size: .68rem;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.rec-buy-title {
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-buy-vol {
    font-size: .75rem;
    color: var(--gray-text);
}
.rec-buy-stars { margin-top: 2px; }
.rec-buy-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 7px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter .15s;
    width: fit-content;
}
.rec-buy-cta:hover { filter: brightness(1.1); }
.rec-buy-shuffle-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    font-size: .85rem;
    padding: 4px 6px;
    border-radius: 5px;
    transition: color .15s;
}
.rec-buy-shuffle-btn:hover { color: #3b82f6; }

/* ── Random Gacha Duel additions ── */
.gacha-card--clickable { cursor: pointer; }
.gacha-card--clickable:active { transform: scale(0.97); }



/* Aligne les boutons d'achat en bas des petites cartes */
.rec-std-body a.rec-buy-cta,
.rec-std-body .rec-buy-cta {
    margin-top: auto;
    display: block;
    width: fit-content;
}
/* Fait grandir la zone type/label pour pousser le CTA vers le bas */
.rec-std-type {
    flex-grow: 1;
}

/* Panier Express : bouton "Tout mettre au panier" toujours en bas à gauche */
.basket-fixed-cta {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin-top: 0 !important;
}
/* Panier Express card needs enough padding at bottom for the fixed CTA */
.rec-buy-card[data-recommendation-type="basket-express"] {
    padding-bottom: 42px;
}

/* Carte tarot - styles via JS inline */

/* ── Gamification ── */
@keyframes barFillFlash {
    0%   { filter: brightness(1); }
    30%  { filter: brightness(2) saturate(2); box-shadow: 0 0 20px currentColor; }
    60%  { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}
.bar-fill-flash {
    animation: barFillFlash 1.2s ease-out;
}


/* ── Gamification animations ── */
@keyframes _barFlash {
    0%,100% { filter: brightness(1); }
    40%      { filter: brightness(2.2) saturate(2); box-shadow: 0 0 18px currentColor; }
}
.gam-bar-flash { animation: _barFlash 1.1s ease-out !important; }

/* ── Aura Tomes Anciens & Mythiques ───────────────────────────── */
@keyframes mythicPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(168,85,247,.4), 0 0 12px rgba(168,85,247,.2); }
    50%       { box-shadow: 0 0 0 2px rgba(168,85,247,.8), 0 0 20px rgba(168,85,247,.4); }
}
@keyframes ancientPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(59,130,246,.3), 0 0 10px rgba(59,130,246,.15); }
    50%       { box-shadow: 0 0 0 2px rgba(59,130,246,.6), 0 0 16px rgba(59,130,246,.3); }
}
.volume-card.volume-mythic {
    animation: mythicPulse 2.5s ease-in-out infinite;
    border-radius: 8px;
    position: relative;
}
.volume-card.volume-mythic::after {
    content: '✨';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: .65rem;
    z-index: 2;
    filter: drop-shadow(0 0 4px rgba(168,85,247,.8));
}
.volume-card.volume-ancient {
    animation: ancientPulse 3s ease-in-out infinite;
    border-radius: 8px;
}



/* ── Auras tomes anciens & mythiques ─────────────────────────── */
@keyframes volMythicPulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(168,85,247,.35), 0 0 10px rgba(168,85,247,.15); }
    50%      { box-shadow: 0 0 0 2px rgba(168,85,247,.8),  0 0 18px rgba(168,85,247,.4); }
}
@keyframes volAncientPulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(59,130,246,.3), 0 0 8px rgba(59,130,246,.12); }
    50%      { box-shadow: 0 0 0 2px rgba(59,130,246,.65), 0 0 14px rgba(59,130,246,.28); }
}
.volume-card.vol-mythic {
    animation: volMythicPulse 2.5s ease-in-out infinite;
    border-radius: 8px;
    position: relative;
}
.volume-card.vol-mythic::after {
    content: '✨';
    position: absolute;
    top: 2px; left: 3px;
    font-size: .6rem;
    z-index: 3;
    line-height: 1;
}
.volume-card.vol-ancient {
    animation: volAncientPulse 3s ease-in-out infinite;
    border-radius: 8px;
}
.volume-card.vol-ancient::after {
    content: '💎';
    position: absolute;
    top: 2px; left: 3px;
    font-size: .6rem;
    z-index: 3;
    line-height: 1;
}