/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-statuts.css
 * Rôle : Statuts des formations.
 *
 * 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-statuts.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-statuts.css
 * Rôle : Module Statuts.
 *
 * 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. */

/* =========================================================
   STATUTS : scolaire, apprentissage, mixte...
   ========================================================= */

/* Grille des statuts affichés dans le hero */

.jp-statuses {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: max-content;
        max-width: 100%;
        margin-top: 8px;
}

/* Cas avec un seul statut */

.jp-statuses.nb-1 {
        grid-template-columns: minmax(105px,135px);
}

/*  CIBLE — Chiffres clés : .jp-statuses.nb-1 .jp-status-badge  */

.jp-statuses.nb-1 .jp-status-badge {
        justify-self: start;
}

/* Cas avec trois statuts : le troisième est centré */

.jp-statuses.nb-3 .jp-status-badge:last-child {
        grid-column: 1 / span 2;
        justify-self: center;
        width: 320px;
}

/* Badge individuel d’un statut */

.jp-status-badge {
        background: rgba(8,23,47,.50);
        border: 1px solid var(--jp-main);
        border-radius: 10px;
        padding: 4px 7px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: #fff;
        min-height: 34px;
        text-transform: uppercase;
        backdrop-filter: blur(6px);
        opacity: 0;
        transform: scale(.50);
        animation: jp-status-zoom 1.8s cubic-bezier(.18,.89,.32,1.28) forwards;
        width: 128px;
        flex: 0 0 128px;
}

/*  CIBLE — Chiffres clés : .jp-status-large  */

.jp-status-large {
        width: 220px;
        flex-basis: 220px;
}

/*  CIBLE — Chiffres clés : .jp-status-badge:nth-child(1)  */

.jp-status-badge:nth-child(1) {
        animation-delay: .9s;
}

/*  CIBLE — Chiffres clés : .jp-status-badge:nth-child(2)  */

.jp-status-badge:nth-child(2) {
        animation-delay: 1.2s;
}

/*  CIBLE — Chiffres clés : .jp-status-badge:nth-child(3)  */

.jp-status-badge:nth-child(3) {
        animation-delay: 1.5s;
}

/*  CIBLE — Chiffres clés : .jp-status-badge:nth-child(4)  */

.jp-status-badge:nth-child(4) {
        animation-delay: 1.8s;
}

/*  CIBLE — Chiffres clés : .jp-status-subtitle  */

.jp-status-subtitle {
        display: block;
        margin-top: 1px;
        font-size: 8px;
        font-weight: 400;
        line-height: 0.95;
        color: #fff;
        white-space: nowrap;
        text-transform: none;
        opacity: .9;
}

/* Animation des badges de statuts */

@keyframes jp-status-zoom {
        /*  CIBLE — Composant : 0%  */
        0% {
            opacity: 0;
            transform: scale(.75);
    }
        /*  CIBLE — Composant : 70%  */
        70% {
            opacity: 1;
            transform: scale(1.06);
    }
        /*  CIBLE — Composant : 100%  */
        100% {
            opacity: 1;
            transform: scale(1);
    }
}

/* Cercle contenant l’icône du statut */

.jp-status-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--jp-main);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
}

/*  CIBLE — Chiffres clés : .jp-status-icon svg  */

.jp-status-icon svg {
        width: 11px;
        height: 11px;
        fill: var(--jp-main);
        color: var(--jp-main);
        display: block;
}

/* Texte du statut */

.jp-status-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
}

/*  CIBLE — Chiffres clés : .jp-status-text strong  */

.jp-status-text strong {
        color: #fff;
        font-size: 8px;
        font-weight: 800;
        line-height: 1;
}