/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-responsive-tablette.css
 * Rôle : Adaptations transversales pour tablette.
 *
 * 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-responsive-tablette.css
 * Rôle : Correctifs responsives destinés aux tablettes.
 *
 * 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-responsive-tablette.css
 * Rôle : Adaptations pour tablettes.
 *
 * 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. */

/* =========================================================
   RESPONSIVE INTERMÉDIAIRE : tablettes et petits écrans
   ========================================================= */

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

@media (max-width:1600px) {
        /*  CIBLE — Atouts : .jp-atouts  */
        .jp-atouts {
            grid-template-columns: repeat(var(--jp-atouts-cols, 4), minmax(0,330px));
            gap: 32px;
    }
}

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

@media (max-width:1200px) {
        /*  CIBLE — Atouts : .jp-atouts  */
        .jp-atouts {
            grid-template-columns: repeat(var(--jp-atouts-cols-tablet, 2), minmax(300px,360px));
            gap: 28px;
    }
        /*  CIBLE — Cartes : .jp-video-card  */
        .jp-video-card {
            flex-basis: calc((100% - 28px) / 2);
    }
}

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

@media (max-width:1024px) {
        /*  CIBLE — Composant : .jp-bottom-grid, .jp-steps, .jp-3cols  */
        .jp-bottom-grid, .jp-steps, .jp-3cols {
            grid-template-columns: 1fr;
    }
        /*  CIBLE — Bandeau Hero : .jp-hero  */
        .jp-hero {
            min-height: auto;
            padding-top: 70px;
    }
        /*  CIBLE — Bandeau Hero : .jp-hero-side  */
        .jp-hero-side {
            position: static;
            width: auto;
            margin-top: 32px;
    }
        /*  CIBLE — Composant : .jp-steps:before  */
        .jp-steps:before {
            display: none;
    }
}

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

@media (max-width:768px) {
        /*  CIBLE — Atouts : .jp-atouts  */
        .jp-atouts {
            grid-template-columns: 1fr;
            gap: 24px;
    }
}

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

@media (max-width:700px) {
        /*  CIBLE — Cartes : .jp-video-card  */
        .jp-video-card {
            flex-basis: 100%;
    }
}