/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-composition.css
 * Rôle : Composition des sections.
 *
 * 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-composition.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-composition.css
 * Rôle : Module Contenu / composition de la formation.
 *
 * 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. */

.jp-composition-section {
        --jp-comp-accent: var(--jp-main,#0a5f9e);
        --jp-comp-soft: color-mix(in srgb,var(--jp-comp-accent) 9%,#fff);
}

/*  CIBLE — Composant : .jp-composition-intro,.jp-composition-level-intro  */

.jp-composition-intro,.jp-composition-level-intro {
        max-width: 960px;
        margin: 0 auto 28px;
        color: var(--jp-text,#26364d);
        font-size: 1.05rem;
        line-height: 1.75;
        text-align: center;
}

/*  CIBLE — Composant : .jp-composition-tabs  */

.jp-composition-tabs {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 26px 0 32px;
}

/*  CIBLE — Composant : .jp-composition-tab  */

.jp-composition-tab {
        appearance: none;
        border: 1px solid color-mix(in srgb,var(--jp-main) 28%,#dbe3ed);
        background: #fff;
        color: var(--jp-dark);
        padding: 12px 24px;
        border-radius: 999px;
        font: 700 .95rem/1.2 Poppins,sans-serif;
        cursor: pointer;
        transition: .2s ease;
}

/*  CIBLE — État interactif : .jp-composition-tab:hover,.jp-composition-tab:focus-visible  */

.jp-composition-tab:hover,.jp-composition-tab:focus-visible {
        transform: translateY(-1px);
        border-color: var(--jp-main);
        outline: none;
}

/*  CIBLE — État interactif : .jp-composition-tab.is-active  */

.jp-composition-tab.is-active {
        background: var(--jp-main);
        border-color: var(--jp-main);
        color: #fff;
        box-shadow: 0 8px 22px color-mix(in srgb,var(--jp-main) 26%,transparent);
}

/*  CIBLE — Composant : .jp-composition-panel  */

.jp-composition-panel {
        display: none;
}

/*  CIBLE — État interactif : .jp-composition-panel.is-active  */

.jp-composition-panel.is-active {
        display: block;
}

/*  CIBLE — Composant : .jp-composition-level-title  */

.jp-composition-level-title {
        text-align: center;
        margin: 0 0 14px;
        font: 700 clamp(1.25rem,2vw,1.65rem)/1.25 Poppins,sans-serif;
        color: var(--jp-dark);
}

/*  CIBLE — Composant : .jp-composition-notice  */

.jp-composition-notice {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        max-width: 1100px;
        margin: 0 auto 28px;
        padding: 18px 22px;
        border-left: 4px solid var(--jp-main);
        border-radius: 12px;
        background: color-mix(in srgb,var(--jp-main) 8%,#fff);
        color: var(--jp-text);
        box-shadow: 0 5px 18px rgba(16,35,63,.06);
}

/*  CIBLE — Composant : .jp-composition-notice-mark  */

.jp-composition-notice-mark {
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--jp-main);
        color: #fff;
        font-weight: 800;
}

/*  CIBLE — Composant : .jp-composition-notice p:first-child  */

.jp-composition-notice p:first-child {
        margin-top: 0;
}

/*  CIBLE — Composant : .jp-composition-notice p:last-child  */

.jp-composition-notice p:last-child {
        margin-bottom: 0;
}

/*  CIBLE — Composant : .jp-composition-grid  */

.jp-composition-grid {
        display: grid;
        gap: 22px;
        align-items: start;
        grid-template-columns: repeat(4,minmax(0,1fr));
}

/*  CIBLE — Composant : .jp-composition-grid--count-1  */

.jp-composition-grid--count-1 {
        grid-template-columns: 1fr;
}

/*  CIBLE — Composant : .jp-composition-grid--count-2  */

.jp-composition-grid--count-2 {
        grid-template-columns: repeat(2,minmax(0,1fr));
}

/*  CIBLE — Composant : .jp-composition-grid--count-3  */

.jp-composition-grid--count-3 {
        grid-template-columns: repeat(3,minmax(0,1fr));
}

/*  CIBLE — Composant : .jp-composition-grid--large  */

.jp-composition-grid--large {
        grid-template-columns: repeat(3,minmax(0,1fr));
}

/*  CIBLE — Composant : .jp-composition-grid--large.jp-composition-grid--count-1  */

.jp-composition-grid--large.jp-composition-grid--count-1 {
        grid-template-columns: 1fr;
}

/*  CIBLE — Composant : .jp-composition-grid--large.jp-composition-grid--count-2  */

.jp-composition-grid--large.jp-composition-grid--count-2 {
        grid-template-columns: repeat(2,minmax(0,1fr));
}

/*  CIBLE — Composant : .jp-composition-grid--compact  */

.jp-composition-grid--compact {
        gap: 16px;
}

/*  CIBLE — Composant : .jp-composition-column  */

.jp-composition-column {
        position: relative;
        overflow: hidden;
        border: 1px solid #dfe6ee;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(16,35,63,.08);
}

/*  CIBLE — Composant : .jp-composition-column::before  */

.jp-composition-column::before {
        content: "";
        display: block;
        height: 5px;
        background: var(--jp-column-accent,var(--jp-main));
}

/*  CIBLE — Composant : .jp-composition-column--secondaire  */

.jp-composition-column--secondaire {
        --jp-column-accent: var(--jp-sec1,var(--jp-main));
}

/*  CIBLE — Composant : .jp-composition-column--neutre  */

.jp-composition-column--neutre {
        --jp-column-accent: #718096;
        background: #f8fafc;
}

/*  CIBLE — Composant : .jp-composition-column--accent  */

.jp-composition-column--accent {
        --jp-column-accent: var(--jp-sec2,var(--jp-main));
        background: color-mix(in srgb,var(--jp-column-accent) 6%,#fff);
}

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

.jp-composition-column-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 20px 10px;
}

/*  CIBLE — En-tête : .jp-composition-column-header h4  */

.jp-composition-column-header h4 {
        margin: 0;
        color: var(--jp-dark);
        font: 750 1.08rem/1.3 Poppins,sans-serif;
}

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

.jp-composition-column-icon,.jp-composition-card-icon {
        display: block;
        flex: 0 0 auto;
        background: var(--jp-column-accent,var(--jp-main));
        -webkit-mask: var(--jp-icon) center/contain no-repeat;
        mask: var(--jp-icon) center/contain no-repeat;
}

/*  CIBLE — Icônes : .jp-composition-column-icon  */

.jp-composition-column-icon {
        width: 28px;
        height: 28px;
}

/*  CIBLE — Cartes : .jp-composition-card-icon  */

.jp-composition-card-icon {
        width: 22px;
        height: 22px;
        margin-top: 2px;
}

/*  CIBLE — Composant : .jp-composition-column-intro  */

.jp-composition-column-intro {
        padding: 0 20px 15px;
        color: #5a687a;
        font-size: .94rem;
        line-height: 1.6;
}

/*  CIBLE — Composant : .jp-composition-column-intro p:first-child  */

.jp-composition-column-intro p:first-child {
        margin-top: 0;
}

/*  CIBLE — Composant : .jp-composition-column-intro p:last-child  */

.jp-composition-column-intro p:last-child {
        margin-bottom: 0;
}

/*  CIBLE — Cartes : .jp-composition-cards  */

.jp-composition-cards {
        display: grid;
        gap: 12px;
        padding: 0 14px 14px;
}

/*  CIBLE — Cartes : .jp-composition-card  */

.jp-composition-card {
        display: flex;
        gap: 11px;
        padding: 15px;
        border: 1px solid #e3e9f0;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(16,35,63,.045);
}

/*  CIBLE — Cartes : .jp-composition-card-content  */

.jp-composition-card-content {
        min-width: 0;
}

/*  CIBLE — Cartes : .jp-composition-card h5  */

.jp-composition-card h5 {
        margin: 0 0 7px;
        color: var(--jp-dark);
        font: 700 .98rem/1.35 Poppins,sans-serif;
}

/*  CIBLE — Cartes : .jp-composition-card-description  */

.jp-composition-card-description {
        color: #526176;
        font-size: .9rem;
        line-height: 1.55;
}

/*  CIBLE — Cartes : .jp-composition-card-description p  */

.jp-composition-card-description p {
        margin: .35em 0;
}

/*  CIBLE — Cartes : .jp-composition-card-description p:first-child  */

.jp-composition-card-description p:first-child {
        margin-top: 0;
}

/*  CIBLE — Cartes : .jp-composition-card-description p:last-child  */

.jp-composition-card-description p:last-child {
        margin-bottom: 0;
}

/*  CIBLE — Cartes : .jp-composition-card-info  */

.jp-composition-card-info {
        display: inline-flex;
        margin-top: 10px;
        padding: 5px 9px;
        border-radius: 999px;
        background: color-mix(in srgb,var(--jp-column-accent,var(--jp-main)) 11%,#fff);
        color: var(--jp-column-accent,var(--jp-main));
        font: 700 .76rem/1.2 Poppins,sans-serif;
}

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

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

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

@media (max-width:680px) {
        /*  CIBLE — Composant : .jp-composition-grid,.jp-composition-grid--large  */
        .jp-composition-grid,.jp-composition-grid--large {
            grid-template-columns: 1fr;
    }
        /*  CIBLE — Composant : .jp-composition-tabs  */
        .jp-composition-tabs {
            position: sticky;
            top: 8px;
            z-index: 3;
            padding: 6px;
            border-radius: 999px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 6px 20px rgba(16,35,63,.1);
    }
        /*  CIBLE — Composant : .jp-composition-tab  */
        .jp-composition-tab {
            flex: 1;
            padding: 11px 14px;
    }
        /*  CIBLE — Composant : .jp-composition-notice  */
        .jp-composition-notice {
            padding: 16px;
    }
        /*  CIBLE — En-tête : .jp-composition-column-header  */
        .jp-composition-column-header {
            padding: 18px 16px 9px;
    }
        /*  CIBLE — Composant : .jp-composition-column-intro  */
        .jp-composition-column-intro {
            padding: 0 16px 13px;
    }
        /*  CIBLE — Cartes : .jp-composition-cards  */
        .jp-composition-cards {
            padding: 0 10px 10px;
    }
}

/* ==========================================================
   COMPOSITION — ICÔNES ET TITRES CENTRÉS
   ========================================================== */

.jp-composition-column-header {
        justify-content: center;
        text-align: center;
}

/*  CIBLE — En-tête : .jp-composition-column-header .jp-composition-column-icon  */

.jp-composition-column-header .jp-composition-column-icon {
        margin-left: auto;
        margin-right: auto;
}

/*  CIBLE — En-tête : .jp-composition-column-header h4  */

.jp-composition-column-header h4 {
        width: 100%;
        text-align: center;
}

/*  CIBLE — Cartes : .jp-composition-card  */

.jp-composition-card {
        text-align: left;
}

/*  CIBLE — Cartes : .jp-composition-card .jp-composition-card-icon  */

.jp-composition-card .jp-composition-card-icon {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

/*  CIBLE — Cartes : .jp-composition-card-content h5  */

.jp-composition-card-content h5 {
        width: 100%;
        text-align: center;
}