/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-index-pages.css
 * Rôle : Pages d’index et listes.
 *
 * 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-index-pages.css
 * Rôle : Pages d’index, cartes et grilles de navigation.
 *
 * 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-index-pages.css
 * Rôle : Pages d’index et listes de contenus.
 *
 * 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. */

/* ==========================================================
   INDEX FORMATIONS & ACTUALITÉS — FRAMEWORK JP 8.1.1
   ========================================================== */

.jp-index-page {
        --jp-index-navy: #073b5c;
        --jp-index-blue: #087f9c;
        --jp-index-cyan: #21a4b8;
        --jp-index-text: #12354a;
        --jp-index-muted: #5e7482;
        --jp-index-border: #dce8ed;
        --jp-index-surface: #f4f9fb;
        color: var(--jp-index-text);
        background: #fff;
        font-family: "Montserrat", sans-serif;
}

/*  CIBLE — Composant : .jp-index-shell  */

.jp-index-shell {
        width: min(1400px, calc(100% - 48px));
        margin-inline: auto;
}

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

.jp-index-hero {
        position: relative;
        overflow: hidden;
        padding: clamp(78px, 8vw, 124px) 0 clamp(62px, 6vw, 96px);
        color: #fff;
        background: radial-gradient(circle at 84% 22%, rgba(40, 185, 196, .35), transparent 31%),
        radial-gradient(circle at 12% 82%, rgba(240, 122, 18, .18), transparent 26%),
        linear-gradient(132deg, #052f4b 0%, #075f78 58%, #128aa0 100%);
}

/*  CIBLE — Bandeau Hero : .jp-index-hero::after  */

.jp-index-hero::after {
        content: "";
        position: absolute;
        inset: auto -6% -55% 38%;
        height: 420px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 50%;
        transform: rotate(-8deg);
}

/*  CIBLE — Bandeau Hero : .jp-index-hero-inner  */

.jp-index-hero-inner {
        position: relative;
        z-index: 1;
        text-align: center;
}

/*  CIBLE — Bandeau Hero : .jp-index-hero-kicker  */

.jp-index-hero-kicker {
        display: block;
        margin-bottom: 4px;
        color: #d9fbff;
        font-family: "Caveat", cursive;
        font-size: clamp(2rem, 4vw, 3.4rem);
        font-weight: 600;
        line-height: 1;
}

/*  CIBLE — Bandeau Hero : .jp-index-hero h1  */

.jp-index-hero h1 {
        margin: 0;
        color: #fff;
        font-family: "Montserrat", sans-serif;
        font-size: clamp(2.45rem, 5vw, 4.8rem);
        font-weight: 800;
        letter-spacing: -.045em;
        line-height: 1.02;
}

/*  CIBLE — Bandeau Hero : .jp-index-hero p  */

.jp-index-hero p {
        width: min(760px, 100%);
        margin: 22px auto 0;
        color: rgba(255, 255, 255, .9);
        font-size: clamp(1rem, 1.35vw, 1.22rem);
        line-height: 1.75;
}

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */

.jp-index-anchor-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 30px;
}

/*  CIBLE — Composant : .jp-index-anchor-nav a  */

.jp-index-anchor-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 42px;
        padding: 9px 18px;
        border: 1px solid rgba(255, 255, 255, .36);
        border-radius: 999px;
        color: #fff;
        background: rgba(255, 255, 255, .1);
        font-size: .83rem;
        font-weight: 700;
        text-decoration: none;
        backdrop-filter: blur(8px);
        transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

/*  CIBLE — État interactif : .jp-index-anchor-nav a:hover, .jp-index-anchor-nav a:focus-visible  */

.jp-index-anchor-nav a:hover, .jp-index-anchor-nav a:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, .2);
        border-color: rgba(255, 255, 255, .72);
        transform: translateY(-2px);
}

/*  CIBLE — Composant : .jp-index-main-stack  */

.jp-index-main-stack {
        display: grid;
        gap: clamp(58px, 7vw, 94px);
        padding-block: clamp(64px, 7vw, 104px);
}

/* ==========================================================================
   Formulaires et champs
   ========================================================================== */

.jp-index-formation-group, .jp-index-news-month {
        scroll-margin-top: 120px;
}

/*  CIBLE — Composant : .jp-index-section-heading  */

.jp-index-section-heading {
        position: relative;
        margin-bottom: 28px;
}

/*  CIBLE — Composant : .jp-index-kicker  */

.jp-index-kicker {
        display: block;
        margin-bottom: 4px;
        color: var(--jp-index-group, var(--jp-index-blue));
        font-size: .73rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
}

/*  CIBLE — Composant : .jp-index-section-heading h2  */

.jp-index-section-heading h2 {
        margin: 0;
        color: var(--jp-index-navy);
        font-size: clamp(1.75rem, 3vw, 2.65rem);
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.12;
}

/*  CIBLE — Composant : .jp-index-heading-line  */

.jp-index-heading-line {
        display: block;
        width: 76px;
        height: 4px;
        margin-top: 13px;
        border-radius: 999px;
        background: var(--jp-index-group, var(--jp-index-blue));
}

/*  CIBLE — Formations : .jp-index-formations-grid  */

.jp-index-formations-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
}

/*  CIBLE — Formations : .jp-index-formation-card, .jp-index-news-card  */

