/* ========================================
   STEP 3 - PERSONA SELECTION
   Styles specifiques pour la selection de personas
   Base: asset-card (defini dans step2.css)
   ======================================== */

/* Persona Cards
   Herite de .asset-card pour les comportements de base (hover, selected, check) */
.persona-card {
    text-align: left;
}

/* Persona Avatar */
.persona-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 1.5rem;
}

/* Persona Score Badge */
.persona-score-badge {
    background: #28a745;
    color: white;
    font-size: 0.7rem;
}

.persona-score-badge-warning {
    background: #ffc107;
    color: #000;
    font-size: 0.7rem;
}

/* Persona Title */
.persona-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
}

/* Persona Category Badge */
.persona-category-badge {
    font-size: 0.75rem;
}

/* Persona Subtitle (age, role, location) */
.persona-subtitle {
    color: var(--text-secondary);
}

/* Persona Description */
.persona-description {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Persona Tags */
.persona-tag {
    font-size: 0.7rem;
}

/* ========================================
   PROFILIA SIDEBAR
   Colonne droite Step 3 : confrontation des personas aux segments Profilia.
   ======================================== */
.profilia-sidebar .form-section {
    position: sticky;
    top: var(--spacing-lg);
}

/* ========================================
   PROFILIA SIDEBAR - ANALYSE STATES
   Etats pilotes par le controller Stimulus (initial / loading / result / error).
   Tout est token-driven : les 3 themes (light, dark-blue, dark-red) sont
   couverts automatiquement via les tokens --color-* / --text-* / --theme-*,
   sans regle par-theme dans ce fichier.
   ======================================== */

/* --- Loading : spinner ---------------------------------------------------- */
/* Ajuste le calibre du spinner Bootstrap (couleur geree par .text-primary,
   qui suit --bs-primary remappe par theme). */
.profilia-spinner {
    width: 2.5rem;
    height: 2.5rem;
}

/* --- Loading : barre de progression -------------------------------------- */
/* Piste fine. La couleur de la barre vient de .bg-primary (themable). */
.profilia-progress {
    height: 6px;
    border-radius: var(--border-radius-sm);
}

/* --- Loading : etapes (4 lignes) ----------------------------------------- */
/* Etat initial : icone + libelle en text-secondary (gere par les classes
   Bootstrap .text-secondary du markup). Le JS bascule la classe is-done sur
   la ligne et remplace l'icone (bi-circle -> bi-check-circle-fill). */
.profilia-step {
    transition: color var(--transition-base) var(--easing-base);
}

.profilia-step.is-done > i,
.profilia-step.is-done > span {
    color: var(--color-primary);
}

/* --- Result : ligne de segment matche ------------------------------------ */
/* Reproduit le "border-bottom p-3" du mockup avec un survol discret. */
.profilia-segment {
    transition: background-color var(--transition-base) var(--easing-base);
}

.profilia-segment:hover {
    background-color: var(--theme-bg-secondary);
}

/* --- Result : bloc resume du reach --------------------------------------- */
/* Remplace le .bg-light du mockup (gris fixe, non themable) par une surface
   pilotee par les tokens, lisible sur les 3 themes. */
.profilia-reach-summary {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

/* --- Initial : badges d'info ---------------------------------------------- */
/* Remplace le combo Bootstrap .bg-light.text-dark.border (gris clair fixe, non
   themable) par une surface pilotee par les tokens, lisible sur les 3 themes.
   Le badge conserve .badge .small pour le calibre ; les icones internes gardent
   leurs classes Bootstrap themables (.text-primary, .text-success, etc.). */
.profilia-info-badge {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-border-color);
}

/* --- Error : conteneur d'erreur ------------------------------------------ */
/* Le markup utilise un .alert.alert-danger standard Bootstrap ; cette classe
   reste un point d'accroche optionnel pour le controller Stimulus. */
.profilia-error {
    margin-bottom: 0;
}
/* ========================================
   PERSONA DETAIL CTA (icone-bouton top-right)
   Position en absolute dans la persona-card,
   icone discrete avec tooltip natif.
   ======================================== */
.persona-detail-trigger {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border, #e3e4e9);
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    color: var(--text-secondary, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.persona-detail-trigger:hover,
.persona-detail-trigger:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: var(--bg-card, #ffffff);
    outline: none;
    transform: scale(1.05);
}

.persona-card.selected .persona-detail-trigger {
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.persona-card.selected .persona-detail-trigger:hover,
.persona-card.selected .persona-detail-trigger:focus-visible {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   PERSONA DETAIL MODAL (sections en cards)
   Design aligne sur step5/select.html.twig
   modale Source des contacts (card-body avec
   icone coloree a gauche + contenu).
   ======================================== */
.persona-detail-card {
    border-color: var(--border, #e3e4e9);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.persona-detail-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.persona-detail-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.persona-detail-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.persona-detail-card-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

.persona-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.persona-detail-badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}

.persona-detail-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.persona-detail-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.persona-detail-list li:last-child {
    margin-bottom: 0;
}

.persona-detail-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
}