/**
 * ============================================================================
 * CARDS CSS - Système de cards réutilisable unifié
 * ============================================================================
 * 
 * Combine les cards génériques et les story cards BEM
 * Utilise les variables CSS globales de variables.css
 * 
 * Types supportés:
 * - Cards génériques : .card avec variantes (.card-primary, .card-success, etc.)
 * - Story cards BEM : .card--story avec modificateurs (.card--featured, .card--no-image)
 * 
 * @version 2.0.0
 * @author InkFramework
 * ============================================================================
 */

/* ============================================================================
   CARD BASE - Structure commune à tous les types
   ============================================================================ */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

/* Bordure optionnelle */
.card-bordered {
    border: var(--border-width) solid var(--border-color-light);
}

/* Ombre optionnelle */
.card-shadow {
    box-shadow: var(--shadow-md);
}

/* Effet hover */
.card-hoverable {
    cursor: pointer;
}

.card-hoverable:hover,
.card-hoverable:focus {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

/* ============================================================================
   CARD SIZES - Tailles
   ============================================================================ */

.card-small {
    font-size: var(--font-size-sm);
}

.card-small .card-header,
.card-small .card-body,
.card-small .card-footer,
.card-small .card__content {
    padding: var(--spacing-sm);
}

.card-medium .card-header,
.card-medium .card-body,
.card-medium .card-footer,
.card-medium .card__content {
    padding: var(--spacing-md);
}

.card-large {
    font-size: var(--font-size-lg);
}

.card-large .card-header,
.card-large .card-body,
.card-large .card-footer,
.card-large .card__content {
    padding: var(--spacing-lg);
}

/* ============================================================================
   CARD VARIANTS - Variantes de couleurs sémantiques
   ============================================================================ */

.card-primary {
    background-color: var(--color-primary);
    color: white;
}

.card-primary.card-bordered {
    border-color: var(--color-primary-dark);
}

.card-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.card-secondary.card-bordered {
    border-color: var(--color-tertiary);
}

.card-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.card-success.card-bordered {
    border-color: var(--color-success-border);
}

.card-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.card-warning.card-bordered {
    border-color: var(--color-warning);
}

.card-danger,
.card-error {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

.card-danger.card-bordered,
.card-error.card-bordered {
    border-color: var(--color-error-border);
}

.card-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.card-info.card-bordered {
    border-color: var(--color-info);
}

/* ============================================================================
   CARD MODIFIERS BEM - Pour story cards
   ============================================================================ */


.card--featured {
    border: 2px solid var(--color-accent-1);
}

.card--no-image .card__content {
    padding-top: var(--spacing-lg);
}

/* États des cards - Génériques et réutilisables */
.card--draft {
    opacity: 0.7;
    border-left: 4px solid var(--color-warning);
}

.card--archived {
    opacity: 0.6;
    filter: grayscale(0.6);
    border-left: 4px solid var(--color-text-muted);
}

.card--deleted {
    opacity: 0.3;
    filter: grayscale(0.8);
    border-left: 4px solid var(--color-error);
    pointer-events: none;
}

/* ============================================================================
   STATE BADGES - Style ruban (ribbon) en haut à droite
   Libère l'espace en haut à gauche pour le badge de catégorie
   ============================================================================ */

.card__state-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px var(--spacing-md) 4px var(--spacing-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: white;
    /* Style ruban avec coin coupé */
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--spacing-sm) 100%);
    border-radius: 0 var(--radius-lg) 0 0;
}

.card__state-badge--draft {
    background-color: var(--color-warning);
}

.card__state-badge--archived {
    background-color: var(--color-text-muted);
}

.card__state-badge--deleted {
    background-color: var(--color-error);
}

.card__state-badge--open {
    background-color: var(--color-success, #22c55e);
}

.card__state-badge--closed {
    background-color: var(--color-text-muted);
}

/* Le state badge reste toujours en haut à droite, même avec featured badge */
.card--featured .card__state-badge {
    /* Le featured badge est aussi à droite, on décale le state badge */
    top: calc(var(--spacing-md) + 28px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--spacing-sm) 100%);
}

/* ============================================================================
   FEATURED BADGE
   ============================================================================ */