.jp-index-formation-card, .jp-index-news-card {
        min-width: 0;
}

/*  CIBLE — Formations : .jp-index-formation-card > a, .jp-index-news-card > a  */

.jp-index-formation-card > a, .jp-index-news-card > a {
        display: flex;
        height: 100%;
        overflow: hidden;
        border: 1px solid var(--jp-index-border);
        border-radius: 18px;
        color: inherit;
        background: #fff;
        box-shadow: 0 12px 34px rgba(7, 59, 92, .08);
        text-decoration: none;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/*  CIBLE — Formations : .jp-index-formation-card > a:hover, .jp-index-formation-card > a:focus-visible, .jp-index-news-card > …  */

.jp-index-formation-card > a:hover, .jp-index-formation-card > a:focus-visible, .jp-index-news-card > a:hover, .jp-index-news-card > a:focus-visible {
        color: inherit;
        border-color: var(--jp-index-accent, #9bcdd7);
        box-shadow: 0 18px 42px rgba(7, 59, 92, .14);
        transform: translateY(-5px);
}

/*  CIBLE — Formations : .jp-index-formation-media  */

.jp-index-formation-media {
        position: relative;
        flex: 0 0 41%;
        min-height: 188px;
        overflow: hidden;
        background: #eaf3f6;
}

/*  CIBLE — Formations : .jp-index-formation-media::after  */

.jp-index-formation-media::after {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: var(--jp-index-accent, var(--jp-index-blue));
}

/*  CIBLE — Formations : .jp-index-formation-media img, .jp-index-news-media img  */

.jp-index-formation-media img, .jp-index-news-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .45s ease;
}

/*  CIBLE — Formations : .jp-index-formation-card > a:hover img, .jp-index-news-card > a:hover img  */

.jp-index-formation-card > a:hover img, .jp-index-news-card > a:hover img {
        transform: scale(1.045);
}

/*  CIBLE — Actualités : .jp-index-image-placeholder, .jp-index-news-placeholder  */

.jp-index-image-placeholder, .jp-index-news-placeholder {
        display: block;
        width: 100%;
        height: 100%;
        min-height: inherit;
        background: linear-gradient(135deg, rgba(8, 127, 156, .08), rgba(8, 127, 156, .2)),
        repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,255,.22) 12px, rgba(255,255,255,.22) 24px);
}

/*  CIBLE — Formations : .jp-index-formation-content  */

.jp-index-formation-content {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 25px 24px 22px;
}

/*  CIBLE — Formations : .jp-index-formation-content h3, .jp-index-news-content h3  */

.jp-index-formation-content h3, .jp-index-news-content h3 {
        margin: 0;
        color: var(--jp-index-navy);
        font-size: 1.06rem;
        font-weight: 800;
        line-height: 1.3;
}

/*  CIBLE — Formations : .jp-index-formation-content p  */

.jp-index-formation-content p {
        margin: 8px 0 20px;
        color: var(--jp-index-muted);
        font-size: .84rem;
        line-height: 1.55;
}

/* ==========================================================================
   Cartes et contenus structurés
   ========================================================================== */

.jp-index-card-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: auto;
        color: var(--jp-index-accent, var(--jp-index-blue));
        font-size: .78rem;
        font-weight: 800;
}

/*  CIBLE — Actualités : .jp-index-news-grid  */

.jp-index-news-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
}

/*  CIBLE — Actualités : .jp-index-news-card > a  */

.jp-index-news-card > a {
        flex-direction: column;
}

/*  CIBLE — Actualités : .jp-index-news-media  */

.jp-index-news-media {
        position: relative;
        height: 220px;
        overflow: hidden;
        background: #eaf3f6;
}

/*  CIBLE — Actualités : .jp-index-news-category  */

.jp-index-news-category {
        position: absolute;
        left: 15px;
        bottom: 15px;
        max-width: calc(100% - 30px);
        overflow: hidden;
        padding: 7px 11px;
        border-radius: 999px;
        color: #fff;
        background: rgba(5, 47, 75, .88);
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
        backdrop-filter: blur(6px);
}

/*  CIBLE — Actualités : .jp-index-news-content  */

.jp-index-news-content {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 23px 22px 21px;
}

/*  CIBLE — Actualités : .jp-index-news-content time  */

.jp-index-news-content time {
        margin-bottom: 9px;
        color: var(--jp-index-blue);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
}

/*  CIBLE — Actualités : .jp-index-news-content p  */

.jp-index-news-content p {
        margin: 11px 0 21px;
        color: var(--jp-index-muted);
        font-family: "Open Sans", sans-serif;
        font-size: .9rem;
        line-height: 1.65;
}

/*  CIBLE — Actualités : .jp-index-news-card .jp-index-card-link  */

.jp-index-news-card .jp-index-card-link {
        --jp-index-accent: var(--jp-index-blue);
}

/*  CIBLE — Composant : .jp-index-empty  */

.jp-index-empty {
        padding: 50px;
        border: 1px solid var(--jp-index-border);
        border-radius: 20px;
        text-align: center;
        background: var(--jp-index-surface);
}

/*  CIBLE — Composant : .jp-index-empty h2  */

.jp-index-empty h2 {
        margin: 0 0 8px;
        color: var(--jp-index-navy);
}

/*  CIBLE — Composant : .jp-index-empty p  */

