/* ============================================================================
   MODAL CONTENT — Unified Content Styles (mc-* prefix)
   ============================================================================
   Système de classes génériques pour le contenu des modales.
   Remplace les classes spécifiques (modal-login-required, modal-quota-exceeded,
   modal-error-message, modal-sequel-choice, modal-user-branch, 
   modal-narrative-paths, preview-modal, insufficient-credits, etc.)
   
   Blocs :
   - mc-status    : Icône + titre + message + actions (alerte/statut)
   - mc-choices   : Description + grille de choix (cartes cliquables)
   - mc-nav       : Description + liste navigable (liens avec indicateur)
   - mc-preview   : Prévisualisation de contenu (header, stats, texte)
   - mc-empty     : État vide centré (icône + message)
   - mc-context   : Aperçu contextuel (citation de commentaire parent, etc.)
   - mc-details   : Grille label/valeur pour détails (crédits, etc.)
   ============================================================================ */


/* ============================================================================
   MC-STATUS — Bloc alerte / statut centré
   Usage : connexion requise, quota épuisé, erreur, crédits insuffisants
   ============================================================================ */

.mc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg, 24px);
}

.mc-status__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md, 16px);
    /* Couleur par défaut (primary) */
    background: var(--color-primary-light, #eff6ff);
}

.mc-status__icon i {
    font-size: 1.75rem;
    color: var(--color-primary, #3b82f6);
}

/* Variantes de couleur d'icône */
.mc-status__icon--warning {
    background: var(--color-warning-light, #fef3c7);
}

.mc-status__icon--warning i {
    color: var(--color-warning, #f59e0b);
}

.mc-status__icon--danger {
    background: var(--color-danger-light, #fef2f2);
}

.mc-status__icon--danger i {
    color: var(--color-danger, #ef4444);
}

.mc-status__icon--info {
    background: var(--color-info-light, #dbeafe);
}

.mc-status__icon--info i {
    color: var(--color-info, #3b82f6);
}

/* Icône fa-lock → style warning automatique */
.mc-status__icon i.fa-lock {
    color: var(--color-warning, #f59e0b);
}

.mc-status__icon:has(i.fa-lock) {
    background: var(--color-warning-light, #fef3c7);
}

.mc-status__title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text, #111827);
    margin: 0 0 var(--spacing-sm, 8px) 0;
}

.mc-status__text {
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 var(--spacing-lg, 24px) 0;
    font-size: var(--font-size-md, 1rem);
    line-height: 1.6;
}

.mc-status__extra {
    margin-bottom: var(--spacing-lg, 24px);
}

.mc-status__actions {
    display: flex;
    gap: var(--spacing-sm, 8px);
}

.mc-status__note {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #9ca3af);
    margin: var(--spacing-md, 16px) 0 0 0;
    font-style: italic;
}


/* ============================================================================
   MC-CHOICES — Grille de choix (cartes cliquables)
   Usage : choix de suite (créer / rattacher)
   ============================================================================ */

.mc-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.mc-choices__description {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    margin: 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.mc-choices__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 560px) {
    .mc-choices__grid {
        grid-template-columns: 1fr;
    }
}

.mc-choices__footer {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* --- Carte de choix individuelle --- */

.mc-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.mc-choice-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mc-choice-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-fast);
}

.mc-choice-card:hover .mc-choice-card__icon {
    background: var(--color-primary);
    color: var(--color-surface);
    transform: scale(1.1);
}

.mc-choice-card__icon i {
    font-size: 1.25rem;
}

.mc-choice-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs) 0;
}

.mc-choice-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-normal);
}


/* ============================================================================
   MC-NAV — Liste navigable (liens avec indicateur)
   Usage : branche utilisateur, chemins de convergence
   ============================================================================ */

.mc-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Header optionnel (titre d'histoire + compteur) */
.mc-nav__header {
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.mc-nav__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs) 0;
}

.mc-nav__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.mc-nav__count i {
    color: var(--color-primary);
}

/* Description centrée (convergence) */
.mc-nav__description {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    margin: 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

/* Liste */
.mc-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Item de liste (wrapper <li>) */
.mc-nav__item {
    position: relative;
}

/* Connecteur vertical entre items (branche narrative) */
.mc-nav__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--spacing-md) + 18px);
    top: 100%;
    width: 2px;
    height: var(--spacing-xs);
    background: var(--color-primary);
    opacity: 0.2;
}

/* Modificateur --flat : supprime le connecteur vertical (convergence) */
.mc-nav--flat .mc-nav__item:not(:last-child)::after {
    display: none;
}

/* Lien cliquable (la carte entière) */
.mc-nav__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}

.mc-nav__link:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    transform: translateX(4px);
}

/* Indicateur rond (numéro d'étape ou icône) */
.mc-nav__indicator {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: 50%;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

/* Bloc d'information (titre + méta) */
.mc-nav__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mc-nav__label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Flèche d'action */
.mc-nav__arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.mc-nav__link:hover .mc-nav__arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}


/* ============================================================================
   MC-PREVIEW — Prévisualisation de contenu
   Usage : aperçu de chapitre
   ============================================================================ */

.mc-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 16px);
}

.mc-preview__illustration {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: var(--border-radius, 8px);
    margin-bottom: var(--spacing-sm, 8px);
}

.mc-preview__illustration img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mc-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-sm, 8px);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.mc-preview__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #666);
}

