/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-cta.css
 * Rôle : Appels à l’action.
 *
 * Lecture conseillée :
 * 1. fondations et structure du composant ;
 * 2. éléments internes et états ;
 * 3. adaptations responsive et compatibilité.
 *
 * IMPORTANT : l'ordre de cascade est volontairement préservé lorsqu'un déplacement
 * pourrait modifier le rendu. Les doublons retirés sont uniquement ceux dont une
 * déclaration strictement identique existe plus loin dans le même contexte CSS.
  */

/* * FICHIER CSS RÉORGANISÉ
 * Fichier : assets/css/jp-cta.css
 * Rôle : Styles du composant ou du module indiqué par le nom du fichier.
 *
 * Organisation :
 * 1. Styles de base du module
 * 2. États et interactions
 * 3. Adaptations responsives, dans l’ordre du fichier d’origine
 *
 * Maintenance : l’ordre des règles est conservé afin de respecter la cascade CSS.
 * Les doublons strictement identiques dans un même bloc ont été supprimés. */

/* *
 * jp-cta.css
 * Rôle : Appels à l’action.
 *
 * Organisation du fichier :
 * 1. Variables et fondations éventuelles
 * 2. Structure principale du composant
 * 3. États, variantes et interactions
 * 4. Adaptations responsives
 *
 * Les doublons strictement identiques ont été supprimés. Les surcharges
 * volontaires et les fallbacks compatibles ont été conservés pour ne pas
 * modifier le rendu ou le comportement existant. */

/* =========================================================
   CTA FINAL
   ========================================================= */

/* Bandeau d’appel à l’action en bas de page */

/* ==========================================================================
   Boutons et actions
   ========================================================================== */

.jp-cta {
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
        background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.34), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.20), transparent 32%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--jp-main) 92%, #ffffff) 0%,
            var(--jp-main) 52%,
            color-mix(in srgb, var(--jp-main) 78%, #ffffff) 100%
        );
        color: #fff;
        padding: 10px 7%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 36px;
}

/* Partie gauche du CTA : icône + texte */

.jp-cta-left {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 28px;
}

/* Icône du CTA */

.jp-cta-icon {
        width: 144px;
        height: 144px;
        flex: 0 0 144px;
        background: #fff;
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

/* Texte du CTA */

.jp-cta-text {
        min-width: 0;
}

/*  CIBLE — Appel à l’action : .jp-cta h2  */

.jp-cta h2 {
        color: #fff;
        font-size: 32px;
        line-height: 1.1;
        margin: 0 0 12px;
        font-weight: 900;
}

/*  CIBLE — Appel à l’action : .jp-cta p  */

.jp-cta p {
        font-size: 14px;
        line-height: 1.45;
        max-width: 650px;
        margin-bottom: 0;
}

/* Boutons du CTA */

.jp-cta .jp-buttons {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        margin-top: 0;
        margin-bottom: 30px;
        flex-wrap: wrap;
        position: relative;
        top: 4mm;
}

/*  CIBLE — Boutons : .jp-cta .jp-btn  */

.jp-cta .jp-btn {
        padding: 18px 28px;
        min-height: 58px;
        gap: 12px;
        box-sizing: border-box;
        white-space: nowrap;
}