.card__featured-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background-color: var(--color-accent-1);
    color: var(--color-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
}

/* ============================================================================
   CARD SECTIONS - Header, Body, Footer, Content
   ============================================================================ */

.card-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-divider);
}

.card-body {
    padding: var(--spacing-md);
    flex: 1 1 auto;
}

.card-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-divider);
}

/* BEM Content (pour story cards) */
.card__content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Titre et sous-titre */
.card-title,
.card__title {
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lien dans le titre */
.card__title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.card__title-link:hover {
    color: var(--color-primary);
}

/* Lien sur l'image */
.card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.card__image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.card:hover .card__image-link img {
    transform: scale(1.05);
}

.card-subtitle {
    margin: var(--spacing-xs) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.card-description,
.card__excerpt {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

.card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ============================================================================
   CARD IMAGE - Gestion des images (générique et BEM)
   ============================================================================ */

.card-image,
.card__image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.card__image {
    height: 200px;
}

.card-image img,
.card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card:hover .card-image img,
.card:hover .card__image img {
    transform: scale(1.05);
}

/* Image en haut (par défaut) */
.card-image-top .card-image {
    border-bottom: 1px solid var(--color-divider);
}

.card-image-top .card-image img {
    max-height: 200px;
}

/* Image en arrière-plan */
.card-image-background {
    position: relative;
    min-height: 300px;
}

.card-image-background .card-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.card-image-background .card-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

.card-image-background .card-content-wrapper {
    position: relative;
    z-index: 1;
    color: white;
}

/* Layout horizontal (image à gauche ou droite) */
.card-horizontal {
    display: flex;
    flex-direction: row;
}

.card-image-left .card-horizontal {
    flex-direction: row;
}

.card-image-right .card-horizontal {
    flex-direction: row-reverse;
}

.card-image-left .card-image,
.card-image-right .card-image {
    flex: 0 0 40%;
    max-width: 40%;
}

.card-image-left .card-content-wrapper,
.card-image-right .card-content-wrapper {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   CATEGORY BADGES
   ============================================================================ */
   
article.card .card__category {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background-color: var(--color-primary);
    color: white;
}


/* ============================================================================
   CARD META - Author + Date
   ============================================================================ */

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Compat : ancien sélecteur + avatar unifié dans les cards */
.card__author-avatar,
.card__meta .entity-cell__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.card__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card__author-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.card__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ============================================================================
   CARD TAGS
   ============================================================================ */

.card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.tag {
    padding: 4px var(--spacing-sm);
    background-color: var(--color-gray-200);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    transition: all var(--transition-fast);
}

.tag:hover {
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
}

/* ============================================================================
   CARD FOOTER & STATS
   ============================================================================ */

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-divider);
}

.card__stats {
    display: flex;
    gap: var(--spacing-md);
}

.card__stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ============================================================================
   ACTION BUTTONS
   ============================================================================ */

.card-actions,
.card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xxs);
    align-items: center;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn:hover {
    background-color: var(--color-gray-200);
    color: var(--color-primary);
}

.action-btn--active {
    color: var(--color-error);
}

.action-btn--active:hover {
    background-color: var(--color-error-light);
}

/* ============================================================================
   TEXT ALIGNMENT
   ============================================================================ */

.card-text-left {
    text-align: left;
}

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

.card-text-center .card-actions,
.card-text-center .card__actions {
    justify-content: center;
}

.card-text-right {
    text-align: right;
}

.card-text-right .card-actions,
.card-text-right .card__actions {
    justify-content: flex-end;
}

/* ============================================================================
   CARD GRIDS - Systèmes de grille pour affichage multiple
   ============================================================================ */

.cards-grid,
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    padding: 0;
    margin: 0 0 var(--spacing-2xl) 0;
}

/* Grille pleine largeur (1 colonne) pour les chapitres */
.cards-grid-1,
.chapters-grid {
    grid-template-columns: 1fr;
}

/* Variantes de grille */
.cards-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - var(--spacing-md)), 1fr));
}

.cards-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - var(--spacing-md)), 1fr));
}

.cards-grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - var(--spacing-md)), 1fr));
}

