/* ===== Composant « callout » : encadré d'information / alerte réutilisable =====
   Rendu par Views/Visa/Shared/_Callout.cshtml. Variantes info (bleu) / error (rouge) /
   success (vert), toutes sur le même schéma de contraste (fond pâle + bordure saturée fine). */

.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm2);
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-sm2);
    border: 0.1rem solid;
    /* 8px (maquette Figma) = var(--border-radius-md) — pas var(--border-radius-lg) qui vaut
       1.2rem (19.2px) et reste partagée par page-card/error/contact/etc. */
    border-radius: var(--border-radius-md);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    /* Un callout peut être masqué/affiché dynamiquement (ex. erreur BIN). */
    &[hidden] {
        display: none;
    }
}

.callout__icon {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
}

/* Titre + texte optionnels (pattern : Title + Content passés au CalloutModel) */
.callout__content {
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    color: var(--color-text-body);
}

.callout__title {
    margin: 0 0 0.2rem;
    font-weight: var(--font-weight-bold);
}

/* Soulignement permanent (pas seulement au survol) : un lien inline dans le texte du callout
   ne doit pas reposer uniquement sur la couleur pour être distingué (WCAG 1.4.1 / audit
   Lighthouse link-in-text-block). */
.callout__content a {
    text-decoration: underline;
}

.callout__text {
    margin: 0;
    font-size: var(--font-size-label); /* 14px (1rem = 16px) */
}

/* Action optionnelle (ex. bouton « Voir plus ») affichée sous le texte du callout — toujours
   sur sa propre ligne (display: block), quelle que soit la longueur du texte qui précède.
   Annule le padding horizontal de .answer-info-btn (answer-card.css) pour aligner le texte du
   bouton avec le texte du callout au-dessus (le padding sert au voisinage avec .answer-select-btn
   dans .answer-card__actions, pas d'usage ici). */
.callout__action {
    display: block;
    width: fit-content;
    margin-top: var(--spacing-xs2);
    padding-left: 0;
    padding-right: 0;
}

/* Variante information (bleu de marque) */
.callout--info {
    background: var(--color-callout-info-bg);
    border-color: var(--color-primary);

    & .callout__icon {
        color: var(--color-primary);
    }
}

/* Variante erreur (rouge) */
.callout--error {
    background: var(--color-error-bg-subtle);
    border-color: var(--color-error);

    & .callout__icon {
        color: var(--color-error);
    }

    & .callout__content a {
        color: var(--color-error);
    }
}

/* Variante succès (vert) */
.callout--success {
    background: var(--color-success-light);
    border-color: var(--color-success);

    & .callout__icon {
        color: var(--color-success2);
    }

    & .callout__content a {
        color: var(--color-success2);
    }
}

/* Variante « document envoyé » (titre en gras 18px, sous-texte 14px normal) — Process/LinkedClaimAttachments
   (groupe de documents entièrement transmis) et Claim/DetailsVisa (bannière "documents reçus"). À combiner
   avec .callout--success (ex. CssClass = "callout--doc-sent" sur le CalloutModel). */
.callout--doc-sent {
    & .callout__title {
        font-size: var(--font-size-md); /* 18px */
        font-weight: var(--font-weight-bold);
    }

    & .callout__text {
        font-weight: var(--font-weight-normal);
    }
}

.callout--success.callout--doc-sent {
    background: var(--color-callout-doc-sent-bg);
    border-color: var(--color-success2); /* #047D26 */

    & .callout__title,
    & .callout__text {
        color: var(--color-success2); /* #047D26 */
    }
}

/* Variante avertissement (ambre) — ex. bannière conflit/voyage sur la home (home-hero__notice). */
.callout--warning {
    background: var(--color-callout-warning-bg);
    border-color: var(--color-callout-warning-border);

    & .callout__icon {
        color: var(--color-icon-warning);
    }
}

/* Variante refermable : bouton × positionné en haut à droite. */
.callout--dismissible {
    position: relative;
    padding-right: calc(var(--spacing-md3) + var(--spacing-xl));
}

.callout__close {
    position: absolute;
    top: var(--spacing-xs2);
    right: var(--spacing-xs2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    padding: 0;
    line-height: 0;
    opacity: 0.7;

    & svg {
        width: 1.6rem;
        height: 1.6rem;
    }

    &:hover {
        opacity: 1;
        background: var(--color-hover-overlay);
    }

    &:focus-visible {
        outline: 0.2rem solid currentColor;
        outline-offset: 0.2rem;
        opacity: 1;
    }
}