/* ===== .answer-card — bouton « carte » de réponse/choix =====
   Design de référence : Root/Notice (boutons de langue). Repris par
   Process/ClaimDeclarationGlobalWarranty (.claim-warranty__answer-btn),
   Process/ClaimDeclaration (.claim-declaration__answer-btn, formats BIT/LIST simple) et
   Process/CreerSinistreLie (.creer-sinistre-lie__option-btn) — chaque page ne garde que sa
   propre largeur/disposition (voir notice.css / claim-declaration-global-warranty.css /
   claim-declaration.css / creer-sinistre-lie.css). */
.answer-card {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm); /* 16px */
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    background: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md); /* 8px */
    box-shadow: var(--shadow-lang-card); /* 0 3px 14px 0 #D8DDEA 75% */
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);

    &:hover {
        background: var(--color-btn-secondary-hover-bg);
        color: var(--color-btn-primary-hover); /* #0E2594 */
        box-shadow: var(--shadow-card-hover);
    }
}

/* Libellé du bouton (span interne) — un seul point de contrôle de line-height, partagé par
   toutes les pages listées ci-dessus. */
.answer-card__title {
    line-height: var(--line-height-snug);
}

/* Aperçu de description (max 80 caractères, cf. _AnswerCard.cshtml) sous le titre — le lien
   « voir plus » (.answer-card__see-more) termine ce texte en ligne (« … voir plus »). */
.answer-card__desc {
    margin: 0;
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-xs); /* 12px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body); /* #3D515A */
}

/* Lien « voir plus » inline en fin de .answer-card__desc — pas de chrome bouton, pas de
   soulignement par défaut (souligné au survol/focus, inverse de .radio-info-link). */
.answer-card__see-more {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:focus-visible {
        text-decoration: underline;
    }
}

/* ===== .question-label — titre au-dessus d'une liste .answer-list =====
   Déroge à la règle « pas de bold sur les titres » (base/typography.css) : identité
   typographique dédiée aux questions de questionnaire (demande explicite), distincte des
   titres de page (.page-card__title, h1). */
.question-label {
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-h2); /* 24px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-label); /* #706D6E */
    margin: 0 0 var(--spacing-md);
    line-height: var(--line-height-snug);
}

/* ===== .answer-list — <ul> de boutons .answer-card ===== */
.answer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm2);
}

/* ===== .answer-wrapper — bouton .answer-card + lien « En savoir plus » côte à côte ===== */
.answer-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Lien « En savoir plus » — largeur fixe, jamais rétréci (voisin de .answer-card en flex).
   Styles visuels fournis par .btn.btn--link (buttons.css). */
.answer-info-btn {
    flex-shrink: 0;
    white-space: nowrap;
    height: 2rem;
    padding: 0 var(--spacing-sm);

    /* .btn pose display:inline-flex (buttons.css) qui prime sinon sur [hidden] (règle UA) */
    &[hidden] { display: none; }
}

/* Bouton de sélection (« Sélectionner »/« Choisir ») d'une .answer-card--split — plus compact
   que le .btn.btn--primary par défaut. */
.answer-select-btn {
    height: 2rem;
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-semibold); /* 600 */
}

/* ===== .answer-card--split — variante non cliquable de .answer-card =====
   Le conteneur n'est plus un <button> (réponse avec description) : titre sur sa propre
   ligne, description (avec lien « voir plus » inline) puis bouton de sélection sur la ligne
   suivante via .answer-card__actions. Repris par Process/ClaimDeclaration et
   Process/ClaimDeclarationGlobalWarranty (réponses avec description). */
.answer-card--split {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    cursor: default;

    &:hover {
        background: var(--color-white);
        color: var(--color-heading);
        box-shadow: var(--shadow-lang-card);
    }
}

.answer-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

@media (max-width: 38.75em) {
    .answer-card {
        padding: var(--spacing-sm3) var(--spacing-md2);
    }

    .answer-wrapper {
        flex-wrap: wrap;
    }
}