.jp-index-empty p {
        margin: 0;
        color: var(--jp-index-muted);
}

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

@media (max-width: 1100px) {
        /*  CIBLE — Formations : .jp-index-formations-grid, .jp-index-news-grid  */
        .jp-index-formations-grid, .jp-index-news-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

@media (max-width: 720px) {
        /*  CIBLE — Composant : .jp-index-shell  */
        .jp-index-shell {
            width: min(100% - 28px, 1400px);
    }
        /*  CIBLE — Bandeau Hero : .jp-index-hero  */
        .jp-index-hero {
            padding-top: 64px;
            padding-bottom: 58px;
    }
        /*  CIBLE — Composant : .jp-index-anchor-nav  */
        .jp-index-anchor-nav {
            gap: 8px;
    }
        /*  CIBLE — Composant : .jp-index-anchor-nav a  */
        .jp-index-anchor-nav a {
            min-height: 38px;
            padding: 7px 13px;
            font-size: .76rem;
    }
        /*  CIBLE — Composant : .jp-index-main-stack  */
        .jp-index-main-stack {
            gap: 56px;
            padding-block: 58px 74px;
    }
        /*  CIBLE — Formations : .jp-index-formations-grid, .jp-index-news-grid  */
        .jp-index-formations-grid, .jp-index-news-grid {
            grid-template-columns: 1fr;
            gap: 17px;
    }
        /*  CIBLE — Formations : .jp-index-formation-card > a  */
        .jp-index-formation-card > a {
            flex-direction: column;
    }
        /*  CIBLE — Formations : .jp-index-formation-media  */
        .jp-index-formation-media {
            flex-basis: auto;
            height: 210px;
            min-height: 210px;
    }
        /*  CIBLE — Actualités : .jp-index-news-media  */
        .jp-index-news-media {
            height: 210px;
    }
}

/* ==========================================================
   ORGANISATION DES LIGNES DE FORMATIONS
   ========================================================== */

/* ==========================================================================
   Formulaires et champs
   ========================================================================== */

.jp-index-formation-rows, .jp-index-news-period-stack {
        display: grid;
        gap: 34px;
}

/*  CIBLE — Composant : .jp-index-row-title  */

.jp-index-row-title {
        margin: 0 0 15px;
        font-size: .83rem;
        letter-spacing: .08em;
}

/*  CIBLE — Formations : .jp-index-formations-grid--1  */

.jp-index-formations-grid--1 {
        grid-template-columns: minmax(0, calc((100% - 44px) / 3));
}

/*  CIBLE — Formations : .jp-index-formations-grid--2  */

.jp-index-formations-grid--2 {
        grid-template-columns: repeat(2, minmax(0, calc((100% - 22px) / 2)));
}

/* ==========================================================
   PÉRIODES D’ACTUALITÉS
   ========================================================== */

.jp-index-news-period {
        display: grid;
        gap: 42px;
        scroll-margin-top: 120px;
}

/*  CIBLE — Composant : .jp-index-period-heading  */

.jp-index-period-heading {
        padding: clamp(25px, 4vw, 38px);
        border: 1px solid var(--jp-index-border);
        border-left: 6px solid var(--jp-index-blue);
        border-radius: 20px;
        background: linear-gradient(135deg, #f2f9fb, #fff);
        box-shadow: 0 12px 34px rgba(7, 59, 92, .06);
}

/*  CIBLE — Composant : .jp-index-period-heading > span  */

.jp-index-period-heading > span {
        display: block;
        margin-bottom: 5px;
        color: var(--jp-index-blue);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
}

/*  CIBLE — Composant : .jp-index-period-heading h2  */

.jp-index-period-heading h2 {
        margin: 0;
        color: var(--jp-index-navy);
        font-size: clamp(1.8rem, 3vw, 2.7rem);
        font-weight: 800;
        letter-spacing: -.035em;
}

/*  CIBLE — Composant : .jp-index-period-heading p  */

.jp-index-period-heading p {
        margin: 10px 0 0;
        color: var(--jp-index-muted);
        line-height: 1.65;
}

/*  CIBLE — Actualités : .jp-index-news-archives .jp-index-period-heading  */

.jp-index-news-archives .jp-index-period-heading {
        border-left-color: #8E3E78;
}

/*  CIBLE — Actualités : .jp-index-news-archives .jp-index-period-heading > span  */

.jp-index-news-archives .jp-index-period-heading > span {
        color: #8E3E78;
}

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

@media (max-width: 1100px) {
        /*  CIBLE — Formations : .jp-index-formations-grid--1, .jp-index-formations-grid--2  */
        .jp-index-formations-grid--1, .jp-index-formations-grid--2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

@media (max-width: 720px) {
        /*  CIBLE — Formations : .jp-index-formation-rows, .jp-index-news-period-stack  */
        .jp-index-formation-rows, .jp-index-news-period-stack {
            gap: 28px;
    }
        /*  CIBLE — Formations : .jp-index-formations-grid--1, .jp-index-formations-grid--2  */
        .jp-index-formations-grid--1, .jp-index-formations-grid--2 {
            grid-template-columns: 1fr;
    }
        /*  CIBLE — Actualités : .jp-index-news-period  */
        .jp-index-news-period {
            gap: 30px;
    }
}

/* ==========================================================
   PAGE FORMATIONS — HERO PLUS COMPACT — FRAMEWORK JP 8.3.4
   Réduction ciblée de la hauteur et remontée des contenus.
   ========================================================== */

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

.jp-index-formations-page .jp-index-hero {
        padding-top: clamp(48px, 4.2vw, 66px);
        padding-bottom: clamp(42px, 3.8vw, 58px);
}

/*  CIBLE — Bandeau Hero : .jp-index-formations-page .jp-index-hero-kicker  */

.jp-index-formations-page .jp-index-hero-kicker {
        margin-bottom: 0;
        font-size: clamp(1.85rem, 3.1vw, 2.85rem);
        line-height: .95;
}

/*  CIBLE — Bandeau Hero : .jp-index-formations-page .jp-index-hero h1  */

.jp-index-formations-page .jp-index-hero h1 {
        font-size: clamp(2.3rem, 4.25vw, 4.15rem);
        line-height: .98;
}

/*  CIBLE — Bandeau Hero : .jp-index-formations-page .jp-index-hero p  */

.jp-index-formations-page .jp-index-hero p {
        margin-top: 14px;
        line-height: 1.55;
}

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */

.jp-index-formations-page .jp-index-anchor-nav {
        margin-top: 18px;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-anchor-nav a  */

.jp-index-formations-page .jp-index-anchor-nav a {
        min-height: 38px;
        padding: 7px 16px;
}

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

@media (max-width: 720px) {
        /*  CIBLE — Bandeau Hero : .jp-index-formations-page .jp-index-hero  */
        .jp-index-formations-page .jp-index-hero {
            padding-top: 46px;
            padding-bottom: 40px;
    }
        /*  CIBLE — Bandeau Hero : .jp-index-formations-page .jp-index-hero p  */
        .jp-index-formations-page .jp-index-hero p {
            margin-top: 12px;
            line-height: 1.5;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-anchor-nav  */
        .jp-index-formations-page .jp-index-anchor-nav {
            margin-top: 16px;
    }
}

/* ==========================================================
   PAGE ACTUALITÉS — HERO PLUS COMPACT — FRAMEWORK JP 8.3.5
   Même hauteur et même remontée que la page Formations.
   ========================================================== */

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

.jp-index-news-page .jp-index-hero {
        padding-top: clamp(48px, 4.2vw, 66px);
        padding-bottom: clamp(42px, 3.8vw, 58px);
}

/*  CIBLE — Bandeau Hero : .jp-index-news-page .jp-index-hero-kicker  */

.jp-index-news-page .jp-index-hero-kicker {
        margin-bottom: 0;
        font-size: clamp(1.85rem, 3.1vw, 2.85rem);
        line-height: .95;
}

/*  CIBLE — Bandeau Hero : .jp-index-news-page .jp-index-hero h1  */

.jp-index-news-page .jp-index-hero h1 {
        font-size: clamp(2.3rem, 4.25vw, 4.15rem);
        line-height: .98;
}

/*  CIBLE — Bandeau Hero : .jp-index-news-page .jp-index-hero p  */

.jp-index-news-page .jp-index-hero p {
        margin-top: 14px;
        line-height: 1.55;
}

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */

.jp-index-news-page .jp-index-anchor-nav {
        margin-top: 18px;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-anchor-nav a  */

.jp-index-news-page .jp-index-anchor-nav a {
        min-height: 38px;
        padding: 7px 16px;
}

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

@media (max-width: 720px) {
        /*  CIBLE — Bandeau Hero : .jp-index-news-page .jp-index-hero  */
        .jp-index-news-page .jp-index-hero {
            padding-top: 46px;
            padding-bottom: 40px;
    }
        /*  CIBLE — Bandeau Hero : .jp-index-news-page .jp-index-hero p  */
        .jp-index-news-page .jp-index-hero p {
            margin-top: 12px;
            line-height: 1.5;
    }
        /*  CIBLE — Actualités : .jp-index-news-page .jp-index-anchor-nav  */
        .jp-index-news-page .jp-index-anchor-nav {
            margin-top: 16px;
    }
}

/* ==========================================================
   INDEX PLUS COMPACTS + CARTES FORMATIONS HORIZONTALES
   FRAMEWORK JP 8.3.6
   ========================================================== */

/* Condensation verticale commune aux index Formations et Actualités. */

/* ==========================================================================
   Formulaires et champs
   ========================================================================== */

.jp-index-formations-page .jp-index-main-stack, .jp-index-news-page .jp-index-main-stack {
        gap: clamp(38px, 4vw, 58px);
        padding-block: clamp(42px, 4.5vw, 66px);
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-section-heading, .jp-index-news-page .jp-index-section-heading  */

.jp-index-formations-page .jp-index-section-heading, .jp-index-news-page .jp-index-section-heading {
        margin-bottom: 18px;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-section-heading h2, .jp-index-news-page .jp-index-section-heading h2  */

.jp-index-formations-page .jp-index-section-heading h2, .jp-index-news-page .jp-index-section-heading h2 {
        font-size: clamp(1.45rem, 2.25vw, 2.15rem);
        line-height: 1.08;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-heading-line, .jp-index-news-page .jp-index-heading-line  */

.jp-index-formations-page .jp-index-heading-line, .jp-index-news-page .jp-index-heading-line {
        width: 60px;
        height: 3px;
        margin-top: 9px;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-kicker, .jp-index-news-page .jp-index-kicker  */

.jp-index-formations-page .jp-index-kicker, .jp-index-news-page .jp-index-kicker {
        margin-bottom: 2px;
        font-size: .68rem;
}

/*  CIBLE — Formations : .jp-index-formation-rows, .jp-index-news-period-stack  */

.jp-index-formation-rows, .jp-index-news-period-stack {
        gap: 22px;
}

/* Prébac et Post-BTS : deux familles sur une même ligne, séparées visuellement. */

.jp-index-formation-rows--split {
        display: flex;
        align-items: stretch;
        gap: 0;
}

/*  CIBLE — Formations : .jp-index-formation-row--subgroup  */

.jp-index-formation-row--subgroup {
        position: relative;
        flex: var(--jp-index-subgroup-weight, 1) 1 0;
        min-width: 0;
        padding-inline: 24px;
}

/*  CIBLE — Formations : .jp-index-formation-row--subgroup:first-child  */

.jp-index-formation-row--subgroup:first-child {
        padding-left: 0;
}

/*  CIBLE — Formations : .jp-index-formation-row--subgroup:last-child  */

.jp-index-formation-row--subgroup:last-child {
        padding-right: 0;
}

/*  CIBLE — Formations : .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup::before  */

.jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        background: linear-gradient(to bottom, transparent 0, var(--jp-index-group) 16%, var(--jp-index-group) 84%, transparent 100%);
        opacity: .38;
}

/*  CIBLE — Composant : .jp-index-row-title  */

.jp-index-row-title {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        margin: 0 0 12px;
        padding: 5px 11px;
        border-radius: 999px;
        color: var(--jp-index-group, var(--jp-index-blue));
        background: color-mix(in srgb, var(--jp-index-group, var(--jp-index-blue)) 10%, white);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
}

/*  CIBLE — Formations : .jp-index-formations-grid  */

.jp-index-formations-grid {
        gap: 18px;
}

/* Nouvelle carte : grande image, nom court à droite, nom complet dessous. */

.jp-index-formation-card > a {
        display: grid;
        grid-template-columns: minmax(160px, 48%) minmax(0, 1fr);
        grid-template-rows: minmax(145px, auto) auto auto;
        align-items: stretch;
}

/*  CIBLE — Formations : .jp-index-formation-media  */

.jp-index-formation-media {
        grid-column: 1;
        grid-row: 1;
        min-height: 145px;
        height: 100%;
        aspect-ratio: 16 / 10;
}

/*  CIBLE — Formations : .jp-index-formation-title  */

.jp-index-formation-title {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        min-width: 0;
        padding: 18px 20px 16px;
}

/*  CIBLE — Formations : .jp-index-formation-title h3  */

.jp-index-formation-title h3 {
        margin: 0;
        color: var(--jp-index-navy);
        font-size: clamp(.98rem, 1.15vw, 1.18rem);
        font-weight: 800;
        line-height: 1.22;
}

/*  CIBLE — Formations : .jp-index-formation-fullname  */

.jp-index-formation-fullname {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
        padding: 12px 18px 4px;
        color: var(--jp-index-muted);
        font-size: .79rem;
        line-height: 1.42;
}

/*  CIBLE — Formations : .jp-index-formation-card .jp-index-card-link  */

.jp-index-formation-card .jp-index-card-link {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: end;
        margin: 0;
        padding: 8px 18px 15px;
}

/* Actualités : cartes et rythmes un peu plus compacts. */

.jp-index-news-grid {
        gap: 20px;
}

/*  CIBLE — Actualités : .jp-index-news-media  */

.jp-index-news-media {
        height: 195px;
}

/*  CIBLE — Actualités : .jp-index-news-content  */

.jp-index-news-content {
        padding: 18px 19px 17px;
}

/*  CIBLE — Actualités : .jp-index-news-content h3  */

.jp-index-news-content h3 {
        font-size: 1rem;
}

/*  CIBLE — Actualités : .jp-index-news-content p  */

.jp-index-news-content p {
        margin: 8px 0 16px;
        font-size: .86rem;
        line-height: 1.52;
}

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

@media (max-width: 1080px) {
        /*  CIBLE — Formations : .jp-index-formation-rows--split  */
        .jp-index-formation-rows--split {
            display: grid;
            gap: 24px;
    }
        /*  CIBLE — Formations : .jp-index-formation-row--subgroup  */
        .jp-index-formation-row--subgroup {
            padding-inline: 0;
    }
        /*  CIBLE — Formations : .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup  */
        .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup {
            padding-top: 22px;
            border-top: 1px solid color-mix(in srgb, var(--jp-index-group) 30%, transparent);
    }
        /*  CIBLE — Formations : .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup::before  */
        .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup::before {
            display: none;
    }
}

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

@media (max-width: 720px) {
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-main-stack, .jp-index-news-page .jp-index-main-stack  */
        .jp-index-formations-page .jp-index-main-stack, .jp-index-news-page .jp-index-main-stack {
            gap: 34px;
            padding-block: 38px;
    }
        /*  CIBLE — Formations : .jp-index-formation-card > a  */
        .jp-index-formation-card > a {
            grid-template-columns: 44% minmax(0, 1fr);
            grid-template-rows: minmax(125px, auto) auto auto;
    }
        /*  CIBLE — Formations : .jp-index-formation-media  */
        .jp-index-formation-media {
            min-height: 125px;
    }
        /*  CIBLE — Formations : .jp-index-formation-title  */
        .jp-index-formation-title {
            padding: 14px 15px;
    }
        /*  CIBLE — Formations : .jp-index-formation-fullname  */
        .jp-index-formation-fullname {
            padding: 10px 14px 3px;
    }
        /*  CIBLE — Formations : .jp-index-formation-card .jp-index-card-link  */
        .jp-index-formation-card .jp-index-card-link {
            padding: 7px 14px 13px;
    }
}

/* ==========================================================
   CARTES FORMATIONS — ALIGNEMENT FIABLE — FRAMEWORK JP 8.3.7
   Le nom court reste toujours en haut à gauche de la zone située
   à droite de l'image. Les hauteurs sont uniformisées.
   ========================================================== */

.jp-index-formations-page .jp-index-formations-grid {
        align-items: stretch;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card  */

.jp-index-formations-page .jp-index-formation-card {
        height: 100%;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card > a  */

.jp-index-formations-page .jp-index-formation-card > a {
        display: grid;
        grid-template-columns: minmax(150px, 47%) minmax(0, 1fr);
        grid-template-rows: 154px minmax(44px, auto) 34px;
        width: 100%;
        height: 100%;
        min-height: 242px;
        align-items: stretch;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-media  */

.jp-index-formations-page .jp-index-formation-media {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 154px;
        min-height: 154px;
        aspect-ratio: auto;
        align-self: stretch;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-media img  */

.jp-index-formations-page .jp-index-formation-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title  */

.jp-index-formations-page .jp-index-formation-title {
        display: block;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        align-self: stretch;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title h3  */

.jp-index-formations-page .jp-index-formation-title h3 {
        display: block;
        margin: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        color: var(--jp-index-navy);
        font-size: clamp(.91rem, 1vw, 1.06rem);
        font-weight: 800;
        line-height: 1.2;
        text-align: left;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-fullname  */

.jp-index-formations-page .jp-index-formation-fullname {
        display: -webkit-box;
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 10px 17px 3px;
        overflow: hidden;
        color: var(--jp-index-muted);
        font-size: .76rem;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card .jp-index-card-link  */

.jp-index-formations-page .jp-index-formation-card .jp-index-card-link {
        grid-row: 3;
        margin: 0;
        padding: 4px 17px 12px;
        white-space: nowrap;
}

/* Les cartes sans nom complet conservent exactement la même structure. */

.jp-index-formations-page .jp-index-formation-title + .jp-index-card-link {
        grid-column: 1 / -1;
        grid-row: 2 / 4;
        align-self: end;
}

/* Une seule formation dans un sous-groupe : largeur cohérente sans carte étroite. */

.jp-index-formations-page .jp-index-formation-rows--split .jp-index-formations-grid--1 {
        grid-template-columns: minmax(0, 1fr);
}

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

@media (max-width: 1100px) {
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card > a  */
        .jp-index-formations-page .jp-index-formation-card > a {
            grid-template-columns: minmax(140px, 44%) minmax(0, 1fr);
    }
}

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

@media (max-width: 720px) {
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-rows--split  */
        .jp-index-formations-page .jp-index-formation-rows--split {
            display: grid;
            gap: 22px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-row--subgroup  */
        .jp-index-formations-page .jp-index-formation-row--subgroup {
            padding-inline: 0;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup::before  */
        .jp-index-formations-page .jp-index-formation-row--subgroup + .jp-index-formation-row--subgroup::before {
            display: none;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card > a  */
        .jp-index-formations-page .jp-index-formation-card > a {
            grid-template-columns: 44% minmax(0, 1fr);
            grid-template-rows: 132px minmax(42px, auto) 32px;
            min-height: 216px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-media  */
        .jp-index-formations-page .jp-index-formation-media {
            height: 132px;
            min-height: 132px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title  */
        .jp-index-formations-page .jp-index-formation-title {
            padding: 14px 14px 10px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-fullname  */
        .jp-index-formations-page .jp-index-formation-fullname {
            padding-inline: 14px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card .jp-index-card-link  */
        .jp-index-formations-page .jp-index-formation-card .jp-index-card-link {
            padding-right: 14px;
            padding-bottom: 10px;
    }
}

/* ==========================================================
   CARTES FORMATIONS + ACTUALITÉS COMPACTES — FRAMEWORK JP 8.3.8
   ========================================================== */

/* Nom complet directement sous le nom court, dans la colonne de droite. */

.jp-index-formations-page .jp-index-formation-card > a {
        grid-template-rows: 154px 34px;
        min-height: 188px;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title  */

.jp-index-formations-page .jp-index-formation-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 7px;
        overflow: hidden;
        padding: 17px 17px 12px;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title h3  */

.jp-index-formations-page .jp-index-formation-title h3 {
        flex: 0 0 auto;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title .jp-index-formation-fullname  */

.jp-index-formations-page .jp-index-formation-title .jp-index-formation-fullname {
        display: -webkit-box;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: var(--jp-index-muted);
        font-size: .73rem;
        line-height: 1.34;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card .jp-index-card-link  */

.jp-index-formations-page .jp-index-formation-card .jp-index-card-link {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: end;
        justify-self: end;
        padding: 4px 17px 11px;
}

/* Neutralise l’ancienne règle prévue pour le nom complet sous l’image. */

.jp-index-formations-page .jp-index-formation-title + .jp-index-card-link {
        grid-row: 2;
}

/* Actualités : bandeau d’année scolaire beaucoup plus discret. */

.jp-index-news-page .jp-index-news-period {
        gap: 20px;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-news-period-stack  */

.jp-index-news-page .jp-index-news-period-stack {
        gap: 26px;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading  */

.jp-index-news-page .jp-index-period-heading {
        padding: 12px 18px;
        border-left-width: 4px;
        border-radius: 13px;
        box-shadow: 0 7px 20px rgba(7, 59, 92, .05);
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading > span  */

.jp-index-news-page .jp-index-period-heading > span {
        margin-bottom: 2px;
        font-size: .62rem;
        letter-spacing: .09em;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading h2  */

.jp-index-news-page .jp-index-period-heading h2 {
        font-size: clamp(1.05rem, 1.65vw, 1.45rem);
        line-height: 1.05;
        letter-spacing: -.025em;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading p  */

.jp-index-news-page .jp-index-period-heading p {
        margin-top: 4px;
        font-size: .79rem;
        line-height: 1.35;
}

/* Boutons de sélection des mois plus petits et plus serrés. */

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */

.jp-index-news-page .jp-index-anchor-nav {
        gap: 6px;
        margin-top: 13px;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-anchor-nav a  */

.jp-index-news-page .jp-index-anchor-nav a {
        min-height: 28px;
        padding: 4px 10px;
        font-size: .68rem;
        line-height: 1;
}

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

@media (max-width: 720px) {
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card > a  */
        .jp-index-formations-page .jp-index-formation-card > a {
            grid-template-rows: 132px 32px;
            min-height: 164px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title  */
        .jp-index-formations-page .jp-index-formation-title {
            gap: 5px;
            padding: 13px 13px 9px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-title .jp-index-formation-fullname  */
        .jp-index-formations-page .jp-index-formation-title .jp-index-formation-fullname {
            font-size: .68rem;
            -webkit-line-clamp: 4;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-card .jp-index-card-link  */
        .jp-index-formations-page .jp-index-formation-card .jp-index-card-link {
            padding-right: 13px;
            padding-bottom: 9px;
    }
        /*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading  */
        .jp-index-news-page .jp-index-period-heading {
            padding: 10px 13px;
    }
        /*  CIBLE — Actualités : .jp-index-news-page .jp-index-anchor-nav a  */
        .jp-index-news-page .jp-index-anchor-nav a {
            min-height: 27px;
            padding: 4px 8px;
            font-size: .64rem;
    }
}

/* ==========================================================
   IMAGES FORMATIONS SANS BANDEAU + ACTUALITÉS RESSERRÉES
   FRAMEWORK JP 8.3.9
   ========================================================== */

/* Suppression du bandeau coloré superposé en haut des images. */

/* ==========================================================================
   Formulaires et champs
   ========================================================================== */

.jp-index-formations-page .jp-index-formation-media::after {
        content: none !important;
        display: none !important;
}

/* La première carte d'actualités doit commencer nettement plus près du hero. */

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

.jp-index-news-page .jp-index-hero {
        padding-bottom: clamp(24px, 2.2vw, 34px);
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-main-stack  */

.jp-index-news-page .jp-index-main-stack {
        padding-top: clamp(12px, 1.4vw, 20px);
}

/* Carte de l'année scolaire plus proche du hero et légèrement plus lisible. */

.jp-index-news-page .jp-index-news-period:first-child {
        margin-top: 0;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading  */

.jp-index-news-page .jp-index-period-heading {
        margin-top: 0;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading h2  */

.jp-index-news-page .jp-index-period-heading h2 {
        font-size: clamp(1.18rem, 1.7vw, 1.5rem);
}

/* Les mois restent clairement secondaires par rapport au titre de l'année. */

.jp-index-news-page .jp-index-news-month .jp-index-section-heading {
        margin-bottom: 12px;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-news-month .jp-index-section-heading h2  */

.jp-index-news-page .jp-index-news-month .jp-index-section-heading h2 {
        font-size: clamp(.92rem, 1.15vw, 1.08rem);
        line-height: 1.12;
        letter-spacing: -.01em;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-news-month .jp-index-kicker  */

.jp-index-news-page .jp-index-news-month .jp-index-kicker {
        font-size: .58rem;
        letter-spacing: .09em;
}

/*  CIBLE — Actualités : .jp-index-news-page .jp-index-news-month .jp-index-heading-line  */

.jp-index-news-page .jp-index-news-month .jp-index-heading-line {
        width: 42px;
        height: 2px;
        margin-top: 6px;
}

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

@media (max-width: 720px) {
        /*  CIBLE — Bandeau Hero : .jp-index-news-page .jp-index-hero  */
        .jp-index-news-page .jp-index-hero {
            padding-bottom: 22px;
    }
        /*  CIBLE — Actualités : .jp-index-news-page .jp-index-main-stack  */
        .jp-index-news-page .jp-index-main-stack {
            padding-top: 10px;
    }
        /*  CIBLE — Actualités : .jp-index-news-page .jp-index-period-heading h2  */
        .jp-index-news-page .jp-index-period-heading h2 {
            font-size: 1.16rem;
    }
        /*  CIBLE — Actualités : .jp-index-news-page .jp-index-news-month .jp-index-section-heading h2  */
        .jp-index-news-page .jp-index-news-month .jp-index-section-heading h2 {
            font-size: .94rem;
    }
}

/* ==========================================================
   HTML SÉCURISÉ + IMAGES FORMATIONS SANS VOILE — 8.4.0
   ========================================================== */

/* Aucune surcouche, aucun dégradé ni filtre sur les photos des formations. */

/* ==========================================================================
   Formulaires et champs
   ========================================================================== */

.jp-index-formations-page .jp-index-formation-media, .jp-index-formations-page .jp-index-formation-media img {
        background: transparent !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-media::before, .jp-index-formations-page .jp-index-forma…  */

.jp-index-formations-page .jp-index-formation-media::before, .jp-index-formations-page .jp-index-formation-media::after {
        content: none !important;
        display: none !important;
        background: none !important;
}

/* Les balises autorisées dans les titres restent héritées de la typographie du titre. */

.jp-index-formation-title h3 sup, .jp-index-news-card h3 sup {
        font-size: .64em;
        line-height: 0;
        vertical-align: super;
}

/*  CIBLE — Formations : .jp-index-formation-title h3 sub, .jp-index-news-card h3 sub  */

.jp-index-formation-title h3 sub, .jp-index-news-card h3 sub {
        font-size: .64em;
        line-height: 0;
        vertical-align: sub;
}

/* ==========================================================
   PHOTOS DES CARTES SANS DÉGRADÉ INTÉGRÉ — 8.4.1
   ========================================================== */

/* Les images de héros comportant parfois un voile bleu intégré ne sont plus
   utilisées comme solution de repli sur l'index des formations. */

.jp-index-formations-page .jp-index-formation-media, .jp-index-formations-page .jp-index-formation-media img {
        background-color: #eef4f6 !important;
        background-image: none !important;
}

/* ==========================================================
   PAGE FORMATIONS — FILTRES DANS LE HERO
   ========================================================== */

.jp-index-formations-page .jp-formation-filter-nav {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 8px;
        scrollbar-width: thin;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter  */

.jp-index-formations-page .jp-formation-filter {
        flex: 0 0 auto;
        border: 1px solid rgba(255, 255, 255, .36);
        background: rgba(255, 255, 255, .1);
        font: inherit;
        cursor: pointer;
        transition: transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter:hover, .jp-index-formations-page .jp-formation-filter:f…  */

.jp-index-formations-page .jp-formation-filter:hover,
.jp-index-formations-page .jp-formation-filter:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, .2);
        border-color: rgba(255, 255, 255, .72);
        transform: translateY(-2px);
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter.is-active  */

.jp-index-formations-page .jp-formation-filter.is-active {
        box-shadow: 0 8px 22px rgba(4, 35, 55, .18);
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-formation-group[hidden]  */

.jp-index-formations-page .jp-index-formation-group[hidden] {
        display: none !important;
}

/*  RESPONSIVE — (max-width: 700px)  */

@media (max-width: 700px) {
        /*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter-nav  */
        .jp-index-formations-page .jp-formation-filter-nav {
            justify-content: flex-start;
            width: calc(100vw - 28px);
            margin-left: auto;
            margin-right: auto;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter  */
        .jp-index-formations-page .jp-formation-filter {
            min-height: 38px;
            padding: 7px 13px;
            font-size: .76rem;
    }
}

/* ==========================================================
   PAGE FORMATIONS — FILTRAGE SERVEUR GARANTI
   ========================================================== */

.jp-index-formations-page .jp-formation-filter-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter  */

.jp-index-formations-page .jp-formation-filter {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 9px 18px;
        border: 1px solid rgba(255,255,255,.38);
        border-radius: 999px;
        background: rgba(255,255,255,.10);
        color: #fff;
        font-size: .83rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        backdrop-filter: blur(8px);
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter.is-active  */

.jp-index-formations-page .jp-formation-filter.is-active {
        color: var(--jp-index-navy);
        background: #fff;
        border-color: #fff;
        box-shadow: 0 8px 22px rgba(4,35,55,.18);
}

/*  CIBLE — Formations : .jp-index-formations-page .jp-index-main-stack[data-active-formation-filter]:not([data-active-formatio…  */

.jp-index-formations-page
.jp-index-main-stack[data-active-formation-filter]:not([data-active-formation-filter="all"]) {
        gap: 0;
}

/*  RESPONSIVE — (max-width: 700px)  */

@media (max-width: 700px) {
        /*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter-nav  */
        .jp-index-formations-page .jp-formation-filter-nav {
            flex-wrap: nowrap;
            justify-content: flex-start;
            width: calc(100vw - 28px);
            margin-inline: auto;
            overflow-x: auto;
            padding: 2px 2px 8px;
    }
        /*  CIBLE — Formations : .jp-index-formations-page .jp-formation-filter  */
        .jp-index-formations-page .jp-formation-filter {
            flex: 0 0 auto;
            min-height: 38px;
            padding: 7px 13px;
            font-size: .76rem;
    }
}