/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-deroulement.css
 * Rôle : Section Déroulement.
 *
 * 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-deroulement.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-deroulement.css
 * Rôle : Module Déroulement.
 *
 * 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. */

/* =========================================================
   DÉROULEMENT : étapes de la formation
   ========================================================= */

/* Section contenant les étapes du déroulement */

.jp-steps-section {
        margin-top: 5mm;
        background: linear-gradient(
            135deg,
            var(--jp-sec1) 0%,
            color-mix(in srgb, var(--jp-sec1) 95%, var(--jp-dark) 5%) 100%
        );
        padding-top: 38px;
        padding-bottom: 0;
}

/* Grille horizontale des étapes */

.jp-steps {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--jp-steps-cols, 4), 1fr);
        gap: 26px;
        margin-bottom: 0;
        padding-bottom: 0;
}

/* Bloc d’une étape */

.jp-step {
        position: relative;
        background: transparent;
        border-radius: 0;
        padding: 20px 16px 0;
        text-align: center;
        box-shadow: none;
        z-index: 1;
}

/* Zone contenant le cercle d’icône et le numéro */

.jp-step-top {
        position: relative;
        width: 155px;
        height: 155px;
        margin: 0 auto 16px;
}

/* Cercle blanc contenant l’icône de l’étape */

.jp-step-icon {
        width: 145px;
        height: 145px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid rgba(16,35,63,.08);
        box-shadow: 0 12px 30px rgba(16,35,63,.12),
        0 2px 8px rgba(16,35,63,.06);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        transition: transform .25s ease, box-shadow .25s ease;
}

/*  CIBLE — Icônes : .jp-step:hover .jp-step-icon  */

.jp-step:hover .jp-step-icon {
        transform: translateY(-6px) scale(1.04);
        box-shadow: 0 20px 42px rgba(16,35,63,.22);
}

/* Icône masquée de l’étape */

.jp-step-icon-mask {
        width: 108px;
        height: 108px;
        display: block;
        background: var(--jp-dark);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

/* Pastille numérotée de l’étape */

.jp-step-number {
        position: absolute;
        top: -8px;
        left: -8px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--jp-main);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 900;
        z-index: 4;
        box-shadow: 0 4px 10px rgba(0,0,0,.14);
}

/* Titre d’une étape */

.jp-step h3 {
        font-size: 12px;
        margin: 0 0 10px;
        color: var(--jp-dark);
        text-transform: uppercase;
        font-weight: 900;
}

/* Texte d’une étape */

.jp-step p {
        font-size: 11px;
        line-height: 1.45;
        margin: 0;
}

/* Ligne pointillée reliant les étapes */

.jp-steps:before {
        content: "";
        position: absolute;
        top: 92px;
        left: 18% !important;
        right: 18% !important;
        border-top: 3px dashed rgba(16,35,63,.35);
        z-index: 0;
}

/* ==========================================================
   CARTES DÉROULEMENT — ICÔNE ET TITRE CENTRÉS
   ========================================================== */

.jp-step,
.jp-step-top,
.jp-step-icon,
.jp-step h3 {
        text-align: center;
}

/*  CIBLE — Icônes : .jp-step-top, .jp-step-icon  */

.jp-step-top,
.jp-step-icon {
        margin-left: auto;
        margin-right: auto;
}

/*  CIBLE — Composant : .jp-step h3  */

.jp-step h3 {
        width: 100%;
}