/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-buttons.css
 * Rôle : Boutons et interactions.
 *
 * 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-buttons.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-buttons.css
 * Rôle : Boutons.
 *
 * 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. */

/* =========================================================
   BOUTONS
   ========================================================= */

/* Groupe de boutons */

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

.jp-buttons {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 28px;
        position: relative;
        top: 0;
}

/* Boutons du hero */

/* ==========================================================================
   Bandeau principal
   ========================================================================== */

.jp-hero .jp-buttons {
        margin-top: 24px;
        top: 0;
}

/* Style commun des boutons */

.jp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 17px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none !important;
}

/* Bouton blanc */

.jp-btn-white {
        background: #fff;
        color: var(--jp-main) !important;
}

/* Bouton contour blanc */

.jp-btn-outline {
        border: 2px solid #fff;
        color: #fff !important;
}

/* Bouton plein en couleur principale */

.jp-btn-main {
        background: var(--jp-main);
        color: #fff !important;
        border: 2px solid var(--jp-main);
}

/* Icône intégrée à un bouton */

.jp-btn-icon {
        width: 22px;
        height: 22px;
        display: inline-block;
        flex-shrink: 0;
        background: currentColor;
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

/* Téléphone */

/* ==========================================================================
   Adaptation responsive : (max-width:768px)
   ========================================================================== */

@media (max-width:768px) {
        /*  CIBLE — Bandeau Hero : .jp-hero .jp-buttons  */
        .jp-hero .jp-buttons {
            margin-top: 22px;
            top: 0;
    }
}