/* ==========================================================================
   cta.css — composant d'appel à l'action du design system

   Déplacé depuis resilio-website/assets/styles/blog.css le 2026-09-07 : le
   composant était stylé dans l'application alors qu'il est utilisé sur quatre
   pages, et destiné à l'être dans les autres applications. Les classes
   `resilio-blog-cta-block*` deviennent `resilio-cta*`, le bloc n'étant plus
   propre au blog.
   ========================================================================== */

/* ==========================================================================
   resilio-cta — Organism — Appel à l'action générique
   ========================================================================== */

.resilio-cta {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--primary-gradient-soft);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--border-radius-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Décoration subtile en arrière-plan */
.resilio-cta::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--primary-gradient);
    opacity: 0.06;
    pointer-events: none;
}

.resilio-cta__eyebrow {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-xs);
}

.resilio-cta__title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
}

.resilio-cta__text {
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
    margin-bottom: var(--spacing-md);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.resilio-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* Bouton primaire CTA (démo) */
.resilio-cta__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    padding: 0.625rem 1.375rem;
    border-radius: var(--border-radius-full);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition-duration) var(--transition-timing),
                transform var(--transition-duration) var(--transition-timing),
                box-shadow var(--transition-duration) var(--transition-timing);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.resilio-cta__btn-primary:hover,
.resilio-cta__btn-primary:focus {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    color: #ffffff;
}

.resilio-cta__btn-primary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Bouton secondaire CTA (contact) */
.resilio-cta__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;

    /* currentColor et non un token fixe : ce bouton est posé aussi bien sur le
       fond clair du bloc complet que dans une bande sombre (page Services). Une
       couleur figée y devenait invisible — texte #182035 sur fond #0A1A3D. */
    color: currentColor;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    padding: 0.625rem 1.375rem;
    border-radius: var(--border-radius-full);
    text-decoration: none;
    border: 1.5px solid currentColor;
    opacity: 0.92;
    cursor: pointer;
    transition: border-color var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                background-color var(--transition-duration) var(--transition-timing);
}

.resilio-cta__btn-secondary:hover,
.resilio-cta__btn-secondary:focus {
    /* Le survol reste dans currentColor pour la même raison : virer au bleu
       primaire sur une bande sombre reproduirait le défaut de contraste. */
    opacity: 1;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.resilio-cta__btn-secondary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Variante compacte : le bloc se resserre et s'aligne à gauche, mais conserve
   son titre et son accroche. C'est l'usage de la page d'accueil et de l'index
   du blog. */
.resilio-cta--compact {
    padding: var(--spacing-md);
    text-align: left;
}

.resilio-cta--compact .resilio-cta__actions {
    justify-content: flex-start;
}

/* Variante simple : les deux boutons seuls, sans titre ni accroche, pour une
   insertion dans une section qui porte déjà son propre traitement visuel
   (grille tarifaire, bande de fin de page). Elle est donc volontairement
   TRANSPARENTE : le fond décoratif de `.resilio-cta` créerait sinon un bloc
   clair encastré dans une section sombre, avec du texte hérité par-dessus. */
.resilio-cta--simple {
    padding: 0;
    margin: 0;
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: center;
}

.resilio-cta--simple::before {
    content: none;
}

@media (max-width: 767.98px) {
    .resilio-cta {
        padding: var(--spacing-md);
    }

    .resilio-cta__actions {
        flex-direction: column;
    }

    .resilio-cta__btn-primary,
    .resilio-cta__btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   resilio-cta-button — Molecule — bouton de contact unitaire

   Pour un bouton isolé dans une carte tarifaire ou une fiche produit, là où le
   bloc complet serait de trop. Les couleurs viennent des tokens : aucune valeur
   hexadécimale ne doit être écrite dans un gabarit.
   ========================================================================== */

.resilio-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: 0.625rem 1.25rem;
    border-radius: var(--border-radius-md, 0.5rem);
    border: 1px solid transparent;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.resilio-cta-button--accent {
    background-color: var(--accent-color);

    /* A-27 (CA-54/CA-55, SPEC v1.6) : --text-on-accent-bg (#7A2E00) est la
       couleur "alerte" du tableau de bord dirigeant (RG-35) — pas touchée.
       Token DÉDIÉ à ce bouton : --text-on-accent-solid, défini dans les
       TROIS thèmes, chacun sur SA PROPRE --accent-color (RG-34 amendée) —
       une luminance de texte unique ne peut satisfaire à la fois l'orange
       (≤ 0,027) et le violet de design-system.default.css (≥ 0,615),
       c'est arithmétique, pas un choix. Le repli n'est qu'un dernier
       recours, jamais juste pour tous les thèmes. */
    color: var(--text-on-accent-solid, #000000);
}

.resilio-cta-button--accent:hover,
.resilio-cta-button--accent:focus {
    background-color: var(--accent-color-hover, var(--accent-color));
    color: var(--text-on-accent-solid, #000000);
}

.resilio-cta-button--outline {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.resilio-cta-button--outline:hover,
.resilio-cta-button--outline:focus {
    background-color: var(--primary-color);

    /* A-27 (CA-54) : PAS --text-on-primary-bg — ce token sert « texte foncé sur
       fond CLAIR teinté » (badges, encarts), pas « texte sur fond PLEIN sombre ».
       Ici le fond est --primary-color plein (marine) : il faut son inverse clair,
       le même que .btn-primary (components.css) emploie déjà pour ce cas — le
       token --surface-color (blanc dans les 3 thèmes), jamais le token fautif. */
    color: var(--surface-color);
}

.resilio-cta-button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Taille : un appel à l'action principal de fin de page a besoin de plus de
   présence qu'un bouton de carte tarifaire. */
.resilio-cta-button--lg {
    padding: 0.875rem 1.75rem;
    font-size: 1.0625rem;
}

@media (prefers-reduced-motion: reduce) {
    .resilio-cta-button {
        transition: none;
    }
}