/* Grille compacte pour les petites cartes (dashboard tabs, modals) */
.cards-grid--compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Info "X au total" sous un onglet */
.tab-content__more-info {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--spacing-sm) 0;
    margin: 0;
}

/* Bouton "Voir tout" sous un onglet */
.tab-content__see-all {
    display: flex;
    justify-content: center;
    padding: var(--spacing-md) 0 var(--spacing-sm);
}

/* Modale communauté story */
.story-community-modal__footer {
    padding-top: var(--spacing-md);
    text-align: center;
}

/* ============================================================================
   LOADING SKELETON - ContentLoader integration
   ============================================================================ */

.content-loader-skeleton-wrapper {
    display: contents;
}

.skeleton-card {
    pointer-events: none;
    opacity: 0.7;
}

.skeleton-card .card__image {
    background-color: var(--color-gray-200);
}

.skeleton-card .skeleton-media,
.skeleton-card .card__title,
.skeleton-card .card__excerpt,
.skeleton-card .card__author-avatar,
.skeleton-card .card__author-name,
.skeleton-card .card__date,
.skeleton-card .tag {
    background: linear-gradient(90deg, var(--color-gray-300) 25%, var(--color-gray-200) 50%, var(--color-gray-300) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-card .card__title {
    height: 24px;
    width: 85%;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

.skeleton-card .card__excerpt {
    height: 60px;
    width: 100%;
    border-radius: var(--radius-sm);
}

.skeleton-card .card__author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.skeleton-card .card__author-name {
    display: block;
    height: 14px;
    width: 120px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.skeleton-card .card__date {
    display: block;
    height: 12px;
    width: 80px;
    border-radius: var(--radius-sm);
}

.skeleton-card .tag {
    display: inline-block;
    height: 24px;
    width: 60px;
    border-radius: var(--radius-full);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   CARD HORIZONTAL LAYOUT - Image à gauche, contenu à droite
   Utilisé par les chapter cards (.card--chapter)
   ============================================================================ */

.card--horizontal {
    flex-direction: row;
}

.card--horizontal .card__image {
    flex: 0 0 200px;
    width: 200px;
    height: auto;
    min-height: 200px;
}

.card--horizontal .card__image img {
    height: 100%;
    min-height: 200px;
}

.card--horizontal .card__content {
    flex: 1;
    min-width: 0; /* Permet le text-overflow */
}

/* ============================================================================
   CHAPTER CARDS - Variantes spécifiques aux chapitres
   ============================================================================ */

.card--chapter {
    border: 2px solid transparent;
}

/* Hover unifié pour toutes les chapter cards (sequel + selection) */
.card--chapter:hover {
    border-color: var(--color-primary-light);
}

/* Mode start (premier chapitre) */
.card--chapter-start {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(54, 89, 87, 0.02) 100%);
}

.card--chapter-start .card__image {
    flex: 0 0 240px;
    width: 240px;
    min-height: 240px;
}

/* Variante: Ma suite (my-sequel) */
.card--my-sequel {
    border-color: var(--color-info, #4299e1);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(66, 153, 225, 0.03) 100%);
}

/* Variante: Suite de l'auteur (author-continuation) */
.card--author-continuation {
    border-color: var(--color-accent-1, #96D9D7);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(150, 217, 215, 0.03) 100%);
}

/* Variante: Sélectionné (selected) */
.card--selected {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(72, 187, 120, 0.03) 100%);
}

/* Variante: Dans la branche narrative (in-branch) */
.card--in-branch {
    border-color: var(--color-accent-2, #B794F4);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(183, 148, 244, 0.05) 100%);
}

/* Variante: Mis en avant (featured) - déjà défini mais on le surcharge pour cohérence */
.card--chapter.card--featured {
    border-color: var(--color-warning);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(237, 137, 54, 0.03) 100%);
}

/* ============================================================================
   CHAPTER BADGES - Badges spécifiques aux chapitres
   ============================================================================ */

.card__badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
    color: white;
}

/* Badge "Premier chapitre" */
.card__badge--chapter-start {
    position: relative;
    top: auto;
    right: auto;
    width: fit-content;
    background-color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* Badge "Vainqueur" — surcharge la couleur du badge --chapter-start */
.card__badge--contest-winner {
    background-color: var(--color-warning, #f59e0b);
    color: #fff;
}

/* Carte vainqueur de concours */
.card--contest-winner {
    border-color: var(--color-warning, #f59e0b);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.04) 100%);
}

.card--contest-winner:hover {
    border-color: var(--color-warning-dark, #b45309);
}

/* Badge "Ma suite" */
.card__badge--my-sequel {
    background-color: var(--color-info, #4299e1);
}

/* Badge "Suite de l'auteur" */
.card__badge--author {
    background-color: var(--color-accent-1, #96D9D7);
    color: var(--color-primary);
}

/* Badge "Votre choix" */
.card__badge--selected {
    background-color: var(--color-success);
}

/* Badge "Dans votre branche" */
.card__badge--in-branch {
    background-color: var(--color-accent-2, #B794F4);
}

/* Badge "Mis en avant" - complète le featured-badge existant */
.card__badge--featured {
    background-color: var(--color-warning);
}

/* Badge "Brouillon" - visible inline à côté du titre, uniquement pour l'auteur */
.card__badge--draft {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    background-color: var(--color-text-tertiary, #718096);
    font-size: var(--font-size-2xs, 0.7rem);
    padding: var(--spacing-2xs, 0.125rem) var(--spacing-xs, 0.375rem);
    margin-left: var(--spacing-xs, 0.375rem);
    vertical-align: middle;
}

/* ============================================================================
   PROPOSED BY - Cartouche "Proposé par"
   ============================================================================ */

.card__proposed-by {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    width: fit-content;
}

.card__proposed-by i {
    color: var(--color-primary);
}

.card__proposed-by-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

.card__proposed-by-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ============================================================================
   SELECTION MODE - Pour le rattachement de chapitres
   ============================================================================ */

.card--chapter-selection {
    cursor: pointer;
}

.card--chapter-selection.card--selected,
.card--chapter.card--selected {
    border-color: var(--color-success);
}

.card__select-indicator {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}

.card--chapter-selection:hover .card__select-indicator {
    opacity: 1;
}

.card--selected .card__select-indicator {
    opacity: 1;
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

/* ============================================================================
   STATS HIGHLIGHT - Pour le nombre de choix
   ============================================================================ */

.card__stat--highlight {
    color: var(--color-success);
}

.card__stat--highlight i {
    color: var(--color-success);
}

/* ============================================================================
   CHOOSE AS SEQUEL BUTTON - Bouton "Choisir comme suite"
   ============================================================================ */

.btn--choose-sequel {
    font-weight: var(--font-weight-semibold);
    gap: var(--spacing-xs);
}

.btn--choose-sequel i {
    font-size: var(--font-size-sm);
}

.btn--remove-from-branch {
    color: var(--color-danger, #e53e3e);
    border-color: var(--color-danger, #e53e3e);
    font-weight: var(--font-weight-semibold);
    gap: var(--spacing-xs);
}

.btn--remove-from-branch:hover {
    background: var(--color-danger, #e53e3e);
    color: white;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Tablettes */
@media (max-width: 1024px) {
    .cards-grid,
    .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }
    
    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: repeat(auto-fill, minmax(calc(50% - var(--spacing-sm)), 1fr));
    }
    
    .card-image-left .card-image,
    .card-image-right .card-image {
        flex: 0 0 35%;
        max-width: 35%;
    }
    
    /* Cartes horizontales sur tablette */
    .card--horizontal .card__image {
        flex: 0 0 180px;
        width: 180px;
        min-height: 180px;
    }
    
    .card--chapter-start .card__image {
        flex: 0 0 200px;
        width: 200px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cards-grid,
    .cards-grid-2,
    .cards-grid-3,
    .cards-grid-4,
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .card__content {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .card__footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .card__actions {
        width: 100%;
        justify-content: space-around;
    }
    
    .card__image {
        height: 180px;
    }
    
    /* Layout horizontal devient vertical */
    .card-horizontal,
    .card--horizontal {
        flex-direction: column !important;
    }
    
    .card--horizontal .card__image {
        flex: 0 0 auto;
        width: 100%;
        min-height: 200px;
        max-height: 200px;
    }
    
    .card--horizontal .card__image img {
        height: 200px;
        min-height: 200px;
    }
    
    .card--chapter-start .card__image {
        flex: 0 0 auto;
        width: 100%;
        min-height: 220px;
        max-height: 220px;
    }
    
    .card-image-left .card-image,
    .card-image-right .card-image {
        flex: 0 0 auto;
        max-width: 100%;
    }
    
    .card-image-left .card-image img,
    .card-image-right .card-image img {
        max-height: 200px;
    }
    
    .card-large .card-header,
    .card-large .card-body,
    .card-large .card-footer,
    .card-large .card__content {
        padding: var(--spacing-md);
    }
    
    .card-actions,
    .card__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Select indicator visible sur mobile */
    .card--chapter-selection .card__select-indicator {
        opacity: 1;
    }
}

/* Petit mobile */
@media (max-width: 480px) {
    .card-title,
    .card__title {
        font-size: var(--font-size-base);
    }
    
    .card-image-background {
        min-height: 250px;
    }
}

/* ============================================================================
   UTILITIES - Classes utilitaires
   ============================================================================ */

.card-full-width {
    width: 100%;
}

.card-no-padding .card-body,
.card-no-padding .card__content {
    padding: 0;
}

.card-compact .card-header,
.card-compact .card-body,
.card-compact .card-footer,
.card-compact .card__content {
    padding: var(--spacing-sm) !important;
}

/* Animation de chargement */
.card-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.card-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: card-shimmer 1.5s infinite;
}

@keyframes card-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================================================
   USER CARDS — .card--user
   Grande carte utilisateur avec avatar centré, nom, bio, stats et bouton
   ============================================================================ */

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

/* Header : avatar + badge rôle */
.card__user-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
    background: var(--color-surface);
}

.card__user-avatar {
    position: relative;
}

.card__user-avatar a {
    display: block;
    text-decoration: none;
}

.card__user-avatar .entity-cell__avatar {
    width: 80px;
    height: 80px;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-md);
}

.card__user-avatar .entity-cell__avatar--initials {
    width: 80px;
    height: 80px;
    font-size: var(--font-size-xl);
}

/* Le badge rôle utilise la classe partagée card__category--sm
   positionnée via margin-top dans ce contexte */
.card__user-header .card__category--sm {
    position: absolute;
    top:0;
    right:0;
    margin-top: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}

/* Content centré */
.card--user .card__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

.card--user .card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.card--user .card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.card--user .card__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.card--user .card__stats {
    justify-content: center;
    flex-wrap: wrap;
}

.card--user .card__footer {
    width: 100%;
    justify-content: center;
    padding-top: var(--spacing-sm);
    margin-top: auto;
}

.card--user .card__footer .btn {
    width: 100%;
}

/* --- Bannière utilisateur dans le header --- */
.card__user-header--has-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100px;
    position: relative;
}

/* Overlay semi-transparent pour lisibilité du badge rôle sur bannière */
.card__user-header--has-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.35) 100%
    );
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}

/* S'assurer que le contenu du header reste au-dessus de l'overlay */
.card__user-header--has-banner .card__user-avatar,
.card__user-header--has-banner .role-badge {
    position: relative;
    z-index: 1;
}

/* Avatar avec bordure blanche sur bannière */
.card__user-header--has-banner .entity-cell__avatar,
.card__user-header--has-banner .entity-cell__avatar--initials {
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-lg);
}

/* Badge rôle adapté sur bannière */
.card__user-header--has-banner .role-badge {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}




/* ============================================================================
   SMALL CARD — Petites cartes compactes horizontales
   ============================================================================
   
   Petite carte avec image à gauche et contenu à droite.
   Conçu pour les grilles compactes, sidebars et carrousels.
   Suit la même esthétique que .card (shadow-based, pas de border).
   
   Types :
   - .small-card--story   : petite carte story
   - .small-card--chapter : petite carte chapitre
   - .small-card--user    : petite carte utilisateur
   ============================================================================ */

/* ============================================================
   BASE
   ============================================================ */

.small-card {
    display: flex;
    flex-direction: row;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-base);
    min-height: 0;
}

.small-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ============================================================
   IMAGE SECTION (gauche)
   ============================================================ */

.small-card__image {
    flex: 0 0 120px;
    width: 120px;
    min-height: 120px;
    overflow: hidden;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.small-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition-fast);
}

.small-card:hover .small-card__img {
    opacity: 0.88;
}

/* User variant — avatar circulaire centré */
.small-card--user .small-card__image {
    background: transparent;
    padding: var(--spacing-md);
    flex: 0 0 auto;
    width: auto;
    min-height: auto;
}

.small-card--user .small-card__image .entity-cell__avatar {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-lg);
}

/* User bio : 3 lignes au lieu de 1 */
.small-card--user .small-card__subtitle {
    -webkit-line-clamp: 3;
}

/* ============================================================
   BODY SECTION (droite)
   ============================================================ */

.small-card__body {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ============================================================
   BADGE — Réutilise les classes de badge partagées
   (card__category / card__category--sm de ui-components.css)
   Pas de classe propre, on utilise card__category--sm
   dans le contexte small-card
   ============================================================ */

/* ============================================================
   TITRE
   ============================================================ */

.small-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.small-card__title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.small-card__title-link:hover {
    color: var(--color-primary);
}

/* ============================================================
   SOUS-TITRE
   ============================================================ */

.small-card__subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   AUTEUR (entity-cell)
   ============================================================ */

.small-card__author {
    margin: 0;
}

.small-card__author .entity-cell__link {
    color: inherit;
    text-decoration: none;
}

.small-card__author .entity-cell__link:hover .entity-cell__text {
    color: var(--color-primary);
}

/* ============================================================
   DATE
   ============================================================ */

.small-card__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ============================================================
   STATISTIQUES
   ============================================================ */

.small-card__stats {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: auto;
}

.small-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.small-card__stat i {
    font-size: 0.65rem;
}

/* ============================================================
   ACTIONS (slot optionnel)
   ============================================================ */

.small-card__actions {
    margin-top: auto;
    padding-top: var(--spacing-xs);
}

.small-card__actions .hero-actions__visitor {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.small-card__actions .btn--icon-only {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: var(--font-size-xs);
}

.small-card__actions .btn--icon-left {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: var(--spacing-xs);
}

.small-card__actions .btn__text {
    font-size: var(--font-size-xs);
}

/* ============================================================
   GRILLE DÉDIÉE AUX PETITES CARTES
   ============================================================ */

.small-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

.small-cards-grid-1 {
    grid-template-columns: 1fr;
}

.small-cards-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - var(--spacing-sm)), 1fr));
}

.small-cards-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - var(--spacing-sm)), 1fr));
}

