/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-3-colonnes.css
 * Rôle : Mise en page en trois colonnes.
 *
 * 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-3-colonnes.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-3-colonnes.css
 * Rôle : Mise en page en trois colonnes.
 *
 * 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. */

/* =========================================================
   BLOC 3 COLONNES : profils, outils, FAQ
   ========================================================= */

/* Grille des trois colonnes centrales */

.jp-3cols {
        display: grid;
        grid-template-columns: 1fr 1.05fr 1fr;
        gap: 34px;
        margin-bottom: 0;
        padding-bottom: 0;
}

/* =========================================================
   GRILLE DYNAMIQUE DES 6 BLOCS D'INFORMATION
   Chaque bloc conserve une largeur égale à 1/3 du contenu.
   La grille utilise 6 pistes : un bloc occupe toujours 2 pistes.
   ========================================================= */

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

.jp-formation-info-grid {
        display: grid;
        grid-template-columns: repeat(6,minmax(0,1fr));
        gap: 42px 34px;
        align-items: start;
        margin-bottom: 0;
        padding-bottom: 0;
}

/*  CIBLE — Formations : .jp-formation-info-grid > div  */

.jp-formation-info-grid > div {
        grid-column: span 2;
        min-width: 0;
}

/* 5 blocs : 3 sur la première ligne, 2 centrés sur la seconde. */

.jp-info-count-5 > div:nth-child(4) {
        grid-column: 2 / span 2;
}

/*  CIBLE — Composant : .jp-info-count-5 > div:nth-child(5)  */

.jp-info-count-5 > div:nth-child(5) {
        grid-column: 4 / span 2;
}

/* 4 blocs : deux lignes de deux blocs, centrées. */

.jp-info-count-4 > div:nth-child(1), .jp-info-count-4 > div:nth-child(3) {
        grid-column: 2 / span 2;
}

/*  CIBLE — Composant : .jp-info-count-4 > div:nth-child(2), .jp-info-count-4 > div:nth-child(4)  */

.jp-info-count-4 > div:nth-child(2), .jp-info-count-4 > div:nth-child(4) {
        grid-column: 4 / span 2;
}

/* 2 blocs : une seule ligne centrée. */

.jp-info-count-2 > div:nth-child(1) {
        grid-column: 2 / span 2;
}

/*  CIBLE — Composant : .jp-info-count-2 > div:nth-child(2)  */

.jp-info-count-2 > div:nth-child(2) {
        grid-column: 4 / span 2;
}

/* 1 bloc : une seule colonne d'un tiers, centrée. */

.jp-info-count-1 > div:nth-child(1) {
        grid-column: 3 / span 2;
}

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

@media (max-width:1024px) {
        /*  CIBLE — Formations : .jp-formation-info-grid  */
        .jp-formation-info-grid {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
    }
        /*  CIBLE — Formations : .jp-formation-info-grid > div, .jp-info-count-5 > div:nth-child(4), .jp-info-count-5 > div:nth-child(5…  */
        .jp-formation-info-grid > div, .jp-info-count-5 > div:nth-child(4), .jp-info-count-5 > div:nth-child(5), .jp-info-count-4 > div:nth-child(1), .jp-info-count-4 > div:nth-child(2), .jp-info-count-4 > div:nth-child(3), .jp-info-count-4 > div:nth-child(4), .jp-info-count-2 > div:nth-child(1), .jp-info-count-2 > div:nth-child(2), .jp-info-count-1 > div:nth-child(1) {
            grid-column: auto;
    }
        /*  CIBLE — Composant : .jp-info-count-1 > div:last-child, .jp-info-count-3 > div:last-child, .jp-info-count-5 > div:last-child  */
        .jp-info-count-1 > div:last-child, .jp-info-count-3 > div:last-child, .jp-info-count-5 > div:last-child {
            grid-column: 1 / -1;
            width: calc(50% - 16px);
            justify-self: center;
    }
}

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

@media (max-width:700px) {
        /*  CIBLE — Formations : .jp-formation-info-grid  */
        .jp-formation-info-grid {
            grid-template-columns: 1fr !important;
            gap: 28px !important;
            width: 100% !important;
    }
        /*  CIBLE — Formations : .jp-formation-info-grid > div, .jp-info-count-1 > div:last-child, .jp-info-count-3 > div:last-child, .…  */
        .jp-formation-info-grid > div, .jp-info-count-1 > div:last-child, .jp-info-count-3 > div:last-child, .jp-info-count-5 > div:last-child {
            grid-column: auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
    }
}

/* =========================================================
   MARGES LATÉRALES — GRILLE DES BLOCS D'INFORMATION
   ========================================================= */

/* * Lorsque trois blocs sont affichés côte à côte, la grille ne doit plus
 * toucher les bords de la fenêtre. La largeur maximale reste généreuse,
 * mais une marge visuelle régulière est conservée. */

.jp-formation-info-section .jp-formation-info-grid {
        width: min(calc(100% - 120px), 1680px);
        max-width: 1680px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
}

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

@media (max-width: 1200px) {
        /*  CIBLE — Formations : .jp-formation-info-section .jp-formation-info-grid  */
        .jp-formation-info-section .jp-formation-info-grid {
            width: calc(100% - 64px);
    }
}

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

@media (max-width: 700px) {
        /*  CIBLE — Formations : .jp-formation-info-section .jp-formation-info-grid  */
        .jp-formation-info-section .jp-formation-info-grid {
            width: 100% !important;
            max-width: 100% !important;
    }
}