.mc-preview__author i {
    color: var(--color-primary, #007bff);
}

.mc-preview__badges {
    display: flex;
    align-items: center;
}

.mc-preview__hook {
    font-style: italic;
    color: var(--text-secondary, #666);
    font-size: var(--font-size-base, 1rem);
    margin: var(--spacing-sm, 8px) 0;
}

.mc-preview__content {
    line-height: 1.6;
    color: var(--text-primary, #333);
    font-size: var(--font-size-base, 1rem);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--spacing-sm, 8px);
}

.mc-preview__stats {
    display: flex;
    gap: var(--spacing-lg, 24px);
    padding: var(--spacing-sm, 8px) 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-secondary, #666);
    font-size: var(--font-size-sm, 0.875rem);
}

.mc-preview__stats span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
}

.mc-preview__stats i {
    color: var(--color-primary, #007bff);
}

.mc-preview__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--spacing-sm, 8px);
}


/* ============================================================================
   MC-EMPTY — État vide centré
   Usage : pas de branche, pas de convergence, etc.
   ============================================================================ */

.mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl, 32px) var(--spacing-lg, 24px);
}

.mc-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md, 16px);
    border-radius: 50%;
    background: var(--color-primary-tint, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--color-primary, #3b82f6);
}

.mc-empty__text {
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
    font-size: var(--font-size-md, 1rem);
}


/* ============================================================================
   MC-CONTEXT — Aperçu contextuel (commentaire parent, citation, etc.)
   Usage : modale de réponse à un commentaire
   ============================================================================ */

.mc-context {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.mc-context__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    padding-left: 0;
}

.mc-context__label i {
    color: var(--color-primary);
    margin-right: var(--spacing-xs);
}

/* Contenu imbriqué dans le contexte */
.mc-context__body {
    background: var(--color-white, #fff);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    border-bottom: none;
}

/* Masquer les éléments interactifs dans le contexte */
.mc-context .comment__footer {
    display: none;
}

/* Responsive */
@media (max-width: 480px) {
    .mc-context {
        padding: var(--spacing-sm);
    }

    .mc-context__body {
        padding: var(--spacing-xs);
    }
}


/* ============================================================================
   MC-DETAILS — Grille label/valeur pour détails
   Usage : crédits insuffisants (solde, requis, manquant)
   ============================================================================ */

.mc-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-md, 1rem);
    background-color: var(--color-bg-subtle, #f8f9fa);
    border-radius: var(--border-radius-md, 0.5rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.mc-details__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-details__label {
    color: var(--color-text-muted, #6c757d);
}

.mc-details__value {
    font-weight: var(--font-weight-medium, 500);
}

.mc-details__row--highlight {
    padding-top: var(--spacing-sm, 0.5rem);
    border-top: 1px solid var(--color-border, #dee2e6);
}

/* ============================================================================
   BRANCH SHARE FORM — Formulaire de partage de branche
   ============================================================================ */

.branch-share-form__info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-md, 16px);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg, #f8f9fa);
    border: 1px solid var(--color-border, #dee2e6);
}

.branch-share-form__icon {
    font-size: var(--font-size-xl, 1.25rem);
    color: #9370db;
    flex-shrink: 0;
}

.branch-share-form__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.branch-share-form__story-title {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #212529);
    margin: 0;
}

.branch-share-form__meta {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #6c757d);
    margin: 0;
}

.branch-share-form__meta i {
    margin-right: 2px;
}

.branch-share-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 8px);
    margin-top: var(--spacing-md, 16px);
}

/* ============================================================================
   MC-NAV FOOTER — Zone d'actions en bas de la navigation
   Usage : boutons partager/effacer (user-branch), adopter (branch-share-preview)
   ============================================================================ */

.mc-nav__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 8px);
    padding-top: var(--spacing-md, 16px);
    border-top: 1px solid var(--color-border, #dee2e6);
}


/* ============================================================================
   MC-STEPS — Liste d'étapes numérotées dans une modale
   Usage : info produit, tutoriels, processus en plusieurs étapes
   ============================================================================ */

.mc-steps {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary, #f8f9fa);
    border-radius: var(--radius-md);
    text-align: left;
}

.mc-steps__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm);
}

.mc-steps__list {
    margin: 0;
    padding-left: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.mc-steps__list li::marker {
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}


/* ============================================================================
   MC-PURCHASE — Modale d'achat unifiée
   Usage : achat de slots, illustrations, verrouillage — via PurchaseConfirmForm
   ============================================================================ */

.mc-purchase__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.mc-purchase__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.2));
    border-radius: var(--radius-md);
    color: var(--primary-color);
    font-size: 1.25rem;
}

/* Quantity control */
.mc-purchase__quantity {
    margin-bottom: var(--spacing-lg);
}

.mc-purchase__quantity-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

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

.mc-purchase__quantity-input {
    width: 80px;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--text-primary);
}

.mc-purchase__quantity-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.mc-purchase__qty-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert */
.mc-purchase__alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.mc-purchase__alert--hidden {
    display: none;
}

@media (max-width: 576px) {
    .mc-purchase__quantity-control {
        justify-content: center;
    }
}

/* Context info (chapter/story for chapter_slot and sequels_lock) */
.chapter-slot-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary, #f8f9fa);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

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

.chapter-slot-info__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.chapter-slot-info__value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}