/* ============================================================
   VARIANTES DE TYPE
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .small-card__image {
        flex: 0 0 100px;
        width: 100px;
        min-height: 100px;
    }

    .small-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .small-cards-grid-3 {
        grid-template-columns: repeat(auto-fill, minmax(calc(50% - var(--spacing-sm)), 1fr));
    }
}

@media (max-width: 768px) {
    .small-cards-grid,
    .small-cards-grid-2,
    .small-cards-grid-3 {
        grid-template-columns: 1fr;
    }

    .small-card__image {
        flex: 0 0 90px;
        width: 90px;
        min-height: 90px;
    }

    .small-card__body {
        padding: var(--spacing-sm);
    }

    .small-card__title {
        -webkit-line-clamp: 1;
    }


}

@media (max-width: 480px) {
    .small-card__image {
        flex: 0 0 80px;
        width: 80px;
        min-height: 80px;
    }

    .small-card__stats {
        gap: var(--spacing-sm);
    }
}

/* ============================================================
   SMALL CARD — DRAFT STATE
   ============================================================ */

.small-card--draft {
    opacity: 0.7;
    border-left: 4px solid var(--color-warning);
}

.small-card--draft .small-card__title-link {
    color: var(--color-text-muted);
}


/* ============================================================
   CAROUSEL COMPATIBILITY
   ============================================================ */

.carousel__track .small-card {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
}